/* 全能AI生图 · 桌面端样式（风格 C）· 无外链资源，空状态样例图走本地 assets/sample.png */
/* ==========================================================================
   ★ 2026-10-16 设计 token —— A 方案（浅色极客风，用户选定）
   照抄极客智坊那套语言，量化如下：
     · 底 #F7F8FA 浅冷灰把纯白卡片"托"起来；卡片之间**只用 1px #EBEDF0 描边分区，不用阴影**
     · 主色绿 #22C55E 只出现在三处：Logo、主按钮、激活下划线；其余一律灰阶（占比 <3%）
     · 圆角只有小圆角（卡 8 / 控件 6），✗ 不用大圆角、✗ 不用胶囊、✗ 不用渐变
     · 字号只三档（22 标题 / 14 正文 / 12 小字），层级靠字重与灰度拉，不靠字号
   ========================================================================== */
:root{
  --bg:#F7F8FA;          /* 页面底 */
  --card:#FFFFFF;        /* 卡片面 */
  --line:#EBEDF0;        /* 1px 描边（替代阴影来分区） */
  --txt:#1A1A1A;         /* 一级文字 */
  --sub:#556070;         /* 二级文字（v8 P2-4：原来 #6B7280 在浅底上偏淡） */
  --a1:#22C55E;          /* 主色（唯一强调色） */
  --a2:#16A34A;          /* 主色按压态 */
  --grad:#22C55E;        /* ✗ 极客无渐变 ⇒ 纯色（原来是蓝色渐变） */
  --ok:#22C55E;
  --bad:#DC2626;
  --r:8px;               /* 小圆角 */
  --shadow:0 1px 3px rgba(16,24,40,.04);
}

*{box-sizing:border-box}
:root{--shadow:0 1px 3px rgba(16,24,40,.04)}
html,body{margin:0;height:100%}
/* ★ 2026-10-20（用户 iPhone 实拍：界面被切掉一半、要左右拖）：
   iOS Safari 对 **字号 <16px 的输入框/下拉** 在聚焦时会自动放大整页（不是缩放元素，是缩放页面），
   放大后只看得见布局的一部分 —— 客户看到的就是"左边被切掉"。
   根因是 body 用 14px，而 input/textarea/select 是 font:inherit ⇒ 14px。
   修法：手机端表单控件一律 16px（下面 @media 里有专门一段），另禁掉横向文字自动放大。 */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow:hidden;overscroll-behavior:none}
body{
  background:var(--bg);color:var(--txt);overflow:hidden;
  font:14px/1.55 -apple-system,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;   /* iOS 点一下闪一块灰，像没做样式 */
  text-size-adjust:100%;
}
.hide{display:none!important}

/* 禁用浏览器默认控件外观，全部自绘 */
button,input,select,textarea{
  appearance:none;-webkit-appearance:none;
  font:inherit;color:inherit;background:none;border:none;outline:none;margin:0;
}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#DCE0E5;border-radius:8px;border:3px solid var(--bg)}

/* ================= 骨架 ================= */
.app{display:flex;height:100vh;height:100dvh}
/* ★ 2026-10-16：手机浏览器里 100vh 是"最大视口"（地址栏收起时的高度），
   地址栏一出现底部就被截掉 ⇒ 内容滚不到底（用户实测"滑也滑不动"）。
   100dvh 跟随实际可视高度；下面的 @supports 是给老浏览器的兜底。 */
