/* ============================================================
   汇正创作助手 · 前台共享样式（补贴 / 朋友圈两页共用，唯一真源）
   来源：v1.3.6 的 web/index.html 内联样式原样抽出，未改一个字符；
   任何视觉调整只改本文件，两页自动保持一致。
   ============================================================ */
/* ============================================================
   汇正创作助手 · 与线上版 1:1 的视觉体系
   白底 + 品牌红 #FF2442 + 圆角卡片 + 话题标签式字段 · 左侧栏导航
   ============================================================ */
:root{
  --red:#FF2442; --red-h:#E62238; --red-bg:#FFF0F2; --red-bd:#FFD9DE; --red-d:#D6203C;
  --bg:#F4F4F6; --card:#FFFFFF; --line:#EEEEF0; --line2:#F5F5F6;
  --tx:#26262B; --tx2:#6B6B74; --tx3:#A5A5AE;
  --ok:#0FA968; --ok-bg:#EAF8F0;
  --warn:#D98A26; --warn-bg:#FFF6E8;
  --err:#FF2442; --err-bg:#FFF0F2;
  --r:16px; --r-sm:12px;
  --font:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --sh:0 1px 2px rgba(38,38,43,.04);
  --sh-h:0 8px 24px rgba(38,38,43,.09);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{background:var(--bg);color:var(--tx);font-family:var(--font);font-size:14px;line-height:1.65;
  -webkit-font-smoothing:antialiased}
button{font-family:inherit;cursor:pointer}
textarea,input,select{font-family:inherit}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:#DCDCE0;border-radius:4px}
::-webkit-scrollbar-track{background:transparent}

/* ================= 登录（按需弹出的浮层，不阻塞浏览） ================= */
#loginView{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;padding:24px;
  background:rgba(24,24,30,.46);backdrop-filter:blur(3px);overflow:auto}
#loginView.on{display:flex}
.lg-close{position:absolute;top:18px;right:22px;width:34px;height:34px;border:0;border-radius:50%;
  background:rgba(255,255,255,.9);color:#5B5B64;font-size:18px;line-height:1;display:flex;
  align-items:center;justify-content:center}
