/* 页面特有版式。组件层不放这里。
   颜色一律引用 tokens.css 的变量，不写死色值。 */

/* ---------- 顶栏 ---------- */
/* 顶栏本身通栏铺底、画底边线；真正的内容排在 .top-inner 里，
   宽度与 main 完全一致（min(1120px,92vw)），logo 才能和下方正文左对齐。 */
.top{
  padding:0; border-bottom:1px solid var(--line); background:var(--surface);
  position:sticky; top:0; z-index:9;
}
.top-inner{
  display:flex; align-items:center; justify-content:space-between;
  width:min(1120px,92vw); margin:0 auto; height:64px;
}
.logo{display:flex;align-items:center;gap:var(--s3);font-weight:650;font-size:var(--t4)}
/* 插画型 logo：显示高 32px（顶栏 64px 的一半），宽度按资产比例自适应。
   width/height 属性写的是 2 倍资产尺寸（146×64，高分屏用），浏览器据此
   按比例预留位置，图片加载完不会引起布局跳动。 */
.logo-img{height:32px;width:auto;display:block}
.who{display:flex;align-items:center;gap:var(--s2)}
.pill{font-size:var(--t2);color:var(--muted)}
.pill b{color:var(--accent);font-size:var(--t4)}

/* ---------- 主体 ---------- */
main{flex:1;width:min(1120px,92vw);margin:0 auto;padding:var(--s7) 0 var(--s7)}

/* 首屏第一排：左文（标题/副标题/入口按钮）右上传框，两栏等分铺满 1120px 容器。
   上一版把 .hero / .drop 限宽 760px 居中，1440px 视口下两侧空出大片余白、显得空；
   回到两栏铺满后左右两栏各自撑满半宽（1120−48)/2 = 536px。 */
.hero-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s7);align-items:center}
.hero{text-align:left}
.hero h1{font-size:var(--t6);line-height:1.22;margin:0 0 var(--s3);font-weight:700;letter-spacing:-.5px}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero .sub{color:var(--muted);font-size:var(--t4);margin:0;line-height:1.7}
/* 左栏入口按钮：打开同一个文件选择器（.drop 里的「选择文件」是它的替身入口）。 */
.hero .cta{display:flex;align-items:center;gap:var(--s2);margin-top:var(--s5)}

/* 上传区：右栏整列铺满（不再限宽），框内内容仍居中。 */
.drop{
  border:1.5px dashed var(--line-strong); border-radius:var(--r3); background:var(--sunken);
  padding:var(--s6) var(--s5); display:flex; flex-direction:column; align-items:center;
  text-align:center; transition:border-color .15s,background .15s;
  /* 整块可点（见 app.js），鼠标进来就给个手型。里头真正的控件保持各自的指针。 */
  cursor:pointer;
}
.drop:hover{border-color:var(--accent)}
.drop.over{border-color:var(--accent);background:var(--accent-weak)}
.drop select{cursor:default}
/* 粘贴成功后的短暂高亮，告诉用户「图落到这儿了」。
   与悬停态区分：.over 是虚线蓝框（可以放），.flash 是实线蓝框（已经放好了）。
   类名由 app.js 加，1 秒后自己摘掉。 */
.drop.flash{border-color:var(--accent);border-style:solid;background:var(--accent-weak)}
.drop .ic{
  width:44px;height:44px;border-radius:var(--r2);background:var(--surface);border:1px solid var(--line);
  display:grid;place-items:center;margin-bottom:var(--s3);box-shadow:var(--shadow-1);
}
.drop .ic svg{width:21px;height:21px;stroke:var(--accent);fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.drop .d1{font-size:var(--t4);font-weight:600;margin-bottom:var(--s2)}
.drop .d2{font-size:var(--t2);color:var(--muted)}
/* 第二行说明（格式说明）与上一行拉开一点距离。原来是内联 margin-top:4px。 */
.drop .d2 + .d2{margin-top:var(--s1)}
/* 第三行是「首次赠送 3 积分」这类补充信息，比格式说明再小一号，
   避免说明文字堆成一片、把上传框挤满（设计稿只留一句，这里保留信息但降权）。 */
.drop .d2.sub{font-size:var(--t1)}
.drop .fname{margin-top:var(--s2);color:var(--accent);font-size:var(--t2);word-break:break-all}
.drop .row{display:flex;gap:var(--s2);align-items:center;margin-top:var(--s4);justify-content:center;flex-wrap:wrap}
/* 比例选择：标签与下拉同一行居中对齐。原来是内联的 display/gap:6px。 */
.drop .row label{display:flex;align-items:center;gap:var(--s2)}
.drop .row select{width:auto;background:var(--surface);border-color:var(--line);font-size:var(--t2)}

/* 信任带：回答「多少钱 / 要多久 / 产出什么」这三个付款决策问题，
   是首屏唯一的「证据」区块。三张卡等分铺满容器，每张卡 = 小标题 + 数值 + 补充说明。 */
.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);margin-top:var(--s6)}
.trust .t{background:var(--surface);border:1px solid var(--line);border-radius:var(--r2);
  padding:var(--s4)}
.trust .k{font-size:var(--t2);color:var(--muted);margin-bottom:var(--s1)}
.trust .v{font-size:var(--t4);font-weight:600}
.trust .d{font-size:var(--t1);color:var(--muted);margin-top:var(--s1)}

/* 真实案例：三张真图跑出来的成品，每张卡可下载 PPTX。
   这一块回答的是「它到底能不能用」——真图、真数字、真文件。 */
/* 区块标题下的整句说明。其他区块没有这句，所以单独一个类，不往 .sec-title 里塞。 */
.sec-sub{color:var(--muted);font-size:var(--t2);line-height:1.7;margin:calc(-1 * var(--s2)) 0 var(--s4);max-width:760px}
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);align-items:stretch}
.case{background:var(--surface);border:1px solid var(--line);border-radius:var(--r2);
  overflow:hidden;display:flex;flex-direction:column}