.side{flex:0 0 196px;width:196px;display:flex;flex-direction:column;gap:14px;
  background:#F2F4F7;border-right:1px solid var(--line);padding:14px 12px}
.brand{display:flex;align-items:center;gap:9px;padding:6px 6px 2px;font-weight:700}
.logo{width:22px;height:22px;border-radius:7px;background:var(--grad);box-shadow:0 4px 14px rgba(34,197,94,.45);position:relative}
/* ★ v8 P2-6：原来只是一个纯色圆角方块，没有图形标识 ⇒ 加一枚白色四角星（AI「生成」的通用意象） */
.logo::after{content:"";position:absolute;inset:23%;background:#fff;opacity:.96;
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}
.logo.lg{width:30px;height:30px;border-radius:10px}
.nav{display:flex;flex-direction:column;gap:4px;flex:1}
.nav-item{display:block;width:100%;text-align:left;padding:10px 12px;border-radius:10px;
  color:var(--sub);cursor:pointer;transition:.15s}
.nav-item:hover{background:#E5E7EB;color:var(--txt)}
.nav-item.on{color:var(--txt);background:linear-gradient(90deg,rgba(34,197,94,.24),rgba(34,197,94,.05));
  box-shadow:inset 0 0 0 1px #EBEDF0}
.side-foot{font-size:12px;color:var(--sub);padding:9px 8px 4px;border-top:1px solid var(--line)}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 22px;background:#FFFFFF;border-bottom:1px solid var(--line)}
.topbar h2{margin:0;font-size:16px;font-weight:600}
.tb-right{display:flex;align-items:center;gap:10px}
.chip{font-size:13px;color:var(--sub);background:var(--card);border:1px solid var(--line);
  border-radius:999px;padding:5px 12px}
.chip b{color:var(--txt)}
.chip.ghost{background:transparent}
/* ★ 2026-10-20：顶部「登录 / 注册」是一颗可点的胶囊（原来只是个 <span> 文字，访客没得点） */
.chip.acc{background:var(--acc);border-color:var(--acc);color:#04120A;font-weight:700;
  cursor:pointer;-webkit-tap-highlight-color:transparent}
.chip.acc:active{transform:scale(.97)}

/* ★ 2026-10-20（用户定规：首页不设成登录页）：登录改成**遮罩弹层**，
   底下的应用仍然在（浏览不用登录），只有真要动手时才盖上来。 */
.login-modal{position:fixed;inset:0;z-index:90;background:rgba(4,8,6,.62);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.login-modal .login-card{box-shadow:0 30px 80px rgba(0,0,0,.6)}
/* 弹层里补一个「先随便看看」——不想注册的人要能退出去 */
.login-skip{display:block;width:100%;margin-top:2px;background:transparent;border:0;
  color:var(--sub);font-size:12.5px;padding:6px 0;cursor:pointer;text-decoration:underline}

/* ★ 2026-10-20：创作页的「完整价目表」与「联系客服」——
   价目折叠起来不占屏，客服常驻一行（访客也要看得到）。 */
.price-book{margin:6px 0 2px;font-size:12.5px;color:var(--sub)}
.price-book>summary{cursor:pointer;color:var(--acc);outline:none;padding:4px 0}
.price-book>summary::-webkit-details-marker{display:none}
.price-book>summary::before{content:'▸ ';display:inline-block;transition:transform .15s}
.price-book[open]>summary::before{transform:rotate(90deg)}
.pb-body{margin:8px 0 4px;overflow-x:auto}
.pb-body table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}
.pb-body th,.pb-body td{border:1px solid var(--line);padding:6px 8px;text-align:center;
  white-space:nowrap;font-size:12.5px}
.pb-body th{background:var(--card);color:var(--txt);font-weight:600}
.pb-body td.cur{color:var(--acc);font-weight:700}
.pb-note{margin:2px 0 0;font-size:11.5px;color:var(--sub)}
.kefu-line{margin:10px 0 0;font-size:12.5px;color:var(--sub)}
.kefu-btn{background:transparent;border:0;color:var(--acc);font-size:12.5px;font-weight:600;
  padding:2px 4px;cursor:pointer;text-decoration:underline}
.kefu-no{color:var(--txt);font-variant-numeric:tabular-nums}
.avatar{width:32px;height:32px;border-radius:50%;background:#E5E7EB;color:#374151;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}

.body{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:18px 22px;
  -webkit-overflow-scrolling:touch;overscroll-behavior-y:contain}
/* min-height:0 是关键：flex 子项默认 min-height:auto 会撑开、导致父容器滚不动 */
.pane{display:none}
.pane.on{display:block}
.statusbar{display:flex;align-items:center;gap:6px;padding:9px 22px;font-size:12.5px;
  color:var(--sub);background:#FFFFFF;border-top:1px solid var(--line)}
.statusbar b{color:var(--txt)}
.grow{flex:1}
.sep{opacity:.45}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.pane-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:14px}
.pane-head h3{margin:0 0 4px;font-size:15px}
.pane-acts{display:flex;gap:8px}
.hint{color:var(--sub);font-size:12px;margin:0}
.lbl{font-size:12.5px;color:var(--sub)}
.row{display:flex;align-items:center;gap:8px}
.row.between{justify-content:space-between}
.row.gap{gap:10px}
.small{font-size:12px;color:var(--sub)}
.wide{width:100%}
.hr{border:none;border-top:1px solid var(--line);margin:16px 0}

/* ================= 表单控件 ================= */
.input{width:100%;background:#F2F4F7;border:1px solid var(--line);border-radius:10px;
  padding:10px 12px;color:var(--txt);transition:.15s}
.input:focus{border-color:#16A34A;box-shadow:0 0 0 3px rgba(34,197,94,.14)}
.ta{min-height:132px;resize:vertical;line-height:1.6}
.counter{font-size:12px;color:var(--sub)}
/* 2026-10-17：PPT 页「0 / 10000」和费用提示在窄屏被拆行挤成一团
   ⇒ 计数不折行，费用提示**独占第二行**整行显示（✗ 不用 ellipsis 截断：截成
   「分析 ¥0.10（出图时抵…」比换行更糟，客户看不到单价） */
#pptTextCount{white-space:nowrap}
#pptPriceHint{flex:1 1 100%;white-space:normal;line-height:1.55}
#pptCostHint{line-height:1.6}
.row.between.small{flex-wrap:wrap;gap:3px 10px;align-items:baseline}
.counter b{color:var(--txt)}
.field{display:flex;flex-direction:column;gap:5px}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sel{position:relative}
.sel::after{content:"";position:absolute;right:13px;top:50%;width:7px;height:7px;
  border-right:1.6px solid var(--sub);border-bottom:1.6px solid var(--sub);
  transform:translateY(-70%) rotate(45deg);pointer-events:none}
.sel select{padding-right:32px;cursor:pointer}
.sel select option{background:#FFFFFF;color:#1A1A1A}

.btn-primary{background:var(--grad);color:#fff;font-weight:600;border-radius:8px;
  padding:11px 16px;cursor:pointer;transition:.15s;box-shadow:0 6px 18px rgba(34,197,94,.28)}
.btn-primary:hover{filter:brightness(1.08)}
.btn-primary:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}
.btn-ghost{background:#F2F4F7;border:1px solid var(--line);color:var(--txt);
  border-radius:11px;padding:10px 14px;cursor:pointer;transition:.15s}
.btn-ghost:hover{background:#EBEDF0;border-color:#DCE0E5}
/* 空状态没有可预览的作品：按钮置灰且不响应点击 */
.btn-ghost:disabled,.btn-ghost:disabled:hover{opacity:.4;cursor:not-allowed;
  background:#F9FAFB;border-color:#DCE0E5;color:#6B7280}
.btn-danger{background:#FEF3F2;border:1px solid #B42318;color:#DC2626;
  border-radius:11px;padding:10px 14px;cursor:pointer}
.btn-danger:hover{background:#FEF3F2}
.sm{padding:8px 12px;font-size:13px;border-radius:10px}

/* ================= 生图页 ================= */
.gen-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px, 32%);gap:16px;align-items:start}
.gen-grid.no-pv{grid-template-columns:minmax(0,1fr)}   /* 预览卡收起时不留空列 */
.gen-left{display:flex;flex-direction:column;gap:10px}

.drop{border:1.5px dashed #DCE0E5;border-radius:12px;background:#F2F4F7;padding:16px;
  text-align:center;cursor:pointer;transition:.15s}
.drop:hover,.drop.over{border-color:var(--a2);background:#F2F4F7}
.drop.has{border-style:solid;border-color:#EBEDF0}
.drop-in{display:flex;flex-direction:column;gap:2px;color:var(--sub);font-size:12.5px}
.drop-in b{color:var(--txt);font-size:13px}
/* ★ 2026-10-20：需要参考图的模板（销售战报）—— 点了模板就把上传区点亮并滚到这里，
   否则客户只会看到提示词，不知道输入其实是"两张图"。
   注：CSP 只允许 'self' 的样式表，动画写在 CSS 里，不用内联。 */
.drop.need{border-color:var(--a1);background:#F1FBF4;border-style:solid;
  animation:dropNeed 1.8s ease-in-out infinite}
.drop.need .drop-in b{color:var(--a2)}
@keyframes dropNeed{0%,100%{box-shadow:0 0 0 3px rgba(34,197,94,.10)}
  50%{box-shadow:0 0 0 8px rgba(34,197,94,.16)}}
.ref-list{display:flex;flex-wrap:wrap;gap:8px}
.ref{position:relative;width:62px;height:62px;border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.ref img{width:100%;height:100%;object-fit:cover;display:block}
.ref-x{position:absolute;top:2px;right:2px;width:18px;height:18px;border-radius:50%;
  background:rgba(0,0,0,.62);color:#fff;font-size:12px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center}

.progress{display:flex;flex-direction:column;gap:6px}
.bar{height:6px;border-radius:999px;background:#F2F4F7;border:1px solid var(--line);overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--grad);border-radius:999px;transition:width .4s}

/* 右侧大预览 */
.preview-card{display:flex;flex-direction:column;gap:12px}
.preview{position:relative;display:flex;align-items:center;justify-content:center;
  min-height:380px;background:#F2F4F7;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.pv-img{display:block;max-width:100%;max-height:58vh;cursor:zoom-in}
/* ★ 2026-10-20（用户 iPhone：「界面体验极差」）：
   这两条原来把作品说明压成单行省略号（390 屏上只剩 24px 宽）、
   底部按钮行又不换行，后加的「分享给朋友，双方各得 ¥3」直接冲出右边被裁掉。
   现在：说明允许折行并占满剩余宽度；按钮行可换行；邀请链接在手机上单独一行。 */
.preview-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:9px 12px;min-width:0}
.prev-cap{font-size:12.5px;color:var(--sub);line-height:1.5;flex:1 1 160px;min-width:0;
  white-space:normal;word-break:break-word}
.prev-btns{display:flex;flex-wrap:wrap;gap:8px;align-items:center;min-width:0}
.prev-btns>button{flex:0 0 auto}
.pv-invite{font-size:12.5px;color:var(--a2);text-decoration:none;line-height:1.5;
  overflow-wrap:anywhere}
@media (max-width:760px){
  .pv-invite{flex:1 1 100%}      /* 手机上不跟按钮抢宽度，独占一行 */
}
.prev-btns{display:flex;gap:8px;flex:0 0 auto}
.spin{color:var(--sub);font-size:13px}
.spin.big{padding:40px 0}

/* 空状态：摆仓库里现成的真实出图当样例（web/app/assets/sample.png），不再是空网格 + 光斑 */
.pv-empty{width:100%;height:100%;min-height:380px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#FFFFFF,#F7F8FA 58%,#F9FAFB)}
.pv-sample{display:block;max-width:100%;max-height:58vh}
/* 样例图缺失 / 预览出错时的底纹（不冒充作品） */
.pv-empty.noimg{background:repeating-linear-gradient(135deg,rgba(16,24,40,.02) 0 2px,transparent 2px 12px),
  linear-gradient(160deg,#FFFFFF,#F7F8FA 58%,#F9FAFB)}

/* ================= 作品页 ================= */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:12px}
.work{background:var(--card);border:1px solid var(--line);border-radius:12px;
  overflow:hidden;cursor:pointer;transition:.15s}
.work:hover{transform:translateY(-2px);border-color:#DCE0E5}
.work-img{aspect-ratio:3/4;background:#F2F4F7;display:flex;align-items:center;justify-content:center;overflow:hidden}
.work-img img{width:100%;height:100%;object-fit:cover;display:block}
.work-img img.broken{opacity:.22}
.work-ph{color:var(--sub);font-size:12px}
.work-meta{padding:9px 10px 11px}
.work-p{margin:0 0 4px;font-size:12.5px;line-height:1.45;height:36px;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.work-t{font-size:11.5px;color:var(--sub)}
.empty{margin-top:12px;padding:34px;text-align:center;color:var(--sub);font-size:13px;
  background:var(--card);border:1px dashed var(--line);border-radius:12px}

/* ================= 模板 / PPT ================= */
.tpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:12px}
.tpl{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);
  border-radius:14px;overflow:hidden;cursor:pointer}
.tpl-h{font-weight:600}
.tpl-p{flex:1;margin:0;font-size:12.5px;line-height:1.5;color:var(--sub)}
.groups{display:flex;flex-direction:column;gap:10px}
.group{display:flex;align-items:center;gap:14px;padding:13px 15px;
  background:var(--card);border:1px solid var(--line);border-radius:12px}
.g-title{flex:0 0 160px;font-weight:600}
.g-sub{flex:1;font-size:12.5px;color:var(--sub)}
.notice{margin-top:12px;padding:12px 14px;font-size:12.5px;color:var(--sub);
  background:#F9FAFB;border:1px solid var(--line);border-left:3px solid var(--a2);border-radius:10px}

/* ================= 钱包 / 设置 ================= */
.wallet-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.big-num{display:flex;flex-direction:column;gap:4px}
.big-num b{font-size:30px;display:inline-block;margin-right:4px;color:#16A34A}
.steps{margin:8px 0 12px;padding-left:18px;font-size:13px;line-height:1.9;color:var(--sub)}
.form{display:flex;flex-direction:column;gap:10px}
.form .row.between b{font-size:13px}

/* ================= 登录 ================= */
/* ★★ 2026-10-19 修（用户真机两次反馈：「注册输入框被键盘顶上去，看不到输对没」）：
   根因不是"没滚动"，而是 flex 的 align-items:center ——
   键盘弹起后视口变矮，垂直居中的表单被往下挤出，**溢出部分被裁掉且滚不到**（flex 居中 + 溢出 = 顶部永久不可见）。
   改法：居中的活儿交给 .login-card 的 margin:auto，容器只负责滚动，
   底部按 --kb-h（键盘高度，JS 实时写入）留白，聚焦的输入框就始终能滚进来。 */
.login-wrap{height:100vh;height:100dvh;display:flex;align-items:flex-start;justify-content:center;
  overflow-y:auto;-webkit-overflow-scrolling:touch;padding:18px 0 max(18px, var(--kb-h, 0px));
  background:radial-gradient(900px 500px at 18% -10%,rgba(34,197,94,.16),transparent),
             radial-gradient(700px 460px at 110% 110%,rgba(34,197,94,.12),transparent),var(--bg)}
.login-card{width:376px;margin:auto 0;display:flex;flex-direction:column;gap:7px;padding:20px;
  background:var(--card);border:1px solid var(--line);border-radius:18px;
  box-shadow:0 24px 60px rgba(0,0,0,.5)}
.login-brand{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.login-brand h1{margin:0;font-size:19px}
.login-brand p{margin:2px 0 0;font-size:12.5px;color:var(--sub)}
.login-msg{min-height:18px;font-size:12.5px;color:#DC2626}
.login-foot{font-size:12px;color:var(--sub);text-align:center}
/* ★ 2026-10-19：页脚的法律链接原来只有 38px 高、11.5px 字，手机上很难点中。
   给链接留出 8px 上下内边距（点击区 ≈ 34px），字号同步提到 12px（iOS 可读下限）。 */
.login-foot a{display:inline-block;padding:5px 4px}
/* ★ 2026-10-17 注册页签（用户报障"只有登录、没有注册"） */
.login-tabs{display:flex;gap:6px;background:rgba(255,255,255,.04);border:1px solid var(--line);
  border-radius:12px;padding:4px;margin-bottom:4px}
.login-tab{flex:1;height:34px;border:0;border-radius:9px;background:transparent;color:var(--sub);
  font-size:13.5px;font-weight:600;cursor:pointer;transition:background .15s,color .15s}
.login-tab.on{background:var(--primary,#22C55E);color:#08130C;box-shadow:0 4px 14px rgba(34,197,94,.28)}
.login-tab:hover{color:var(--fg,#fff)}
.login-hint{font-size:11.5px;color:var(--sub);line-height:1.6;margin-top:-2px}

/* ================= 大图 / 提示 ================= */
.lightbox{position:fixed;inset:0;z-index:60;padding:26px;background:rgba(16,24,40,.82);
  display:flex;align-items:center;justify-content:center}
.lb-box{width:100%;max-width:1120px;display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px;
  padding:16px;background:var(--card);border:1px solid var(--line);border-radius:16px}
.lb-img{display:flex;align-items:center;justify-content:center;min-height:420px;overflow:hidden;
  background:#F2F4F7;border-radius:12px}
.lb-img img{display:block;max-width:100%;max-height:72vh}
.lb-side{display:flex;flex-direction:column;gap:10px}
.lb-side h3{margin:0;font-size:15px}
.lb-prompt{flex:1;margin:0;overflow:auto;font-size:13px;line-height:1.6;color:var(--sub)}
.toasts{position:fixed;right:18px;bottom:18px;z-index:90;display:flex;flex-direction:column;gap:8px}
.toast{max-width:320px;padding:10px 14px;font-size:13px;background:#FFFFFF;
  border:1px solid var(--line);border-left:3px solid var(--a2);border-radius:10px;
  box-shadow:0 10px 26px rgba(0,0,0,.45);transition:.28s}
.toast.bad{border-left-color:var(--bad)}
.toast.out{opacity:0;transform:translateY(6px)}



/* ---------- 对话（个人助手）：渠道对客户不可见，只有模型名与售价 ---------- */
.chat-wrap{display:flex;gap:14px;height:calc(100vh - 168px);height:calc(100dvh - 168px);min-height:420px}
/* ★ 手机端 100vh 会把高度算到"地址栏收起"的最大值 ⇒ 底部被截（与 .app 同一个坑） */
.chat-side{width:212px;flex:0 0 212px;display:flex;flex-direction:column;gap:10px}
.sess-list{overflow:auto;flex:1;display:flex;flex-direction:column;gap:6px}
.sess{padding:9px 10px;border:1px solid var(--line);border-radius:10px;cursor:pointer;background:var(--card)}
.sess.on{border-color:var(--a1)}
.sess-t{font-size:13px;color:var(--txt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sess-m{font-size:12px;color:var(--sub);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-main{flex:1;display:flex;flex-direction:column;gap:10px;min-width:0}
.chat-head{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.chat-head .sel{display:flex;gap:8px;flex:1;min-width:260px}
.chat-head #chatModelSearch{max-width:210px}
.chat-head select{flex:1}
.chat-msgs{flex:1;overflow:auto;display:flex;flex-direction:column;gap:10px;padding:12px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
/* 旧的气泡规则（深色时代 + 3 个类的高具体度）已整批移除：
   视觉全部由下方「微信聊天风」那一块负责，否则 #DCE0E5 会把白色气泡压掉。 */
.meta{font-size:12px;color:var(--sub);margin-top:4px}
.chat-input{display:flex;flex-direction:column;gap:6px}
.chat-input .ta{height:82px}

/* ---------- 生图页内二级导航（模板 / 生图 / PPT） ---------- */
.tabs{display:flex;gap:8px;margin:0 0 14px;border-bottom:1px solid var(--line);padding-bottom:2px}
.tab{background:none;border:none;color:var(--sub);font-size:14px;padding:8px 14px;cursor:pointer;border-radius:10px 10px 0 0}
.tab:hover{color:var(--txt)}
.tab.on{color:var(--a1);font-weight:600;background:linear-gradient(180deg,rgba(34,197,94,.16),rgba(34,197,94,0));box-shadow:inset 0 -2px 0 var(--a1)}

/* ★ 2026-10-17 创作页顶部分段控件重做（用户圈出：这块看着像渲染 bug）
   原来选中态是三重叠加：绿字 + 绿渐变块 + 绿下划线；那个渐变块是 border-radius:10px 10px 0 0，
   悬在文字上方又不与文字对齐 ⇒ 像一块浮着的绿色残影。
   现在：一个容器（浅底 + 描边 + 圆角），选中只留**一个**指示（白底胶囊 + 阴影 + 加粗）。
   作用域限定 #genTabs ⇒ 作品页等其它地方的 .tabs/.tab 不受影响。 */
#genTabs{flex:0 0 auto;display:flex;gap:4px;margin:0 0 14px;padding:3px;background:#EEF1F6;
  border:1px solid var(--line);border-radius:12px;border-bottom:1px solid var(--line)}
#genTabs .tab{flex:1;font-size:14px;font-weight:600;
  /* ★ 高度写死 + flex 居中：这个按钮的高度算不到文字那一行（padding 9+9 就把它占满成 18px，
     文字顶到胶囊边），靠 padding 撑高度不可靠 ⇒ 直接给高度，用 flex 把字居中，结果可预期。 */
  height:38px; padding:0; display:flex; align-items:center; justify-content:center;
  color:#5A6472;background:transparent;border:0;border-radius:9px;box-shadow:none}
#genTabs .tab:hover{color:var(--txt)}
#genTabs .tab.on{color:#15803D;background:#fff;font-weight:700;
  box-shadow:0 1px 2px rgba(16,24,40,.06),0 2px 6px rgba(16,24,40,.10),0 0 0 1px rgba(16,24,40,.05)}
.gtab{display:none}
.gtab.on{display:block}

/* ---------- 个人助手 ---------- */
.agent-wrap{display:flex;gap:14px;min-height:420px}
.agent-side{width:212px;flex:0 0 212px;display:flex;flex-direction:column;gap:10px}
.agent-main{flex:1;min-width:0}
.ch-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0}
.ch-info{display:flex;flex-direction:column;gap:2px}
.ok-txt{color:var(--ok)}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px}
.check{display:flex;flex-direction:column;gap:2px;border:1px solid var(--line);border-radius:10px;padding:9px 11px;
  background:var(--card);cursor:pointer}
.check input{margin-right:6px}
.check b{font-size:13px;font-weight:600}
.check span{font-size:12px;color:var(--sub);line-height:1.45}
.check:has(input:checked){border-color:var(--a1)}
.fields.one{grid-template-columns:1fr}
.wx-box{display:flex;gap:16px;align-items:flex-start;padding:12px;border:1px dashed var(--line);border-radius:var(--r);margin-top:8px}
.wx-qr{width:190px;height:190px;flex:0 0 190px;border-radius:12px;background:#fff;display:flex;align-items:center;
  justify-content:center;overflow:hidden}
.wx-qr img{width:100%;height:100%;object-fit:contain}
.wx-tip{display:flex;flex-direction:column;gap:8px;font-size:13px;line-height:1.6}
.wx-tip a.btn-primary{align-self:flex-start;text-decoration:none}

/* ==================================================================
   ★ 2026-10-16 结构修正：整块媒体查询挪到**文件末尾**。
   原来它排在基础规则之前 ⇒ 同具体度按源码顺序，后面的基础规则把它整段盖掉，
   等于手机上一直在跑桌面布局（用户实测：「布局对吗？」「滑也滑不动」）。
   ✗ 以后新增移动端规则一律追加到本块内部，不要再往前插。
   ================================================================== */

/* ==========================================================================
   ★ 2026-10-16 用户三条规格
   ① 对话页 = 微信聊天风  ② 作品页分选项卡  ③ 生图页参考图缩略图置于提示词上方、可放大
   （本块必须排在 
/* ---- 「＋ 新对话」小按钮（用户：原来那个太大了） ---- */
.btn-mini{display:inline-flex;align-items:center;gap:3px;background:#FFFFFF;color:#1A1A1A;
  border:1px solid var(--line);border-radius:6px;font-size:13px;font-weight:500;
  height:28px;padding:0 10px;line-height:1;cursor:pointer;
  flex:0 0 auto;align-self:flex-start}   /* ★ 侧栏是 flex 列，不加这两条会被拉伸到 60px 高 */
.btn-mini:hover{background:#F2F4F7}

/* ---- 输入框上方的功能按钮排（照元宝：横向排列、可左右滑动） ---- */
.chip-row{display:flex;flex-wrap:wrap;gap:6px 8px;padding:6px 0 8px;
  /* ★ 2026-10-19 线上实测（390 宽）：7 个胶囊放不下，第 7 个「技能」被裁成半个字；
     先试过"横向滚动 + 右侧渐隐"，实测仍露出半个字 —— 客户根本看不出还有第 7 个入口。
     改成换行：全部一眼可见，代价只是多占约 40px 高度（消息区本来就富余）。 */
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.chip-row::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;display:inline-flex;align-items:center;height:32px;padding:0 14px;
  background:#F2F2F2;color:#1A1A1A;border:0;border-radius:999px;font-size:13.5px;
  font-weight:500;white-space:nowrap;cursor:pointer;transition:background .15s}
.chip:active{background:#E4E6EA}
.chip.on{background:#E8F8EE;color:#14532D}


/* ==========================================================================
   ★ 2026-10-16 对话页重做 —— 严格按元宝截图的版式语言：
     · 一列到底，页面上**没有分栏**；
     · 顶部只有一行：左 ≡ 菜单 / 中标题 / 右动作（很轻，不占高度）；
     · 模型选择**不在顶部**，缩成输入框下方一行小字（点开才展开）；
     · 底部：功能 chip 排（可滑）+ 白色胶囊输入框 + 发送键在框内右侧。
   ========================================================================== */
.wx-wrap{display:flex;flex-direction:column;height:100%;min-height:0;background:#FFFFFF}
.wx-top{display:flex;align-items:center;gap:10px;height:46px;padding:0 12px;
  border-bottom:1px solid var(--line);background:#FFFFFF;flex:0 0 auto}
.wx-title{flex:1;text-align:center;font-size:16px;font-weight:600;color:#1A1A1A}
.wx-topacts{display:flex;align-items:center;gap:6px}
.wx-bal{font-size:12px;color:var(--sub);white-space:nowrap}
.ico-btn{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;
  background:transparent;color:#1A1A1A;border:0;border-radius:6px;font-size:17px;line-height:1;
  cursor:pointer;flex:0 0 auto}
.ico-btn:hover{background:#F2F4F7}
.wx-wrap .chat-msgs{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:#FFFFFF;padding:14px 12px 6px}
.wx-input{flex:0 0 auto;background:#FFFFFF;border-top:1px solid var(--line);padding:0 12px 10px;
  display:flex;flex-direction:column;gap:6px}
.wx-box{display:flex;align-items:flex-end;gap:8px;background:#F7F8FA;border:1px solid var(--line);
  border-radius:22px;padding:6px 6px 6px 14px}
.wx-ta{flex:1;border:0;outline:0;background:transparent;resize:none;font:15px/1.5 inherit;
  color:#1A1A1A;min-height:26px;max-height:110px;padding:5px 0}
.wx-send{flex:0 0 auto;background:var(--a1);color:#fff;border:0;border-radius:999px;
  font-size:14px;font-weight:600;padding:8px 16px;cursor:pointer;line-height:1.2}
.wx-send:disabled{opacity:.5}
.wx-sub{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--sub);flex-wrap:wrap}
.wx-agent{color:#374151}
.wx-model{position:relative;display:inline-flex;align-items:center}
.wx-model select{appearance:none;-webkit-appearance:none;border:0;background:transparent;
  font:12px inherit;color:var(--sub);padding:0 14px 0 0;max-width:190px;cursor:pointer}
.wx-msearch{border:0;background:transparent;font:12px inherit;color:var(--sub);
  width:58px;outline:0;padding:0}
.wx-caret{position:absolute;right:2px;pointer-events:none;color:var(--sub);font-size:10px}
/* 会话抽屉 */
.wx-drawer{position:fixed;top:0;bottom:0;left:0;width:80%;max-width:320px;background:#FFFFFF;
  z-index:60;box-shadow:2px 0 16px rgba(16,24,40,.10);padding:14px 12px;overflow-y:auto;
  transition:transform .22s ease;transform:translateX(0)}
.wx-drawer.hide{display:block!important;transform:translateX(-102%)}
.wx-drawer-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.wx-mask{position:fixed;inset:0;background:rgba(16,24,40,.32);z-index:55}
.wx-mask.hide{display:none!important}

@media 之前 —— 媒体查询要留在文件最后才不被覆盖）
   ========================================================================== */

/* ---- ① 对话页：微信聊天风格 ---- */
.chat-msgs{background:#EDEDED;padding:12px 10px 4px;display:block}
.msg{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px;margin:0 0 16px}
.msg .av{flex:0 0 34px;width:34px;height:34px;border-radius:5px;background:#B9BEC7;color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;letter-spacing:0}
.msg .av.me{background:#22C55E}
.msg .bubble{background:#FFFFFF;color:#1A1A1A;border-radius:6px;padding:9px 12px;max-width:74%;
  font-size:15px;line-height:1.5;white-space:pre-wrap;word-break:break-word}
.msg.me{flex-direction:row-reverse}
.msg.me .bubble{background:#95EC69;color:#1A1A1A;border:0}   /* 微信自己的气泡就是这个绿 */
.msg .meta{flex-basis:100%;font-size:12px;color:#9AA0A6;padding:0 44px}
.msg.me .meta{text-align:right}
.msg.bad .bubble{background:#FDECEC;color:#B42318}
/* 微信底部输入栏：白底、上边一条细线、发送键在右下 */
.chat-input{background:#FFFFFF;border-top:1px solid var(--line);padding:8px 10px;gap:6px}
.chat-input .ta{background:#FFFFFF;border:1px solid var(--line);border-radius:6px;min-height:44px}
.chat-head{background:#FFFFFF;border-bottom:1px solid var(--line)}

/* ---- ② 作品页选项卡 ---- */
#workTabs{margin:0 0 12px}

/* ---- ③ 参考图缩略图 + 放大查看 ---- */
.ref-list{display:flex;flex-wrap:wrap;gap:8px;margin:-2px 0 12px}
.ref-list .ref{position:relative;width:74px;height:74px;border-radius:8px;overflow:hidden;
  border:1px solid var(--line);background:#F2F4F7}
.ref-list .ref img{width:100%;height:100%;object-fit:cover;cursor:zoom-in;display:block}
.ref-list .ref .ref-x{position:absolute;top:2px;right:2px;width:18px;height:18px;border:0;border-radius:50%;
  background:rgba(16,24,40,.62);color:#fff;font-size:12px;line-height:1;cursor:pointer;padding:0}
.lb{position:fixed;inset:0;z-index:99;background:rgba(16,24,40,.86);display:flex;
  align-items:center;justify-content:center;padding:18px}
.lb img{max-width:100%;max-height:100%;border-radius:8px;box-shadow:0 8px 32px rgba(0,0,0,.3)}
.lb-x{position:absolute;top:16px;right:18px;width:38px;height:38px;border:0;border-radius:50%;
  background:rgba(255,255,255,.94);color:#1A1A1A;font-size:20px;line-height:1;cursor:pointer}

@media (max-width:720px){
  /* ★ 2026-10-16 用户实测打回：手机上对话页还是**桌面左右分栏** —— 侧栏 `.chat-side` 死死占 212px，
     主区被挤成一条；`.chat-wrap` 又用硬编码 vh 撑高 ⇒ 观感崩。
     手机端改成：上下堆叠，侧栏收成一行可横向滚，消息区自己撑满、能滚。 */
  .chat-wrap{flex-direction:column;height:auto;min-height:0;gap:10px}
  .chat-side{width:100%;flex:0 0 auto;flex-direction:row;gap:8px;overflow-x:auto;padding-bottom:2px}
  .chat-side .input{min-width:150px;flex:1}
  .chat-side .btn{white-space:nowrap;flex:0 0 auto}
  .chat-main{min-height:0}
  .chat-log{flex:1;min-height:46vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .chat-head{flex-wrap:wrap}
  .chat-head .sel{flex-direction:column;min-width:0;flex:1 1 100%;gap:6px}
  .chat-head #chatModelSearch{max-width:none}
  .chat-input .ta{height:70px}
  .chat-input .hint{display:none}       /* 手机的软键盘没有 Shift，这行提示只会占地方 */
  .statusbar{font-size:12px;color:#98A2B3}

  .app{flex-direction:column}
  .side{flex:0 0 auto;width:100%;flex-direction:row;align-items:center;gap:8px;
    padding:8px 10px;border-right:none;border-bottom:1px solid var(--line)}
  .brand{padding:0;flex:0 0 auto}
  .brand span:last-child{display:none}
  .nav{flex-direction:row;flex-wrap:nowrap;overflow-x:auto;gap:5px;flex:1;padding-bottom:2px}
  .nav-item{width:auto;white-space:nowrap;padding:8px 11px}
  .side-foot{display:none}
  .topbar{padding:10px 12px;gap:8px}
  .topbar h2{font-size:15px}
  .tb-right{flex-wrap:wrap;justify-content:flex-end;gap:6px}
  .chip{font-size:12px;padding:4px 9px}
  .avatar{width:28px;height:28px}
  .body{padding:12px 12px calc(12px + env(safe-area-inset-bottom));min-height:0;
    overflow-y:auto;-webkit-overflow-scrolling:touch}
  .grid{grid-template-columns:repeat(auto-fill,minmax(calc(50% - 8px),1fr))!important}
  .work-img{aspect-ratio:1/1}
  .gen-grid{grid-template-columns:minmax(0,1fr);gap:12px}
  .wk-list{grid-template-columns:1fr}
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom, 0px))}
  .preview{min-height:250px}
  .pv-img{max-height:46vh}
  .pv-empty{min-height:250px}
  .pv-sample{max-height:46vh}
  .wallet-grid{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
  .tpl-grid{grid-template-columns:1fr}
  .g-title{flex:0 0 92px}
  .statusbar{padding:8px 12px;font-size:11.5px}
  .login-wrap{padding:16px}
  .login-card{width:100%;max-width:376px;padding:20px}
  .lightbox{padding:10px}
  .lb-box{grid-template-columns:minmax(0,1fr);max-height:92vh;overflow:auto;gap:12px}
  .lb-img{min-height:210px}
  .lb-img img{max-height:52vh}
  .toasts{left:12px;right:12px;bottom:12px}
  .toast{max-width:none}
}

/* ==========================================================================
   ★ 2026-10-16 手机端版式归位（用户："完全没有照我发的截图做"）
   根因有两条，不在配色上：
     1) 主导航「对话/生图/个人助手/作品/我的」原来在**左侧**，手机上被横排到页面顶部
        ⇒ 「对话」在顶栏、账户行、内容头里各出现一次，一共三层；
     2) 顶部账户行（余额/手机号/头像）+ 内容头 + 全局 tab 叠起来把输入区挤出视口，
        截图里根本看不到输入框。
   按既有规矩改：主力入口一律**常驻底部标签栏**，顶部只留一行。
   ========================================================================== */
@media (max-width: 760px) {
  .app { display: block; }                    /* 取消左右分栏 */
  .side {                                     /* 左导航 ⇒ 底部标签栏 */
    position: fixed; left: 0; right: 0; bottom: 0;
    height: 54px; width: auto; flex-direction: row; align-items: stretch;
    border-right: 0; border-top: 1px solid var(--line);
    background: #FFFFFF; z-index: 70;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .side .brand, .side .side-foot { display: none; }
  .nav { display: flex; flex-direction: row; width: 100%; }
  /* ★ 2026-10-17 用户实机反馈：「最底下的导航栏文字没有居中、看着不显眼」
     ⇒ 原来是继承了桌面那条 text-align:left（每个 flex 格子里文字贴左），未选中色还是浅灰、字重 400。
     现在：强制居中 + 未选中就 600 字重/深墨色，选中 700 字重 + 品牌色 + 顶部 2px 线。 */
  /* ★★ 2026-10-20 用户 iPhone 实拍（界面被切一半、要左右拖）的根因：
     iOS Safari 只要聚焦的输入框字号 < 16px 就**自动放大整页**。
     body 是 14px、控件又是 font:inherit ⇒ 一碰输入框页面就被放大，
     客户看到的是"布局只剩一部分"，而不是我们排错了版。
     手机端表单控件统一 16px（桌面仍 14px，不破坏紧凑感）。 */
  input, select, textarea { font-size: 16px; }
  /* 放大后的另一个后果：输入区太高，键盘一弹就只剩半屏可用 */
  .ta { min-height: 118px; }
  /* 点击延迟：iOS 上按钮要等 300ms 才响应，像"点不动" */
  button, .nav-item, .tpl, .tpl-use, .tpl-cat, .chip, .tab { touch-action: manipulation; }
  /* 刘海屏 / 灵动岛 / 底部横条：content 必须避开安全区（viewport-fit=cover 已开） */
  .topbar { height: calc(46px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px); }
  .main { padding-bottom: calc(54px + env(safe-area-inset-bottom, 0px)); }
  #gtab-draw { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  .wx-drawer { bottom: calc(54px + env(safe-area-inset-bottom, 0px)); }
  .side { padding-left: env(safe-area-inset-left, 0px);
          padding-right: env(safe-area-inset-right, 0px); }
  /* ★ 2026-10-20：iOS 键盘弹起时不会缩小布局视口，底部标签栏会浮在键盘上方、
     把「生成」按钮和输入框挤掉。app.js 用 visualViewport 检测到键盘后加 .kb-open：
     高度改用 --app-h（visualViewport.height），底栏先收起来，让输入区拿到整屏。
     ★ 必须写到 `#app.app` 这一级：外面还有一条 `#app.app{height:100%}`
       （特异性 1,1,0 > 0,1,0），只写 .app 会被它盖掉 —— 实测那样 app 只有 780px，
       而屏高 844px，底部就空出一条、内容还被裁。 */
  /* 用 html #app.app（1,1,1）压过文件后面那条 #app.app{height:100%}（1,1,0）——
     同特异性时"后面赢"，这条在媒体查询里、位置更靠前，所以必须多一级。 */
  html #app.app { height: var(--app-h, 100dvh); }
  body.kb-open .side { display: none; }
  body.kb-open .main { padding-bottom: 0; }
  body.kb-open #gtab-draw { padding-bottom: 24px; }

  .nav-item { flex: 1 1 0; font-size: 12.5px; padding: 0; border-radius: 0; border-bottom: 0;
    text-align: center; font-weight: 700; color: #1F2937; background: transparent;
    letter-spacing: .3px; }
  /* ★ 选中态补圆角+自身底色：桌面那条 .nav-item.on 的绿色渐变底在手机块里没被重置 ⇒
     手机上会出现一块**直角**的浅绿背景，而顶部 2px 指示线又比它短，看着头重脚轻。
     现在整块做成圆角胶囊，指示线与胶囊同宽。 */
  .nav-item.on { color: var(--a1); font-weight: 800; border-radius: 10px;
    background: linear-gradient(180deg, rgba(34,197,94,.16), rgba(34,197,94,.03));
    box-shadow: inset 0 2px 0 0 var(--a1); }  /* 选中态：圆角胶囊底 + 顶部 2px 线 */
  .main { padding-bottom: 54px; height: 100%; }
  /* 顶部那一行：只留 ≡ + 标题 + 头像 */
  .topbar { height: 46px; padding: 0 10px; }
  .tb-right .chip { display: none; }         /* 余额/手机号挪进「我的」页，别占顶部 */
  /* ★ 2026-10-20：但「登录 / 注册」是访客唯一的入口，绝不能被这条一起藏掉
     —— 上面那条把 .chip 全隐藏，访客进来会找不到任何登录按钮。 */
  .tb-right .chip.acc { display: inline-flex !important; }
  .tb-right .chip.acc.hide { display: none !important; }   /* 登录后仍然要能藏起来 */
  .topbar h2 { font-size: 16px; }
  .only-chat { display: inline-flex; }
  .body { min-height: 0; }
  .pane { min-height: 0; }
  .gtab { padding-bottom: 30px; }   /* ★ 2026-10-17：手机上「生成」按钮原来紧贴状态栏被切边 */
  /* ★ 2026-10-17：手机端把「生成」吸在底部常驻 —— 主力动作不该要滑到底才看得见 */
  /* ★ 2026-10-17：**不再吸底**——吸底会把「质量/中档」这些参数控件盖住（用户视角＝遮挡/错位）。
     改为给滚动区留出底部安全距离，让「生成」在流内完整可见、不压任何控件。
     底部安全距离同时覆盖：底部标签栏高度 + 价格提示/进度行的高度。 */
  /* 真实滚动容器是 #gtab-draw（.gtab），不是 #pane-gen .pg —— 现场探到再写，别猜选择器 */
  #gtab-draw { padding-bottom: 84px; }
  .wx-wrap { height: 100%; min-height: 0; display: flex; flex-direction: column; }
  .wx-wrap .chat-msgs { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
  .wx-input { flex: 0 0 auto; }
  /* 抽屉要避开底栏 */
  .wx-drawer { bottom: 54px; }
}
@media (min-width: 761px) { .only-chat { display: none; } }

/* ==========================================================================
   ★ 2026-10-16 高度链修复（实测：输入区 rect.top = 4165，屏高才 851）
   `height:100%` 要求**每一级父元素**都有确定高度，缺一环就退化成内容撑高，
   于是消息一多，输入框/功能排整个被推到屏幕外（截图里就是"没有输入区"）。
   整条链：html/body → #app → .main(.body → .pane) → .wx-wrap → .chat-msgs(自己滚)
   ========================================================================== */
html, body { height: 100%; }
#app.app { height: 100%; }
.main { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.topbar { flex: 0 0 auto; }
.body { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; }
.pane { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.pane > * { min-height: 0; }
#agViewChat { overflow: hidden; }
.wx-wrap { flex: 1 1 auto; min-height: 0; height: auto; overflow: hidden; }
.wx-wrap .chat-msgs { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.wx-input { flex: 0 0 auto; }
.gtab, #gtab-draw, #gtab-tpl, #gtab-ppt, #gtab-setimg {
  overflow-y: auto;
  min-height: 0;
  /* ★ 2026-10-19：iOS 上嵌套/弹性高度的滚动容器，缺这三行会「手指划不动」
     —— 本文件里其它滚动容器（.body / .pg / .chat-msgs …）都带着，只有这组漏了。 */
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overscroll-behavior-y: contain;
}

/* ==========================================================================
   ★ 2026-10-16 具体度修复（诊断实测 #pane-chat 的 computed display = block）
   `.pane { display:flex }` 是 1 个类，而页面里存在 `#pane-chat { display:block }`
   这类 **ID 选择器**（具体度 100）⇒ 我的 flex 从来没生效 ⇒ #pane-chat 里
   .wx-wrap 没有 flex 父容器，height/flex 全部退化，#chatMsgs 长到 12140px，
   输入区被推到屏幕外（这就是"看不到输入框"的真正根因）。
   这里统一用 ID 级选择器把五个页面容器都设成纵向 flex。
   ========================================================================== */
#pane-gen, #pane-works, #pane-agent, #pane-me {
  display: flex; flex-direction: column;
  flex: 1 1 auto; min-height: 0; overflow: hidden;
}
#agViewChat > .wx-wrap { flex: 1 1 auto; min-height: 0; }
#agViewChat #chatMsgs { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
#agViewChat .wx-input { flex: 0 0 auto; }

/* ==========================================================================
   ★ 2026-10-16 自伤修复：上一条规则把五个 #pane-* 全设成 display:flex，
   直接盖掉了「未选中页面隐藏」的逻辑 ⇒ **五个页面同时渲染叠在一起**
   （用户看到"对话页里混着生图工作台"，就是这么来的）。
   ID+伪类的具体度(110)才能压过上面那条 ID 规则(100)。
   ========================================================================== */
#pane-gen:not(.on), #pane-works:not(.on),
#pane-agent:not(.on), #pane-me:not(.on) { display: none; }

/* ==========================================================================
   ★ 2026-10-16 模型选择内嵌进输入框（用户：红框那块占比太大 ⇒ 做成蓝框位置的小按钮）
   原来输入框下方堆了三行（当前个人助手 / 搜模型 / 下拉 / 计数）把输入区顶得很高，
   现在这一整块收进「点小按钮弹出的面板」，输入框随之下移、底部只剩一行。
   ========================================================================== */
.wx-mpick{flex:0 0 auto;display:inline-flex;align-items:center;gap:3px;height:28px;
  max-width:180px;padding:0 9px;margin:0 2px 4px 0;background:#FFFFFF;border:1px solid var(--line);
  border-radius:999px;font-size:12.5px;color:#374151;cursor:pointer;white-space:nowrap;overflow:hidden}
.wx-mpick:hover{background:#F2F4F7}
.wx-mpick span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mpick-c{font-style:normal;color:var(--sub);font-size:9px;flex:0 0 auto}
/* 隐藏原生 select（保留给 JS 读写 value）*/
.msheet-sel{display:none}
.msheet{position:fixed;left:0;right:0;bottom:0;z-index:80;background:#FFFFFF;
  border-radius:14px 14px 0 0;max-height:72vh;display:flex;flex-direction:column;
  box-shadow:0 -4px 24px rgba(16,24,40,.14);padding:12px 12px calc(12px + env(safe-area-inset-bottom,0))}
.msheet.hide{display:none!important}
.msheet-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.msheet-search{width:100%;margin-bottom:8px}
.msheet-list{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
.msheet-item{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 10px;border-radius:8px;font-size:13px;color:#1A1A1A;cursor:pointer}
.msheet-item:hover,.msheet-item.on{background:#F2F4F7}
.msheet-item.on{box-shadow:inset 2px 0 0 0 var(--a1)}
.msheet-item small{color:var(--sub);font-size:12px;flex:0 0 auto}
.msheet-f{padding-top:8px;border-top:1px solid var(--line);margin-top:6px}

/* ==========================================================================
   ★ 2026-10-16 个人助手页一级 = 卡片（用户："现在只能创建，我不知道他有什么用"）
   卡面给人看的四件事：它是谁（头像+名字）、有没有接到微信/钉钉（状态点）、
   它是什么性格（人设摘要一行）、它能干什么（技能标签）。
   ========================================================================== */
.acard{display:flex;align-items:center;gap:10px;background:#FFFFFF;border:1px solid var(--line);
  border-radius:8px;padding:12px;margin-bottom:10px;cursor:pointer;transition:border-color .15s}
.acard:hover{border-color:#D0D5DD}
.acard.on{border-color:var(--a1);box-shadow:inset 3px 0 0 0 var(--a1)}
.acard-av svg{display:block}
.acard-av{flex:0 0 40px;width:40px;height:40px;border-radius:8px;background:#E8F8EE;color:#14532D;
  display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:600}
.acard-body{flex:1 1 auto;min-width:0}
.acard-name{display:flex;align-items:center;gap:6px;font-size:15px;font-weight:600;color:#1A1A1A}
.adot{font-size:10px;line-height:1;padding:3px 6px;border-radius:999px;background:#F2F4F7;color:#98A2B3;
  font-weight:400}
.adot.on{background:#E8F8EE;color:#14532D}
.acard-desc{font-size:12px;color:var(--sub);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acard-skills{display:flex;gap:5px;margin-top:6px;flex-wrap:wrap}
.askill{font-size:12px;padding:2px 7px;border-radius:5px;background:#F7F8FA;border:1px solid var(--line);
  color:#475467}
.acard-go{flex:0 0 auto;color:#98A2B3;font-size:20px;line-height:1}

/* 个人助手详情（只读）—— 让人一眼看懂「它是谁、会干什么、接没接到微信」 */
.ad-sec{margin-bottom:14px}
.ad-p{margin:4px 0 0;font-size:14px;line-height:1.6;color:#344054;white-space:pre-wrap;word-break:break-word}
.ad-ch{margin-top:4px;font-size:13px;color:#475467}

/* ==========================================================================
   ★ 2026-10-16 个人助手页改单栏（用户："不要做左右分页，这么丑"）
     一级 = 创建入口 + 卡片列表；点卡片 → **整屏**二级页（详情 / 编辑 / 申请绑定）。
     二级用 absolute 覆盖在一级之上，不是一个新界面、也不是分栏。
   ========================================================================== */
#pane-agent { position: relative; }
.ag-l1 { display: flex; flex-direction: column; height: 100%; min-height: 0; padding: 6px 0 0; }
.ag-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.ag-h1 { font-size: 18px; color: #1A1A1A; }
.ag-head .hint { margin: 4px 0 0; max-width: 60%; }
.ag-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.ag-l2 { position: absolute; inset: 0; z-index: 20; background: #F7F8FA;
  display: flex; flex-direction: column; min-height: 0; }
.ag-l2.hide { display: none !important; }
.ag-top { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; height: 46px;
  padding: 0 10px; background: #FFFFFF; border-bottom: 1px solid var(--line); }
.ag-top b { flex: 1 1 auto; text-align: center; font-size: 16px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-l2-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 14px 12px 22px; }
/* 详情里「申请绑定」做成显眼主按钮，不用滚到底找 */
#agentChannels .ch-row { align-items: center; }

/* ==========================================================================
   ★ 2026-10-16 通用多级页面骨架（用户："不要什么都想着全部塞在一个页面里"）
   任何 pane 里放 .pg[data-pg=key] 就自动成为一层：一次只显示一层，
   每层自带顶栏（‹ 返回 + 标题），层与层之间用 data-back 指定回退目标。
   ⇒ 一级只放"入口 + 列表"，细节进二级，操作进三级，**不再往下堆**。
   ========================================================================== */
.pg { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0;
  /* ★ 2026-10-17 修（用户实测：「作品页面所有选项卡都划不动」）——
     真因：一级页把内容直接平铺在 .pg 里，而 .pg 本身没有 overflow、父级又全是 hidden，
     于是内容一超高就**整页划不动**（59 套作品只能看到第一屏）。这里让 .pg 自己滚。 */
  overflow-y: auto; -webkit-overflow-scrolling: touch; }
.pg > * { flex: 0 0 auto; }
.pg-body { overflow: visible; }        /* 交给外层 .pg 统一滚，避免出现双滚动条 */
.pg.hide { display: none !important; }
.pg-bar { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; height: 46px;
  padding: 0 10px; background: #FFFFFF; border-bottom: 1px solid var(--line); }
.pg-bar b { flex: 1 1 auto; text-align: center; font-size: 16px; font-weight: 600; color: #1A1A1A;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 14px 12px 24px; }
/* 旧的分栏/二级覆盖写法作废 */
.ag-l1, .ag-l2, .ag-top, .ag-l2-body { all: unset; display: block; }

/* 作品详情（二级）大图容器 */
.wd-img { background: #FFFFFF; border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
  display: flex; align-items: center; justify-content: center; min-height: 180px; }
.wd-img img { width: 100%; height: auto; display: block; cursor: zoom-in; }
.wd-img .work-ph { padding: 40px 0; color: var(--sub); font-size: 13px; }

/* 我的页：账户卡 + 入口卡片列表（一级）；明细/邀请/设备各占二级页 */
.me-card{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.me-av{flex:0 0 42px;width:42px;height:42px;border-radius:8px;background:#E8F8EE;color:#14532D;
  display:flex;align-items:center;justify-content:center;font-weight:600;font-size:16px}
.me-info{flex:1 1 auto;min-width:0}
.me-info b{font-size:15px;color:#1A1A1A}
.me-info .hint{margin:3px 0 0}
.me-info .hint b{font-size:15px;color:#14532D}
.me-list .acard:last-child{margin-bottom:0}
.me-ledger .led{margin-bottom:8px}
.led-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.led-t{font-size:14px;color:#1A1A1A}
.led-v{font-size:14px;font-weight:600}
.led-v.plus{color:#14532D}
.led-v.minus{color:#B42318}
.led-m{font-size:12px;color:var(--sub);margin-top:2px}

/* ==========================================================================
   ★ 2026-10-17 自绘选择弹层（用户实测：「选模型弹窗又是黑色的」）
   创作页的画图模型/尺寸/分辨率/方向/质量是原生 <select>。在微信内嵌浏览器里，
   安卓系统的下拉列表是**系统主题色**渲染的 —— 深色主题下就是一个黑框，与本站浅色主题彻底割裂，
   而且完全不受 CSS 控制。所以手机端把原生 select 藏起来（值仍由它持有，既有 JS 一行不改），
   换成自绘按钮 + 底部弹层。桌面端保留原生 select（鼠标操作更顺手）。
   ========================================================================== */
.sel-btn { display: none; }
@media (max-width: 760px) {
  .sel select { display: none !important; }
  .sel::after { display: none; }
  .sel-btn {
    display: block; width: 100%; text-align: left; position: relative;
    background: #F7F8FA; border: 1px solid var(--line); border-radius: 10px;
    padding: 11px 34px 11px 12px; font-size: 14px; color: var(--txt);
    font-family: inherit; line-height: 1.35; cursor: pointer;
  }
  .sel-btn:after {
    content: ""; position: absolute; right: 13px; top: 50%;
    width: 7px; height: 7px; border-right: 1.6px solid var(--sub);
    border-bottom: 1.6px solid var(--sub); transform: translateY(-70%) rotate(45deg);
  }
  .msheet-item b { font-weight: 500; }
}

/* ==========================================================================
   ★ 2026-10-17 模板页重做（用户手机实测三条，见 app.js 同名注释）
   卡片 = 样张（3:4）+ 卡面悬浮「用这个模板」按钮 + 下方名称/分类。
   手机上两列；分类条横向可滑；搜索框复用 .input。
   ========================================================================== */
#tplSearch { margin-bottom: 10px; }
.tpl-cats { display: flex; gap: 7px; overflow-x: auto; padding: 2px 0 11px; -webkit-overflow-scrolling: touch; }
.tpl-cat { flex: 0 0 auto; border: 1px solid var(--line); background: #fff; color: var(--sub);
  border-radius: 999px; padding: 6px 13px; font-size: 12.5px; font-family: inherit; cursor: pointer; }
.tpl-cat.on { background: rgba(34,197,94,.12); border-color: var(--a1); color: var(--a1); font-weight: 600; }
.tpl-cover { position: relative; width: 100%; aspect-ratio: 3/4; background: #F3F4F6; overflow: hidden; }
.tpl-cover img { width: 100%; height: 100%; object-fit: cover; display: block; background: #F3F4F6; }
.tpl-ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 5px; padding: 10px; text-align: center; color: #fff; }
.tpl-ph-n { font-size: 12.5px; font-weight: 800; line-height: 1.35; text-shadow: 0 1px 2px rgba(0,0,0,.18); }
.tpl-ph-s { font-size: 9.5px; opacity: .88; }
.tpl-cover.noimg:before { content: ""; display: none;
  align-items: center; justify-content: center; color: var(--sub); font-size: 12px; }
/* ★ 模板收藏（2026-10-19 用户：收藏子页按现在风格搞回来） */
.tpl-star { position: absolute; top: 8px; right: 8px; z-index: 3; width: 32px; height: 32px;
  border: 0; border-radius: 50%; background: rgba(17,24,39,.45); color: #fff; font-size: 17px;
  line-height: 32px; text-align: center; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.tpl-star.on { background: rgba(250,204,21,.95); color: #7C2D12; }
.tpl-star:active { transform: scale(.94); }
.tpl-cat.on { background: var(--a1, #22C55E); color: #fff; border-color: var(--a1, #22C55E); }

.tpl-use { position: absolute; left: 8px; right: 8px; bottom: 8px; height: 34px; border: 0;
  border-radius: 9px; background: rgba(34,197,94,.94); color: #fff; font-size: 13px; font-weight: 600;
  font-family: inherit; cursor: pointer; }
.tpl-use:active { filter: brightness(.94); }
.tpl-meta { padding: 9px 11px 11px; display: flex; flex-direction: column; gap: 3px; }
.tpl-meta .tpl-h { font-size: 13.5px; line-height: 1.3; }
.tpl-s { font-size: 11.5px; color: var(--sub); }
.tpl-more-wrap { padding: 14px 0 4px; }
@media (max-width: 760px) {
  .tpl-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 10px; }
}

/* ==========================================================================
   ★ 2026-10-17 PPT 制作页（用户：「你告诉我这个页面我怎么做ppt」）
   四步：贴文案 → 拆页（可改）→ 出图（进度 + 逐页缩略图）→ 下载 .pptx。
   分组打包下载挪进 <details>，默认折叠。
   ========================================================================== */
.ppt-pages { display: flex; flex-direction: column; gap: 10px; margin: 10px 0 12px; }
.ppt-page { border: 1px solid var(--line); border-radius: 12px; padding: 10px 11px; background: #FCFCFD;
  display: flex; flex-direction: column; gap: 7px; }
.ppt-page-h { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; color: var(--sub); }
.ppt-page .input { width: 100%; }
.ppt-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 9px; margin: 12px 0; }
.ppt-th { background: #F3F4F6; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.ppt-th img { width: 100%; display: block; aspect-ratio: 16/9; object-fit: cover; }
.ppt-th-wait { aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center;
  color: var(--sub); font-size: 12px; }
.ppt-th-no { font-size: 12px; color: var(--sub); padding: 5px 7px; line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 失败页（2026-10-17）：红字明示 + 原因 + 重试按钮，别让客户对着一个灰格子猜 */
.ppt-th-wait.bad { color: #DC2626; font-weight: 600; }
.ppt-th-reason { font-size: 10.5px; color: #B45309; padding: 0 7px 5px; line-height: 1.3; }
.ppt-th-retry { margin: 0 7px 7px; width: calc(100% - 14px); }
.ppt-works { display: flex; flex-direction: column; gap: 9px; }
.ppt-work { display: flex; align-items: center; gap: 11px; padding: 9px 11px; background: var(--card);
  border: 1px solid var(--line); border-radius: 12px; }
.ppt-work img { width: 76px; height: 43px; object-fit: cover; border-radius: 7px; flex: 0 0 auto; background: #F3F4F6; }
.ppt-work-info { flex: 1; min-width: 0; }
.ppt-work-t { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ppt-s { font-size: 11.5px; color: var(--sub); margin-top: 2px; }
.ppt-work a { flex: 0 0 auto; text-decoration: none; display: inline-flex; align-items: center; }
.fold { margin-top: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.fold > summary { cursor: pointer; padding: 12px 14px; font-size: 13.5px; font-weight: 600; color: var(--sub); }
.fold[open] > summary { border-bottom: 1px solid var(--line); }
.fold > *:not(summary) { margin-left: 14px; margin-right: 14px; }
.fold > *:last-child { margin-bottom: 14px; }
.ppt-page .ta.sm { height: 62px; }
@media (max-width: 760px) {
  .ppt-thumbs { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* ★ 2026-10-17：小按钮在窄屏被折成两行（「重新开始」实测），一律不换行 */
.btn-ghost.sm, .btn-mini, .pane-acts .btn-ghost { white-space: nowrap; }


/* ★ 2026-10-17 合规-协议门（线上这套前端此前完全没有；与仓库版 web/ 对齐口径）
   浅色主题下的全屏遮罩 + 白卡，窄屏可滚动；.hide 由现有约定控制显隐。 */
.agree-gate { position: fixed; inset: 0; z-index: 9999; background: rgba(16,24,40,.72);
  display: flex; align-items: center; justify-content: center; padding: 16px; }
.agree-gate.hide { display: none; }
.agree-inner { width: 100%; max-width: 560px; max-height: 86vh; overflow: auto; background: var(--card);
  color: var(--txt); border-radius: 14px; padding: 18px; box-shadow: 0 8px 30px rgba(16,24,40,.18); }
.agree-title { font-weight: 700; font-size: 15.5px; margin-bottom: 8px; }
.agree-body p { margin: 8px 0; line-height: 1.75; font-size: 13.5px; }
.agree-links { margin: 10px 0 14px; font-size: 13.5px; }
.agree-links a { color: var(--a2); margin-right: 14px; text-decoration: underline;
  /* ★ 2026-10-19：点击区从 54×19 提到约 54×31（手机上 19px 高的链接基本点不中） */
  display: inline-block; padding: 6px 2px; }
.agree-act { display: flex; gap: 10px; justify-content: space-between; }
.agree-act .btn-primary, .agree-act .btn-ghost { flex: 1 1 0; white-space: nowrap; }


/* ★ 2026-10-17 模板「可改项」块（移植自仓库版 web/assets/app.css，换成线上浅色 token）。
   模板提示词里的每个【】在这里渲染成一个输入框；没有【】时整块隐藏。 */
.slots { margin: 0 0 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); background: #F9FAFB; }
.slots.hide { display: none; }
/* ★ 2026-10-17 vision 实测「可改项」标题对比偏低 ⇒ 加重标题、给整块加左侧强调边 */
.slots { border-left: 3px solid var(--a1, #22C55E); }
.slots .sh { margin-bottom: 8px; font-size: 13px; font-weight: 700; color: var(--txt); letter-spacing: .2px; }
.slots .sf > span { color: var(--txt); font-weight: 500; }
.slots .sw { display: flex; flex-direction: column; gap: 8px; }
.slots .sf { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--sub); }
/* ★ 长标签允许折两行（vision：第 10 项「文字要规范…」被省略号吃掉，读不全） */
.slots .sf { align-items: flex-start; }
.slots .sf > span { flex: 0 0 38%; white-space: normal; line-height: 1.35; word-break: break-word; }
.slots .sf .input { flex: 1 1 auto; min-width: 0; height: 34px; padding: 0 10px; font-size: 13px; }
.slots .st { margin-top: 8px; font-size: 11.5px; color: var(--sub); }


/* ★ 2026-10-17 「生成 / 一键生成」同一行（窄屏不换行、等宽自适应） */
.gen-act { display: flex; gap: 10px; align-items: stretch; }
.gen-act .btn-primary { box-shadow: 0 6px 18px rgba(34,197,94,.28); }
.gen-act #btnGen { flex: 1 1 auto; }
.gen-act #oneClickRun { flex: 0 0 auto; white-space: nowrap; }
.gen-act #oneClickRun.hide { display: none; }
/* 下单前价格预检的一行提示（只展示服务端给的数字） */
.price-hint { font-size: 12px; color: var(--sub); line-height: 1.5; margin: 2px 0 8px; }
.price-hint:empty { display: none; }


/* ★ 2026-10-17 AI 生成标识开关：卡片右侧按钮 + 说明允许折行（默认 .acard-desc 是单行省略号） */
#meLabelCard .btn-mini { flex: 0 0 auto; align-self: center; margin-left: 8px; }
.acard-desc-wrap { white-space: normal; line-height: 1.45; }
#mineLabelState { font-weight: 400; }

/* ============================================================================
   PPT 生成页 · 五步流程（2026-10-17）
   ============================================================================ */
.pp-steps{display:flex;gap:6px;margin:2px 0 14px}
.pp-st{flex:1;text-align:center;font-size:10.5px;color:#A3ABB6}
.pp-st b{display:block;height:3px;border-radius:2px;background:#E5E8EC;margin-bottom:5px}
.pp-st.on{color:#15803D;font-weight:700}
.pp-st.on b{background:#22C55E}
.pp-card{background:#fff;border:1px solid #EBEDF0;border-radius:14px;padding:14px;box-shadow:0 1px 3px rgba(16,24,40,.06),0 8px 24px rgba(16,24,40,.04)}
.pp-card2{background:#FCFCFD;border:1px solid #EBEDF0;border-radius:12px;padding:12px;margin-top:12px}
.pp-h{font-size:14px;font-weight:700;margin:0 0 6px}
.pp-h2{font-size:13px;font-weight:700;margin:0 0 8px}
.pp-sub{font-size:12px;color:#6B7280;line-height:1.6;margin:0 0 10px}
.pp-hint{font-size:11.5px;color:#6B7280;line-height:1.6;margin:0}
.pp-ta{width:100%;height:150px;border:1px solid #EBEDF0;border-radius:10px;padding:10px;font-size:13px;line-height:1.7;color:#374151;background:#FCFCFD;resize:vertical;outline:none;box-sizing:border-box}
.pp-row-end{text-align:right;margin:6px 0 10px}
.pp-btn{width:100%;height:46px;border:0;border-radius:12px;font-size:14.5px;font-weight:700;color:#fff;background:linear-gradient(135deg,#22C55E,#16A34A);box-shadow:0 6px 16px rgba(34,197,94,.28);cursor:pointer}
.pp-btn2{width:100%;height:44px;border:1px solid #EBEDF0;border-radius:12px;background:#fff;font-size:13.5px;font-weight:600;color:#374151;cursor:pointer;box-sizing:border-box}
.pp-foot{margin:14px 0 6px}
.pp-chips{display:flex;gap:8px;flex-wrap:wrap}
.pp-chip{border:1px solid #EBEDF0;background:#fff;border-radius:20px;padding:6px 14px;font-size:12.5px;color:#4B5563;cursor:pointer}
.pp-chip.on{border-color:#22C55E;background:#E8F8EE;color:#15803D;font-weight:700}
.pp-note{font-size:12px;color:#4B5563;margin:0 0 12px}
.pp-scards{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch}
.pp-scard{flex:0 0 auto;width:168px;border:1px solid #EBEDF0;border-radius:12px;overflow:hidden;background:#fff;cursor:pointer}
.pp-scard.on{border-color:#22C55E;box-shadow:0 0 0 2px rgba(34,197,94,.18)}
.pp-sthumb{height:96px;display:flex;align-items:flex-end;padding:10px}
.pp-sthumb span{font-size:12px;font-weight:700;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.pp-sbody{padding:8px 9px 10px}
.pp-sname{font-size:12.5px;font-weight:700}
.pp-sscene{font-size:10.5px;color:#6B7280;margin-top:2px;line-height:1.4}
.pp-tag{display:inline-block;font-size:10px;color:#15803D;background:#E8F8EE;border-radius:5px;padding:1px 6px;margin-top:6px}
.pp-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.pp-tpl{border:1px solid #EBEDF0;border-radius:11px;overflow:hidden;background:#fff;cursor:pointer}
.pp-tpl.on{border-color:#22C55E;box-shadow:0 0 0 2px rgba(34,197,94,.18)}
.pp-tpl img{width:100%;height:86px;object-fit:cover;display:block;background:#F3F4F6}
.pp-tb{padding:7px 8px 9px}
.pp-tname{font-size:12px;font-weight:700}
.pp-tsub{font-size:10.5px;color:#6B7280;margin-top:1px}
.pp-up-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:10px}
.pp-slot{aspect-ratio:1;border:1px dashed #CBD2DA;border-radius:10px;background:#FBFCFD;display:flex;align-items:center;justify-content:center;color:#9AA3AF;font-size:22px;position:relative;overflow:hidden;cursor:pointer}
.pp-slot.filled{border-style:solid;border-color:#EBEDF0;background:#fff;cursor:default}
.pp-slot img{width:100%;height:100%;object-fit:cover}
.pp-badge{position:absolute;left:0;right:0;bottom:0;background:rgba(17,24,39,.72);color:#fff;font-size:9px;padding:2px 4px;text-align:center}
.pp-plist{margin-top:8px}
.pp-pcard{display:flex;gap:10px;border:1px solid #EBEDF0;border-radius:11px;padding:9px;margin-bottom:8px;background:#fff}
.pp-pno{width:22px;height:22px;border-radius:50%;background:#E8F8EE;color:#15803D;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.pp-pm{flex:1;min-width:0}
.pp-ptitle{width:100%;border:0;border-bottom:1px dashed #E5E8EC;font-size:12.5px;font-weight:700;padding:2px 0;outline:none;box-sizing:border-box}
.pp-ppts{font-size:10.5px;color:#6B7280;margin-top:4px;line-height:1.5;overflow:hidden;max-height:32px}
.pp-mini{font-size:10px;color:#4B5563;border:1px solid #EBEDF0;border-radius:6px;padding:2px 7px;margin-top:5px;background:#FAFBFC;cursor:pointer}
.pp-tiers{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.pp-tier{border:1px solid #EBEDF0;border-radius:11px;padding:9px;background:#fff;cursor:pointer}
.pp-tier.on{border-color:#22C55E;background:#F4FCF7;box-shadow:0 0 0 2px rgba(34,197,94,.16)}
.pp-tn{font-size:12px;font-weight:700}
.pp-tp{font-size:15px;font-weight:800;color:#15803D;margin-top:2px}
.pp-tp span{font-size:10.5px;font-weight:400;color:#6B7280}
.pp-td{font-size:10px;color:#6B7280;line-height:1.4;margin-top:4px}
.pp-quote{display:flex;align-items:center;justify-content:space-between;background:#111827;color:#fff;border-radius:12px;padding:11px 13px;margin-top:12px}
.pp-ql{font-size:12px;color:#C9D1DA}
.pp-qv{font-size:19px;font-weight:800;color:#7EE3A3;margin-top:2px}
.pp-qv span{font-size:10.5px;color:#9CA3AF;font-weight:400;margin-left:6px}
.pp-qb{font-size:12px;color:#C9D1DA}
.pp-prog{height:6px;border-radius:3px;background:#E5E8EC;overflow:hidden;margin-top:8px}
.pp-prog i{display:block;height:100%;background:linear-gradient(90deg,#22C55E,#16A34A);transition:width .4s}
.pp-prow{font-size:11.5px;color:#4B5563;line-height:2}
.pp-prow i{width:6px;height:6px;border-radius:50%;display:inline-block;margin-right:6px;vertical-align:1px}
.pp-dl{display:flex;gap:10px;margin-top:8px}
.pp-dlb{flex:1;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:700;text-decoration:none}
.pp-dlb.p{background:linear-gradient(135deg,#22C55E,#16A34A);color:#fff}
.pp-empty{font-size:12px;color:#9AA3AF;text-align:center;padding:18px 0}
.pp-row{display:flex}
.pp-row.between{justify-content:space-between;align-items:center}
@media (max-width:420px){.pp-tiers{grid-template-columns:1fr 1fr}}

/* 第⑤步：列表限高可滚 + 档位报价吸底 */
.pp-st.cur{color:#15803D;font-weight:800}
.pp-st.cur b{background:#16A34A;box-shadow:0 0 0 2px rgba(22,163,74,.18)}
.pp-plist-scroll{max-height:46vh;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-right:2px}
.pp-pcard{position:relative}
.pp-pcard .pp-mini{position:absolute;right:9px;top:9px}
.pp-sticky{position:sticky;bottom:6px;margin-top:12px;background:rgba(247,248,250,.92);backdrop-filter:blur(6px);border-radius:14px;padding:2px}

.pp-tiers-row{display:flex;gap:8px;margin-bottom:8px}
.pp-tiers-row .pp-tier{flex:1;padding:7px 9px}
.pp-tiers-row .pp-td{display:none}
#pptApp .pp-sticky{padding-bottom:2px}

.pp-tier.off{opacity:.55;background:#FAFBFC;border-style:dashed;cursor:not-allowed}
.pp-toff{font-size:10px;color:#9AA3AF;margin-top:3px}
.pp-tiers-row .pp-tier.off{display:none}

/* ===== 我的 / 钱包（2026-10-17） ===== */
.wl3{display:flex;gap:8px;text-align:center;padding:11px 10px}
.wl3-c{flex:1;background:#FBFCFD;border:1px solid var(--line);border-radius:11px;padding:9px 6px}
.wl3-c.on{background:#F1FBF4;border-color:#BFE9CD}
.wl3-c b{display:block;font-size:15px;font-weight:800}
.wl3-c span{font-size:10.5px;color:var(--sub)}
.wl-row{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:9px 0;border-bottom:1px dashed #EEF1F4}
.wl-row:last-child{border-bottom:0}
.wl-t{font-size:12.5px;font-weight:600}
.wl-d{font-size:10.5px;color:var(--sub);margin-top:2px}
.wl-neg{color:#DC2626;font-weight:700;font-size:12.5px;white-space:nowrap}
.wl-pos{color:#15803D;font-weight:700;font-size:12.5px;white-space:nowrap}
/* 明细列表底部留白：最后一条不被底部状态栏/导航遮住 */
#wlLedgerBox{padding-bottom:84px}

/* ===== 个人助手 六屏（2026-10-17） ===== */
.ag-wrap{padding:4px 2px 20px}
.ag-top{display:flex;align-items:center;justify-content:space-between;margin:6px 0 12px}
.ag-top b{font-size:16px;font-weight:800}
.ag-back{border:0;background:transparent;font-size:20px;color:#4B5563;padding:0 6px}
.ag-new,.ag-mini,.ag-primary{border:0;border-radius:10px;font-size:12px;font-weight:700;padding:7px 12px;
  background:linear-gradient(135deg,#22C55E,#16A34A);color:#fff}
.ag-mini{background:#F1F3F6;color:#374151;font-weight:600}
.ag-primary{display:block;width:100%;height:44px;font-size:14px;margin-top:10px}
.ag-sec{font-size:12px;color:#6B7280;margin:6px 0 8px}
.ag-card{display:flex;gap:10px;align-items:center;background:#fff;border:1px solid #EBEDF0;border-radius:12px;
  padding:11px;margin-bottom:9px;box-shadow:0 1px 3px rgba(16,24,40,.06)}
.ag-ic{width:38px;height:38px;border-radius:11px;background:#E8F8EE;color:#15803D;font-weight:800;
  display:flex;align-items:center;justify-content:center}
.ag-n{font-size:13px;font-weight:700}
.ag-d{font-size:10.5px;color:#6B7280;margin-top:2px;line-height:1.45;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ag-tag{display:inline-block;font-size:9.5px;color:#15803D;background:#E8F8EE;border-radius:5px;padding:1px 6px;margin-top:5px}
.ag-go{color:#9AA3AF;font-size:18px}
.ag-tip{font-size:10.5px;color:#6B7280;line-height:1.6;margin:12px 0;background:#FBFCFD;border:1px dashed #E5E8EC;
  border-radius:10px;padding:9px 10px}
.ag-empty{font-size:12px;color:#9AA3AF;text-align:center;padding:26px 10px;line-height:1.8}
.ag-chat{display:flex;flex-direction:column;height:calc(100vh - 190px);height:calc(100dvh - 190px)}
.ag-msgs{flex:1;overflow-y:auto;padding:4px 2px 8px}
.ag-bb{max-width:86%;padding:9px 11px;border-radius:12px;font-size:12.5px;line-height:1.65;margin-bottom:8px;white-space:pre-wrap}
.ag-bb.me{background:#22C55E;color:#fff;margin-left:auto;border-bottom-right-radius:4px}
.ag-bb.ai{background:#fff;border:1px solid #EBEDF0;border-bottom-left-radius:4px}
.ag-inp{display:flex;gap:8px;padding:8px 0 4px;border-top:1px solid #EBEDF0}
.ag-inp input{flex:1;border:1px solid #EBEDF0;border-radius:11px;padding:9px 11px;font-size:12.5px;outline:none}
.ag-send{border:0;border-radius:11px;background:linear-gradient(135deg,#22C55E,#16A34A);color:#fff;
  font-size:12.5px;font-weight:700;padding:0 16px}
.ag-skill{display:flex;gap:10px;align-items:flex-start;background:#fff;border:1px solid #EBEDF0;border-radius:11px;
  padding:10px;margin-bottom:8px}
.ag-chk,.ag-toolchk{margin-top:3px;width:16px;height:16px;accent-color:#22C55E}
.ag-mem{display:flex;gap:10px;align-items:flex-start;border-left:2px solid #BFE9CD;padding:8px 10px;
  background:#fff;border-radius:0 10px 10px 0;margin-bottom:8px}
.ag-addmem{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.ag-addmem input,.ag-fld input,.ag-fld select{width:100%;box-sizing:border-box;border:1px solid #EBEDF0;
  border-radius:10px;padding:9px 10px;font-size:12.5px;outline:none;background:#fff;color:#111827}
.ag-fld input::placeholder,.ag-fld textarea::placeholder{color:#9AA3AF}
.ag-fld textarea{width:100%;box-sizing:border-box;border:1px solid #EBEDF0;border-radius:10px;padding:9px 10px;
  font-size:12.5px;outline:none;background:#fff;color:#111827;font-family:inherit;resize:vertical;min-height:56px}
.ag-fld select{appearance:none;-webkit-appearance:none;padding-right:30px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%236B7280' stroke-width='1.6' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;background-position:right 11px center}
.ag-wrap{width:100%;box-sizing:border-box}
.ag-primary{width:100%;box-sizing:border-box;height:44px;font-size:14px}
.ag-fld{margin-bottom:10px}
.ag-fld label{display:block;font-size:12px;color:#4B5563;margin-bottom:4px}

/* ===== 作品页 · 按任务（2026-10-17） ===== */
#pane-works > *:not(#worksApp){display:none!important}
.wk-wrap{padding:4px 2px 96px}   /* 底部导航 84px + 余量，最后一行不被压 */
.wk-top{display:flex;align-items:center;gap:10px;margin:6px 0 12px}
.wk-top b{font-size:16px;font-weight:800}
.wk-seg{display:flex;gap:6px;margin-left:auto}
.wk-tab{border:1px solid #EBEDF0;background:#fff;border-radius:20px;padding:5px 12px;font-size:11.5px;color:#4B5563}
.wk-tab.on{border-color:#22C55E;background:#E8F8EE;color:#15803D;font-weight:700}
.wk-card{background:#fff;border:1px solid #EBEDF0;border-radius:12px;padding:10px;margin-bottom:10px;
  box-shadow:0 1px 3px rgba(16,24,40,.06)}
.wk-shots{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;aspect-ratio:4/5;border-radius:8px;overflow:hidden}
/* v10：竖图（720×1280）在 16:9 横条里会被裁掉约 95% ⇒ 容器固定 4:5；多图等分列，同行卡片等高 */
.wk-shots>div{background:#E9EDF2 center/cover;border-radius:6px}
.wk-ph{aspect-ratio:4/5;background:#EEF1F5}
.wk-n{font-size:12.5px;font-weight:700;margin-top:8px}
.wk-m{font-size:10.5px;color:#6B7280;margin-top:2px}
.wk-row{display:flex;justify-content:space-between;align-items:center;margin-top:8px}
.wk-pill{font-size:9.5px;background:#E8F8EE;color:#15803D;border-radius:20px;padding:2px 8px;font-weight:700}
.wk-acts{display:flex;gap:6px}
.wk-a{font-size:12px;border:1px solid #EBEDF0;border-radius:8px;padding:4px 9px;background:#FAFBFC;color:#374151;cursor:pointer}
.wk-back{border:0;background:transparent;font-size:20px;color:#4B5563;padding:0 6px;cursor:pointer}
.wk-meta{font-size:12px;color:#6B7280;margin-bottom:10px}
.wk-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
/* ★ v8 P1-4：作品列表原来是一列通栏卡片（940px 宽只有 290px 图，右侧 2/3 全空）⇒ 改自适应网格 */
.wk-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.wk-list .wk-card{margin-bottom:0}
.wk-lb{position:fixed;inset:0;background:rgba(14,17,22,.92);z-index:9999;display:flex;align-items:center;
  justify-content:center;padding:14px}
.wk-lb img{max-width:100%;max-height:86vh;border-radius:8px}
.wk-pg{border:1px solid #EBEDF0;border-radius:10px;overflow:hidden;background:#fff}
.wk-pgi{padding-top:56%;background:#E9EDF2 center/cover}
.wk-fail{background:#FEF2F2}
.wk-pgf{display:flex;justify-content:space-between;align-items:center;padding:5px 7px;font-size:10.5px;color:#6B7280}
.wk-mini{border:1px solid #EBEDF0;border-radius:7px;background:#FAFBFC;font-size:10px;padding:3px 8px;color:#374151}
.wk-empty{text-align:center;color:#9AA3AF;font-size:12px;padding:30px 12px;line-height:1.8}

/* ===== 模板详情子页（PPT / 技能 / 套图 共用） ===== */
.pp-sheet{position:fixed;inset:0;background:rgba(17,24,39,.45);z-index:9998;display:none}
.pp-sheet.on{display:block}
.pp-sheet-bd{position:absolute;left:0;right:0;bottom:0;max-height:86vh;overflow-y:auto;
  background:#fff;border-radius:18px 18px 0 0;padding:16px 16px 22px;animation:ppup .18s ease-out}
@keyframes ppup{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}
.pp-sheet-c{max-width:640px;margin:0 auto}
.pp-sheet-hd{display:flex;align-items:center;justify-content:space-between}
.pp-sheet-hd b{font-size:17px}
.pp-x{border:0;background:#F1F3F6;width:28px;height:28px;border-radius:50%;color:#4B5563;font-size:13px}
.pp-sheet-sub{font-size:12px;color:#4B5563;margin-top:4px}
.pp-sheet-meta{display:flex;gap:8px;margin:9px 0 0;flex-wrap:wrap}
.pp-sheet-meta span{font-size:10.5px;color:#374151;background:#F4F6F8;border-radius:6px;padding:2px 8px}
.pp-pal{display:flex;align-items:center;gap:6px;margin-top:11px}
.pp-pal i{width:22px;height:22px;border-radius:6px;display:block;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.pp-font{font-size:10.5px;color:#6B7280;margin-left:4px}
.pp-visual{font-size:11.5px;color:#374151;line-height:1.6;margin-top:10px;background:#FBFCFD;
  border:1px dashed #E5E8EC;border-radius:10px;padding:8px 10px}
.pp-ostitle{font-size:12.5px;font-weight:800;margin:14px 0 6px}
.pp-oline{display:flex;gap:9px;align-items:flex-start;padding:7px 0;border-top:1px solid #F4F6F8}
.pp-ono{width:20px;height:20px;border-radius:6px;background:#E8F8EE;color:#15803D;font-size:10.5px;
  font-weight:800;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.pp-osec{font-size:12px;font-weight:700}
.pp-ohow{font-size:10.5px;color:#6B7280;margin-top:2px;line-height:1.5}
.pp-okind{font-size:9.5px;color:#6B7280;background:#F1F3F6;border-radius:5px;padding:1px 6px;align-self:center}
.pp-price{font-size:12px;color:#B45309;background:#FEF6E7;border-radius:8px;padding:7px 9px;margin:12px 0 12px}
.pp-primary{width:100%;height:44px;border:0;border-radius:12px;background:linear-gradient(135deg,#22C55E,#16A34A);
  color:#fff;font-size:14px;font-weight:800}

.ag-search{width:100%;border:1px solid #EBEDF0;border-radius:11px;padding:9px 11px;font-size:12.5px;outline:none;margin-bottom:8px}
.ag-chips{display:flex;gap:6px;overflow-x:auto;margin-bottom:9px;padding-bottom:2px;scrollbar-width:none}
.ag-chips::-webkit-scrollbar{display:none}
.ag-chip{flex:0 0 auto;border:1px solid #EBEDF0;background:#fff;border-radius:20px;padding:5px 11px;font-size:12px;color:#374151}
.ag-chip.on{border-color:#22C55E;background:#E8F8EE;color:#15803D;font-weight:700}
.ag-tag{font-size:9px;border-radius:4px;padding:1px 5px;margin-left:5px}
.ag-tag.free{background:#DCFCE7;color:#15803D;font-weight:700}
.ag-tag.paid{background:#FFEDD5;color:#9A3412;font-weight:800}
.ag-tag.ext{background:#E5E7EB;color:#4B5563;border:1px dashed #C9CFD6}
.ag-more{color:#9AA3AF;font-size:16px;align-self:center}

/* ===== 套图库 ===== */
.st-wrap{padding:4px 2px 96px}
.st-top{display:flex;align-items:center;gap:10px;margin:6px 0 10px;
  /* ★ 2026-10-19：详情页返回栏跟着列表一起滚走了，用户滑下去就找不到"返回"。
     置顶吸住（sticky），背景用页面底色，避免内容从下面透出来。 */
  position:sticky;top:0;z-index:6;background:var(--bg,#F7F8FA);padding:6px 2px 8px;margin-top:-6px}
.st-top b{font-size:16px;font-weight:800}
.st-count{font-size:12px;color:#6B7280;margin-left:auto}
.st-search{width:100%;border:1px solid #EBEDF0;border-radius:11px;padding:9px 11px;font-size:12.5px;outline:none;margin-bottom:8px}
.st-hint{font-size:11.5px;color:#4B5563;margin-bottom:10px}
.st-card{background:#fff;border:1px solid #EBEDF0;border-radius:14px;overflow:hidden;margin-bottom:10px;
  box-shadow:0 1px 3px rgba(16,24,40,.06);cursor:pointer}
.st-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;padding:3px;background:#F4F6F8}
.st-grid div{padding-top:46%;border-radius:3px;position:relative}
.st-grid div i{position:absolute;left:3px;top:2px;font-size:7px;color:rgba(255,255,255,.9);font-style:normal}
.st-body{padding:8px 11px 10px}
.st-n{font-size:13px;font-weight:800}
.st-m{font-size:12px;color:#4B5563;margin-top:3px}
.st-price{font-size:12.5px;color:#B45309;font-weight:800;margin-top:5px}
.st-price span{font-size:10px;color:#6B7280;font-weight:400}
.st-back{border:0;background:transparent;font-size:20px;color:#4B5563;padding:0 6px}
.st-meta{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 4px}
.st-meta span{font-size:10.5px;color:#374151;background:#F4F6F8;border-radius:6px;padding:2px 8px}
.st-sec{font-size:12.5px;font-weight:800;margin:14px 0 6px}
.st-shots{border-top:1px solid #F4F6F8}
.st-shot{display:flex;gap:8px;font-size:11.5px;color:#374151;padding:6px 0;border-bottom:1px solid #F7F8FA}
.st-shot .no{color:#15803D;font-weight:800;width:22px;flex:0 0 auto;font-variant-numeric:tabular-nums}
.st-note{font-size:11.5px;color:#374151;line-height:1.65;background:#FBFCFD;border:1px dashed #E5E8EC;
  border-radius:10px;padding:9px 10px}
.st-price2{font-size:16px;color:#B45309;font-weight:800}
.st-price2 span{font-size:10.5px;color:#6B7280;font-weight:400}
.st-primary{width:100%;height:44px;border:0;border-radius:12px;margin-top:14px;
  background:linear-gradient(135deg,#22C55E,#16A34A);color:#fff;font-size:14px;font-weight:800}
.st-empty{text-align:center;color:#9AA3AF;font-size:12px;padding:30px 0}

.ag-entry{display:flex;align-items:center;justify-content:space-between;background:#fff;border:1px solid #EBEDF0;
  border-radius:12px;padding:11px;margin-bottom:10px;box-shadow:0 1px 3px rgba(16,24,40,.06)}
.ag-entry span:first-child{font-size:13px;font-weight:700}
.ag-entry-n{font-size:10.5px;color:#6B7280}

.pp-preview{margin:10px 0 2px;border-radius:12px;overflow:hidden;border:1px solid #EBEDF0;background:#F4F6F8}
.pp-preview img{display:block;width:100%;height:auto}

.pp-cover{position:relative;border-radius:12px;overflow:hidden;padding:18px 16px 26px;margin:10px 0 4px;
  min-height:150px;display:flex;flex-direction:column;justify-content:center}
.pp-cover-bar{width:34px;height:4px;border-radius:2px;margin-bottom:10px}
.pp-cover-t{font-size:19px;font-weight:800;letter-spacing:.5px;line-height:1.35}
.pp-cover-s{font-size:12px;opacity:.85;margin-top:6px;line-height:1.5}
.pp-cover-seal{position:absolute;right:16px;bottom:26px;width:26px;height:26px;border-radius:50%;border:2px solid}
.pp-cover-seal:after{content:"";position:absolute;inset:6px;border-radius:50%;background:currentColor;opacity:.9}
.pp-cover-cap{position:absolute;left:16px;bottom:9px;font-size:9.5px;color:rgba(255,255,255,.62)}

.st-vars{width:100%;min-height:64px;border:1px solid #EBEDF0;border-radius:10px;padding:9px 10px;font-size:12px;
  outline:none;font-family:inherit;resize:vertical}
.st-secondary{width:100%;height:40px;border:1px solid #EBEDF0;border-radius:12px;margin-top:8px;background:#fff;
  color:#374151;font-size:12.5px;font-weight:600}
.st-bar{height:6px;background:#EEF1F5;border-radius:3px;overflow:hidden;margin:4px 0 10px}
.st-bar i{display:block;height:100%;background:linear-gradient(90deg,#22C55E,#16A34A);transition:width .3s}
.st-grid2{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.st-pg{border:1px solid #EBEDF0;border-radius:10px;overflow:hidden;background:#fff}
.st-pgf{display:flex;justify-content:space-between;padding:5px 7px;font-size:10.5px;color:#4B5563}
.st-thumb{padding-top:100%;background:#EEF1F5 center/cover;display:flex;align-items:center;justify-content:center}
.st-thumb span{font-size:12px;color:#6B7280}
.st-thumb.bad{background:#FEF2F2}
.st-err{font-size:10px;color:#B91C1C;padding:4px 7px;line-height:1.4}
.st-pga{display:flex;gap:6px;padding:6px 7px;flex-wrap:wrap}
.st-mini{border:1px solid #EBEDF0;border-radius:7px;background:#FAFBFC;font-size:10px;padding:3px 8px;
  color:#374151;text-decoration:none}

.sk-run{margin-top:14px;border-top:1px solid #EEF1F5;padding-top:12px}
.sk-run-h{font-size:12.5px;font-weight:800;margin-bottom:6px}
.sk-in{width:100%;min-height:56px;border:1px solid #EBEDF0;border-radius:10px;padding:9px 10px;font-size:12px;
  outline:none;font-family:inherit;resize:vertical}
.sk-file{margin-top:7px;font-size:12px}
.sk-go{width:100%;height:38px;margin-top:7px;border:0;border-radius:10px;background:#111827;color:#fff;font-size:12.5px;font-weight:700}
.sk-go:disabled{opacity:.55}
.sk-out{margin-top:9px;font-size:11.5px;line-height:1.7;color:#111827;white-space:pre-wrap;
  background:#FBFCFD;border:1px solid #EEF1F5;border-radius:10px;padding:9px 10px;display:none}
.sk-out:not(:empty){display:block}
.sk-link{margin-top:6px;border:0;border-radius:8px;background:#E8F8EE;color:#15803D;font-size:11.5px;font-weight:700;padding:6px 10px}

/* ===== 任务与发票页 ===== */
.tp-page{position:fixed;inset:0;background:#F7F8FA;z-index:9997;display:none;overflow-y:auto}
.tp-page.on{display:block}
.tp-wrap{padding:14px 14px 40px;max-width:640px;margin:0 auto}
.tp-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.tp-top b{font-size:16px}
.tp-x{border:0;background:#F1F3F6;width:28px;height:28px;border-radius:50%;color:#4B5563;font-size:13px}
.tp-row{display:flex;gap:10px;align-items:center;background:#fff;border:1px solid #EBEDF0;border-radius:12px;
  padding:10px 11px;margin-bottom:8px}
.tp-k{width:34px;height:34px;border-radius:9px;background:#EEF1F5;color:#4B5563;font-size:10.5px;font-weight:700;
  display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.tp-t{font-size:12.5px;font-weight:700}
.tp-m{font-size:10.5px;color:#6B7280;margin-top:2px}
.tp-s{font-size:9.5px;border-radius:20px;padding:2px 8px;background:#E8F8EE;color:#15803D;font-weight:700}
.tp-s.running{background:#EFF6FF;color:#1D4ED8}
.tp-s.partial{background:#FEF2F2;color:#B91C1C}
.tp-empty{text-align:center;color:#9AA3AF;font-size:12px;padding:26px 0}
.tp-meta{font-size:12px;color:#6B7280;margin-bottom:10px}
.tp-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.tp-item{border:1px solid #EBEDF0;border-radius:10px;background:#fff;overflow:hidden}
.tp-item.bad{border-color:#FCA5A5;background:#FEF2F2}
.tp-in{font-size:10.5px;color:#374151;padding:6px 8px}
.tp-img{display:block;width:100%;height:auto}
.tp-ist{font-size:10px;color:#6B7280;padding:5px 8px}
.tp-item.bad .tp-ist{color:#B91C1C}
.tp-tip{font-size:11.5px;color:#4B5563;background:#FBFCFD;border:1px dashed #E5E8EC;border-radius:10px;
  padding:9px 10px;margin-bottom:12px}
.tp-f{margin-bottom:10px}
.tp-f label{display:block;font-size:12px;color:#4B5563;margin-bottom:4px}
.tp-f input{width:100%;border:1px solid #EBEDF0;border-radius:10px;padding:9px 10px;font-size:12.5px;outline:none}
.tp-primary{width:100%;height:44px;border:0;border-radius:12px;background:linear-gradient(135deg,#22C55E,#16A34A);
  color:#fff;font-size:14px;font-weight:800;margin-top:4px}
.tp-sec{font-size:12.5px;font-weight:800;margin:16px 0 8px}

/* ===== 对话首页快捷入口 ===== */
.chat-quick{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:10px 12px 4px}
.chat-quick button{border:1px solid #EBEDF0;background:#fff;border-radius:12px;padding:12px 6px;font-size:11.5px;
  color:#111827;font-weight:600;box-shadow:0 1px 3px rgba(16,24,40,.05)}
.chat-quick button:active{background:#F4F6F8}
#genAdvToggle{margin:6px 0 0;border:0;background:#F1F3F6;border-radius:8px;padding:6px 10px;font-size:11.5px;color:#4B5563}

/* 生图页：参数默认收起，只显示一行摘要 */
.gen-summary{display:flex;align-items:center;gap:9px;margin:8px 0 4px}
#genAdvToggle{border:0;background:#F1F3F6;border-radius:9px;padding:6px 10px;font-size:11.5px;color:#4B5563;font-weight:600}
.gen-sum{font-size:12px;color:#9AA3AF;flex:1;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#genAdvBox.hide{display:none}

/* PPT 详情：真实版式样张 */
.pp-shots{display:flex;gap:8px;overflow-x:auto;padding:2px 0 6px}
.pp-shot{width:78%;flex:0 0 auto;border-radius:10px;border:1px solid #EBEDF0;background:#F3F4F6}
.pp-shot-cap{font-size:10.5px;color:#9AA3AF;margin:2px 0 10px}
.pp-lb{position:fixed;inset:0;background:rgba(9,12,16,.94);z-index:9998;display:none;align-items:center;justify-content:center;padding:12px}
.pp-lb.on{display:flex}
.pp-lb img{max-width:100%;max-height:100%;border-radius:8px}

.pp-vec{width:100%;margin-top:10px;height:38px;border:1px dashed #C7D2FE;border-radius:10px;background:#F5F7FF;
  color:#3730A3;font-size:12.5px;font-weight:700}
.pp-vec-tip{font-size:10.5px;color:#9AA3AF;margin-top:6px;line-height:1.5}

.tp-dl{display:block;margin:8px;text-align:center;border:1px solid #DBEAFE;background:#EFF6FF;color:#1D4ED8;
  border-radius:8px;padding:7px 0;font-size:12px;font-weight:700;text-decoration:none}

/* ===== 滚动修复（2026-10-18 · 2026-10-19 二次修：套图页/套图详情划不动）=====
   ★ 用户实测：「套图页和套图详情页，都无法滑动」。
   真因：**双层滚动容器**。#setimgApp 自己 overflow-y:auto，外层的 #gtab-setimg 也是，
   而 #gtab-setimg 的高度由 flex 决定（625px），内容 5740px —— 触摸先落到内层，
   内层没有可滚的余量、外层又拿不到手势 ⇒ 手指怎么划都不动（桌面滚轮/代码设 scrollTop 却能滚，
   所以之前的自动化测不出来）。iOS 上这套 nested scroller 更容易彻底失灵。
   ⇒ 规矩：**一个页面只留一个滚动容器**。套图交给外层 .gtab 滚，内层 #setimgApp 不许再滚。
   另：#agentApp 里装的是 .pg 分层页面，它必须当 flex 容器（不是滚动容器）。 */
#worksApp {                       /* 作品页没有外层 .gtab/.pg 容器，仍由它自己滚 */
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
#setimgApp {                      /* 套图：不滚，交给 #gtab-setimg 统一滚 */
  flex: 1 1 auto; min-height: 0;
  overflow: visible;
  width: 100%; box-sizing: border-box;
}
#agentApp {                       /* 个人助手：装 .ag-wrap 六屏，当 flex 容器用 */
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
}
/* ★ 2026-10-19：个人助手六屏都渲染成 #agentApp > .ag-wrap，**由它自己滚**（技能中心 63 项、
   记忆列表都会很长，不给滚动容器就是"内容被裁掉又划不动"）。对话屏例外：
   它内部 .ag-msgs 滚，自己不许再滚，否则输入框会被顶出屏幕。 */
#agentApp > .ag-wrap {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
#agentApp > .ag-wrap.ag-chat { overflow: hidden; display: flex; flex-direction: column; height: auto; }
#worksApp > .wk-wrap, #setimgApp > .st-wrap { width: 100%; box-sizing: border-box; }
#pane-works, #pane-agent { min-height: 0; }

/* 套图卡片例图 */
.st-cover{position:relative;border-radius:10px;overflow:hidden;background:#EEF1F5}
.st-cover img{display:block;width:100%;aspect-ratio:4/3;object-fit:contain;background:#F7F8FA}
.st-cover-tag{position:absolute;left:8px;bottom:8px;background:rgba(9,12,16,.62);color:#fff;
  font-size:10px;padding:2px 7px;border-radius:20px;backdrop-filter:blur(2px)}

/* 套图卡片：左缩略图 + 右信息（2026-10-18 用户：不要大图、要缩略图，点缩略图看大图） */
.st-card{display:flex;align-items:flex-start;gap:11px;position:relative}
.st-th{flex:0 0 92px;width:92px;height:122px;border-radius:10px;overflow:hidden;position:relative;background:#EEF1F5}
.st-th img{width:100%;height:100%;object-fit:cover;display:block}
.st-th-tag{position:absolute;left:5px;top:5px;background:rgba(9,12,16,.6);color:#fff;font-size:9.5px;
  padding:1px 6px;border-radius:20px}
.st-th-zoom{position:absolute;left:0;right:0;bottom:0;background:rgba(9,12,16,.55);color:#fff;
  font-size:9.5px;text-align:center;padding:3px 0}
.st-body{flex:1 1 auto;min-width:0;padding-top:2px}
.st-n{font-size:13.5px;font-weight:800;color:#111827;margin-bottom:3px}
.st-m{font-size:12px;color:#6B7280}
.st-m2{font-size:12px;color:#9AA3AF;margin:2px 0 6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-go{position:absolute;right:10px;top:50%;transform:translateY(-50%);color:#C4CAD3;font-size:18px}
.st-lb{position:fixed;inset:0;background:rgba(9,12,16,.95);z-index:9999;display:none;
  align-items:center;justify-content:center;flex-direction:column;gap:10px;padding:16px}
.st-lb.on{display:flex}
.st-lb img{max-width:100%;max-height:82vh;border-radius:10px}
.st-lb-cap{color:#E5E7EB;font-size:12px}

/* 套图详情：例图区（2026-10-18 用户：详情里还是绿色占位，没例图） */
.st-hero{position:relative;border-radius:12px;overflow:hidden;background:#EEF1F5;margin-bottom:10px}
.st-hero img{display:block;width:100%;height:auto;max-height:none;object-fit:contain;background:#F7F8FA}
.st-hero-tag{position:absolute;left:10px;bottom:10px;background:rgba(9,12,16,.62);color:#fff;
  font-size:10.5px;padding:3px 8px;border-radius:20px}

/* 套图：多张示例横排（2026-10-18 用户：套图里面怎么只有一张图） */
.st-card-v{display:block;padding:12px 12px 10px}
.st-row{display:flex;align-items:center;gap:8px}
.st-row .st-n{flex:1;min-width:0;margin:0}
.st-badge{flex:0 0 auto;font-size:10px;color:#15803D;background:#F0FDF4;border:1px solid #DCFCE7;
  padding:2px 7px;border-radius:20px}
.st-card-v .st-m2{margin:3px 0 8px}
.st-shots{display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px}
.st-shot{position:relative;flex:0 0 30%;min-width:96px;border-radius:9px;overflow:hidden;background:#EEF1F5}
.st-shot img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:contain;background:#F2F4F7}
.st-shot-more{position:absolute;right:4px;bottom:4px;background:rgba(9,12,16,.6);color:#fff;
  font-size:9px;padding:1px 5px;border-radius:20px}
/* ★ 2026-10-19 详情页「每一张做什么」用独立类名（原先复用 .st-shot 的缩略图样式，
   flex:1 1 0 把 9 条挤成一行、文字全被裁掉 —— 用户截图看出来的）。这里是真正的列表行。 */
.st-infos{border-top:1px solid #F4F6F8;margin-top:2px}
.st-info{display:flex;gap:8px;align-items:flex-start;font-size:12px;line-height:1.55;
  color:#374151;padding:7px 0;border-bottom:1px solid #F7F8FA}
.st-info .no{flex:0 0 24px;color:#15803D;font-weight:800;font-variant-numeric:tabular-nums}
.st-info b{font-weight:700;color:#111827;margin-right:6px}
.st-what{font-style:normal;color:#4B5563}
/* 详情：客户素材上传 + 结构化输入（2026-10-19 交付级：套图必须能用客户自己的东西） */
.st-up{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:6px 0 4px}
.st-upbtn{height:34px;padding:0 14px;border:1px dashed #3B6EF0;border-radius:10px;background:#F3F6FF;
  color:var(--a2, #16A34A);font-size:12px;font-weight:600}
.st-uptip{font-size:10.5px;color:#9AA3AF;flex:1;min-width:150px;line-height:1.5}
.st-refs{display:flex;gap:6px;flex-wrap:wrap;margin:2px 0 4px}
.st-ref{display:inline-flex;align-items:center;gap:5px;max-width:46%;padding:4px 8px;border-radius:8px;
  background:#E9F9EF;color:var(--a2, #16A34A);font-size:12px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.st-ref i{font-style:normal;color:#94A3B8;font-size:12px}
.st-field{display:block;margin:8px 0}
.st-fl{display:block;font-size:11.5px;color:#374151;margin-bottom:4px}
.st-fl i{font-style:normal;color:#9AA3AF;font-size:10.5px}
.st-input{width:100%;height:38px;padding:0 11px;border:1px solid #E3E7ED;border-radius:10px;
  font-size:12.5px;color:#111827;background:#fff;box-sizing:border-box}
.st-input:focus{outline:0;border-color:#3B6EF0;box-shadow:0 0 0 3px rgba(59,110,240,.10)}
.st-foot{display:flex;align-items:flex-end;justify-content:space-between;margin-top:8px}
.st-foot .st-price{margin:0}
.st-hero-tip{font-size:10.5px;color:#9AA3AF;margin:6px 2px 10px}

/* 详情：整套示例宫格 */
/* ★ 2026-10-19（用户：「页面显示全乱了」「还是有截断」）：
   原因是这里强制 3:4 + cover —— 套图例图多是横图（900×383 / 2560×1440），
   被塞进竖槽后左右各裁掉一大块，客户看到的「截断」就是裁出来的。
   改为：一行一张、按原比例完整显示（contain），永远不裁内容。 */
.st-grid{display:grid;grid-template-columns:1fr;gap:8px}
.st-gitem{position:relative;border-radius:9px;overflow:hidden;background:#EEF1F5}
.st-gitem img{display:block;width:100%;height:auto;object-fit:contain;background:#EEF1F5}
.st-gno{position:absolute;left:5px;top:5px;background:rgba(9,12,16,.6);color:#fff;font-size:9px;
  width:16px;height:16px;line-height:16px;text-align:center;border-radius:50%}

/* ===== 2026-10-19 对话并入个人助手：子页签 + 两个视图容器 =====
   底栏不再有「对话」；助手页顶部两页签，对话是默认页。
   滚动仍然只留一层：#agViewChat 自己 flex，#chatMsgs 滚；#agViewAgents 自己滚。 */
#pane-agent { display: flex; flex-direction: column; overflow: hidden; }
.ag-tabs { flex: 0 0 auto; display: flex; gap: 8px; padding: 8px 12px 6px; background: var(--bg, #F7F8FA); }
.ag-tab { flex: 1 1 0; height: 34px; border-radius: 10px; border: 1px solid #E3E7ED; background: #fff;
  color: #4B5563; font-size: 13px; font-weight: 500; }
.ag-tab.on { background: var(--a1, #22C55E); border-color: var(--a1, #22C55E); color: #fff; font-weight: 700; }  /* v8 P1-3：原来遗留蓝色，与全站主色不一致 */
.agview { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.agview.hide { display: none !important; }
#agViewChat > .wx-wrap { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
#agViewChat #chatMsgs { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
#agViewChat .wx-input { flex: 0 0 auto; }
/* 关键：agents 视图自己**不滚**，否则又变成「外层+内层双滚动」把手指吞掉（10-19 才修过同类问题）。
   真正滚的是 #agentApp > .ag-wrap（agent_page.js 内部的一层）。 */
#agViewAgents { overflow: hidden; padding-bottom: 0; }

/* ===== 2026-10-19 交付级可读性（DeepSeek 体验评审采纳）===== */
/* 协议门：先给摘要与三条要点，全文折叠，避免一进门就是一堵字墙 */
.agree-sum{font-size:13.5px;line-height:1.75;color:#C8D0DA;background:#141A22;border:1px solid #212831;border-radius:12px;padding:12px 14px;margin-bottom:10px}
/* v10：弹窗是浅色底（var(--card)），这里原来用的是深色主题的浅灰字 ⇒ 对比度不足 */
.agree-keys{margin:0 0 12px;padding-left:18px;color:#4B5563;font-size:13px;line-height:1.9}
.agree-keys b{color:#111827}
.agree-more{margin-bottom:10px}
.agree-more>summary{cursor:pointer;color:var(--a2,#16A34A);font-size:13px;padding:6px 0}
.agree-more .agree-body{max-height:42vh;overflow:auto;margin-top:8px}
/* 计费规则一行：贴在生成按钮上方，比藏在设置里有安全感 */
.gen-rule{margin:6px 0 0;font-size:12.5px;color:#8C97A5;line-height:1.6}
/* 次级提示文字提亮，深色底上别再灰成一片 */
.hint{color:#8B95A3}
.pv-invite{margin-left:8px;font-size:12.5px;color:var(--a2,#16A34A);text-decoration:none;white-space:nowrap}
.pv-invite:hover{text-decoration:underline}
/* 登录页：先给作品，再给登录框（体验评审 P0） */
.login-show{margin:10px 0 4px}
.ls-cap{font-size:12.5px;color:#8B95A3;line-height:1.6;margin-bottom:8px}
.ls-note{font-size:12px;color:var(--sub);margin:2px 0 6px}
/* 登录墙前的一句话价值说明（可读文本，同时给搜索引擎一段真正描述业务的话） */
.ls-desc{font-size:12px;color:var(--sub);line-height:1.65;margin:0 0 10px}
.ls-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
/* ★ 2026-10-19 审查发现：3/4 竖图把首屏撑破，登录页第一屏只能看到半截图（像加载失败）。
   改成正方形：三张仍然并排，高度省下约 40px，整页能收进一屏。 */
.ls-row img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;border:1px solid #212831;background:#141920}

/* ===== 2026-10-19 对话首屏欢迎块（空会话不再一片白） ===== */
.chat-hero{padding:26px 18px 10px;text-align:left}
.chat-hero .ch-hi{font-size:20px;font-weight:700;color:var(--txt);letter-spacing:.2px}
.chat-hero .ch-sub{margin-top:8px;font-size:13.5px;line-height:1.75;color:var(--sub)}
.chat-hero .ch-rows{display:flex;flex-direction:column;gap:9px;margin-top:16px}
.chat-hero .ch-eg{text-align:left;padding:12px 14px;border-radius:14px;border:1px solid var(--line);
  background:#fff;color:var(--txt);font-size:13.5px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.chat-hero .ch-eg:active{background:#F2F5FA}

/* 作品页：过期作品的占位（不再空着，也不再打 404 请求） */
.wk-exp{display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:#8A94A6;font-size:12.5px;line-height:1.6;text-align:center}
.wk-exp span{font-size:12px;color:#AAB2C0}


/* ===== 2026-10-19 触控目标与可读性统一（体检 53 处过小命中） =====
   规范：所有可点元素最小 40×40（拇指可点），小字对比度 ≥3:1。
   只加最小尺寸与内边距，不改各自配色与布局层级。 */
button, .chip, .tab, .pp-chip, .wk-tab, .ag-tab, .tpl-cat, .btn-ghost, .btn-primary {
  min-height: 40px;
}
.tpl-star, .tpl-use, #btnSessToggle, #btnDrawerNew, #btnModelPick, #genAdvToggle,
#stPick, #stQ, #meRecharge, #mineLabelToggle, #btnChatSend, .ag-tab {
  min-height: 40px;
}
.tpl-star { min-width: 40px; padding: 0 8px; }
#btnSessToggle { min-width: 40px; }
/* 小字提亮：正文辅助色从 #8A94A6 提到 #5F6B7A（对比度约 4.6:1） */
:root { --sub-strong: #5F6B7A; }
.hint, .sub, .muted, .wk-meta, .st-sub, .pp-hint, .mini, small { color: var(--sub-strong); }

/* 模型名不许被省略成「模型」半个词（体检 ellipsis-label 命中） */
.wx-mpick span{max-width:none}
.wx-mpick{max-width:60vw}
#mpickName{overflow:visible;text-overflow:clip}
/* 小字提亮（体检 2.55~2.64:1，低于 3:1） */
#statusMsg,.meta,.st-m2{color:#5F6B7A}

/* 页脚协议链接：46×16 太小，扩到可点范围（体检 small-target 命中） */
a[href="/privacy"], a[href="/agreement"], a[href="/terms"]{
  display:inline-block;padding:12px 6px;margin:-6px 0;line-height:1.2;
}

/* ═══ 2026-10-19 审计轮 61/60/63/62：无障碍与降级 ═══ */
/* #61 动效可关闭：系统开了"减少动态效果"（前庭功能障碍用户会晕），一律不做位移/缩放动画。
   ★ 用 animation-duration 而不是 display:none —— 元素必须仍然出现，只是不动。 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}
/* #60 触屏反馈：移动端没有 hover，只有 :active。原来 16 处 hover / 5 处 active，
   按钮点了没有任何反馈。这里统一给所有可点元素一个按下态（只改透明度，不动布局）。 */
button:active, .nav-item:active, .chip:active, .tpl-card:active,
.tab:active, .card:active, .wk:active { opacity: .72; }
/* #63 打印：客户会打印协议/订单，白底黑字、去掉导航与阴影。 */
@media print {
  .side, .nav-item, #genProg, .agree-gate, .lightbox, .msheet, .wx-mask, .toast { display: none !important; }
  body, .app, .pane { background: #fff !important; box-shadow: none !important; }
  * { color: #000 !important; }
}

/* ═══ 2026-10-19 去内联样式（CSP style-src 'self'）═══
   目的：把 HTML 里的 21 处 style="..." 换成等价工具类，
   让 CSP 不必再对 style 放 unsafe-inline（XSS 能用 style 做的信息泄露也就堵住了）。
   为什么一律加 !important：内联样式原本的优先级高于任何选择器，
   工具类要**完全等价**才能保证换成 class 后视觉一模一样 —— 等价性优先于优雅。 */
.u-m0{margin:0!important}
.u-minw0{min-width:0!important}
.u-my10{margin:10px 0!important}
.u-mt6{margin-top:6px!important}
.u-mt8{margin-top:8px!important}
.u-mt10{margin-top:10px!important}
.u-mt12{margin-top:12px!important}
.u-mt14{margin-top:14px!important}
.u-hide{display:none!important}
.u-hide-plain{display:none!important}
.u-rowwrap{gap:8px;flex-wrap:wrap}
.u-rowwrap-t2{gap:8px;flex-wrap:wrap;margin-top:2px!important}
.u-rowwrap-b10{gap:8px;flex-wrap:wrap;margin-bottom:10px!important}
.u-rowwrap-t12{gap:8px;flex-wrap:wrap;margin-top:12px!important}

/* 2026-10-19 CSP：JS 拼 HTML 时的静态内联样式改工具类（动态的仍在 JS 里用 el.style 赋值） */
.jsx-w28{width:28px}
.jsx-mt8{margin-top:8px}
.jsx-flex1-minw0{flex:1;min-width:0}
.jsx-flex1-fs14{flex:1;font-size:14px}
.jsx-flex1{flex:1}
.jsx-hide{display:none}
.jsx-mt12{margin-top:12px}
.jsx-mt10{margin-top:10px}
.jsx-mt6{margin-top:6px}
.jsx-mt14{margin-top:14px}
.jsx-pre{white-space:pre-wrap;font-family:inherit;margin:0}
.jsx-p14{padding:14px 0}
.jsx-maxw200{max-width:200px;margin:12px auto 0}
.jsx-m8{margin:8px 0 0}
.jsx-m0{margin:0}
.jsx-flexgap6{display:flex;gap:6px}
.jsx-block44{display:block;text-align:center;line-height:44px;cursor:pointer}

/* ===== 2026-10-20 保存大图浮层（微信/iOS 长按保存专用） =====
   为什么需要：微信内置浏览器里 blob 图片长按没有"保存"菜单，只能给 <img> 直链。
   浮层要够大（占屏 90%），长按时手指才对准图片本体。 */
.save-mask{position:fixed;inset:0;z-index:9999;background:rgba(8,10,14,.92);
  display:flex;align-items:center;justify-content:center;padding:12px;
  -webkit-overflow-scrolling:touch}
.save-box{width:100%;max-width:560px;display:flex;flex-direction:column;align-items:center;gap:10px}
.save-tip{color:#fff;font-size:13.5px;line-height:1.6;text-align:center;
  background:rgba(255,255,255,.1);border-radius:999px;padding:7px 16px}
.save-img{width:100%;max-height:72vh;object-fit:contain;border-radius:10px;
  background:#0d1117;-webkit-touch-callout:default;user-select:auto}
.save-close{margin-top:2px}

/* ===== 2026-10-20 注册验证码行 ===== */
.code-row{display:flex;gap:8px;align-items:stretch}
.code-row .input{flex:1;min-width:0}
.code-btn{white-space:nowrap;padding:0 14px;font-size:13.5px}
.code-btn[disabled]{opacity:.55;cursor:not-allowed}

/* 保存浮层里「要原图」的入口：小一点、不抢主按钮的视觉 */
.save-more{font-size:12.5px;opacity:.85}
.save-more[disabled]{opacity:.45;cursor:default}

/* ===== 2026-10-20 PPT 页手机端提示（不能用内联 style，CSP 会拦） ===== */
.pp-note{background:#fff6e8;border:1px solid #f0d9b5;border-radius:8px;
  padding:8px 11px;margin:6px 0 10px;font-size:13px;line-height:1.6;color:#6b5230}

/* ===== 2026-10-20「出图示例」入口卡（不用内联 style，CSP 会拦） ===== */
.me-entry{display:flex;align-items:center;justify-content:space-between;text-decoration:none;color:inherit}
.me-entry-l{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.me-entry-r{color:#c8481e;white-space:nowrap;font-size:14px}

/* ===== 2026-10-20 C 批：登录首屏 =====
   ① 主张区（一句卖点 + 一行价格）：客户第一眼要知道"凭什么选它"
   ② 示例条：三张 64px 小图 + 入口，替掉原来 250px 高的大图墙 */
.lg-pitch{display:flex;flex-direction:column;gap:5px;padding:2px 2px 10px}
.lg-pitch b{font-size:21px;line-height:1.35;color:#1c1710;letter-spacing:.01em}
.lg-pitch span{font-size:12.5px;color:#5c5244;line-height:1.5}
.ls-strip{display:flex;align-items:center;gap:10px;text-decoration:none;
  background:#fff;border:1px solid #e6e8ec;border-radius:12px;padding:7px 10px;margin-bottom:8px}
.ls-thumbs{display:flex;gap:5px}
.ls-thumbs img{width:52px;height:52px;object-fit:cover;border-radius:7px;display:block;background:#eef0f3}
.ls-go{margin-left:auto;font-size:13.5px;color:#079d4d;font-weight:700;white-space:nowrap}

/* 版本号：只用于「用户说没变化」时快速判断新版/旧版 */
.ver{margin-top:8px;font-size:11px;color:#a3a9b3;letter-spacing:.02em}

/* ★ 2026-10-20：模板页底部的静态说明区（给搜索引擎与第一次来的人）。
   原来首页 curl 出来几乎全是《使用协议》正文 —— 模板墙是 JS 渲染，爬虫看不到。
   这块是真内容（不是隐藏文字），滑到模板底部就能看到。 */
.seo-block{margin:34px 0 8px;padding:22px 20px;border-top:1px solid var(--line);
  color:var(--sub);font-size:14px;line-height:1.9}
.seo-block h2{font-size:16px;color:var(--txt);margin:20px 0 8px}
.seo-block h2:first-child{margin-top:0}
.seo-block p{margin:8px 0}
.seo-cats{background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:12px 14px;font-size:13.5px}
.seo-faq{margin:6px 0 0;padding:0}
.seo-faq dt{font-weight:700;color:var(--txt);margin-top:12px;font-size:14px}
.seo-faq dd{margin:4px 0 0;color:var(--sub);font-size:13.5px}
.seo-links{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:18px}
.seo-links a{color:var(--acc);text-decoration:none;font-size:13.5px}
.seo-links a:hover{text-decoration:underline}
@media(max-width:520px){
  .seo-block{padding:18px 4px}
  .seo-links{flex-direction:column;gap:8px}
}

/* ★ 2026-10-20：模板页「本周热门」条（服务端 weekly 运营位） */
.tpl-hot{margin:6px 0 14px}
.th-head{display:flex;align-items:baseline;gap:10px;margin:2px 0 8px}
.th-head b{font-size:14.5px;color:var(--txt)}
.th-head span{font-size:12.5px;color:var(--sub)}
.th-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.th-row .tpl{width:auto}
@media(max-width:520px){
  .th-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .th-head{flex-wrap:wrap;gap:4px}
}

/* ★ 2026-10-20：模板卡「新」标（新上架的模板，如销售战报） */
.tpl-new{position:absolute;top:8px;left:8px;z-index:2;background:#22C55E;color:#fff;
  font-size:11px;line-height:1;padding:4px 6px;border-radius:6px;letter-spacing:.05em}
/* 9:16 模板（手机竖屏海报）在 3:4 卡面里按完整显示，不裁掉首尾的标题与数据 */
.tpl-cover.tall img{object-fit:contain;padding-bottom:44px;box-sizing:border-box}

/* ★ 2026-10-21：模板区常驻提示（支持模板定制 → 联系客服）
   常驻不关闭；窄屏自动折行，按钮不挤成一坨。 */
.tpl-notice{display:flex;align-items:flex-start;gap:9px;margin:10px 0 2px;padding:10px 12px;
  border:1px solid #F3E3BE;border-radius:12px;background:linear-gradient(180deg,#FFFBF1,#FFF7E6)}
.tn-tag{flex:0 0 auto;background:#B45309;color:#fff;font-size:11px;font-weight:700;line-height:1;
  padding:5px 7px;border-radius:6px;letter-spacing:.02em;margin-top:1px}
.tn-body{flex:1 1 auto;min-width:0;font-size:12.5px;line-height:1.55;color:#7C4A03}
.tn-body b{font-weight:700;color:#7C2D12;margin-right:4px}
.tn-sub{color:#8A5A14}
.tn-no{display:block;color:#7C2D12;font-weight:700;font-variant-numeric:tabular-nums;margin-top:1px}
.tn-btn{flex:0 0 auto;align-self:center;border:1px solid #E8C889;background:#fff;color:#8A4B08;
  font-size:12.5px;font-weight:700;padding:7px 11px;border-radius:9px;white-space:nowrap;
  touch-action:manipulation}
.tn-btn:active{background:#FFF3DC}
@media (max-width:420px){
  .tpl-notice{flex-wrap:wrap}
  .tn-body{flex:1 1 100%;order:3;margin-top:2px}
  .tn-btn{margin-left:auto}
}

/* ★ 2026-10-21：提示词里引用参考图（@图1 / @图2）
   胶囊行放在提示词框下面；@ 候选菜单绝对定位贴在框下方。 */
.ref-chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0}
.ref-chips.hide{display:none}
.ref-chip{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);
  background:var(--card);color:var(--txt);border-radius:999px;padding:5px 10px;font-size:12.5px;
  font-weight:600;touch-action:manipulation}
.ref-chip:active{background:var(--acc-weak,rgba(16,185,129,.12))}
.ref-chip b{color:var(--acc);font-weight:700}
.at-menu{position:absolute;z-index:50;min-width:180px;max-width:min(320px,86vw);
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 8px 28px rgba(0,0,0,.14);padding:6px;margin-top:4px}
.at-menu.hide{display:none}
.at-item{display:flex;align-items:center;gap:8px;width:100%;border:0;background:transparent;
  padding:8px;border-radius:9px;text-align:left;font-size:13px;color:var(--txt);
  touch-action:manipulation}
.at-item:active,.at-item:hover{background:var(--acc-weak,rgba(16,185,129,.10))}
.at-item img{width:26px;height:26px;object-fit:cover;border-radius:6px;flex:0 0 auto}
.at-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ★ 2026-10-21：邀请页（邀请码 / 分享文案 / 战绩 / 记录） */
.inv-hero{background:linear-gradient(135deg,#0E7C5A,#12A374);border-radius:16px;padding:16px;
  color:#fff;margin-bottom:12px}
.inv-hero-t{font-size:17px;font-weight:800;letter-spacing:.01em}
.inv-hero-s{font-size:12.5px;opacity:.88;margin-top:4px;line-height:1.5}
.inv-code-row{display:flex;align-items:center;gap:10px;margin-top:14px}
.inv-code{flex:1 1 auto;background:rgba(255,255,255,.16);border:1px dashed rgba(255,255,255,.45);
  border-radius:12px;padding:10px 14px;font-size:22px;font-weight:800;letter-spacing:.14em;
  font-variant-numeric:tabular-nums;text-align:center}
.inv-code-row .btn-primary{background:#fff;color:#0E7C5A;border-color:#fff}
.inv-card{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:14px;margin-bottom:12px}
.inv-label{font-size:12.5px;font-weight:700;color:var(--sub);margin-bottom:8px}
.inv-share{margin:0;padding:12px;border-radius:10px;background:var(--bg,#F6F7F9);
  border:1px solid var(--line);font-size:12.5px;line-height:1.7;white-space:pre-wrap;
  word-break:break-word;color:var(--txt);max-height:190px;overflow:auto;font-family:inherit}
.inv-link-row{display:flex;align-items:center;gap:8px;margin-top:10px}
.inv-link{flex:1 1 auto;min-width:0;font-size:12px;color:var(--acc);text-decoration:none;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inv-stat-row{display:flex;gap:12px}
.inv-stat{flex:1 1 0;text-align:center;padding:6px 0}
.inv-stat-n{font-size:24px;font-weight:800;color:var(--txt);font-variant-numeric:tabular-nums}
.inv-stat-l{font-size:12px;color:var(--sub);margin-top:2px}
.inv-bar{height:8px;border-radius:999px;background:var(--line);overflow:hidden;margin:12px 0 8px}
.inv-bar-fill{height:100%;background:linear-gradient(90deg,#12A374,#31C58F);border-radius:999px;
  transition:width .3s ease}
.inv-next{margin:0;font-size:12.5px;color:var(--sub)}
.inv-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;
  border-top:1px solid var(--line);font-size:13px}
.inv-row:first-of-type{border-top:0}
.inv-row-p{font-variant-numeric:tabular-nums;color:var(--txt)}
.inv-row-d{color:var(--sub);font-size:12px}
.inv-rule{margin:2px 0 0;line-height:1.6}

/* ★ 2026-10-21：生成失败回执（原因 + 已退款 + 重试），不再一闪就没 */
.fail-box{display:flex;align-items:flex-start;gap:10px;margin-top:10px;padding:12px 14px;
  border:1px solid #F3C3C3;background:#FDF2F2;border-radius:12px}
.fail-box.hide{display:none}
.fail-box .fi{flex:1 1 auto;min-width:0}
.fail-box .ft{font-size:13.5px;font-weight:700;color:#B3261E;margin:0 0 4px}
.fail-box .fd{font-size:12.5px;color:#7A3B36;margin:0;line-height:1.6;word-break:break-word}
.fail-box .fb{flex:0 0 auto;align-self:center;border:1px solid #E7A9A4;background:#fff;color:#B3261E;
  border-radius:999px;padding:7px 14px;font-size:12.5px;font-weight:700;touch-action:manipulation}
.pb-tip{margin:8px 0 0}

/* ★ 2026-10-21：模板第二排筛选芯片 */
.tpl-filters{display:flex;gap:6px;overflow-x:auto;padding:8px 0 10px;margin-bottom:2px;scrollbar-width:none}
.tpl-filters::-webkit-scrollbar{display:none}
.tpl-fchip{flex:0 0 auto;border:1px solid var(--line);background:var(--card);color:var(--sub);
  border-radius:999px;padding:5px 11px;font-size:12.5px;touch-action:manipulation}
/* ★ 2026-10-23：这套主题的强调色变量是 --a1（--acc 在这里是空的 ⇒ background 失效变透明，
   选中态看着像"灰掉了"）。改用 --a1 并给足回退值。 */
.tpl-fchip.on{background:var(--a1,#22C55E);border-color:var(--a1,#22C55E);color:#fff;font-weight:700}

/* ★ 2026-10-21：全局生成进度条（跨页面可见） */
.job-pill{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(58px + env(safe-area-inset-bottom));
  z-index:60;display:flex;align-items:center;gap:9px;background:#111;color:#fff;
  border-radius:999px;padding:9px 16px;font-size:13px;font-weight:600;
  box-shadow:0 6px 22px rgba(0,0,0,.22);max-width:calc(100vw - 32px)}
.job-pill.hide{display:none}
.job-pill .jp-dot{width:8px;height:8px;border-radius:50%;background:#38d39f;animation:jpPulse 1.1s infinite}
.job-pill .jp-bar{width:66px;height:4px;border-radius:99px;background:rgba(255,255,255,.28);overflow:hidden}
.job-pill .jp-bar i{display:block;height:100%;background:#38d39f;border-radius:99px;transition:width .3s}
@keyframes jpPulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ★ 2026-10-22：作品删除按钮（两步确认：第一下变红问"确认删除？"） */
.wk-del{color:#c0392b}
.wk-del.sure{background:#fdecea;border-color:#f3c3c3;color:#b3261e;font-weight:800}

/* ★ 2026-10-23：站内公告条 + 公告正文弹层 */
.notice-bar{display:flex;align-items:center;gap:9px;margin:0 16px;padding:9px 12px;flex:0 0 auto;
  border-radius:10px;background:#eef4ff;border:1px solid #cfddfa;color:#1f3f7a;font-size:13px}
.notice-bar.hide{display:none}
.notice-bar.warn{background:#fff4e5;border-color:#f3d9ae;color:#7a5320}
.notice-bar.promo{background:#eefaf2;border-color:#c6ebd6;color:#1d6b45}
.notice-bar .nb-tag{flex:0 0 auto;font-weight:800;font-size:12px;border-radius:6px;
  padding:1px 6px;background:#fff;border:1px solid currentColor}
.notice-bar .nb-t{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.notice-bar .nb-a{flex:0 0 auto;color:inherit;text-decoration:underline;font-size:12.5px}
.notice-bar .nb-x{flex:0 0 auto;border:0;background:transparent;color:inherit;font-size:16px;
  line-height:1;padding:2px 4px;cursor:pointer;opacity:.6}
.notice-list{display:flex;flex-direction:column;gap:10px}
.notice-item{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--card)}
.notice-item h4{margin:0 0 6px;font-size:14.5px;display:flex;gap:8px;align-items:center}
.notice-item p{margin:0;font-size:13px;line-height:1.65;color:var(--sub);white-space:pre-wrap}
.notice-item .nt{font-size:11.5px;color:var(--sub);margin-top:8px}

/* ★ 2026-10-23：顶栏公告铃铛 + 公告弹层 */
.notice-btn{position:relative;font-size:15px;line-height:1}
.notice-btn .ndot{position:absolute;top:3px;right:4px;width:7px;height:7px;border-radius:50%;
  background:#e8453c;border:1px solid #fff}
.notice-btn .ndot.hide{display:none}
.nm{position:fixed;inset:0;z-index:80;background:rgba(12,16,22,.42);display:flex;
  align-items:flex-start;justify-content:center;padding:60px 16px;overflow:auto}
.nm.hide{display:none}
.nm-box{width:100%;max-width:560px;background:var(--card);border-radius:16px;
  box-shadow:0 18px 50px rgba(0,0,0,.22);overflow:hidden}
.nm-bar{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;
  border-bottom:1px solid var(--line)}
.nm-bar b{font-size:15px}
.nm-x{border:0;background:transparent;font-size:16px;color:var(--sub);cursor:pointer;padding:2px 6px}
.nm-body{padding:14px 16px;max-height:70vh;overflow:auto}

/* ★ 2026-10-23：生成规则改成两条并列（原来一句话自相矛盾） */
.gen-rule{margin:6px 0 0;font-size:12.5px;color:var(--sub);line-height:1.7}
.gen-rule p{margin:0 0 3px}
.gen-rule p:last-child{margin-bottom:0}
.gen-rule b{color:var(--txt);font-weight:700}