.lg-close:hover{background:#fff;color:var(--tx)}
.lg-card{width:100%;max-width:392px;background:var(--card);border:1px solid var(--line);
  border-radius:18px;box-shadow:var(--sh-h);padding:34px 32px 30px}
.lg-card h1{margin:0 0 6px;font-size:19px;font-weight:800;letter-spacing:.2px}
.lg-card p.sub{margin:0 0 22px;font-size:12.5px;color:var(--tx2);line-height:1.7}
.lgf{margin-bottom:14px}
.lgf label{display:block;font-size:12.5px;font-weight:700;margin-bottom:7px}
.lgf input{width:100%;height:44px;border:1px solid var(--line);background:#FAFAFB;border-radius:var(--r-sm);
  padding:0 13px;font-size:14px;color:var(--tx);outline:none;transition:all .14s ease}
.lgf input:focus{border-color:var(--red);background:#fff;box-shadow:0 0 0 3px var(--red-bg)}
.lg-err{min-height:18px;font-size:12.5px;color:var(--err);line-height:1.6;margin:2px 0 6px}
.lg-btn{width:100%;height:46px;border:0;border-radius:var(--r-sm);background:var(--red);color:#fff;
  font-size:15px;font-weight:700;letter-spacing:1px;transition:background .14s ease,box-shadow .14s ease}
.lg-btn:hover{background:var(--red-h);box-shadow:0 6px 16px rgba(255,36,66,.24)}
.lg-btn:disabled{background:#FFC9D2;cursor:not-allowed;box-shadow:none}
.lg-foot{margin-top:16px;font-size:11.5px;color:var(--tx3);line-height:1.8;text-align:center}
.lg-foot a{color:var(--tx2)}

/* ================= 整体骨架 ================= */
.app{display:flex;min-height:100vh}
.side{width:224px;flex:none;background:var(--card);border-right:1px solid var(--line);
  padding:22px 14px 18px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.logo{display:flex;align-items:center;gap:10px;padding:0 8px 20px}
.lg{flex:none;width:40px;height:40px;border-radius:11px;background:var(--red);color:#fff;
  font-size:20px;font-weight:800;display:flex;align-items:center;justify-content:center}
.lg-t b{display:block;font-size:15.5px;font-weight:700;line-height:1.35}
.lg-t i{display:block;font-style:normal;font-size:11px;color:var(--tx3);line-height:1.4}
/* 顶部品牌展示：后台选「Logo 图片」时用；高度固定，宽度自适应不变形 */
.lg-logo{display:block;height:36px;max-width:170px;object-fit:contain;border-radius:8px}
.sn{display:flex;flex-direction:column;gap:4px}
.nv{position:relative;display:flex;align-items:center;gap:10px;width:100%;padding:11px 13px;
  border:0;background:transparent;border-radius:12px;font-size:14.5px;font-weight:500;color:var(--tx);
  text-align:left;transition:background .12s ease}
.nv:hover{background:#F6F6F7}
.nv.on{background:var(--red-bg);color:var(--red);font-weight:700}
.nv svg{flex:none;width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.nv .bdg{position:absolute;top:8px;right:12px;min-width:16px;height:16px;border-radius:8px;background:var(--red);
  color:#fff;font-size:10px;line-height:16px;text-align:center;padding:0 4px;font-style:normal}
.s-stat{margin-top:22px;background:#F9F9FA;border-radius:12px;padding:14px 16px}
.s-stat b{display:block;font-size:24px;font-weight:700;color:var(--red);font-family:var(--mono);line-height:1.2}
.s-stat span{display:block;font-size:11.5px;color:var(--tx2);margin-top:2px}
.s-stat .s-quota{margin-top:8px;padding-top:8px;border-top:1px solid #EFEFF1;font-size:11.5px;color:var(--tx3)}
.s-stat .s-quota i{font-style:normal;font-family:var(--mono);color:var(--tx2)}
/* 左下角账号入口：点击头像/姓名直接进入个人中心（不再弹卡片） */
.acct{margin-top:auto;padding-top:10px;border-top:1px solid var(--line2)}
.acct-btn{display:flex;align-items:center;gap:9px;width:100%;padding:8px;border:1px solid transparent;
  border-radius:12px;background:transparent;text-align:left;transition:background .14s ease,border-color .14s ease}
.acct-btn:hover{background:#F6F6F7;border-color:var(--line)}
.acct-btn[aria-current="page"]{background:var(--red-bg);border-color:var(--red-bd)}
.acct-btn .av{flex:none;width:32px;height:32px;border-radius:999px;background:var(--red-bg);color:var(--red);
  font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.acct-btn .su-t{flex:1 1 auto;min-width:0}
.acct-btn .su-t b{display:block;font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;line-height:1.4}
.acct-btn .su-t i{display:block;font-style:normal;font-size:10.5px;color:var(--tx3);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;line-height:1.4}
.acct-btn .ac-chev{flex:none;width:14px;height:14px;stroke:var(--tx3);fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;transform:rotate(90deg);transition:stroke .14s ease}
.acct-btn:hover .ac-chev{stroke:var(--red)}

/* 个人中心 v1.1.5：账号概览 + 本人数据 + 账号信息 / 修改密码 */
.me-hero{position:relative;display:flex;align-items:center;gap:18px;flex-wrap:wrap;overflow:hidden;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);
  padding:22px 24px;margin-bottom:16px}
.me-hero::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;
  background:linear-gradient(180deg,var(--red),#FF8296)}
.me-av{flex:none;width:62px;height:62px;border-radius:20px;background:var(--red-bg);color:var(--red);
  font-size:26px;font-weight:800;display:flex;align-items:center;justify-content:center}
.me-id{flex:1 1 220px;min-width:0}
.me-id h2{margin:0;font-size:20px;font-weight:800;line-height:1.35;word-break:break-all}
.me-id .me-sub{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px;font-size:12px;color:var(--tx2)}
.me-id .me-sub em{font-style:normal;font-family:var(--mono);color:var(--tx)}
.me-tag{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;
  background:var(--red-bg);color:var(--red-d);font-size:11px;font-weight:600}
.me-acts{display:flex;gap:8px;flex-wrap:wrap}
.me-acts button{height:38px;padding:0 15px;border-radius:10px;border:1px solid var(--line);background:#fff;
  font-size:12.5px;color:var(--tx);display:inline-flex;align-items:center;gap:6px;
  transition:background .14s ease,border-color .14s ease,color .14s ease}
.me-acts button:hover{border-color:var(--red-bd);color:var(--red);background:var(--red-bg)}
.me-acts button.pri{background:var(--red);border-color:var(--red);color:#fff;font-weight:600}
.me-acts button.pri:hover{background:var(--red-h);border-color:var(--red-h);color:#fff}
.me-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(152px,1fr));gap:12px;margin-bottom:16px}
.me-kpi{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh);padding:15px 17px}
.me-kpi b{display:block;font-family:var(--mono);font-size:22px;font-weight:800;line-height:1.25}
.me-kpi span{display:block;font-size:11.5px;color:var(--tx3);margin-top:3px}
.me-kpi i{display:block;font-style:normal;font-size:10.5px;color:var(--tx3);margin-top:6px}
.me-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
@media(max-width:900px){.me-cols{grid-template-columns:1fr}}
.me-info .row{display:flex;align-items:center;gap:12px;padding:11px 0;
  border-bottom:1px solid var(--line2);font-size:13px}
.me-info .row:last-child{border-bottom:0}
.me-info .row span{flex:none;width:84px;color:var(--tx3);font-size:12px}
.me-info .row b{flex:1 1 auto;min-width:0;font-weight:600;word-break:break-all}
.me-info .row b.mono{font-family:var(--mono)}
.me-tip{display:flex;gap:8px;background:#FAFAFB;border:1px solid var(--line2);border-radius:12px;
  padding:11px 13px;font-size:11.5px;color:var(--tx2);line-height:1.7;margin-top:14px}
.me-tip svg{flex:none;width:14px;height:14px;margin-top:2px;stroke:var(--tx3);fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.me-logout{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px;
  background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.me-logout p{margin:0;flex:1 1 200px;font-size:12px;color:var(--tx3);line-height:1.7}
.me-logout button{height:38px;padding:0 16px;border-radius:10px;border:1px solid var(--red-bd);
  background:var(--red-bg);color:var(--red-d);font-size:12.5px;font-weight:600;transition:.14s}
.me-logout button:hover{background:var(--red);border-color:var(--red);color:#fff}

.wrap{flex:1 1 auto;min-width:0;padding:30px 40px 64px;max-width:1440px;margin:0 auto;width:100%}
.view{display:none}
.view.on{display:block}
.copyright{margin:14px auto 0;text-align:center;font-size:11.5px;line-height:1.7;
  color:var(--tx2);letter-spacing:.2px}

/* ================= 创作台 ================= */
.page-head{margin-bottom:18px}
.page-head h1{margin:0;font-size:23px;font-weight:800;letter-spacing:.3px}
.page-head p{margin:7px 0 0;font-size:12.5px;color:var(--tx2);line-height:1.7;max-width:860px}
.page-head p b{color:var(--red);font-weight:600}
.workspace{display:grid;grid-template-columns:372px minmax(0,1fr);gap:18px;align-items:start}

.inputs{position:sticky;top:22px;height:calc(100vh - 178px);background:var(--card);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);
  display:flex;flex-direction:column;overflow:hidden}
.ip-form{display:flex;flex-direction:column;gap:18px}
.ip-body{flex:1 1 auto;min-height:0;overflow-y:auto;scrollbar-width:none;padding:18px 18px 20px}
.ip-body::-webkit-scrollbar{display:none}
.ip-foot{flex:none;position:sticky;bottom:0;z-index:1;background:var(--card);
  border-top:1px solid var(--line2);padding:14px 18px 15px}

.outputs{min-width:0;display:flex;flex-direction:column;position:sticky;top:22px;
  height:calc(100vh - 178px)}
.op-top{flex:none;position:relative;z-index:2;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);padding:18px}
.op-head{flex:none;display:flex;align-items:center;gap:10px;margin-bottom:12px;min-height:28px}
.op-head h2{margin:0;font-size:17px;font-weight:800;letter-spacing:.2px}
#opState{margin-left:auto;display:inline-flex;align-items:center;font-size:12px;color:var(--tx3);
  background:var(--card);border:1px solid var(--line);border-radius:999px;padding:4px 12px;
  line-height:1.5;white-space:nowrap;transition:color .16s ease}
#opState::before{content:"";width:6px;height:6px;border-radius:999px;background:#D6D6DC;
  margin-right:6px;flex:none}
#opState.run{color:var(--red);border-color:var(--red-bd);background:var(--red-bg)}
#opState.run::before{background:var(--red);animation:pl 1.4s ease-in-out infinite}
#opState.done{color:var(--ok);border-color:#D6F0E2;background:var(--ok-bg)}
#opState.done::before{background:var(--ok)}
.fg{min-width:0}
.fg>label{display:flex;align-items:baseline;gap:7px;font-size:13.5px;font-weight:700;margin-bottom:8px}
.fg>label em{font-style:normal;font-weight:400;font-size:11.5px;color:var(--tx3)}
/* 参考钩子：从「精选钩子」挑一句开场（后台精选 → 前台可直接用） */
.ref-pick{margin-left:auto;flex:none;align-self:center;display:inline-flex;align-items:center;gap:5px;
  height:24px;padding:0 9px;border:1px solid var(--red-bd);background:var(--red-bg);color:var(--red);
  border-radius:8px;font-size:11.5px;font-weight:600;font-style:normal;transition:all .14s ease}
.ref-pick:hover{background:var(--red);color:#fff;border-color:var(--red)}
.ref-pick .n{font-family:var(--mono);font-size:10.5px;opacity:.85}
.ref-pick .n:empty{display:none}
/* 精选钩子弹层 */
.ft-tabs{display:flex;flex-wrap:wrap;gap:6px;padding:12px 0 10px;position:sticky;top:0;background:#fff;z-index:2;
  border-bottom:1px solid var(--line2);margin-bottom:12px}
.ft-tab{height:28px;padding:0 12px;border:1px solid var(--line);background:#fff;border-radius:999px;
  font-size:12px;color:var(--tx2);transition:all .12s ease}
.ft-tab.on{border-color:var(--red-bd);background:var(--red-bg);color:var(--red);font-weight:600}
.ft-card{border:1px solid var(--line2);border-radius:12px;padding:12px 14px;margin-bottom:10px;transition:border-color .14s ease}
.ft-card:hover{border-color:var(--red-bd)}
.ft-top{display:flex;align-items:center;gap:6px;margin-bottom:6px;flex-wrap:wrap}
.ft-tag{font-size:10.5px;padding:1px 7px;border-radius:999px;background:#F4F4F5;color:var(--tx2)}
.ft-tag.hot{background:var(--red-bg);color:var(--red)}
.ft-h{font-size:13.5px;font-weight:700;line-height:1.55;margin-bottom:4px}
.ft-b{font-size:12.5px;color:var(--tx2);line-height:1.65;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
.ft-act{display:flex;gap:8px;margin-top:9px}
.ft-use{height:28px;padding:0 13px;border-radius:8px;background:var(--red);color:#fff;font-size:12px;font-weight:600}
.ft-use:hover{background:var(--red-h)}
.ft-copy{height:28px;padding:0 13px;border-radius:8px;border:1px solid var(--line);font-size:12px;color:var(--tx2)}
.ft-copy:hover{border-color:var(--red-bd);color:var(--red)}
.ft-empty{padding:44px 10px;text-align:center;color:var(--tx3);font-size:13px;line-height:1.9}
.dd-btn{width:100%;display:flex;align-items:center;gap:8px;border:1px solid var(--line);
  background:#FAFAFB;border-radius:var(--r-sm);padding:12px 14px;text-align:left;transition:all .14s ease}
.dd-btn:hover{border-color:var(--red-bd);background:#fff}
.dd-btn .ic{flex:none;width:17px;height:17px;stroke:var(--tx3);fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.dd-btn:hover .ic{stroke:var(--red)}
.dd-btn .dd-label{flex:1 1 auto;min-width:0;font-size:14px;color:var(--tx);font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dd-btn .dd-label.ph{color:var(--tx3);font-weight:400}
.dd-btn .chev{flex:none;width:14px;height:14px;stroke:#B9B9C0;fill:none;stroke-width:2.2}
.stepper{display:flex;align-items:center;border:1px solid var(--line);background:#FAFAFB;
  border-radius:var(--r-sm);overflow:hidden;width:172px}
.stepper button{width:44px;height:44px;border:0;background:transparent;font-size:19px;color:var(--tx);
  display:flex;align-items:center;justify-content:center;transition:background .12s ease}
.stepper button:hover{background:#F1F1F3}
.stepper button:disabled{color:#D6D6DC;background:transparent;cursor:not-allowed}
.stepper input{flex:1;width:60px;border:0;outline:none;background:transparent;text-align:center;
  font-size:16px;font-weight:700;color:var(--tx);font-family:var(--mono)}
.stepper .unit{padding-right:12px;font-size:12px;color:var(--tx3)}
.ta{display:block}
.ta textarea{width:100%;border:1px solid var(--line);background:#FAFAFB;border-radius:var(--r-sm);
  outline:none;resize:vertical;padding:12px 14px;font-size:13.5px;line-height:1.7;color:var(--tx);
  min-height:74px;max-height:220px;transition:all .14s ease}
.ta textarea::placeholder{color:#C4C4CB}
.ta textarea:focus{border-color:var(--red);background:#fff;box-shadow:0 0 0 3px var(--red-bg)}
.quick{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.qchip{border:0;background:var(--red-bg);color:var(--red);font-size:12px;border-radius:999px;
  padding:5px 12px;line-height:1.5;transition:all .12s ease}
.qchip:hover{background:var(--red-bd)}
.selbox{position:relative}
.sel{appearance:none;-webkit-appearance:none;width:100%;border:1px solid var(--line);background:#FAFAFB;
  border-radius:var(--r-sm);padding:11px 38px 11px 14px;font-size:13.5px;color:var(--tx);
  outline:none;cursor:pointer;transition:all .14s ease}
.sel:hover{border-color:var(--red-bd)}
.sel:focus{border-color:var(--red);background:#fff;box-shadow:0 0 0 3px var(--red-bg)}
.selbox .chev{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:14px;height:14px;
  stroke:#B9B9C0;fill:none;stroke-width:2.2;pointer-events:none}
.btn-pri{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:50px;border:0;
  border-radius:var(--r-sm);background:var(--red);color:#fff;font-size:16px;font-weight:700;letter-spacing:2px;
  transition:background .14s ease,box-shadow .14s ease}
.btn-pri:hover{background:var(--red-h);box-shadow:0 6px 16px rgba(255,36,66,.24)}
.btn-pri:active{transform:translateY(1px)}
.btn-pri:disabled{background:#FFC9D2;color:#fff;cursor:not-allowed;box-shadow:none}
.form-status{margin-top:10px;text-align:center;font-size:12.5px;color:var(--tx2);min-height:18px;line-height:1.6}
.form-status.err{color:var(--err)}

/* ================= 结果区 ================= */
.res-status{flex:none;display:flex;flex-direction:column;gap:12px}
.rs-top{display:flex;align-items:center;gap:10px}
.gate{display:inline-flex;align-items:center;height:24px;padding:0 11px;border-radius:999px;font-size:12px;
  font-weight:600;line-height:1.4;flex:none;background:#F1F1F3;color:var(--tx2)}
.gate.ok{background:var(--ok-bg);color:var(--ok)}
.gate.demo{background:var(--red-bg);color:var(--red-d);border:1px solid #FFE7EA}
.gate.warn{background:var(--warn-bg);color:var(--warn)}
.gate.err{background:var(--err-bg);color:var(--err)}
.rs-top .cnt{font-size:13px;color:var(--tx2)}
.rs-top .tm{margin-left:auto;font-size:11.5px;color:var(--tx3);font-family:var(--mono);white-space:nowrap;font-variant-numeric:tabular-nums}
.bar{height:4px;border-radius:2px;background:#F1F1F3;overflow:hidden}
.bar>i{display:block;height:100%;width:0;background:var(--red);border-radius:2px;transition:width .3s ease}
.rs-sub{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--tx2)}
.rs-sub .spin{width:13px;height:13px;border-radius:999px;border:2px solid var(--red-bd);border-top-color:var(--red);
  animation:sp .8s linear infinite;flex:none}
@keyframes sp{to{transform:rotate(360deg)}}
.rs-meta{font-size:11.5px;color:var(--tx3);line-height:1.6}
.rs-meta.err{color:var(--err)}
.rs-acts{display:flex;gap:10px;flex-wrap:wrap}
.rs-acts .btn-sm{height:36px;border-radius:999px;border:1px solid var(--line);background:#fff;
  font-size:13px;color:var(--tx);display:flex;align-items:center;justify-content:center;gap:6px;
  white-space:nowrap;padding:0 18px;transition:all .14s ease}
.rs-acts .btn-sm:hover{border-color:#DDDDDF}
.rs-acts .btn-sm:disabled{color:#C9C9CF;border-color:var(--line2);cursor:not-allowed}
.rs-acts .btn-sm.acc{border-color:var(--red-bd);color:var(--red);font-weight:600}
.rs-acts .btn-sm.acc:hover{background:var(--red-bg);border-color:var(--red)}
.rs-acts .btn-sm.dang{border-color:var(--red-bd);color:var(--red);font-weight:600}
.rs-acts .btn-sm.dang:hover{background:var(--err-bg)}
.rs-acts .btn-sm svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}

/* 内容卡 = 外壳 + 滚动视口（两层），上下内距在滚动时恒定 */
.op-scroll{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;position:relative;
  overflow:hidden;margin:18px 0 0;padding:18px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)}
.op-view{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  scrollbar-gutter:stable;scroll-behavior:auto}
/* 生成中用户往回翻时，出现「回到最新」；点它恢复自动跟随 */
.jump-latest{position:absolute;right:28px;bottom:24px;z-index:6;height:32px;padding:0 14px;
  border-radius:999px;border:1px solid var(--red-bd);background:#fff;color:var(--red);
  font-size:12px;font-weight:600;line-height:1;display:inline-flex;align-items:center;gap:5px;
  box-shadow:0 8px 22px rgba(24,24,30,.14);animation:acIn .18s ease both}
.jump-latest:hover{background:var(--red-bg)}
@keyframes acIn{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
.jump-latest svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
body.lock-scroll{overflow:hidden}
body.lock-scroll .wrap{padding-bottom:10px}

/* 卡片瀑布流：JS 分栏，每行固定 2 列 */
.items{display:flex;gap:14px;margin-top:0;align-items:flex-start}
.it-col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:14px}
.it{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;
  box-shadow:var(--sh);transition:box-shadow .16s ease,border-color .16s ease}
.it:hover{box-shadow:var(--sh-h);border-color:var(--red-bd)}
.it-h{display:flex;align-items:flex-start;gap:10px;cursor:pointer}
.it-no{flex:none;font-family:var(--mono);font-size:12px;font-weight:700;color:var(--red);background:var(--red-bg);
  border-radius:7px;padding:2px 8px;margin-top:1px}
.it-tt{flex:1 1 auto;min-width:0;font-size:15px;font-weight:700;line-height:1.5;word-break:break-word}
.it-tt em{font-style:normal;color:var(--red)}
.it-len{flex:none;font-size:11px;color:var(--tx3);font-family:var(--mono);margin-top:6px}
.it-copy,.it-toggle{flex:none;width:26px;height:26px;border-radius:999px;border:1px solid var(--line);background:#fff;
  display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;
  transition:border-color .16s ease,background .16s ease}
.it-copy:hover,.it-toggle:hover{border-color:var(--red-bd);background:var(--red-bg)}
.it-copy svg{width:13px;height:13px;stroke:var(--tx2);fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.it-copy:hover svg{stroke:var(--red)}
.it-toggle svg{width:14px;height:14px;stroke:var(--tx2);fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease,stroke .16s ease}
.it.open .it-toggle{border-color:var(--red-bd);background:var(--red-bg)}
.it.open .it-toggle svg{stroke:var(--red);transform:rotate(180deg)}
.it-hook{margin:9px 0 0;font-size:12.5px;line-height:1.7;color:var(--tx2);
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.it-b{display:none;margin-top:12px;padding-top:12px;border-top:1px dashed var(--line)}
.it.open .it-b{display:block}
.it-b-in{display:flex;flex-direction:column;gap:8px;animation:itIn .18s ease both}
@keyframes itIn{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
.fl{display:flex;gap:9px;align-items:flex-start}
.fl .k{flex:none;font-size:11px;font-weight:600;color:var(--tx2);background:#F2F2F4;border-radius:6px;
  padding:2.5px 8px;margin-top:2px;min-width:42px;text-align:center;font-style:normal}
.fl .v{flex:1 1 auto;min-width:0;font-size:13.5px;line-height:1.7;color:var(--tx);word-break:break-word;
  font-weight:400}
.fl .v em{font-style:normal;color:var(--red);font-weight:400}
.fl.m .v{font-weight:400}
.fl.m .v b{font-weight:400;color:var(--red-d)}
.fl.hook .v{font-weight:400}
/* 「项目」与其它字段完全同色同字重（v1.3.6）：之前给它单独的浅红底标签，一屏里跳出来太抢眼 */
.fl.cta .v{color:var(--tx2);font-size:13px}
.empty{margin-top:0;border:0;padding:0;min-height:56vh;display:flex;align-items:center;
  justify-content:center}
.em-card{width:100%;max-width:460px;text-align:center;padding:6px 4px}
.em-ic{width:88px;height:88px;border-radius:999px;margin:0 auto 18px;
  background:linear-gradient(160deg,#FFF0F2 0%,#FFE3E8 100%);
  display:flex;align-items:center;justify-content:center}
.em-ic svg{width:38px;height:38px;stroke:var(--red);fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.em-h{margin:0;font-size:17px;font-weight:700;color:var(--tx);letter-spacing:.2px}
.em-p{margin:8px auto 0;font-size:13px;color:var(--tx2);line-height:1.8;max-width:370px}
.em-steps{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:18px;
  flex-wrap:wrap}
.em-step{background:#F6F6F7;color:var(--tx2);font-size:12px;border-radius:999px;
  padding:5px 12px;line-height:1.5;white-space:nowrap}
.em-arrow{flex:none;width:13px;height:13px;stroke:#C9C9CF;fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.em-div{height:1px;background:var(--line2);margin:20px auto 14px;max-width:300px}
.em-sub{margin:0;font-size:11.5px;color:var(--tx3);line-height:1.6}
.em-tags{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:9px}
.em-tag{font-size:11.5px;line-height:1.5;color:var(--red-d);background:var(--red-bg);
  border:1px solid #FFE7EA;border-radius:999px;padding:3px 10px}
.em-foot{margin:14px 0 0;font-size:11px;color:var(--tx3);line-height:1.6}

/* ================= 历史视图 ================= */
.h-head{display:flex;align-items:flex-end;gap:16px;margin-bottom:18px}
.h-head h1{margin:0;font-size:22px;font-weight:800}
.h-head p{margin:0;font-size:12.5px;color:var(--tx2)}
.h-head .btn-ghost{margin-left:auto;height:38px;padding:0 18px;border-radius:999px;border:1px solid var(--line);
  background:#fff;font-size:13px;color:var(--tx);transition:all .14s ease}
.h-head .btn-ghost:hover{border-color:var(--red-bd);color:var(--red)}
.hgrp{font-size:12px;color:var(--tx3);margin:16px 2px 9px;font-weight:600}
.hgrp:first-child{margin-top:2px}
.hitem{width:100%;text-align:left;border:1px solid var(--line);background:var(--card);border-radius:14px;
  padding:15px 18px;margin-bottom:9px;display:flex;align-items:center;gap:13px;transition:all .14s ease}
.hitem:hover{box-shadow:var(--sh-h);border-color:transparent;transform:translateY(-1px)}
.hitem .st{flex:none;width:9px;height:9px;border-radius:999px;background:var(--ok)}
.hitem .st.warn{background:var(--warn)}
.hitem .st.err{background:var(--err)}
.hitem .tx{flex:1 1 auto;min-width:0}
.hitem b{display:block;font-size:14.5px;font-weight:600;color:var(--tx);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.hitem span{display:block;font-size:12px;color:var(--tx2);margin-top:3px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.hitem .n{flex:none;text-align:right;font-family:var(--mono);font-size:15px;font-weight:700;color:var(--tx)}
.hitem .n i{display:block;font-style:normal;font-size:10.5px;font-weight:400;color:var(--tx3)}
.hempty{border:1.5px dashed #E2E2E6;border-radius:var(--r);padding:64px 20px;text-align:center;
  color:var(--tx3);font-size:13px;line-height:2}
.hempty-login{margin-top:10px;border:1px solid var(--red-bd);background:var(--red-bg);color:var(--red);
  font-size:13px;font-weight:600;border-radius:10px;padding:9px 18px}
.hempty-login:hover{background:var(--red);color:#fff;border-color:var(--red)}

/* ================= 弹窗 / Toast ================= */
.ov{position:fixed;inset:0;z-index:80;background:rgba(20,20,26,.48);display:none;
  align-items:center;justify-content:center;padding:24px}
.ov.on{display:flex}
.modal{background:#fff;border-radius:18px;width:640px;max-width:100%;max-height:78vh;
  display:flex;flex-direction:column;overflow:hidden;box-shadow:0 24px 64px rgba(20,20,26,.24);
  animation:pop .18s ease}
@keyframes pop{from{transform:scale(.96);opacity:0}to{transform:scale(1);opacity:1}}
.m-h{flex:none;display:flex;align-items:center;gap:10px;padding:20px 24px 4px}
.m-h b{font-size:17px;font-weight:800}
.m-h .x{margin-left:auto;width:32px;height:32px;border:0;border-radius:999px;background:#F4F4F5;
  display:flex;align-items:center;justify-content:center;color:var(--tx2);transition:all .12s ease}
.m-h .x:hover{background:#EAEAEC;color:var(--tx)}
.m-h .x svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round}
.m-sub{flex:none;padding:4px 24px 12px;font-size:12px;color:var(--tx3);border-bottom:1px solid var(--line2)}
.m-sub b{color:var(--red);font-weight:600}
.ov-b{flex:1 1 auto;min-height:0;overflow-y:auto;padding:6px 24px 24px}
.m-f{flex:none;display:flex;align-items:center;gap:10px;padding:12px 24px;border-top:1px solid var(--line2);
  background:#FCFCFD}
.m-f .m-hint{font-size:12px;color:var(--tx3);line-height:1.5}
.m-f .m-hint.err{color:var(--err)}
.m-f .sp{flex:1}
.m-btn{height:36px;padding:0 18px;border:1px solid var(--line);background:#fff;border-radius:10px;
  font-size:13px;font-weight:600;color:var(--tx2);transition:all .14s ease}
.m-btn:hover{border-color:var(--red-bd);color:var(--red)}
.m-btn.pri{background:var(--red);border-color:var(--red);color:#fff}
.m-btn.pri:hover{background:var(--red-h);box-shadow:0 6px 16px rgba(255,36,66,.22)}
.m-btn:disabled{opacity:.6;cursor:not-allowed;box-shadow:none}
/* ================= 公告弹窗（后台可开关 / 可配频率） ================= */
#annOv{position:fixed;inset:0;z-index:110;display:none;align-items:center;justify-content:center;
  padding:24px;background:rgba(20,20,26,.5);backdrop-filter:blur(3px)}
#annOv.on{display:flex}
.ann-card{width:100%;max-width:520px;max-height:82vh;display:flex;flex-direction:column;background:#fff;
  border-radius:18px;box-shadow:0 24px 64px rgba(20,20,26,.26);overflow:hidden;animation:pop .2s ease}
.ann-h{flex:none;display:flex;align-items:flex-start;gap:12px;padding:24px 26px 0}
.ann-h h3{margin:0;font-size:19px;font-weight:800;letter-spacing:.2px;line-height:1.4}
.ann-x{flex:none;margin-left:auto;width:30px;height:30px;border:0;border-radius:999px;background:#F4F4F5;
  color:var(--tx2);display:flex;align-items:center;justify-content:center;transition:all .12s ease}
.ann-x:hover{background:#EAEAEC;color:var(--tx)}
.ann-x svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round}
.ann-b{flex:1 1 auto;min-height:0;overflow-y:auto;padding:14px 26px 6px;font-size:13.5px;line-height:1.85;color:var(--tx)}
.ann-b h4{margin:14px 0 6px;font-size:14.5px;font-weight:700}
.ann-b h1,.ann-b h2,.ann-b h3{margin:16px 0 8px;line-height:1.45;font-weight:800}
.ann-b h1{font-size:20px}
.ann-b h2{font-size:18px}
.ann-b h3{font-size:16px}
.ann-b h1:first-child,.ann-b h2:first-child,.ann-b h3:first-child,.ann-b h4:first-child{margin-top:0}
.ann-b a{color:var(--red);text-decoration:underline}
.ann-b blockquote{margin:10px 0;padding:8px 14px;border-left:3px solid var(--red-bd);background:var(--red-bg);
  border-radius:0 8px 8px 0;color:var(--tx2)}
.ann-b hr{border:0;height:1px;background:var(--line);margin:16px 0}
.ann-b ul,.ann-b ol{margin:0 0 12px;padding-left:22px}
.ann-b h4:first-child{margin-top:0}
.ann-b p{margin:0 0 10px;white-space:pre-wrap;word-break:break-word}
.ann-b p:last-child{margin-bottom:0}
.ann-b ul{margin:0 0 12px;padding-left:20px}
.ann-b li{margin:3px 0}
.ann-b img{display:block;max-width:100%;height:auto;border-radius:12px;margin:10px 0;border:1px solid var(--line)}
.ann-f{flex:none;padding:16px 26px 22px;display:flex;justify-content:flex-end}
.ann-btn{min-width:118px;height:42px;border:0;border-radius:11px;background:var(--red);color:#fff;
  font-size:14px;font-weight:700;letter-spacing:.5px;transition:background .14s ease}
.ann-btn:hover{background:var(--red-h)}
.dd-grp{font-size:12.5px;font-weight:700;color:var(--tx2);margin:16px 2px 9px}
.dd-grp:first-child{margin-top:10px}
.dd-chips{display:flex;gap:8px;flex-wrap:wrap}
.rchip{border:1px solid var(--line);background:#fff;color:var(--tx2);font-size:13px;border-radius:999px;
  padding:7px 15px;line-height:1.5;transition:all .12s ease}
.rchip:hover{border-color:var(--red-bd);color:var(--red)}
.rchip.on{background:var(--red);border-color:var(--red);color:#fff;font-weight:600}
#toast{position:fixed;left:50%;top:44%;transform:translateX(-50%) scale(.9);z-index:99;background:rgba(24,24,30,.82);
  color:#fff;font-size:13.5px;border-radius:999px;padding:10px 20px;opacity:0;pointer-events:none;
  transition:opacity .18s ease,transform .18s ease;max-width:60vw;text-align:center;line-height:1.6}
#toast.on{opacity:1;transform:translateX(-50%) scale(1)}

.lock .rchip,.lock .stepper button,.lock .sel,.lock .dd-btn{pointer-events:none;opacity:.55}
.lock textarea,.lock input[type=number]{pointer-events:none;opacity:.7}
.lock .btn-pri{pointer-events:none}

/* ================= v1.8 生成动效（流畅、克制、可降级） =================
 * 动效只为两件事服务：让「正在生成」有生命感，让新内容出现得更自然。
 * 全部动画在 prefers-reduced-motion 下自动关闭。
 */
@keyframes hzBarShine{0%{transform:translateX(-120%)}100%{transform:translateX(340%)}}
@keyframes hzShimmer{0%{background-position:-280px 0}100%{background-position:280px 0}}
/* 数字只做一次很轻的「呼吸」，不再闪红、不再放大跳 */
@keyframes hzNumPop{
  0%{transform:translateY(1px) scale(1)}
  45%{transform:translateY(-1px) scale(1.055)}
  100%{transform:translateY(0) scale(1)}
}
/* 状态点：柔和呼吸（原来是未定义的 pl，实际不生效） */
@keyframes pl{
  0%,100%{transform:scale(1);opacity:1;box-shadow:0 0 0 0 rgba(255,36,66,.28)}
  50%{transform:scale(1.22);opacity:.72;box-shadow:0 0 0 4px rgba(255,36,66,0)}
}
@keyframes hzStarPop{0%{transform:scale(.72);opacity:.55}60%{transform:scale(1.12);opacity:1}100%{transform:scale(1)}}
@keyframes hzDots{0%,80%,100%{opacity:.22;transform:translateY(0)}40%{opacity:1;transform:translateY(-2px)}}
/* 新卡片左侧标记：从中间向上、下两端长出（替代原来扩散的红色光圈） */
@keyframes hzBarGrow{from{transform:scaleY(.15);opacity:0}to{transform:scaleY(1);opacity:.85}}
@keyframes hzFavBurst{0%{transform:translate(-50%,-50%) scale(.35);opacity:.85}100%{transform:translate(-50%,-50%) scale(8);opacity:0}}
@keyframes hzSweep{0%{left:-40%}100%{left:120%}}

/* 进度条：品牌红渐变 + 流光；完成后带一点辉光 */
.bar>i{background:linear-gradient(90deg,var(--red) 0%,#FF5D74 52%,var(--red) 100%);
  position:relative;overflow:hidden;transition:width .5s cubic-bezier(.22,.9,.24,1)}
.bar>i::after{content:"";position:absolute;top:0;bottom:0;width:38%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.62),transparent);
  animation:hzBarShine 1.5s linear infinite}
.bar.idle>i::after{display:none}
.bar.done>i{box-shadow:0 0 12px rgba(255,36,66,.42)}

/* 顶部卡片：生成中一道光带扫过 */
.op-top{overflow:hidden}
.op-top.running::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--red),transparent);animation:hzBarShine 2.1s linear infinite}

/* 「继续写」的三个呼吸点 */
.rs-sub .dots{display:inline-flex;align-items:center;gap:3px;margin-left:4px}
.rs-sub .dots i{width:3px;height:3px;border-radius:999px;background:var(--red);
  animation:hzDots 1.15s ease-in-out infinite}
.rs-sub .dots i:nth-child(2){animation-delay:.16s}
.rs-sub .dots i:nth-child(3){animation-delay:.32s}

/* 数字变化时轻呼吸一下（条数、进度） */
.num-pop{display:inline-block;transform-origin:left center;animation:hzNumPop .34s cubic-bezier(.2,.7,.25,1)}

/* 新卡片：左侧一道品牌色标记 + 一圈扩散光 */
.it-fav{flex:none;width:26px;height:26px;border-radius:999px;border:1px solid var(--line);background:#fff;
  display:flex;align-items:center;justify-content:center;padding:0;transition:border-color .16s ease,background .16s ease}
.it-fav svg{width:14px;height:14px;fill:none;stroke:var(--tx2);stroke-width:1.8;stroke-linejoin:round;
  transition:stroke .16s ease}
.it-fav:hover{border-color:#FFD9A8;background:#FFF8EC}
.it-fav:hover svg{stroke:#E09B2D}
.it-fav.on{border-color:#FFD9A8;background:#FFF6E6}
.it-fav.on svg{fill:#F5A623;stroke:#E09B2D;animation:hzStarPop .32s cubic-bezier(.2,.9,.3,1.3)}
.it-fav:disabled{opacity:.42;cursor:not-allowed}
.it-fav:disabled:hover{background:#fff;border-color:var(--line)}
.it-fav:disabled:hover svg{stroke:var(--tx2)}
/* 有用 / 没用：卡片底部一条轻量反馈，收进学习中台 */
.it-vote{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:2px;padding-top:9px;
  border-top:1px dashed var(--line)}
.it-vote .q{font-size:12px;color:var(--tx3);letter-spacing:.2px}
.it-vote .vb{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 9px;border-radius:999px;
  border:1px solid var(--line);background:#fff;font-size:12px;color:var(--tx2);line-height:1;
  transition:border-color .16s ease,background .16s ease,color .16s ease}
.it-vote .vb svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.it-vote .vb:hover{border-color:var(--red-bd);background:var(--red-bg);color:var(--red-d)}
.it-vote .vb.on{border-color:var(--red-bd);background:var(--red-bg);color:var(--red-d);font-weight:600}
.it-vote .vb[data-vote="bad"].on{border-color:#E3E3E8;background:#F4F4F6;color:var(--tx2)}
.it-vote .vb:disabled{pointer-events:none}
.it-vote .vb:disabled:not(.on){opacity:.45}
.it-vote .tip{font-size:11.5px;color:var(--tx3)}
.it-vote .tip.off{display:none}
.it.it-new::before{content:"";position:absolute;left:0;top:16px;bottom:16px;width:3px;border-radius:0 3px 3px 0;
  background:linear-gradient(180deg,var(--red),#FF8296);opacity:.85;transform-origin:center;
  animation:hzBarGrow .42s cubic-bezier(.22,.9,.24,1) both}
.it{position:relative}
.fav-burst{position:fixed;z-index:96;width:10px;height:10px;border-radius:999px;background:#F5A623;
  pointer-events:none;animation:hzFavBurst .55s ease-out forwards}

/* 骨架屏：首批内容的占位，比空转更有「在写」的实感 */
.sk{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;
  box-shadow:var(--sh);margin-bottom:14px}
.sk-l{height:11px;border-radius:6px;margin-bottom:11px;
  background:linear-gradient(90deg,#F2F2F4 0%,#E8E8EC 42%,#F2F2F4 82%);
  background-size:280px 100%;animation:hzShimmer 1.25s linear infinite}
.sk-l.h{height:15px;width:58%;margin-bottom:16px}
.sk-l.w92{width:92%}.sk-l.w74{width:74%}.sk-l.w58{width:58%}.sk-l.w40{width:40%}
.sk-l:last-child{margin-bottom:0}

/* 个人中心 / 收藏列表 */
.pcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);
  padding:20px 22px;margin-bottom:16px}
.pcard h3{margin:0 0 4px;font-size:15px;font-weight:800}
.pcard p.pd{margin:0 0 16px;font-size:12px;color:var(--tx2);line-height:1.7}
.pf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:12px}
.pf-item{background:#FAFAFB;border:1px solid var(--line2);border-radius:12px;padding:13px 15px}
.pf-item span{display:block;font-size:11.5px;color:var(--tx3);margin-bottom:4px}
.pf-item b{display:block;font-size:15px;font-weight:700;word-break:break-all}
.fav-card{border:1px solid var(--line);background:var(--card);border-radius:14px;padding:16px 18px;
  margin-bottom:11px;transition:box-shadow .16s ease,border-color .16s ease}
.fav-card:hover{box-shadow:var(--sh-h);border-color:#FFE2B8}
.fav-h{display:flex;align-items:flex-start;gap:10px}
.fav-t{flex:1 1 auto;min-width:0;font-size:14.5px;font-weight:700;line-height:1.55;word-break:break-word}
.fav-m{flex:none;font-size:11px;color:var(--tx3);font-family:var(--mono);margin-top:3px}
.fav-sub{margin-top:6px;font-size:11.5px;color:var(--tx3)}
.fav-b{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.fav-b .fl .v{font-size:13px}
.fav-a{display:flex;gap:8px;margin-top:11px}
.fav-a button{height:30px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:#fff;
  font-size:12px;color:var(--tx2);transition:all .14s ease}
.fav-a button:hover{border-color:var(--red-bd);color:var(--red)}
.fav-a button.dang:hover{background:var(--err-bg);border-color:var(--red)}
.fav-empty{border:1.5px dashed #E2E2E6;border-radius:var(--r);padding:46px 20px;text-align:center;
  color:var(--tx3);font-size:13px;line-height:2}

@media (max-width:1320px){.it-len{display:none}}
@media (prefers-reduced-motion:reduce){
  .bar>i::after,.rs-sub .dots i,.op-top.running::after,.sk-l,.it.it-new::before,.num-pop,.it-fav.on svg,
  #opState.run::before{animation:none!important}
}

@media (max-width:1180px){
  .workspace{grid-template-columns:1fr;gap:18px}
  .inputs{position:static;top:auto;height:auto;overflow:visible}
  .ip-body{overflow:visible;max-height:none}
  .ip-foot{position:static;bottom:auto;z-index:auto;box-shadow:none}
  .outputs{position:static;height:auto;display:block}
  .op-scroll{display:block;overflow:visible;height:auto;flex:none;padding:18px;margin:18px 0 0}
  .op-view{overflow:visible;height:auto}
  body.lock-scroll{overflow:auto}
  .empty{min-height:40vh}
}
@media (max-width:960px){
  .app{flex-direction:column}
  .side{width:100%;height:auto;position:static;flex-direction:row;align-items:center;gap:14px;padding:12px 16px}
  .logo{padding:0}
  .lg-t i{display:none}
  .sn{flex-direction:row;flex:1}
  .nv{width:auto;padding:8px 12px}
  .s-stat{display:none}
  .acct{margin:0;padding:0;border:0;position:static}
  .acct-btn{width:auto;padding:6px 8px}
  .acct-btn .su-t{display:none}
  .wrap{padding:18px 16px 40px}
}
/* ---------- 手机小屏（375–480）：顶栏两行收纳 + 卡片收紧，保证无横向滚动 ---------- */
@media (max-width:600px){
  .side{flex-wrap:wrap;padding:calc(10px + env(safe-area-inset-top)) 12px calc(10px + env(safe-area-inset-bottom));gap:6px 8px;min-width:0}
  .logo{order:1;gap:8px;flex:none}
  .lg{width:34px;height:34px;font-size:17px;border-radius:9px}
  .lg-t b{font-size:13.5px}
  .lg-logo{height:30px;max-width:120px}
  .acct{order:2;flex:none;margin:0 0 0 auto}
  .acct-btn{padding:5px}
  .ac-chev{display:none}
  /* 第二行：导航独占一行，横向放不下时才滑动 */
  .sn{order:3;flex:1 1 100%;gap:2px;min-width:0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .sn::-webkit-scrollbar{display:none}
  .nv{flex:none;padding:9px 10px;font-size:13px;border-radius:10px;gap:6px;min-height:0}
  .nv .bdg{top:3px;right:4px}
  .wrap{padding:14px 12px calc(44px + env(safe-area-inset-bottom))}
  /* 生成台：输入卡与结果卡收紧 */
  .it{padding:14px 13px}
  .op-scroll{padding:12px}
  .inputs,.outputs{border-radius:16px}
  .ip-body{padding:14px 13px 16px}
  /* 登录浮层避开刘海 */
  #loginView{padding:calc(16px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left))}
  .lg-card{padding:22px 18px}
  .lg-close{top:calc(10px + env(safe-area-inset-top));right:calc(10px + env(safe-area-inset-right))}
  /* 个人中心：小屏收紧 */
  .me-hero{padding:18px 16px;gap:14px}
  .me-av{width:52px;height:52px;border-radius:16px;font-size:22px}
  .me-id h2{font-size:18px}
  .me-acts{width:100%}
  .me-acts button{flex:1 1 0;min-width:96px}
  .me-logout{padding:14px 15px}
}
/* ---------- 触屏设备：操作按钮放大到手指可点的尺寸（≥40px） ---------- */
@media (hover:none) and (pointer:coarse){
  .it-fav,.it-copy,.it-toggle{width:40px;height:40px}
  .it-copy svg{width:16px;height:16px}
  .it-toggle svg{width:16px;height:16px}
  .it-fav svg{width:17px;height:17px}
  .fav-a button{height:40px;padding:0 18px;font-size:13px}
  .lg-close{width:44px;height:44px}
  .nv{min-height:44px}
  .acct-btn{min-height:44px}
  .ann-btn{height:46px}
  button:not(.it-fav):not(.it-copy):not(.it-toggle){touch-action:manipulation}
}
/* ================= v1.3.0 弹层滚动兼容（精选钩子 + 通用弹窗） =================
 * 1) .ov-b 顶部的 6px 内边距会让 sticky 的 tabs 粘在「内边距下沿」，
 *    滚动时卡片会从那 6px 缝里穿过去 → 精选弹层把上内边距收进 tabs 自身，顶边齐平。
 * 2) 移动端（≤1180）body 是 overflow:auto（工作台要能整页滚），
 *    弹层打开时必须临时钉住，否则手指在遮罩上拖会带动背景整页滚，看起来像弹层内容错位。
 * 3) 78vh 在移动端地址栏伸缩时会跳变：支持 dvh 的浏览器改用 dvh，老浏览器仍用 vh。
 * 4) 矮视口（横屏 667×375）用满视口高度并收紧头部，保证留出足够的可滚动区域。 */
@supports (max-height:100dvh){
  .modal{max-height:78dvh}
}
#ftOv .ov-b{padding-top:0;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
body.mod-lock{overflow:hidden}
body.lock-scroll.mod-lock{overflow:hidden}
@media (max-height:520px){
  .ov{padding:10px}
  .modal{max-height:calc(100vh - 20px);max-height:calc(100dvh - 20px)}
  #ftOv .m-h{padding:12px 18px 2px}
  #ftOv .m-sub{padding:2px 18px 8px}
  #ftOv .ov-b{padding:0 18px 14px}
  #ftOv .m-f{padding:10px 18px}
}

/* ==========================================================================
   v1.4.2 · 工作台切换：一枚按钮（标题位置）
   --------------------------------------------------------------------------
   位置：.page-head 内、h1 之前；两个业务时 h1 隐藏，**这一枚按钮就是标题**。
   结构：.psw > a.psw-b[ .psw-ic + .psw-t + .psw-sw(⇄ + .psw-dot) ] + .psw-tip
   为什么只留一个：两段文字并排会互相抢注意力，且大小屏都要挤一行。
   现在只显示「当前是哪个工作台」——名字 ＋ 标志图标；切换这件事交给右侧那枚
   圆形换向图标（⇄），它右上角一枚品牌色角标点，告诉用户「还有另一个」。
   目标名字不常驻，hover / 键盘 focus 时从右侧浮出一点提示，悬停即知去向。
   风格：跟随原版标题（21px / 800 / 墨色），不铺底色、不描边框，只有一枚细圆环。
   ========================================================================== */
.page-head .appsw{margin:0 0 10px}
.appsw[hidden]{display:none}
.psw{position:relative;display:inline-flex;align-items:center}
.psw-b{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--tx);
  border-radius:10px;-webkit-tap-highlight-color:transparent}
.psw-b .psw-ic{flex:none;display:inline-flex;width:19px;height:19px;color:var(--red)}
.psw-b .psw-ic svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.psw-b .psw-t{position:relative;font-size:21px;font-weight:800;letter-spacing:.2px;line-height:1.3;
  padding-bottom:5px}
.psw-b .psw-t::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;
  background:currentColor;transform:scaleX(0);transform-origin:left center;opacity:.9;
  transition:transform .32s cubic-bezier(.16,1,.3,1)}
.psw-b:hover .psw-t::after,.psw-b:focus-visible .psw-t::after{transform:scaleX(1)}
.psw-b:focus-visible{outline:2px solid var(--red);outline-offset:4px}
/* 换向图标 + 角标点：一枚细圆环，hover 反白，图标转半圈 */
.psw-sw{position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:27px;height:27px;margin-left:2px;border:1px solid var(--line);border-radius:50%;
  color:var(--tx2);background:var(--card);
  transition:background .2s ease,border-color .2s ease,color .2s ease}
.psw-sw svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform .5s cubic-bezier(.16,1,.3,1)}
.psw-dot{position:absolute;top:-2px;right:-2px;width:7px;height:7px;border-radius:50%;
  background:var(--red);box-shadow:0 0 0 2px var(--card);transition:box-shadow .2s ease}
.psw-b:hover .psw-sw{background:var(--tx);border-color:var(--tx);color:#fff}
.psw-b:hover .psw-sw svg{transform:rotate(180deg)}
.psw-b:hover .psw-dot{box-shadow:0 0 0 2px var(--tx)}
.psw-b:active{transform:translateY(1px)}
/* 目标名提示：只在 hover / focus 时从右侧浮出，不占版面 */
.psw-tip{position:absolute;left:calc(100% + 9px);top:50%;z-index:5;pointer-events:none;
  white-space:nowrap;padding:5px 10px;border-radius:8px;background:var(--tx);color:#fff;
  font-size:11px;line-height:1.4;letter-spacing:.2px;opacity:0;
  transform:translateY(-50%) translateX(-4px);
  transition:opacity .16s ease,transform .26s cubic-bezier(.16,1,.3,1)}
.psw-tip::before{content:"";position:absolute;left:-4px;top:50%;margin-top:-4px;
  border:4px solid transparent;border-right-color:var(--tx);border-left:0}
.psw:hover .psw-tip,.psw:focus-within .psw-tip{opacity:1;transform:translateY(-50%) translateX(0)}
/* 点下去：图标先转过去，给一次即时回执，再进入过场 */
.psw.go .psw-sw svg{transform:rotate(180deg)}

/* ==========================================================================
   v1.4.2 · 工作台过场：双幕合拢 → 中缝一道墨线 → 目标名浮现 → 双幕退开
   --------------------------------------------------------------------------
   舞台仍是 .workspace 内的 .navfx（绝对定位），所以侧栏与页面其它区域完全静止。
   动效语言（为什么这样更「高级」）：
     · 两片幕布从上下边缘向中缝合拢（scaleY，纯 GPU 合成，60fps 无掉帧）；
     · 合拢瞬间中缝压出一道 1px 墨线，从左侧起笔扫到右侧——像合上一本册子；
     · 目标工作台的名字在中缝下方浮现，字距从 .3em 舒展开，交代「去哪儿」；
     · 落地时两片幕布从中缝向外退开（内容由中缝向两侧揭开），
       内容块同时上浮 10px + 轻微放大，用 expo-out 收尾——落定感强，不晃眼。
   节奏：离场 500ms（跳转 520ms 后发生），到场 620ms，与 boot() 的 1.1s 收尾对齐。
   ========================================================================== */
.workspace{position:relative}
.navfx{position:absolute;inset:0;z-index:40;display:none;pointer-events:none;border-radius:18px;
  overflow:hidden;background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px)}
/* 两片幕布：上片、下片，各自半个工作区；接缝处一道极淡的折痕 */
.navfx::before,.navfx::after{content:"";position:absolute;left:0;right:0;height:50%;
  background:linear-gradient(to bottom,#fff,#FCFCFD);transform:scaleY(0);will-change:transform}
.navfx::before{top:0}
.navfx::after{bottom:0;background:linear-gradient(to top,#fff,#FCFCFD)}
.navfx-panel{position:absolute;left:0;right:0;top:50%;height:1px;background:var(--tx);opacity:0;
  transform:scaleX(0);transform-origin:left center}
.navfx-mid{position:absolute;left:0;right:0;top:calc(50% + 18px);display:flex;flex-direction:column;
  align-items:center;gap:5px;opacity:0}
.navfx-ic{display:none}
.navfx-tx{font-size:11.5px;font-weight:700;letter-spacing:.3em;color:var(--tx);text-indent:.3em}
.navfx-sub{font-size:9px;letter-spacing:.3em;color:var(--tx3);opacity:.7}

/* —— 离场：上片从顶边往下盖、下片从底边往上盖，向中缝合拢 —— */
html.fx-leaving .navfx{display:block;animation:pfxVeilIn .3s ease both}
html.fx-leaving .navfx::before{transform-origin:top center;
  animation:pfxClose .5s cubic-bezier(.76,0,.24,1) both}
html.fx-leaving .navfx::after{transform-origin:bottom center;
  animation:pfxClose .5s cubic-bezier(.76,0,.24,1) both}
html.fx-leaving .navfx-panel{animation:pfxLineIn .5s cubic-bezier(.76,0,.24,1) both}
html.fx-leaving .navfx-mid{animation:pfxLabIn .34s ease .18s both}
html.fx-leaving .workspace>.inputs,
html.fx-leaving .workspace>.outputs{animation:pfxOut .34s cubic-bezier(.55,0,.28,1) both}

/* —— 到场：两片幕布从中缝向上下退开，内容由中缝向两侧揭开 —— */
html.fx-enter .navfx{display:block;animation:pfxVeilOut .62s ease both}
html.fx-enter .navfx::before{transform-origin:bottom center;
  animation:pfxOpen .62s cubic-bezier(.16,1,.3,1) both}
html.fx-enter .navfx::after{transform-origin:top center;
  animation:pfxOpen .62s cubic-bezier(.16,1,.3,1) both}
html.fx-enter .navfx-panel{animation:pfxLineOut .52s cubic-bezier(.16,1,.3,1) both}
html.fx-enter .navfx-mid{display:none}
html.fx-enter .page-head,
html.fx-enter .workspace>.inputs,
html.fx-enter .workspace>.outputs{animation:pfxIn .62s cubic-bezier(.16,1,.3,1) .04s both}

@keyframes pfxVeilIn{from{opacity:0}to{opacity:1}}
@keyframes pfxVeilOut{from{opacity:1}to{opacity:0}}
@keyframes pfxClose{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes pfxOpen{from{transform:scaleY(1)}to{transform:scaleY(0)}}
@keyframes pfxLineIn{0%{transform:scaleX(0);opacity:0}30%{opacity:.9}
  100%{transform:scaleX(1);opacity:.9}}
@keyframes pfxLineOut{0%{transform:scaleX(1);opacity:.85}
  100%{transform:scaleX(1.015);opacity:0}}
@keyframes pfxLabIn{from{opacity:0;transform:translateY(6px);letter-spacing:.5em}
  to{opacity:1;transform:none;letter-spacing:.3em}}
@keyframes pfxOut{to{opacity:.4;transform:scale(.994)}}
@keyframes pfxIn{from{opacity:0;transform:translateY(10px) scale(.996)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  html.fx-leaving .navfx,html.fx-enter .navfx{display:none!important}
  html.fx-leaving .workspace>.inputs,html.fx-leaving .workspace>.outputs,
  html.fx-enter .page-head,
  html.fx-enter .workspace>.inputs,html.fx-enter .workspace>.outputs{animation:none!important}
}

/* 窄屏：标题降一号字，圆环跟着缩，提示气泡在触屏上没有意义、直接不显示 */
@media (max-width:960px){
  .psw-b .psw-t{font-size:18px}
  .psw-b .psw-ic,.psw-b .psw-ic svg{width:17px;height:17px}
  .psw-sw{width:24px;height:24px}
  .psw-sw svg{width:13px;height:13px}
}
@media (max-width:600px){
  .psw-b{gap:7px}
  .psw-b .psw-t{font-size:16px;padding-bottom:4px}
  .psw-b .psw-ic,.psw-b .psw-ic svg{width:15px;height:15px}
  .psw-sw{width:22px;height:22px}
  .psw-sw svg{width:12px;height:12px}
  .psw-dot{width:6px;height:6px}
  .psw-tip{display:none}
}

/* ==========================================================================
   v1.3.7 · 朋友圈页复用的少量补充（不覆盖任何补贴页既有样式）
   ========================================================================== */
/* 多行字段值：正文段落要保留空行 */
.fl.multi .v{white-space:pre-wrap}
/* 字段值里的话题标签 */
.tagline{display:flex;flex-wrap:wrap;gap:6px}
.tagline span{font-size:11.5px;line-height:1.7;color:var(--red-d);background:var(--red-bg);
  border:1px solid var(--red-bd);border-radius:7px;padding:0 7px}
/* 朋友圈补充要求下方的快捷词 */
.quick .qc{font-size:11.5px;border:1px dashed var(--line);background:#fff;color:var(--tx2);
  border-radius:8px;padding:3px 8px;margin:0 6px 6px 0;transition:.14s}
.quick .qc:hover{border-color:var(--red-bd);color:var(--red);background:var(--red-bg)}

/* ==========================================================================
   v1.4.2 · 首屏示例区（条数按可用高度自适应，铺满一屏）
   —— 样式沿用既有卡片语言，不引入新视觉；条数与间距由前端量完再定。
   ========================================================================== */
.samples .items{align-items:flex-start}
.samples .it-col{gap:var(--smp-gap,14px)}   /* 余量摊进卡间距，底板对齐一屏底边 */
.samples-hd{display:flex;align-items:center;gap:10px;margin:0 0 13px}
.samples-hd h3{margin:0;font-size:13px;font-weight:700;color:var(--tx);letter-spacing:.2px}
.samples-hd .sub{font-size:11px;color:var(--tx3)}
.samples-hd .rf{margin-left:auto;display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 11px;
  border:1px solid var(--line);border-radius:8px;background:#fff;font-size:11.5px;color:var(--tx2);
  cursor:pointer;transition:border-color .14s ease,background .14s ease,color .14s ease}
.samples-hd .rf:hover{border-color:var(--red-bd);color:var(--red);background:var(--red-bg)}
.samples-hd .rf svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.samples-hd .rf.busy svg{animation:rfSpin .9s linear infinite}
@keyframes rfSpin{to{transform:rotate(360deg)}}
/* 示例卡：与生成卡同构，编号位显示「示例」，不给收藏/复制/投票。
   v1.4.2 起比正式卡略紧凑（内距 14/16、标签更小）：一屏能多放一两条，
   一屏之内看到的内容越多，「这里写得出东西」的说服力越强。 */
.it.demo{border-color:var(--line);padding:14px 16px}
.it.demo .it-no{font-weight:700}
.it.demo .it-tt{font-size:14px;line-height:1.45}
.it.demo .it-hook{margin-top:7px;font-size:12px}
.it.demo .it-copy,.it.demo .it-fav,.it.demo .it-vote{display:none}
/* 示例正文只作预览：最多约 4 行，底部一道柔和淡出（不用省略号，读起来不断句）。
   高度可控，一屏能多放一两条；要看全文点复制，复制出去的是完整成稿。 */
.samples .it-b-in .fl.multi .v{max-height:86px;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,#000 78%,rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(to bottom,#000 78%,rgba(0,0,0,0) 100%)}
@media (max-width:600px){
  .samples-hd .sub{display:none}
}

/* ==========================================================================
   v1.4.3 · 朋友圈页：字数范围 + 两个维度的开关
   --------------------------------------------------------------------------
   作用域铁律：本段所有选择器都以 `body.page-moments` 开头。
   app.css 是朋友圈页与视频文案页共用的唯一真源，不加前缀就会顺手改掉补贴页
   （哪怕只是 .fg>label 里多一个按钮的间距），所以这一段只服务朋友圈页。
   ========================================================================== */
/* 字段标题行：label + 右侧开关（开关不塞进 label 里：label 内嵌可聚焦控件是非法的，
 * 而且点标题文字会把开关一起切掉，误触成本太高） */
body.page-moments .fg-hd{display:flex;align-items:center;gap:10px;margin-bottom:8px}
body.page-moments .fg-hd>label{display:flex;align-items:baseline;gap:7px;min-width:0;
  font-size:13.5px;font-weight:700}
body.page-moments .fg-hd>label em{font-style:normal;font-weight:400;font-size:11.5px;color:var(--tx3)}
/* 开关：34×20 的胶囊，关闭灰、开启品牌红；圆点用 transform 滑过去（GPU 合成） */
body.page-moments .fg-hd .sw{flex:none;margin-left:auto;position:relative;
  width:34px;height:20px;padding:0;border:1px solid var(--line);border-radius:999px;background:#EAEAEE;
  transition:background .16s ease,border-color .16s ease}
body.page-moments .fg-hd .sw i{position:absolute;left:1px;top:1px;width:16px;height:16px;border-radius:50%;
  background:#fff;box-shadow:0 1px 2px rgba(38,38,43,.2);
  transition:transform .18s cubic-bezier(.22,.9,.24,1)}
body.page-moments .fg-hd .sw[aria-checked="true"]{background:var(--red);border-color:var(--red)}
body.page-moments .fg-hd .sw[aria-checked="true"] i{transform:translateX(14px)}
body.page-moments .fg-hd .sw:hover{border-color:var(--red-bd)}
body.page-moments .fg-hd .sw:focus-visible{outline:2px solid var(--red);outline-offset:2px}
/* 关闭态：控件灰化且不可点（disabled 与 class 双保险，触屏也点不动） */
body.page-moments .dd-btn.is-off,
body.page-moments .dd-btn:disabled{background:#F5F5F6;border-color:var(--line2);color:var(--tx3);
  pointer-events:none;cursor:default;box-shadow:none}
body.page-moments .dd-btn.is-off .ic,
body.page-moments .dd-btn.is-off .chev{opacity:.45}
body.page-moments .selbox.is-off .sel{background:#F5F5F6;border-color:var(--line2);color:var(--tx3);
  pointer-events:none;cursor:default}
body.page-moments .selbox.is-off .chev{opacity:.4}
/* 字数范围：最小 – 最大 两个字输入框，共用一条描边，视觉上与「生成条数」的 stepper 同高 */
body.page-moments .range{display:flex;align-items:center;gap:8px;width:100%;height:44px;padding:0 12px;
  border:1px solid var(--line);background:#FAFAFB;border-radius:var(--r-sm);
  transition:border-color .14s ease,background .14s ease,box-shadow .14s ease}
body.page-moments .range:focus-within{border-color:var(--red);background:#fff;box-shadow:0 0 0 3px var(--red-bg)}
body.page-moments .range input{flex:1 1 0;min-width:0;width:100%;height:40px;border:0;outline:none;
  background:transparent;text-align:center;font-size:16px;font-weight:700;color:var(--tx);
  font-family:var(--mono);-webkit-appearance:none;appearance:none;-moz-appearance:textfield}
body.page-moments .range input::-webkit-outer-spin-button,
body.page-moments .range input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
body.page-moments .range .range-dash{flex:none;font-size:13px;color:var(--tx3)}
body.page-moments .range .unit{flex:none;font-size:12px;color:var(--tx3)}
/* 被自动纠正过时的那一行轻提示：暖色、不抢红色生成按钮的注意力 */
body.page-moments .range-tip{margin-top:7px;font-size:11.5px;line-height:1.65;color:var(--warn)}

/* 字段行容器：把「生成条数 + 字数范围」当成一个整体。
   默认与 .ip-form 同节奏（纵向 18px），矮屏下改成并排（见下面 media）。 */
body.page-moments .fg-row{display:flex;flex-direction:column;gap:18px;min-width:0}

/* --------------------------------------------------------------------------
   v1.4.3 修订 · 矮屏左栏压缩
   目标：1440×900 与 1366×768 下「补充要求」和「开始生成」都不用滚动就看得见。
   只按视口高度收（height ≤940 / ≤800），1920×1080 完全不受影响；
   所有规则仍以 body.page-moments 开头，补贴页数值逐字节不变。
   -------------------------------------------------------------------------- */
@media (max-height:940px){
  body.page-moments .ip-body{padding:10px 14px 12px}
  body.page-moments .ip-form{gap:10px}
  body.page-moments .fg-row{gap:10px}
  body.page-moments .fg>label{margin-bottom:4px;font-size:13px}
  body.page-moments .fg-hd{margin-bottom:4px}
  body.page-moments .fg-hd>label{font-size:13px}
  body.page-moments .dd-btn{padding:8px 12px}
  body.page-moments .sel{padding:8px 34px 8px 12px}
  body.page-moments .stepper button{height:38px;width:38px}
  body.page-moments .stepper .unit{padding-right:9px}
  body.page-moments .range{height:38px;padding:0 9px}
  body.page-moments .range input{height:34px;font-size:15px}
  body.page-moments .ta textarea{padding:9px 12px;min-height:64px}
  /* 快捷词条改成单行横向滚动：一行 28px 替代原本两三行 52px 的换行块 */
  body.page-moments .quick{flex-wrap:nowrap;overflow-x:auto;margin-top:7px;padding-bottom:2px;
    scrollbar-width:none;-ms-overflow-style:none}
  body.page-moments .quick::-webkit-scrollbar{display:none}
  body.page-moments .quick .qchip{flex:none;padding:4px 10px;font-size:11.5px}
  body.page-moments .ip-foot{padding:10px 14px 11px}
}
/* 1366×768 这类更矮的屏：条数与字数范围并排一行，字段提示语先让位；
   再收一轮间距，留出 20px+ 余量给「已自动调整」提示行（它出现时不该把字段顶出可视区） */
@media (max-height:800px){
  body.page-moments .fg-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start}
  body.page-moments .stepper{width:100%}
  body.page-moments .stepper button{width:32px;height:36px}
  body.page-moments .stepper .unit{padding-right:8px}
  body.page-moments .fg>label,
  body.page-moments .fg-hd{margin-bottom:3px}
  body.page-moments .fg>label em,
  body.page-moments .fg-hd>label em{display:none}
  body.page-moments .ip-body{padding:8px 14px 10px}
  body.page-moments .dd-btn{padding:7px 11px}
  body.page-moments .sel{padding:7px 32px 7px 11px}
  body.page-moments .range{height:36px}
  body.page-moments .range input{height:32px}
  body.page-moments .ta textarea{padding:8px 11px;min-height:56px}
  body.page-moments .quick{margin-top:5px}
  body.page-moments .ip-foot{padding:8px 14px 9px}
}


/* ============================================================
   v1.4.4 · 跨工作台类目筛选 + 类目徽标（两页共用）
   每条规则都带 body.page-moments / body.page-video 前缀 —— 不写裸选择器，
   两个工作台各自的既有计算样式（尤其补贴页）不会被误伤。
   ============================================================ */
body.page-moments .dm-tabs,body.page-video .dm-tabs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 14px}
body.page-moments .dm-tab,body.page-video .dm-tab{display:inline-flex;align-items:center;gap:6px;height:30px;
  padding:0 12px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--tx2);
  font-size:12.5px;line-height:1;transition:background .16s,color .16s,border-color .16s}
body.page-moments .dm-tab:hover,body.page-video .dm-tab:hover{border-color:#DCDCE2;color:var(--tx)}
body.page-moments .dm-tab.on,body.page-video .dm-tab.on{background:var(--red-bg);border-color:var(--red-bd);
  color:var(--red-d);font-weight:600}
body.page-moments .dm-tab .dm-n,body.page-video .dm-tab .dm-n{font-style:normal;font-size:11px;line-height:1;
  padding:2px 5px;border-radius:6px;background:var(--line2);color:var(--tx3);font-variant-numeric:tabular-nums}
body.page-moments .dm-tab.on .dm-n,body.page-video .dm-tab.on .dm-n{background:#fff;color:var(--red-d)}
body.page-moments .dm-badge,body.page-video .dm-badge{display:inline-flex;align-items:center;height:18px;
  padding:0 6px;margin-right:7px;border-radius:5px;font-size:11px;font-weight:600;font-style:normal;
  line-height:1;vertical-align:1px;white-space:nowrap}
body.page-moments .dm-badge.dm-subsidy,body.page-video .dm-badge.dm-subsidy{background:#EEF3FF;color:#3A5CCC}
body.page-moments .dm-badge.dm-moments,body.page-video .dm-badge.dm-moments{background:var(--ok-bg);color:#0B8A55}
/* 收藏卡里的徽标贴着标题，不要多一层下边距 */
body.page-moments .fav-t .dm-badge,body.page-video .fav-t .dm-badge{margin-right:6px}

/* ---------------- 视频工作台：示例铺满（body.page-video 专有） ---------------- */
/* 只作用于加了 .smp-fit 的那个列表，生成结果列表的常规间距不受影响 */
body.page-video #itemsBox.smp-fit > .it-col{gap:var(--smp-gap,14px)}
/* 示例卡压缩：一屏要塞下 4–5 张，展开的那张也不能把整屏顶破 */
body.page-video #itemsBox.smp-fit .it{padding:10px 12px;border-radius:12px}
body.page-video #itemsBox.smp-fit .it-h{gap:7px}
body.page-video #itemsBox.smp-fit .it-no{font-size:11px}
body.page-video #itemsBox.smp-fit .it-tt{font-size:12.5px;line-height:1.4}
body.page-video #itemsBox.smp-fit .it-len{font-size:10.5px;margin-top:0}
body.page-video #itemsBox.smp-fit .it-hook{margin-top:5px;font-size:11.5px;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
body.page-video #itemsBox.smp-fit .it-copy,
body.page-video #itemsBox.smp-fit .it-fav,
body.page-video #itemsBox.smp-fit .it-toggle{display:none}
body.page-video #itemsBox.smp-fit .it-b{margin-top:6px;padding-top:6px}
body.page-video #itemsBox.smp-fit .it-b-in{row-gap:5px;max-height:168px;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 84%,rgba(0,0,0,.15));
  mask-image:linear-gradient(180deg,#000 84%,rgba(0,0,0,.15))}
body.page-video #itemsBox.smp-fit .fl .k{font-size:10px;padding:1px 5px;min-width:34px}
body.page-video #itemsBox.smp-fit .fl .v{font-size:11.5px;line-height:1.55}
body.page-video #itemsBox.smp-fit .it-vote{margin-top:6px}
body.page-video #itemsBox.smp-fit .it-vote .q,
body.page-video #itemsBox.smp-fit .it-vote .vb,
body.page-video #itemsBox.smp-fit .it-vote .tip{font-size:10.5px}

/* v1.4.4 视频示例卡正文做预览裁剪：一屏能多放条目，底部不留大片空白。
   只命中 .smp-fit 列表（示例），生成结果卡仍显示完整七字段。 */
body.page-video #itemsBox.smp-fit .it .it-b-in{max-height:118px;overflow:hidden;
  -webkit-mask-image:linear-gradient(#000 74%,transparent);mask-image:linear-gradient(#000 74%,transparent)}