/* 图区：三张卡用同一个 16:9 框，卡片之间才对得齐（三张成品的实际比例是
   1.77 / 1.79 / 2.10，取最「高」的那个当框，宽的那张上下留一点底色即可）。
   .frame 再按图片自己的比例居中放在框里，预留宽高比防布局跳动（见 examples._size）。 */
.case .shot{position:relative;aspect-ratio:16/9;background:var(--sunken);
  border-bottom:1px solid var(--line);display:grid;place-items:center;overflow:hidden}
.case .frame{position:relative;width:100%}
.case .frame img{display:block;width:100%;height:100%;object-fit:contain}
/* 原图 / 成品 切换：平时就一个小胶囊浮在右上角，点一下换一张。
   文案是动词（「看原图」），字号提到 t2 —— 这是案例卡上最重要的交互。 */
.case .switch{position:absolute;right:var(--s2);top:var(--s2);z-index:2;line-height:1.6;
  background:var(--surface);border:1px solid var(--line);border-radius:999px;
  padding:var(--s1) var(--s2);font-size:var(--t2);color:var(--muted);box-shadow:var(--shadow-1)}
.case .switch:hover{border-color:var(--accent);color:var(--accent)}
.case .body{padding:var(--s4);display:flex;flex-direction:column;flex:1}
.case .kind{font-size:var(--t1);color:var(--accent);font-weight:600}
.case h3{margin:var(--s1) 0 var(--s2);font-size:var(--t4);font-weight:650;line-height:1.45}
.case .note{font-size:var(--t2);color:var(--muted);line-height:1.65;margin:0 0 var(--s3);flex:1}
/* 元素计数：全部来自 PPTX 实数（app/examples.py 的 stats）。
   数字放大、标签压小，「多少个可编辑元素」是这张卡最该被看见的一行。 */
.case .stats{display:flex;gap:var(--s4);border-top:1px solid var(--line);
  padding-top:var(--s3);margin-bottom:var(--s3)}
.case .stats b{display:block;font-size:var(--t5);font-weight:650;
  font-variant-numeric:tabular-nums;line-height:1.2}
.case .stats span{font-size:var(--t1);color:var(--muted)}
/* 成品里一张位图都没有时把数字点成绿的：这是产品最硬的一条卖点。 */
.case .stats .none b{color:var(--ok)}
.case .acts{display:flex;gap:var(--s2)}
.case .acts .btn{flex:1;text-align:center}

/* 案例大图：一张放满，用上面的分段控件在「原图 / 成品」之间来回切 */
.modal-xwide{width:min(1060px,100%)}
.caseHead{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s3)}
.caseHead .sub{margin:var(--s1) 0 var(--s4)}
.caseBig{margin:0}
/* 按自然尺寸显示、只封顶不拉伸：宽度写 100% 会把 598px 的原图硬拉到 1060px，
   拉大必糊。原图本来小就让它小着显示——小而清晰好过大而模糊。 */
.caseBig img{display:block;margin:0 auto;width:auto;height:auto;max-width:100%;max-height:68vh;
  border:1px solid var(--line);border-radius:var(--r1);background:var(--sunken)}

/* 任务卡 / 历史 */
/* 任务卡与上一块（效果对比）之间留白。原来是内联 margin-top:var(--s5)。 */
.jobcard{margin-top:var(--s5)}
/* 我的转换记录：文件名可能是没有断点的长 ASCII 串（截图名带时间戳），
   单元格的 min-content 被它撑到 655px，375px 下整页横向溢出 393px。
   文件名允许任意位置断行；卡片再兜一层横向滚动，异常长内容也不会撑破页面。 */
#hist td:first-child{word-break:break-all}
/* 时间列（「刚刚」）在 375px 下被挤到 34px，两个汉字叠成两行。不折行。 */
#hist td:last-child{white-space:nowrap}
#histCard .card{overflow-x:auto}
.jobHead{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s3)}
.status{font-weight:600}
.spin{width:14px;height:14px;border:2px solid var(--line);border-top-color:var(--accent);
  border-radius:50%;animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.bar{height:6px;background:var(--sunken);border-radius:99px;overflow:hidden}
.bar i{display:block;height:100%;width:8%;border-radius:99px;background:var(--accent);transition:width .6s}
.hint{color:var(--muted);font-size:var(--t2);margin-top:var(--s2)}
/* 「重试一次（1 积分）」+「换个文件」在 375px 下摆不下一行，允许换行。 */
.done{display:flex;gap:var(--s2);align-items:center;margin-top:var(--s3);flex-wrap:wrap}
/* 已用时：右对齐推到行尾，秒级跳动用等宽数字避免抖动。前端自算，不用后端给。 */
.elapsed{margin-left:auto;color:var(--muted);font-size:var(--t2);font-variant-numeric:tabular-nums;
  white-space:nowrap}
/* 中间稿：克制——细边框 + 沉底背景，尺寸明显小于成品，不抢「下载 PPTX」的风头。 */
.preview{margin:var(--s3) 0 0;padding:var(--s2);background:var(--sunken);
  border:1px solid var(--line);border-radius:var(--r1)}
.pvcap{color:var(--muted);font-size:var(--t2);margin-bottom:var(--s2)}
.pvcap b{color:var(--fg);font-weight:600}
/* 让图自己定宽（而不是撑满一行再用 object-fit 居中），否则宽图两侧留一大片空白 */
.preview img{display:block;margin:0 auto;width:auto;max-width:100%;max-height:200px;
  border-radius:var(--r1);background:var(--surface);border:1px solid var(--line)}
/* 中间稿的下载口：等不及的人不必干等到最后，所以它跟当前这一版中间稿绑在一起，
   就在图底下。用 ghost 不用 primary —— 「下载 PPTX」（成品）才是终点，别抢它。 */
.pvdl{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);margin-top:var(--s2)}
.err{color:var(--err);background:var(--err-weak);border:1px solid var(--err-line);border-radius:var(--r1);
  padding:var(--s2) var(--s3);margin-top:var(--s3);font-size:var(--t2);white-space:pre-wrap}

/* 折线以下 */
/* 区块标题一律左对齐，与首屏左栏同一起始线。 */
.sec-title{font-size:var(--t5);font-weight:650;margin:var(--s6) 0 var(--s3);
  display:flex;align-items:center;gap:var(--s2)}
.sec-title .badge{font-size:var(--t1);font-weight:600;color:var(--accent);
  background:var(--accent-weak);border-radius:999px;padding:var(--s1) var(--s2)}
/* 三步骤三列等分，铺满 1120px 容器（不再收进 760px 居中列）。 */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s6)}
.steps .s{display:flex;gap:var(--s3)}
.steps .n{flex:none;width:24px;height:24px;border-radius:50%;background:var(--accent-weak);
  color:var(--accent);font-size:var(--t1);font-weight:700;display:grid;place-items:center;margin-top:var(--s1)}
.steps .st{font-size:var(--t3);font-weight:600;margin-bottom:var(--s1)}
.steps .sd{font-size:var(--t1);color:var(--muted);line-height:1.55}
footer{color:var(--muted);font-size:var(--t1);text-align:center;padding:var(--s4) 0;
  border-top:1px solid var(--line)}

/* ---------- 任务入口：右边缘图标 + 抽屉 ---------- */
/* 「进行中」和「历史」挂在同一条轨道上，竖排叠放、整体垂直居中；
   两个按钮都隐藏时轨道没有尺寸，不挡内容也不占视线。 */
.dockrail{
  position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:12;
  display:flex;flex-direction:column;align-items:flex-end;gap:var(--s2);
}
.docktab{
  display:flex;flex-direction:column;align-items:center;gap:var(--s2);
  background:var(--surface);border:1px solid var(--line);border-right:none;
  border-radius:var(--r2) 0 0 var(--r2);padding:var(--s3) var(--s2);
  box-shadow:var(--shadow-2);color:var(--fg-2);
}
/* 图标左右各留一点，免得圆角把圆形的时钟切掉一块 */
.docktab .ic{width:20px;height:20px;stroke:var(--accent);fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.docktab .lbl{writing-mode:vertical-rl;font-size:var(--t1);color:var(--muted);letter-spacing:.1em}
/* 计数徽标要小于时钟图标：它是个角标，不该比主体还抢眼。 */
.docktab .cnt{min-width:16px;height:16px;line-height:16px;padding:0 var(--s1);
  border-radius:999px;background:var(--accent);color:var(--surface);
  font-size:11px;font-weight:700;text-align:center}
/* 任务刚跑完：图标换成绿勾、文字改成「已完成」，等用户看过一眼再回到常态。 */
.docktab.done .ic{stroke:var(--ok)}
.docktab.done .cnt{background:var(--ok)}

/* 抽屉：从右边推出来，整条高度贴满，不居中 —— 它是面板不是弹窗。 */
#mDock{align-items:stretch;justify-content:flex-end;padding:0}
.drawer{background:var(--surface);width:min(400px,100%);height:100%;
  display:flex;flex-direction:column;box-shadow:var(--shadow-3);
  animation:drawerIn .22s ease-out}
@keyframes drawerIn{from{transform:translateX(32px);opacity:.5}to{transform:none;opacity:1}}
.drawerHead{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  padding:var(--s4);border-bottom:1px solid var(--line)}
.drawerHead h3{margin:0;font-size:var(--t5);font-weight:650}
.drawerBody{flex:1;overflow:auto;padding:var(--s4)}
.drawerFoot{padding:var(--s3) var(--s4);border-top:1px solid var(--line);
  color:var(--muted);font-size:var(--t1);line-height:1.6}

.djob{border:1px solid var(--line);border-radius:var(--r2);padding:var(--s3);margin-bottom:var(--s3)}
.djob:last-child{margin-bottom:0}
.djob .dh{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s2)}
.djob .name{flex:1;min-width:0;font-size:var(--t3);font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.djob .dm{display:flex;align-items:center;gap:var(--s2);margin-top:var(--s2);
  color:var(--muted);font-size:var(--t2)}
.djob .dm .elapsed{margin-left:auto;font-variant-numeric:tabular-nums;white-space:nowrap}
.djob .thumb{margin:var(--s3) 0 0;padding:var(--s2);background:var(--sunken);
  border:1px solid var(--line);border-radius:var(--r1)}
.djob .thumb img{display:block;margin:0 auto;width:auto;max-width:100%;max-height:150px;
  border-radius:var(--r1);background:var(--surface);border:1px solid var(--line)}
/* 动作区可能是 1 个按钮（下载 PPTX / 重试）也可能是 2 个（跑着的任务多一个
   「下载第 N 版中间稿」），用列向 flex 让它们各占一行、自动留出间距。 */
.djob .da{margin-top:var(--s3);display:flex;flex-direction:column;gap:var(--s2)}
.djob .da .btn{width:100%;text-align:center}
/* 抽屉里的进度条是不确定态（后端只给阶段文字，不给百分比）：
   来回扫的一段光，比一个假的具体百分比诚实。 */
.bar i.sweep{width:38%;animation:sweep 1.5s ease-in-out infinite;transition:none}
@keyframes sweep{0%{margin-left:-38%}100%{margin-left:100%}}
.drawerEmpty{color:var(--muted);font-size:var(--t2);text-align:center;padding:var(--s6) 0}

/* 完成提示：任务跑完时如果用户没盯着任务卡，右下角弹一条。3 秒后自己走。 */
.toast{position:fixed;right:var(--s5);bottom:var(--s5);z-index:30;
  background:var(--fg);color:var(--surface);font-size:var(--t3);
  padding:var(--s3) var(--s4);border-radius:var(--r2);box-shadow:var(--shadow-3);
  animation:toastIn .2s ease-out}
@keyframes toastIn{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}

/* ---------- 弹窗补充版式（骨架在 components.css） ---------- */

/* `.muted` 也常挂在 <p> 上（后台空态、无权限提示、反馈列表空态），
   不清掉浏览器默认段间距就会给容器多垫一截。 */
.muted{margin:0}

.modal .row{display:flex;gap:var(--s2);align-items:center;margin:var(--s2) 0}
/* 弹窗底部次要操作行：与上面的主按钮拉开 16px（原来是内联 margin-top）。 */
.modal .row.between{justify-content:space-between;margin-top:var(--s4)}
/* 次要操作行里的链接比正文小一号（原来是内联 font-size:var(--t2)）。 */
.modal .row .link{font-size:var(--t2)}

/* 个人中心顶部的账户摘要条 */
.acct{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s2);
  background:var(--sunken);border:1px solid var(--line);border-radius:11px;
  padding:var(--s3) var(--s4);margin:var(--s3) 0 var(--s5);
}
/* 窄屏 + 长邮箱时两个 span 会一起被压扁（「剩余 N 积分」被挤成竖排）。
   左栏 min-width:0 才能收缩并省略，右栏不收缩，让邮箱先让位。 */
.acct .e{font-size:var(--t2);color:var(--fg);min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.acct .c{font-size:var(--t2);color:var(--muted);white-space:nowrap;flex:none}
.acct .c b{color:var(--accent);font-size:var(--t4)}

/* 反馈条目 */
.fb{border:1px solid var(--line);border-radius:11px;padding:var(--s3) var(--s4);
  margin-bottom:var(--s2);background:var(--surface)}
.fb .h{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s2)}
.fb .b{font-size:var(--t2);line-height:1.65;white-space:pre-wrap;word-break:break-word}
.fb .rep{margin-top:var(--s2);border-left:2px solid var(--accent);padding-left:var(--s3);
  color:var(--muted);font-size:var(--t2)}
.fbList{max-height:260px;overflow:auto}

/* API 令牌：明文只出现一次，用强调底提示用户立刻复制；列表行左栏 min-width:0
   才能在 375px 下让长用途名/长 IP 先省略，而不是把「吊销」按钮挤出弹窗。 */
.tokNew{
  background:var(--accent-weak);border:1px solid var(--accent-line);
  border-radius:11px;padding:var(--s3);margin-top:var(--s3);
}
.tokValue{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:var(--t2)}
.tokList{margin-top:var(--s3)}
.tokItem{
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s2);
  border:1px solid var(--line);border-radius:11px;padding:var(--s3) var(--s4);
  margin-bottom:var(--s2);background:var(--surface);
}
.tokMeta{display:flex;flex-direction:column;gap:var(--s1);min-width:0;
  font-size:var(--t2);color:var(--muted)}
.tokMeta b{font-weight:600;color:var(--fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tokItem .btn{flex:none}
.fbImgs{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s2)}
.fbImgs img{width:104px;height:104px;object-fit:cover;border-radius:var(--s2);
  border:1px solid var(--line);cursor:zoom-in}

/* 反馈图片拖拽区（沿用 .drop 的虚线语言）。
   display:block 必须显式写：<label> 默认 inline，而它里面装的是块级 .t/.s，
   inline 元素被块级子元素撑开时会触发「块内联（block-in-inline）」拆分——
   边框只画在两个零宽的行内片段上（左侧那两小段虚线），内容却按块级铺满整行。 */
.fbdrop{
  display:block;
  border:1.5px dashed var(--line-strong);border-radius:10px;background:var(--sunken);
  padding:var(--s4);text-align:center;margin-bottom:var(--s3);cursor:pointer;
}
.fbdrop.over{border-color:var(--accent);background:var(--accent-weak)}
.fbdrop .t{color:var(--accent);font-weight:550;font-size:var(--t2)}
.fbdrop .s{color:var(--muted);font-size:var(--t1);margin-top:var(--s1)}

/* 窄屏：首屏两栏、信任带三栏、步骤三栏全部塌成单列；顶栏内容改为多行，避免横向溢出 */
@media (max-width:820px){
  .hero-row{grid-template-columns:1fr;gap:var(--s6)}
  .trust{grid-template-columns:1fr}
  /* 触屏上「Ctrl/⌘+V」不成立，白占一行 */
  .drop .paste{display:none}
  /* 顶栏窄屏很挤：意见反馈移到页脚，顶栏留给 积分/登录/充值 */
  #btn-feedback{display:none}
  .cases{grid-template-columns:1fr}
  /* 抽屉占满整屏；提示条两端都收一点，别贴边。 */
  .toast{left:var(--s4);right:var(--s4)}
  .steps{grid-template-columns:1fr;gap:var(--s4)}
  .hero h1{font-size:var(--t6-sm)}
  .top-inner{height:auto;padding:var(--s3) 0;flex-wrap:wrap;gap:var(--s2)}
  /* 登录后顶栏右侧是一排 5 个按钮 + 积分条：375px 下 .who 不换行，每个按钮被压到
     48–55px 宽，中文逐字堆成竖排（「意/见/反/馈」）。允许换行、子项不收缩，
     按钮恢复成一行文字。 */
  .who{flex-wrap:wrap;justify-content:flex-end;max-width:100%}
  .who > *{flex:none}
  /* 长邮箱 / 长用户名在窄屏先省略，不要把顶栏顶出屏幕 */
  .who .pill{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* 后台导航 5 个标签：子项不收缩、不折行，放不下就在导航条内横向滑动。
     原来的默认收缩会把「用户反馈」压成一字一行；横向滚动比竖排文字可读得多。 */
  .navbar{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .navbar::-webkit-scrollbar{display:none}
  .navbar-inner{gap:0}
  .navbar button,.navlink{flex:none;white-space:nowrap}
}

/* ---------- 充值弹窗 ---------- */
.pkgs{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);margin-bottom:var(--s4)}
.pkg{
  border:1.5px solid var(--line);border-radius:var(--r2);padding:var(--s3) var(--s2);
  text-align:center;cursor:pointer;background:var(--surface);color:var(--fg);font:inherit;
}
.pkg:hover{border-color:var(--accent)}
.pkg.on{border-color:var(--accent);background:var(--accent-weak)}
.pkg .c{font-size:var(--t4);font-weight:650}
.pkg .a{font-size:var(--t2);color:var(--muted);margin-top:var(--s1)}
.pkg.on .a{color:var(--accent)}
.payhint{display:flex;align-items:center;justify-content:center;gap:var(--s2);
  color:var(--muted);font-size:var(--t1);margin-top:var(--s3)}
.payhint svg{width:13px;height:13px;stroke:var(--ok);fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
/* 支付方式：并排 tab。目前只露支付宝一格，flex:1 让它铺满整行、不留空槽；
   将来恢复微信/闲鱼时各自等分。 */
.paytabs{display:flex;gap:var(--s2);margin-bottom:var(--s4)}
.paytab{
  flex:1 1 0;border:1.5px solid var(--line);border-radius:var(--r2);
  background:var(--surface);color:var(--muted);cursor:pointer;
  font:inherit;font-size:var(--t3);font-weight:600;padding:var(--s2) var(--s3);
}
.paytab:hover{border-color:var(--accent);color:var(--fg)}
.paytab.on{border-color:var(--accent);background:var(--accent-weak);color:var(--accent)}
.paypanel{min-height:0}
.paycard{width:100%;max-width:220px;display:block;border-radius:var(--r2);
  border:1px solid var(--line);margin-bottom:var(--s3)}
.xianyu{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;
  background:var(--sunken);border:1px solid var(--line);border-radius:11px;
  padding:var(--s3);margin-bottom:var(--s3)}
.xy-tag{background:var(--xy-bg);color:var(--xy-fg);font-weight:700;font-size:var(--t1);
  border-radius:6px;padding:var(--s1) var(--s2)}

/* ---------- 充值弹窗双状态 ---------- */
.payhint{display:flex;align-items:center;justify-content:center;gap:6px;
  color:var(--muted);font-size:var(--t1);margin-top:var(--s3)}
.payhint svg{width:13px;height:13px;stroke:var(--ok);fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
#btn-doali svg{width:17px;height:17px;fill:currentColor;vertical-align:-3px;margin-right:6px}

/* 状态 B：三步流程。视觉权重与状态 A 的支付宝按钮相当，不缩在角落。 */
.wxstep{display:flex;gap:var(--s3);margin-bottom:var(--s5)}
/* 正文列必须 flex:1：否则 flex 项按内容宽度收缩，.btn-block / textarea 都撑不满，
   主操作会缩成一个窄按钮。min-width:0 让 textarea 能收缩而不撑破容器。 */
.wxstep > div{flex:1;min-width:0}
.wxstep .n{flex:none;width:24px;height:24px;border-radius:50%;background:var(--accent-weak);
  color:var(--accent);font-size:var(--t1);font-weight:700;display:grid;place-items:center;margin-top:2px}
.wxstep .st{font-size:var(--t3);font-weight:600;margin-bottom:var(--s3)}
.wxstep .paycard{max-width:320px;margin:0}
.wxstep textarea{margin-top:var(--s2)}

/* 「稍后再说」放在面板外：三种方式都能看到一个明确的退出按钮。 */
#btn-later{margin-top:var(--s3)}
.xianyu{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;
  background:var(--sunken);border:1px solid var(--line);border-radius:11px;
  padding:11px var(--s3);margin:var(--s3) 0}
.xy-tag{background:var(--xy-bg);color:var(--xy-fg);font-weight:700;font-size:var(--t1);
  border-radius:6px;padding:2px 8px}

/* ---------- 微信内支付引导 ----------
   微信内置浏览器会拦截支付宝唤起，只剩一条“复制链接”的死路。这里先给出
   去系统浏览器的步骤，并把本站地址做成可复制的输入框（微信里 clipboard API
   经常不可用，长按复制是兜底）。 */
.wxguide .sub{margin-bottom:var(--s4)}
.wxguideSteps{list-style:none;margin:0 0 var(--s4);padding:0;
  display:flex;flex-direction:column;gap:var(--s3)}
.wxguideSteps li{display:flex;gap:var(--s3);align-items:flex-start;
  font-size:var(--t3);line-height:1.6}
.wxguideSteps .n{flex:none;width:24px;height:24px;border-radius:50%;
  background:var(--accent-weak);color:var(--accent);font-size:var(--t1);font-weight:700;
  display:grid;place-items:center;margin-top:2px}
.wxguideHint{font-size:var(--t2);color:var(--muted);line-height:1.6;margin:0 0 var(--s2)}
.wxguideUrl{width:100%;margin-bottom:var(--s2);font-size:var(--t2);color:var(--muted)}

/* ---------- 管理后台 ---------- */
/* 导航条本身和 .top 一样通栏铺底、画底边线；标签排进 .navbar-inner 里，
   宽度与 main / .top-inner 一致（min(1120px,92vw)）。
   原来把 padding 直接加在通栏的 .navbar 上：1440 视口下标签左缘落在 x=24，
   比下方的内容面板（x=184）和顶栏 logo（x=160）差了 144px，看着就是「贴在最左边」。 */
.navbar{border-bottom:1px solid var(--line);background:var(--surface)}
.navbar-inner{
  display:flex;align-items:center;gap:var(--s1);
  width:min(1120px,92vw);margin:0 auto;
}
.navbar button{
  background:none;border:none;font:inherit;font-size:var(--t3);color:var(--muted);
  padding:var(--s3) var(--s4);border-bottom:2px solid transparent;margin-bottom:-1px;
  font-weight:500;display:flex;align-items:center;gap:var(--s2);
}
.navbar button:hover{color:var(--fg)}
.navbar button.on{color:var(--fg);border-bottom-color:var(--accent);font-weight:600}
/* 导航栏里的普通链接（素材目录 / 回首页）：与相邻按钮共用同一套内边距与下划线，
   否则它是一段没有任何点击区的裸文字——手机上既难点，也和旁边的按钮不在一条基线上。 */
.navlink{
  display:flex;align-items:center;gap:var(--s2);
  font-size:var(--t3);color:var(--muted);font-weight:500;
  padding:var(--s3) var(--s4);border-bottom:2px solid transparent;margin-bottom:-1px;
}
.navlink:hover{color:var(--fg)}
.navlink.on{color:var(--fg);border-bottom-color:var(--accent);font-weight:600}
/* 320px 级的小屏：导航标签收一点内边距，避免第三个标签被挤出首屏 */
@media (max-width:420px){
  .navbar button,.navlink{padding-left:var(--s3);padding-right:var(--s3)}
}
/* 徽标内边距跟 .stat / .sec-title .badge 一致（原为 1px 6px，两个值都在刻度外）；
   min-width 只是尺寸下限、不是间距，故保留裸值。 */
.navbar .cnt{background:var(--accent);color:var(--surface);font-size:11px;font-weight:700;
  border-radius:999px;padding:var(--s1) var(--s2);min-width:18px;text-align:center}
.admin-wrap{padding:var(--s5) var(--s5) var(--s6)}
.toolbar{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s4)}
.sel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r1);
  padding:8px var(--s3);font-size:var(--t2);color:var(--fg-2);width:auto}
.admin-wrap .card{margin-bottom:var(--s3)}
.admin-wrap .card h3{margin:0 0 var(--s4);font-size:var(--t3);font-weight:650}
/* 这里原有一条 `.admin-wrap input{width:auto}`：特异度 (0,1,1) 低于 base.css 的
   `input:not([type=radio]):not([type=checkbox]):not([type=file])` (0,3,1)，实测从未生效。
   且后台所有 input 都在 `.rowin` 里、宽度由下面的 `flex:1` 决定，该条既无效也无用，故删除。 */
.admin-wrap .rowin input{flex:1;min-width:160px}

/* 积分管理 · 用户表：375px 下「42 积分」「刚刚」被挤成两行（列宽掉到 46 / 33px）。
   邮箱列允许折行，积分与时间列不折行。 */
.admin-wrap #users td:not(:first-child){white-space:nowrap}
.admin-wrap #users td:first-child{word-break:break-all}

/* 订单表 7 列，长交易号（28 位数字，无可断点）让它的 min-content 宽达 500+px：
   375px 下整页横向溢出 214px。让卡片内部横向滚动，页面本身不溢出。
   单元格不折行：否则中文字符之间的断点会把列压到 35px，「失败」竖排成两行。 */
#viewOrders .card{overflow-x:auto}
#ordersBox th,#ordersBox td{white-space:nowrap}

/* 转换任务表 9 列，来源文件名可能很长：同样是卡片内横向滚动，页面本身不溢出。
   文件名用内层 span 限宽（td 上的 max-width 在 auto 布局下不生效）。 */
#viewJobs .card{overflow-x:auto}
#jobsBox th,#jobsBox td{white-space:nowrap}
#jobsBox .jobFile{display:inline-block;max-width:260px;overflow:hidden;
  text-overflow:ellipsis;vertical-align:bottom}

/* 任务详情弹窗：原图与最新渲染并排。跟用户端案例弹窗同一套尺寸口径——
   并排看才能判断「这一版到底像不像」，上下堆叠时视线要来回跳。 */
.jobModal{width:min(1060px,100%);max-height:88vh;overflow:auto}
.jobMeta{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);
  margin-bottom:var(--s3);font-size:var(--t2);color:var(--fg-2)}
.jobMeta .k{color:var(--muted);margin-right:var(--s1)}
.jobShot{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);margin-bottom:var(--s3)}
.jobShot figure{margin:0;min-width:0}
.jobShot figcaption{font-size:var(--t2);color:var(--muted);margin-bottom:var(--s2)}
.jobShot img{display:block;width:100%;max-height:46vh;object-fit:contain;
  background:#fff;border:1px solid var(--line);border-radius:var(--r1)}
.jobShot .empty{display:flex;align-items:center;justify-content:center;
  min-height:180px;color:var(--muted);font-size:var(--t2);
  background:var(--sunken);border:1px dashed var(--line-strong);border-radius:var(--r1)}
.jobActs{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);margin-bottom:var(--s3)}
.jobErr{white-space:pre-wrap;word-break:break-word}
@media (max-width:820px){.jobShot{grid-template-columns:1fr}}


/* 空 .fbMsg 因 .msg 的 min-height:16px 在每张反馈卡底部多留一截空白；无内容时不占位。 */
.fbMsg:empty{display:none}

/* 以下几条都是把 admin.html 里剩下的内联 style 改成类（Task 3 起不再用内联样式）。 */
/* 反馈卡里的两处间距：原内联 6px / 11px，两个值都在刻度外。 */
.fbContact{margin-top:var(--s2)}
.fbActions{margin-top:var(--s3)}
/* .rowin 里的按钮与下拉不参与拉伸（原来是 4 处内联 flex:none）。 */
.admin-wrap .rowin .btn,.admin-wrap .rowin .sel{flex:none}
/* 加积分卡两行之间、用户查询行与表格之间（原来是内联 margin-bottom）。 */
.grantRow{margin-bottom:var(--s2)}
.searchRow{margin-bottom:var(--s3)}
/* 订单加载失败时整块换成一行提示（原来是内联 margin:0）。 */
.msg-flat{margin:0}
@media (max-width:820px){
  .admin-wrap{padding:var(--s4) var(--s3)}
  /* 反馈卡的操作行（状态下拉 + 回复框 + 保存）在 375px 下总宽 323px > 卡片内容宽 287px：
     输入框的 min-width:160px 不让步，下拉与按钮 flex:none，整行顶出卡片右边框 36px。
     允许换行，保存按钮落到第二行。 */
  .admin-wrap .rowin{flex-wrap:wrap}
}

/* 状态 B 里两个按钮上下叠放时的间距——用兄弟选择器，避免内联样式 */
.wxstep .btn + .btn{margin-top:var(--s2)}

/* 触屏上把行内小按钮的点击区抬到 32px 以上。
   负 margin 抵掉新增的 padding，视觉位置和行距都不变，只是手指更好按。 */
@media (pointer:coarse){
  button.link{padding:6px 2px;margin:-6px -2px}
  .case .switch{padding:6px var(--s2)}
  .mi-btn,.rdl{padding:8px var(--s3)}
}

/* 抽屉会滑入、进度条会来回扫。系统里关了动效就全部停掉：
   这些都不承载信息，静态也读得懂。 */
@media (prefers-reduced-motion:reduce){
  .drawer,.toast{animation:none}
  .bar i.sweep{animation:none;width:100%;margin-left:0;opacity:.5}
}

/* ---------- 素材包（展示页 + 下载入口） ----------
   沿用案例卡那套表面/描边/圆角变量，别自成一套视觉。
   样张是「左原图 · 右成品」并排 —— 对照是这个包唯一要说清楚的事。 */
.mat-wrap{margin-top:var(--s7)}
/* 素材分类 tab：外观复用顶部 .navbar 的下划线规则，层级上仍是页内切换，
   不另造一套。类目多时允许换行，手机上一行放不下也不横向溢出。 */
.mat-tabs{display:flex;flex-wrap:wrap;gap:var(--s1);border-bottom:1px solid var(--line);
  margin:0 0 var(--s4)}
.mat-tabs button{background:none;border:none;font:inherit;font-size:var(--t3);
  color:var(--muted);padding:var(--s2) var(--s4);margin-bottom:-1px;
  border-bottom:2px solid transparent;font-weight:500;cursor:pointer;
  display:inline-flex;align-items:center;gap:var(--s2)}
.mat-tabs button:hover{color:var(--fg)}
.mat-tabs button.on{color:var(--fg);border-bottom-color:var(--accent);font-weight:600}
.mat-tabs button .n{font-size:var(--t1);color:var(--faint);font-weight:500;
  background:var(--sunken);border-radius:999px;padding:0 var(--s2);line-height:1.6}
.mat-tabs button.on .n{color:var(--accent)}

/* 素材包大图：上下两张、按弹窗宽度铺满。不做并排 —— 并排到 1060px 里
   每边只剩 520px，密排小字还是看不清；上下铺满才能真的"放大对比"。 */
.matZoom{display:flex;flex-direction:column;gap:var(--s4);
  max-height:74vh;overflow:auto;padding-right:4px}
.matZoom figure{margin:0}
.matZoom figcaption{font-size:var(--t2);color:var(--muted);margin-bottom:var(--s2);
  position:sticky;top:0;background:var(--surface);padding:2px 0;z-index:1}
.matZoom img{display:block;width:100%;height:auto;border:1px solid var(--line);
  border-radius:var(--r1);background:#fff}
@media (min-width:1100px){.matZoom img{width:auto;max-width:100%;margin:0 auto}}

/* ---------- 中间稿时间线（作业卡里） ----------
   "这一版哪里还不对"由后端实测（compare.py 的分块差异）给出，不是模型自述；
   留了 PPT 的那几版能单独下载 —— 下载的就是那一版拷下来的 round-N.pptx。
   （有的版本没有：轮询 5 秒才拷一次，渲染快时会连跳几号。） */
.rounds{margin-top:var(--s3);border-top:1px solid var(--line);padding-top:var(--s3);
  display:flex;flex-direction:column;gap:var(--s2)}
.rounds .rtitle{font-size:var(--t2);color:var(--muted)}
.round{display:flex;gap:var(--s3);align-items:flex-start;background:var(--sunken);
  border:1px solid var(--line);border-radius:var(--r1);padding:var(--s2) var(--s3)}
.round .rthumb{margin:0;flex:0 0 auto}
.round .rthumb img{display:block;width:132px;height:82px;object-fit:contain;
  background:#fff;border:1px solid var(--line);border-radius:6px}
.round .rbody{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--s1)}
.round .rhead{display:flex;align-items:baseline;gap:var(--s2)}
.round .rhead b{font-size:var(--t3);font-weight:650}
.round .rhead .rt{font-size:var(--t1);color:var(--faint);font-variant-numeric:tabular-nums}
.round .rnote{font-size:var(--t2);color:var(--fg-2);line-height:1.55}
.round .racts{display:flex;align-items:center;gap:var(--s3)}
.round .rdl{padding:2px var(--s3);font-size:var(--t2)}
.round .rlink{font-size:var(--t2);color:var(--accent)}

/* ---------- 菜单栏：转换 / 素材包 两个视图 ----------
   两个视图共用一份 DOM，切换只动 main 上的一个 class —— 复制一份首页 DOM
   意味着以后每改一处布局都要改两遍。
   下面两条是对称的：非素材包视图里藏掉素材包，素材包视图里藏掉其余全部。
   用 display 直接控，不碰 .hidden（那个带 !important，抢不过也没必要抢）。 */
main:not(.view-mat) > .mat-wrap{display:none}
main.view-mat > :not(.mat-wrap){display:none}

/* ---------- 素材包 · 单页列表（全部免费） ----------
   两百多页要能一眼扫过去，所以三到四列自适应；每张**只放一张缩略图**，
   成品预览留到点开大图看 —— 一次挂两百多张图，首屏会明显变慢。 */
.mat-items{margin-top:var(--s5);display:flex;flex-direction:column;gap:var(--s3)}
.mi-head{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
  justify-content:space-between}
.mi-filter{min-width:200px;max-width:280px}
.mi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:var(--s3)}
.mi{margin:0;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r1);display:flex;flex-direction:column;overflow:hidden}
/* 缩略图不裁切（contain）：设计稿多为宽图，cover 会把左右切掉，
   看着就是"一团模糊的颜色"。 */
.mi-thumb{background:#fff;border-bottom:1px solid var(--line);aspect-ratio:16/10;
  display:flex;align-items:center;justify-content:center;cursor:zoom-in;
  overflow:hidden;min-height:0}
/* min-height:0 不能省：flex 子项默认 min-height:auto，等于"不小于内容高度" ——
   竖版那张（01 是 2000×2922）会按自身比例把盒子顶高，一行里就它一个特别长。
   加了它，contain 才真的按 16/10 的框缩放。 */
.mi-thumb img{display:block;width:100%;height:100%;object-fit:contain;min-height:0}
.mi figcaption{padding:var(--s2) var(--s3);display:flex;flex-direction:column;gap:2px;
  line-height:1.5}
.mi figcaption b{font-size:var(--t2);font-weight:600}
.mi-n{font-size:var(--t1);color:var(--faint)}
/* margin-top:auto 把按钮行压到卡片底部：标题长短不一，不然按钮会参差不齐 */
.mi-acts{display:flex;align-items:center;gap:var(--s2);padding:0 var(--s3) var(--s3);
  margin-top:auto;flex-wrap:wrap}
.mi-btn{padding:4px var(--s3);font-size:var(--t2)}
@media (max-width:620px){
  .mi-grid{grid-template-columns:repeat(2,1fr)}
  .mi-filter{max-width:none;width:100%}
}

/* ---------- SEO 正文（首页底部） ----------
   这几十行字是给搜索引擎、也是给第一次来的访客看的：图片转 PPT 到底是什么、
   适合什么场景、和 OCR/截图贴图的区别、常见问题。排版按长文来，
   不与上面的产品区块抢视觉，所以限宽 820px、行高 1.8。 */
.seo-copy{max-width:820px;margin-top:var(--s6);color:var(--fg-2)}
.seo-copy h2{font-size:var(--t5);font-weight:650;line-height:1.4;
  margin:var(--s6) 0 var(--s3);color:var(--fg)}
.seo-copy h3{font-size:var(--t3);font-weight:650;line-height:1.5;
  margin:var(--s5) 0 var(--s2);color:var(--fg)}
.seo-copy p{margin:0 0 var(--s3);font-size:var(--t3);line-height:1.8}
.seo-copy ul{margin:0 0 var(--s3);padding-left:1.25em;font-size:var(--t3);line-height:1.8}
.seo-copy li{margin-bottom:var(--s1)}
.seo-copy strong{font-weight:650;color:var(--fg)}
/* 第一条 FAQ 的 h3 上边距收一点，紧跟着「常见问题」标题 */
.faq h3:first-child{margin-top:0}

/* ---------- /materials 素材目录（服务端渲染的静态页） ---------- */
.mat-main h1{font-size:var(--t6-sm);line-height:1.25;font-weight:700;
  letter-spacing:-.3px;margin:0 0 var(--s3);color:var(--fg)}
.mat-total{margin:var(--s5) 0 0;color:var(--fg-2);font-size:var(--t3)}
.mat-pack{margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid var(--line)}
.mat-pack h2{font-size:var(--t5);font-weight:650;line-height:1.4;
  margin:0 0 var(--s2);display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.mat-pack .badge{font-size:var(--t1);font-weight:600;color:var(--accent);
  background:var(--accent-weak);border-radius:999px;padding:var(--s1) var(--s2)}
.mat-pack .sec-sub{margin:0 0 var(--s3)}
.mat-shots{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3);
  margin:0 0 var(--s3)}
.mat-shots figure{margin:0;background:#fff;border:1px solid var(--line);
  border-radius:var(--r1);overflow:hidden}
.mat-shots img{display:block;width:100%;height:360px;object-fit:contain;background:#fff}
.mat-note{color:var(--muted);font-size:var(--t2);line-height:1.7;margin:0 0 var(--s4)}
.mat-pack h3{font-size:var(--t3);font-weight:650;margin:0 0 var(--s2);color:var(--fg)}
/* 两百多个标题用两栏排，扫起来比一长条快；单条不跨栏断开 */
.mat-titles{columns:2;column-gap:var(--s6);padding-left:1.2em;margin:0 0 var(--s4);
  font-size:var(--t2);line-height:1.7;color:var(--fg-2)}
.mat-titles li{break-inside:avoid;margin-bottom:var(--s1)}
.mat-back{margin-top:var(--s7);text-align:center}
@media (max-width:820px){
  .mat-shots{grid-template-columns:1fr}
  .mat-titles{columns:1}
}