:root{
--bg:#f4f6fd;
--panel:#ffffff;
--line:#e7ebf6;
--line-2:#eef1f9;
--text:#1b2340;
--text-2:#4a5273;
--muted:#8b93ab;
--accent:#7c5cff;
--accent2:#5b8cff;
--accent-soft:rgba(124,92,255,.10);
--accent-soft2:rgba(124,92,255,.18);
--radius:16px;
--shadow-s:0 2px 8px rgba(27,35,64,.05);
--shadow:0 12px 32px rgba(27,35,64,.08);
--shadow-l:0 24px 60px rgba(27,35,64,.12);
}
/* 色板：`.app` 用（整页主题）和 `.catcard` 用（首页 6 张分类卡各自上色）。
2026-09-26：原来只写了 `.app[data-accent]`，首页分类卡想「一张卡一个主题色」时
拿不到变量（子元素 var(--accent) 继承的是父级 .app 的值）。
选择器同时列上 `.catcard`，一套色板两处复用，不用维护两份。 */
.app[data-accent="coral"], .catcard[data-accent="coral"]{ --accent:#ff6a4d; --accent2:#ff9a5a; --accent-soft:rgba(255,106,77,.10); --accent-soft2:rgba(255,106,77,.18); }
.app[data-accent="pink"], .catcard[data-accent="pink"]{ --accent:#b04cf0; --accent2:#f45fc0; --accent-soft:rgba(176,76,240,.10); --accent-soft2:rgba(176,76,240,.18); }
.app[data-accent="sky"], .catcard[data-accent="sky"]{ --accent:#0e9bf0; --accent2:#38c6f4; --accent-soft:rgba(14,155,240,.10); --accent-soft2:rgba(14,155,240,.18); }
.app[data-accent="indigo"], .catcard[data-accent="indigo"]{ --accent:#4f5cf5; --accent2:#7b7bff; --accent-soft:rgba(79,92,245,.10); --accent-soft2:rgba(79,92,245,.18); }
.app[data-accent="green"], .catcard[data-accent="green"]{ --accent:#12b981; --accent2:#59d39b; --accent-soft:rgba(18,185,129,.10); --accent-soft2:rgba(18,185,129,.18); }
*{box-sizing:border-box}
html,body{height:100%}
body{
margin:0;
font-family:"PingFang SC","Microsoft YaHei","Hiragino Sans GB","Segoe UI",system-ui,-apple-system,sans-serif;
color:var(--text);
background:var(--bg);
-webkit-font-smoothing:antialiased;
}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
svg{display:block}
::selection{background:var(--accent-soft2)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#d9dfef;border-radius:20px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:#c3cbe3;background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}
.app{min-height:100%;display:flex;flex-direction:column}
/* ============ 顶栏 ============ */
.topbar{
position:sticky;top:0;z-index:40;
background:linear-gradient(100deg,#e9f9f1 0%,#fdeaf4 30%,#efe8ff 62%,#e5f0ff 100%);
border-bottom:1px solid rgba(255,255,255,.9);
box-shadow:0 1px 0 rgba(27,35,64,.05),0 10px 24px -18px rgba(27,35,64,.35);
backdrop-filter:saturate(1.2);
}
.topbar-in{
max-width:1440px;margin:0 auto;height:66px;
padding:0 22px;display:flex;align-items:center;gap:24px;
}
.logo{display:flex;align-items:center;gap:10px;flex:0 0 auto;user-select:none}
.logo-mark{
width:36px;height:36px;border-radius:11px;
background:linear-gradient(140deg,#ff7a6b,#e5384f);
box-shadow:0 6px 14px rgba(229,56,79,.30);
display:grid;place-items:center;
}
.logo-text{display:flex;flex-direction:column;line-height:1.15}
.logo-text b{font-size:16.5px;letter-spacing:.2px}
.logo-text span{font-size:11px;color:#9aa1b8;letter-spacing:.6px}
/* tabs 2026-09-26 改版：原来 tab 是「通栏高 + 底部弧线」的文字项，
和右侧 36px 的胶囊按钮风格割裂。统一改成同高（38px）的胶囊高亮 ——
hover 白底浮现、选中白底常驻 + 弧线，导航左右两排视觉一致。 */
.tabs{display:flex;align-items:center;gap:2px;flex:0 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{
position:relative;flex:0 0 auto;padding:9px 16px;
font-size:15px;font-weight:600;color:#4b5372;
display:flex;align-items:center;justify-content:center;
border-radius:12px;
transition:color .18s ease,background .18s ease;
letter-spacing:.3px;white-space:nowrap;
}
.tab:hover{color:var(--accent);background:rgba(255,255,255,.55)}
.tab .arc{
position:absolute;left:50%;bottom:3px;
width:34px;height:10px;color:var(--accent);
opacity:0;transition:opacity .2s ease,transform .25s cubic-bezier(.34,1.56,.64,1);
transform:translateX(-50%) scaleX(.5);
}
.tab.on{color:var(--accent);background:rgba(255,255,255,.78);box-shadow:0 2px 8px -4px rgba(27,35,64,.28)}
.tab.on .arc{opacity:1;transform:translateX(-50%) scaleX(1)}
.top-actions{flex:0 0 auto;display:flex;align-items:center;gap:8px}
.ghost-btn{
flex:0 0 auto;white-space:nowrap;
display:flex;align-items:center;gap:6px;height:36px;padding:0 13px;border-radius:10px;
font-size:13.5px;color:#5b6384;background:rgba(255,255,255,.72);
border:1px solid rgba(255,255,255,.9);box-shadow:var(--shadow-s);
transition:.18s;
}
.ghost-btn:hover{color:var(--accent);background:#fff;transform:translateY(-1px)}
@media (max-width:1230px){ .top-actions .ghost-btn{display:none} }
@media (max-width:900px){ .logo-text{display:none} .tab{padding:8px 12px;font-size:14.5px} }
.primary-mini{
flex:0 0 auto;white-space:nowrap;
height:36px;padding:0 18px;border-radius:10px;font-size:13.5px;font-weight:600;color:#fff;
background:linear-gradient(135deg,var(--accent),var(--accent2));
box-shadow:0 8px 18px -6px var(--accent);
transition:.18s;
}
.primary-mini:hover{filter:brightness(1.06);transform:translateY(-1px)}
/* ============ 主体 ============ */
.body{flex:1 1 auto;display:flex;max-width:1440px;width:100%;margin:0 auto;align-items:stretch}
/* ---- 侧栏 ---- */
.side{
flex:0 0 214px;width:214px;
background:linear-gradient(180deg,#fbfcff,#f7f9ff);
border-right:1px solid var(--line);
padding:18px 12px 26px;
position:sticky;top:66px;align-self:flex-start;
max-height:calc(100vh - 66px);overflow-y:auto;
}
.side-group{margin-bottom:16px}
.side-title{
font-size:12.5px;font-weight:700;color:#7d84a0;letter-spacing:.6px;
padding:0 10px;margin:4px 0 8px;display:flex;align-items:center;gap:6px;
}
.side-title::after{content:"";flex:1;height:1px;background:var(--line-2)}
.tool-item{
width:100%;display:flex;align-items:center;gap:10px;
padding:8px 10px;border-radius:12px;margin-bottom:2px;
font-size:14px;color:#3c4463;text-align:left;
transition:background .16s ease,color .16s ease,transform .16s ease;
}
.tool-item:hover{background:var(--accent-soft)}
.tool-item:hover .ti-ico{transform:translateY(-1px) scale(1.04)}
.tool-item.on{
color:#fff;font-weight:600;
background:linear-gradient(135deg,var(--accent),var(--accent2));
box-shadow:0 10px 22px -10px var(--accent);
}
.ti-ico{
flex:0 0 auto;width:30px;height:30px;border-radius:9px;
display:grid;place-items:center;color:#fff;
background:linear-gradient(140deg,var(--accent),var(--accent2));
transition:transform .18s ease;
box-shadow:0 4px 10px -4px rgba(27,35,64,.4);
}
.tool-item.on .ti-ico{background:#fff;color:var(--accent);box-shadow:0 2px 8px -2px rgba(0,0,0,.25)}
.ti-ico svg{width:17px;height:17px}
.ti-badge{
flex:0 0 auto;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
font-size:14px;font-weight:700;color:#fff;letter-spacing:-.5px;
transition:transform .18s ease;box-shadow:0 4px 10px -4px rgba(27,35,64,.35);
}
.tool-item:hover .ti-badge{transform:translateY(-1px) scale(1.04)}
.tool-item.on .ti-badge{box-shadow:none;outline:2px solid rgba(255,255,255,.5)}
.bd-word{background:linear-gradient(140deg,#4f93ff,#1e4fd8)}
.bd-excel{background:linear-gradient(140deg,#3fd39a,#0f9d63)}
.bd-ppt{background:linear-gradient(140deg,#ff9d5c,#ea5a1f)}
.bd-img{background:linear-gradient(140deg,#c98cff,#8b32e8)}
.bd-pdf{background:linear-gradient(140deg,#ff8080,#e0223f)}
.ti-name{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-tip{
margin:6px 4px 0;padding:12px;border-radius:14px;
background:linear-gradient(150deg,#fff,#f5f7ff);
border:1px solid var(--line);box-shadow:var(--shadow-s);
}
.side-tip b{display:block;font-size:12.5px;color:#525a7b;margin-bottom:4px}
.side-tip p{margin:0;font-size:11.5px;line-height:1.65;color:#949bb2}
/* ---- 主区 ---- */
.main{flex:1 1 auto;min-width:0;padding:26px 34px 46px;background:
radial-gradient(900px 420px at 88% -8%,var(--accent-soft),transparent 62%),var(--bg);}
.crumb{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#98a0b8;margin-bottom:12px}
.crumb b{color:var(--accent);font-weight:600}
.crumb svg{width:12px;height:12px;opacity:.5}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:20px}
.head h1{margin:0 0 7px;font-size:26px;letter-spacing:-.4px}
.head h1 em{font-style:normal;background:linear-gradient(100deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.head p{margin:0;font-size:13.5px;color:var(--muted);line-height:1.7;max-width:640px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{
display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:20px;
font-size:12px;color:#6b7391;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-s);
}
.chip i{width:5px;height:5px;border-radius:50%;background:var(--accent);display:block}
/* 工具条 */
.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.btn{
display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 17px;border-radius:11px;
font-size:14px;font-weight:500;transition:.18s;white-space:nowrap;
}
.btn svg{width:16px;height:16px}
.btn-line{
color:var(--accent);background:#fff;border:1.5px solid var(--accent-soft2);
box-shadow:0 4px 12px -6px var(--accent);
}
.btn-line:hover{background:var(--accent-soft);border-color:var(--accent);transform:translateY(-1px)}
.btn-plain{color:#6b7391;background:#fff;border:1px solid var(--line)}
.btn-plain:hover{color:var(--accent);border-color:var(--accent-soft2);transform:translateY(-1px)}
.btn-solid{
color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2));
box-shadow:0 12px 24px -12px var(--accent);font-weight:600;
}
.btn-solid:hover{filter:brightness(1.06);transform:translateY(-1px)}
.btn-solid[disabled]{opacity:.45;cursor:not-allowed;filter:grayscale(.3);transform:none;box-shadow:none}
.toolbar .spacer{flex:1 1 auto}
.counter{font-size:12.5px;color:var(--muted)}
.counter b{color:var(--accent)}
/* 拖放区 */
.dropzone{
position:relative;border:2px dashed #ccd6ff;border-radius:20px;
background:linear-gradient(160deg,#fdfeff,#f6f9ff 70%,#f3f6ff);
padding:44px 24px 40px;text-align:center;
transition:.22s ease;box-shadow:var(--shadow-s);
}
.dropzone:hover{border-color:var(--accent);background:linear-gradient(160deg,#fff,var(--accent-soft))}
.dropzone.drag{border-color:var(--accent);background:var(--accent-soft);transform:scale(1.006);box-shadow:0 18px 40px -22px var(--accent)}
.dropzone.has{border-style:solid;border-color:var(--line);background:#fff;padding:20px 24px;box-shadow:var(--shadow-s)}
.dropzone.has .dz-art .doc{width:46px;height:58px}
.dropzone.has .dz-art .arrow{width:18px;height:18px}
.dropzone.has .dz-inner{gap:8px}
.dropzone.has .dz-title{font-size:14px}
.dz-inner{display:flex;flex-direction:column;align-items:center;gap:14px}
.dz-art{display:flex;align-items:center;gap:6px}
.dz-art .arrow{color:#ff6b7d;opacity:.55;width:26px;height:26px}
.dz-art .doc{width:74px;height:92px;filter:drop-shadow(0 14px 22px rgba(224,34,63,.22));transition:transform .25s ease}
.dropzone:hover .dz-art .doc{transform:translateY(-4px) rotate(-1deg)}
.dz-title{font-size:16px;color:#2c3455;letter-spacing:.2px}
.dz-title u{text-decoration:none;color:#2f6bff;font-weight:600;border-bottom:2px solid rgba(47,107,255,.28);padding-bottom:1px}
.dz-sub{font-size:12.5px;color:#9aa1b8}
.dz-sub code{
font-family:inherit;color:var(--accent);background:var(--accent-soft);
padding:1px 7px;border-radius:6px;margin:0 3px;font-size:12px;
}
/* 文件列表 */
.files{margin-top:18px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-s);overflow:hidden}
.files-head{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line-2)}
.files-head h3{margin:0;font-size:14px}
.files-head .sum{font-size:12.5px;color:var(--muted)}
.file-row{display:flex;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--line-2)}
.file-row:last-child{border-bottom:0}
.file-row .fi{
width:34px;height:34px;border-radius:9px;display:grid;place-items:center;color:#fff;
font-size:11px;font-weight:700;background:linear-gradient(140deg,#ff8080,#e0223f);flex:0 0 auto;
}
.file-row .meta{flex:1 1 auto;min-width:0}
.file-row .meta b{display:block;font-size:13.5px;font-weight:500;color:#2b3352;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-row .meta span{font-size:12px;color:#9aa1b8}
.st{font-size:12px;padding:3px 10px;border-radius:20px;background:#f2f4fb;color:#7b83a2;white-space:nowrap}
.st.wait{background:#fff4e8;color:#d9822b}
.st.run{background:var(--accent-soft);color:var(--accent)}
.st.done{background:#e9f9f1;color:#0f9d63}
.x-btn{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;color:#b6bdd2;transition:.16s;flex:0 0 auto}
.x-btn:hover{background:#fff1f3;color:#e5384f}
.x-btn svg{width:14px;height:14px}
.actions{
display:flex;align-items:center;gap:14px;flex-wrap:wrap;
padding:16px 18px;background:linear-gradient(180deg,#fbfcff,#f6f8ff);
border-top:1px solid var(--line-2);
}
.field{display:flex;align-items:center;gap:8px;font-size:13px;color:#6b7391}
.field select{
font-family:inherit;font-size:13.5px;color:#2b3352;background:#fff;
border:1px solid var(--line);border-radius:10px;height:38px;padding:0 30px 0 12px;
appearance:none;cursor:pointer;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 10px center;
}
.field select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.actions .spacer{flex:1 1 auto}
.prog{height:4px;background:var(--line-2);border-radius:4px;overflow:hidden}
.prog i{display:block;height:100%;width:0;border-radius:4px;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .3s ease}
/* 步骤 / 特性 */
.grid2{display:grid;grid-template-columns:1.35fr 1fr;gap:18px;margin-top:20px}
@media (max-width:1080px){.grid2{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:var(--shadow-s)}
/* 卡片纵向节奏（2026-09-26 加，用户报「块与块之间贴边」）：
关于/隐私等页的 .card 直接排在 .main 里，此前**没有任何间距规则**，
卡与卡之间实为 0px（只有两条 1px 边框贴在一起）。
用 :where() 把选择器特异性压到 (0,1,0)，让首页的
.main-home section.card (0,2,1) 依旧稳赢 48px。 */
.main > :where(.card + .card){margin-top:24px}
/* 2026-09-30 补盲区：分类页的 FAQ 卡前面是 .tgroup（工具组）不是 .card，
上一轮的 .card + .card 匹配不到它 → FAQ 卡 margin-top 不生效，照样贴边
（线上实测确认）。给「非 card 兄弟 + card」补上同一节奏。 */
.main > :where(.tgroup + .card){margin-top:24px}
.card h3{margin:0 0 14px;font-size:14.5px;display:flex;align-items:center;gap:8px}
.card h3::before{content:"";width:4px;height:15px;border-radius:3px;background:linear-gradient(180deg,var(--accent),var(--accent2))}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:720px){.steps{grid-template-columns:1fr}}
.step{padding:14px;border-radius:14px;background:linear-gradient(150deg,#fafbff,#f4f7ff);border:1px solid var(--line-2)}
.step em{
font-style:normal;display:grid;place-items:center;width:26px;height:26px;border-radius:8px;
font-size:12.5px;font-weight:700;color:#fff;margin-bottom:9px;
background:linear-gradient(135deg,var(--accent),var(--accent2));
}
.step b{display:block;font-size:13px;margin-bottom:4px}
.step p{margin:0;font-size:12px;line-height:1.65;color:#929ab3}
.feat{display:flex;flex-direction:column;gap:13px}
.feat-row{display:flex;gap:11px;align-items:flex-start}
.feat-row .ico{
flex:0 0 auto;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
background:var(--accent-soft);color:var(--accent);
}
.feat-row .ico svg{width:17px;height:17px}
.feat-row b{display:block;font-size:13px;margin-bottom:3px}
.feat-row p{margin:0;font-size:12px;line-height:1.6;color:#929ab3}
footer.foot{
border-top:1px solid var(--line);background:#fff;
padding:18px 26px;text-align:center;font-size:12.5px;color:#a2a9c0;
}
footer.foot a{color:#7b83a2;text-decoration:none;margin:0 9px;transition:.16s}
footer.foot a:hover{color:var(--accent)}
/* 轻提示（不使用右侧弹窗） */
.toast-wrap{position:fixed;left:50%;bottom:34px;transform:translateX(-50%);z-index:99;display:flex;flex-direction:column;gap:10px;align-items:center}
.toast{
display:flex;align-items:center;gap:9px;
padding:11px 18px;border-radius:12px;font-size:13.5px;color:#fff;
background:linear-gradient(135deg,#2b3352,#1b2340);
box-shadow:0 18px 40px -16px rgba(27,35,64,.5);
animation:pop .28s cubic-bezier(.34,1.4,.64,1);
}
.toast svg{width:15px;height:15px;color:#6ee7b7}
.toast.warn svg{color:#ffd48a}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
.hint-line{margin:12px 2px 0;font-size:12.5px;color:#929ab3;display:flex;align-items:center;gap:7px}
.hint-line svg{width:14px;height:14px;color:var(--accent);flex:0 0 auto}
.result-inline{margin-top:14px;padding:13px 16px;border-radius:14px;background:#fff;border:1px solid var(--line);font-size:13px;color:#3c4463;display:none;align-items:center;gap:10px}
/* ---------- 参数区 ---------- */
.params{
background:#fff;border:1px solid var(--line);border-radius:18px;
padding:16px 18px 14px;margin-bottom:16px;box-shadow:var(--shadow-s);
}
.params-head{display:flex;align-items:center;gap:8px;font-size:14px;margin-bottom:13px}
.params-head svg{width:16px;height:16px;color:var(--accent)}
.params-sub{font-size:12.5px;color:var(--muted);font-weight:400;margin-left:2px}
.params-row{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:flex-end}
.field{display:flex;flex-direction:column;gap:5px}
.field.hide{display:none}
.field>label{font-size:12px;color:#7d84a0;padding-left:2px}
.field input[type=text],.field input[type=number],.field input[type=password],.field select{
font-family:inherit;font-size:13.5px;color:#2b3352;background:#fff;
border:1px solid var(--line);border-radius:10px;height:38px;padding:0 12px;
min-width:150px;transition:.16s;
}
.field select{
padding-right:30px;appearance:none;cursor:pointer;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 10px center;
}
.field input:focus,.field select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.field input[type=color]{
width:52px;height:38px;padding:3px;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer;
}
.ck{display:flex;align-items:center;gap:7px;height:38px;font-size:13.5px;color:#3c4463;cursor:pointer;user-select:none}
.ck input{appearance:none;width:18px;height:18px;border:1.5px solid #ccd3e6;border-radius:5px;margin:0;cursor:pointer;position:relative;transition:.15s}
.ck input:checked{background:linear-gradient(135deg,var(--accent),var(--accent2));border-color:transparent}
.ck input:checked::after{content:"";position:absolute;left:5px;top:1.5px;width:5px;height:10px;border:2px solid #fff;border-top:0;border-left:0;transform:rotate(42deg)}
.file-btn{
height:38px;padding:0 14px;border-radius:10px;font-size:13px;color:var(--accent);
background:var(--accent-soft);border:1px dashed var(--accent-soft2);white-space:nowrap;transition:.16s;
max-width:240px;overflow:hidden;text-overflow:ellipsis;
}
.file-btn:hover{background:var(--accent-soft2)}
.warn-line{
display:flex;gap:8px;align-items:flex-start;margin-top:13px;padding:10px 12px;border-radius:12px;
background:#fff8ec;border:1px solid #ffe6c2;font-size:12.5px;line-height:1.65;color:#a2661a;
}
.warn-line svg{width:14px;height:14px;flex:0 0 auto;margin-top:2px}
.regions-wrap{margin-top:14px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.regions-wrap canvas{
border-radius:12px;border:1px solid var(--line);box-shadow:var(--shadow-s);
cursor:crosshair;max-width:100%;touch-action:none;
}
.regions-empty{font-size:12.5px;color:var(--muted)}
/* ---------- 结果 / 进度 / 提示 ---------- */
.files.result-card{border-color:#d9f0e4}
.file-row.out .fi.ok{background:linear-gradient(140deg,#3fd39a,#0f9d63);width:26px;height:26px;border-radius:50%}
.file-row.out .fi.ok svg{width:14px;height:14px}
.btn.sm{height:32px;padding:0 12px;font-size:12.5px;border-radius:9px}
.btn.sm svg{width:14px;height:14px}
.prog-wrap{flex:1 1 200px;display:flex;align-items:center;gap:10px;min-width:160px}
.prog-wrap .prog{flex:1 1 auto}
.prog-text{font-size:12.5px;color:var(--muted);white-space:nowrap;max-width:280px;overflow:hidden;text-overflow:ellipsis}
/* 适用场景提示：工作区最上方，上传前可见。中性色 —— 它既不是报错也不是成功，
只是「这个工具适合什么、不适合什么」，说清楚就好，不要做成警告吓人。 */
.use-hint{
display:flex;align-items:flex-start;gap:9px;margin:0 0 14px;padding:12px 15px;border-radius:14px;
background:var(--accent-soft, #f2f4fb);border:1px solid var(--line-2);font-size:13px;line-height:1.7;color:var(--muted);
}
.use-hint svg{width:15px;height:15px;flex:0 0 auto;margin-top:3px;color:var(--accent)}
.use-hint b{color:var(--text);font-weight:600}
.note-bar{
display:none;align-items:flex-start;gap:9px;margin-top:16px;padding:13px 16px;border-radius:14px;
background:#f2fbf7;border:1px solid #cdefe0;font-size:13px;line-height:1.7;color:#186b4c;
}
.note-bar.err{display:flex;background:#fff5f5;border-color:#ffd9d9;color:#b3273a}
.note-bar:not(.err){display:flex}
.note-bar svg{width:15px;height:15px;flex:0 0 auto;margin-top:3px}
.preview-card{margin-top:16px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px 18px;box-shadow:var(--shadow-s)}
.preview-head{display:flex;align-items:center;gap:8px;font-size:14px;margin-bottom:12px}
.preview-head svg{width:16px;height:16px;color:var(--accent)}
.preview-strip{display:flex;gap:14px;overflow-x:auto;padding-bottom:6px}
.preview-strip img{
height:300px;border-radius:10px;border:1px solid var(--line);background:#fff;
box-shadow:0 8px 20px -12px rgba(27,35,64,.4);flex:0 0 auto;
}
/* =========================================================
多页站点新增：链接化导航 / 首页 / 分类页 / SEO 内容区 / 移动端
（本段在原规则之后，靠层叠覆盖，不改动上面已验证过的样式）
========================================================= */
/* ---- 链接化：a 版顶栏、侧栏、页脚、卡片 ---- */
a{color:inherit}
a.logo,a.tab,a.ghost-btn,a.primary-mini,a.tool-item,a.tcard,a.catcard,a.cat-chip,
a.rel-item,a.pg,a.hot-i,a.an-i,.crumb a,.more a,.foot a{text-decoration:none}
a.logo{touch-action:manipulation}
.ghost-btn,.primary-mini{display:inline-flex;align-items:center;gap:6px}
.ghost-btn svg,.primary-mini svg{width:15px;height:15px}
a.tab{-webkit-tap-highlight-color:transparent}
/* ---- 无障碍 ---- */
.skip{
position:fixed;left:-9999px;top:0;z-index:200;
padding:11px 18px;background:#fff;border-radius:0 0 12px 0;
color:var(--accent);font-size:13px;font-weight:600;text-decoration:none;box-shadow:var(--shadow);
}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--accent-soft2);outline-offset:2px;border-radius:6px}
.dz-title u{cursor:pointer}
/* ---- 区块标题 ---- */
.grp{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:28px 0 13px;font-size:16.5px;letter-spacing:-.2px}
.grp:first-child{margin-top:6px}
.grp span{font-size:12.5px;font-weight:400;color:var(--muted)}
.grp a{color:inherit}
.grp a:hover{color:var(--accent)}
.card h2{margin:0 0 14px;font-size:15px;display:flex;align-items:center;gap:8px}
.card h2::before{content:"";width:4px;height:15px;border-radius:3px;background:linear-gradient(180deg,var(--accent),var(--accent2))}
.p{margin:0 0 12px;font-size:13.5px;line-height:1.9;color:#5b6384}
.p:last-child{margin-bottom:0}
/* ---- 首页 hero（2026-09-26 二轮改版：圆角渐变面板 + 居中 + 大留白）---- */
/* 原来的 hero 是一段贴着主区左上的裸文本（标题 33px、搜索框 540px 靠左），
和下面模块之间只隔一条 28px 的标题间距，整页看着「挤」。
改成一块圆角渐变面板：内容居中、自带内边距（不贴边）、两团装饰光斑，
「大气」由面板尺寸和留白撑起来，而不是靠硬加字号。 */
.hero{padding:8px 0 0}
.hero-panel{
position:relative;overflow:hidden;text-align:center;
padding:62px 48px 48px;border-radius:26px;
background:linear-gradient(165deg,#ffffff 0%,#f7f4ff 42%,#edf3ff 100%);
border:1px solid #e9edf9;
box-shadow:0 18px 44px -30px rgba(27,35,64,.28);
}
/* 装饰光斑（纯 CSS，不引资源）：右上偏紫、左下偏蓝，把面板从「白卡片」里提出来。
pointer-events:none —— 装饰层不许吃点击。 */
.hero-panel::before,.hero-panel::after{
content:"";position:absolute;border-radius:50%;pointer-events:none;
}
.hero-panel::before{
width:460px;height:460px;top:-230px;right:-130px;
background:radial-gradient(circle,rgba(124,92,255,.16),transparent 62%);
}
.hero-panel::after{
width:520px;height:520px;bottom:-300px;left:-170px;
background:radial-gradient(circle,rgba(91,140,255,.15),transparent 62%);
}
/* 内容压在光斑上面（光斑是 ::before/::after，内容加 position 才不会被盖住交互） */
.hero-panel>*{position:relative;z-index:1}
.hero h1{margin:0 0 14px;font-size:40px;letter-spacing:-1px;line-height:1.22}
.hero h1 small{display:block;font-size:16.5px;font-weight:500;color:var(--muted);margin-top:12px;letter-spacing:0}
.hero p{margin:0 auto 28px;font-size:14.5px;line-height:2;color:#5b6384;max-width:780px}
.hero-search{
display:flex;align-items:center;gap:11px;max-width:660px;height:56px;padding:0 18px;
background:#fff;border:1.5px solid var(--line);border-radius:17px;
box-shadow:0 14px 34px -20px rgba(27,35,64,.30);
margin:0 auto 20px;transition:.18s;
}
.hero-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.hero-search .hs-ico{width:19px;height:19px;color:var(--accent);flex:0 0 auto}
.hero-search input{
flex:1 1 auto;min-width:0;border:0;outline:none;background:transparent;
font-family:inherit;font-size:14px;color:var(--text);
}
.hero-search input::placeholder{color:#b0b7cc}
.hs-clear{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;color:#b6bdd2;flex:0 0 auto;transition:.16s}
.hs-clear svg{width:13px;height:13px}
.hs-clear:hover{background:#fff1f3;color:#e5384f}
.hs-clear.hide{display:none}
/* ---- 常搜词（2026-09-26 加）---- */
/* 胶囊按钮，跟 chips 是两套东西：chips 说「本站是什么」，hot 是「你可以点这里直接去」。
所以视觉上要能点 —— 有边框、hover 变色，别做成和 chips 一样的小圆点。 */
.hot{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin:-4px 0 14px}
.hot-l{font-size:12px;color:#9aa2bb;margin-right:1px}
.hot-i{
font-size:12.5px;color:#5b6384;background:#fff;border:1px solid var(--line);
padding:5px 12px;border-radius:20px;transition:.16s;line-height:1.4;
}
.hot-i:hover{color:var(--accent);border-color:var(--accent-soft2);background:var(--accent-soft);
transform:translateY(-1px);box-shadow:0 6px 14px -8px var(--accent)}
/* hero 面板内：chips / 常搜词跟着居中（.chips 是和工具页共用的，必须收在面板作用域里） */
.hero-panel .chips{justify-content:center}
.hero-panel .hot{justify-content:center;margin:2px 0 0}
/* ---- 首页节奏（2026-09-26 二轮改版：模块之间不贴边）---- */
/* 用户反馈「模块之间不要贴边」：标题上下留足、网格间隙放宽、板块之间给大气口。
★ 全部收在 .main-home 作用域下 —— .grp/.tgrid/.tcard/.card 是和分类页/工具页
**共用**的类，直接改共享规则会把别的页面排版一起带跑。
首页的间距主张只属于首页。 */
.main-home{padding:32px 40px 58px}
.main-home .grp{
margin:48px 0 18px;font-size:19px;letter-spacing:-.3px;align-items:center;gap:11px;
}
/* 标题前置渐变短棒：和 .card h2::before 同一母题，扫读时每段有个锚点 */
.main-home .grp::before{
content:"";width:5px;height:18px;border-radius:3px;flex:0 0 auto;
background:linear-gradient(180deg,var(--accent),var(--accent2));
}
.main-home .grp a:hover{color:var(--accent)}
.main-home .catgrid{gap:16px}
.main-home .tgrid{gap:14px}
.main-home .catcard{padding:22px 22px 22px 27px;border-radius:18px}
.main-home .tcard{padding:16px 17px;border-radius:16px}
/* 「为什么用 / 常见问题」两张大卡：上面的 section 没有自带下边距，必须显式给气口 */
.main-home section.card{margin-top:48px;padding:26px 28px;border-radius:20px}
.main-home .feat{gap:16px}
.main-home .faq dt{margin-top:18px}
.main-home .faq dd{margin-top:7px}
/* ---- 分类卡 ---- */
/* 400px 下限在 1380 内容宽下正好落成 3 列、960 下 2 列、手机上 1 列 */
.catgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:12px}
.catcard{
position:relative;display:flex;flex-direction:column;gap:8px;padding:16px 16px 16px 20px;
border-radius:16px;
background:linear-gradient(150deg,#fff,#f7f9ff);border:1px solid var(--line);
box-shadow:var(--shadow-s);transition:.18s;overflow:hidden;
}
/* 左侧 4px 主题色带（2026-09-26 加）。
动机：6 张卡片的排版完全一样，只有右上的小数字标签区分 ——
扫读时要逐字看标题才知道哪张是哪张。加一条色带，
颜色本身就能当索引（和分类页 / 工具页的主题色是同一套，不是新造的颜色）。
★ 色带自己做圆角：卡片是 16px 圆角 + overflow:hidden，
色带是个贴边的矩形，靠 overflow 裁出来的角会有一圈抗锯齿灰边（看着脏）。
给它自己标 border-radius:16px 0 0 16px，让它和卡片边缘严丝合缝。 */
.catcard::before{
content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
border-radius:16px 0 0 16px;
background:linear-gradient(180deg,var(--accent),var(--accent2));
opacity:.9;transition:.18s;
}
.catcard:hover{transform:translateY(-2px);border-color:var(--accent-soft2);box-shadow:0 18px 36px -22px var(--accent)}
.catcard:hover::before{opacity:1;width:5px}
.cc-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.cc-h b{font-size:15px;color:#2b3352}
.cc-h i{font-style:normal;font-size:11.5px;color:var(--accent);background:var(--accent-soft);padding:2px 9px;border-radius:20px;white-space:nowrap}
/* 工具名：一行截断（原先是自由换行 → 卡片高度参差不齐）。
overflow 用 ellipsis，配合 title 属性 / 完整列表在分类页里能看到。 */
.cc-d{
font-size:12px;color:#929ab3;line-height:1.7;
display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cc-go{display:flex;align-items:center;gap:5px;font-size:12.5px;color:var(--accent);font-weight:600;margin-top:2px}
.cc-go svg{width:14px;height:14px;transition:transform .18s}
.catcard:hover .cc-go svg{transform:translateX(3px)}
/* ---- 分类页：工具跳转条（2026-09-26 加）---- */
/* 两类元素：`an-g` 是分组标题（不可点，只做分隔），`an-i` 是工具（可点）。
视觉上分组标题要弱、工具要强，否则一长串分不清哪个能点。
`.an-group` 把「标题 + 该组工具」包成不可拆的整体，换行时整组走。 */
.anchors{
display:flex;flex-wrap:wrap;gap:6px 10px;
margin:0 0 16px;padding:11px 13px;border-radius:14px;
background:#fbfcff;border:1px solid var(--line);
}
.an-group{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px;break-inside:avoid}
.an-group + .an-group{padding-left:10px;border-left:1px solid var(--line)}
.an-g{
font-size:12px;color:var(--accent);font-weight:600;letter-spacing:.2px;
white-space:nowrap;
/* 分组标题是纯分隔用的**不可点**元素。默认光标会让它看起来像链接，
明确给 default，别让人白点一下。 */
cursor:default;
}
.an-i{
font-size:12.5px;color:#5b6384;background:#fff;border:1px solid var(--line);
padding:4px 11px;border-radius:18px;transition:.15s;text-decoration:none;white-space:nowrap;
}
.an-i:hover{color:var(--accent);border-color:var(--accent-soft2);background:var(--accent-soft)}
/* ---- 工具卡网格 ---- */
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(266px,1fr));gap:12px}
.tcard{
display:flex;align-items:flex-start;gap:11px;padding:14px;border-radius:15px;
background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-s);transition:.18s;
}
.tcard:hover{transform:translateY(-2px);border-color:var(--accent-soft2);background:linear-gradient(150deg,#fff,var(--accent-soft));box-shadow:0 18px 36px -24px var(--accent)}
.tc-ico{
flex:0 0 auto;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
color:#fff;font-size:14.5px;font-weight:700;letter-spacing:-.5px;
background:linear-gradient(140deg,var(--accent),var(--accent2));
box-shadow:0 4px 10px -4px rgba(27,35,64,.35);
}
.tc-ico svg{width:19px;height:19px}
.tc-txt{flex:1 1 auto;min-width:0}
.tc-txt b{display:block;font-size:13.5px;color:#2b3352;margin-bottom:4px}
.tc-txt i{font-style:normal;display:block;font-size:11.5px;line-height:1.6;color:#929ab3}
.tc-go{width:15px;height:15px;color:#ccd3e6;flex:0 0 auto;margin-top:9px;transition:.18s}
.tcard:hover .tc-go{color:var(--accent);transform:translateX(2px)}
.tcard.hide,.tgroup.hide{display:none}
.empty{margin:18px 2px;font-size:13.5px;color:var(--muted)}
.empty.hide{display:none}
/* ---- SEO 内容区 ---- */
.head h1 small{display:block;font-size:14.5px;font-weight:500;color:var(--muted);margin-top:7px;letter-spacing:0;line-height:1.5}
.crumb a{color:#98a0b8;transition:.16s}
.crumb a:hover{color:var(--accent)}
.seo{display:flex;flex-direction:column;gap:24px;margin-top:22px}
.faq{margin:0}
.faq dt{font-size:13.5px;font-weight:600;color:#2b3352;margin-top:15px;line-height:1.7}
.faq dt:first-child{margin-top:0}
.faq dd{margin:6px 0 0;font-size:13px;line-height:1.85;color:#6b7391}
.rel{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:10px}
.rel-item{
display:flex;align-items:flex-start;gap:10px;padding:11px 12px;border-radius:12px;
background:linear-gradient(150deg,#fff,#fafbff);border:1px solid var(--line-2);transition:.16s;
}
.rel-item:hover{border-color:var(--accent-soft2);background:var(--accent-soft);transform:translateY(-1px)}
.rel-ico{
flex:0 0 auto;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
color:#fff;font-size:13px;font-weight:700;letter-spacing:-.5px;
background:linear-gradient(140deg,var(--accent),var(--accent2));
}
.rel-ico svg{width:16px;height:16px}
.rel-txt{min-width:0}
.rel-txt b{display:block;font-size:13px;color:#2b3352;margin-bottom:3px}
.rel-txt i{font-style:normal;display:block;font-size:11.5px;line-height:1.6;color:#929ab3}
.more{margin:14px 0 0;font-size:13px}
.more a{color:var(--accent);font-weight:600}
.more a:hover{text-decoration:underline}
.pager{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pg{display:block;padding:13px 16px;border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-s);transition:.16s}
.pg span{display:block;font-size:11.5px;color:#929ab3;margin-bottom:4px}
.pg b{font-size:13.5px;font-weight:600;color:#2b3352}
.pg.next{text-align:right}
.pg:hover{border-color:var(--accent-soft2);background:var(--accent-soft)}
.pg:hover b{color:var(--accent)}
/* ---- 其他分类 ---- */
.cat-chips{display:flex;flex-wrap:wrap;gap:10px}
.cat-chip{
display:flex;flex-direction:column;gap:3px;padding:10px 15px;border-radius:12px;
background:#fff;border:1px solid var(--line);font-size:13.5px;color:#2b3352;transition:.16s;
}
.cat-chip i{font-style:normal;font-size:11.5px;color:var(--muted)}
.cat-chip:hover{border-color:var(--accent-soft2);background:var(--accent-soft);color:var(--accent)}
/* ---- 页脚（多列内链） ---- */
footer.foot{padding:26px 26px 20px;text-align:left}
.foot-cols{max-width:1440px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr 1fr;gap:22px}
.foot-col b{display:block;font-size:12.5px;color:#7d84a0;margin-bottom:10px;letter-spacing:.4px}
.foot-col p{margin:0;display:flex;flex-wrap:wrap;gap:7px 16px}
.foot-col p a{font-size:12.5px;margin:0;color:#7b83a2;transition:.16s}
.foot-col p a:hover{color:var(--accent)}
.foot-bottom{
max-width:1440px;margin:20px auto 0;padding-top:14px;border-top:1px solid var(--line-2);
font-size:12px;line-height:1.85;color:#a2a9c0;text-align:center;
}
/* ============ 移动端 ============ */
@media (max-width:1080px){
.main{padding:22px 22px 40px}
}
@media (max-width:960px){
.body{flex-direction:column}
.side{
position:static;flex:0 0 auto;width:100%;max-height:none;
border-right:0;border-bottom:1px solid var(--line);
display:flex;align-items:center;gap:8px;overflow-x:auto;scrollbar-width:none;
padding:12px 14px;background:linear-gradient(180deg,#fbfcff,#f7f9ff);
}
.side::-webkit-scrollbar{display:none}
.side-group{display:flex;align-items:center;gap:6px;margin:0;flex:0 0 auto}
.side-title,.side-tip{display:none}
.tool-item{
width:auto;flex:0 0 auto;margin:0;padding:7px 13px 7px 8px;
background:#fff;border:1px solid var(--line);border-radius:11px;font-size:13px;
}
.tool-item .ti-ico,.tool-item .ti-badge{width:24px;height:24px;border-radius:7px}
.tool-item .ti-ico svg{width:14px;height:14px}
.main{padding:20px 16px 40px}
.head h1{font-size:23px}
.head h1 small{font-size:13.5px}
/* hero 面板（2026-09-26 二轮改版）：平板上收缩内边距与字号，保持居中版式 */
.hero-panel{padding:44px 24px 38px;border-radius:22px}
.hero h1{font-size:30px}
.hero h1 small{font-size:15px}
.main-home{padding:24px 20px 46px}
.main-home .grp{margin:38px 0 15px;font-size:17.5px}
.main-home section.card{margin-top:38px;padding:22px}
.pager{grid-template-columns:1fr}
}
@media (max-width:640px){
.topbar-in{height:58px;padding:0 13px;gap:12px}
.logo-mark{width:32px;height:32px;border-radius:10px}
.tab{padding:7px 10px;font-size:14px}
.tab .arc{width:26px;bottom:2px}
.primary-mini{padding:0 13px;font-size:13px}
/* 手机上卡片节奏略收，但保持「不贴边」下限 */
.main > :where(.card + .card){margin-top:18px}
.main > :where(.tgroup + .card){margin-top:18px}
.seo{gap:18px}
.grp{margin:22px 0 11px;font-size:15px}
.dropzone{padding:32px 16px 30px}
.dz-art .doc{width:60px;height:75px}
.dz-title{font-size:14.5px;line-height:1.7}
.toolbar{gap:8px}
.btn{padding:0 14px;font-size:13.5px}
.toolbar .counter{display:none}
.params{padding:14px}
.params-row{gap:10px}
.params-row .field{flex:1 1 100%}
.field input[type=text],.field input[type=number],.field input[type=password],
.field select,.field input[type=color]{min-width:0;width:100%}
.field input[type=color]{width:64px}
.steps{grid-template-columns:1fr}
.tgrid{grid-template-columns:1fr}
.catgrid{grid-template-columns:1fr}
/* 小屏卡片变窄，工具名允许换成两行（桌面上是一行截断，小屏截断会丢太多信息） */
.cc-d{white-space:normal;overflow:visible;text-overflow:clip}
.rel{grid-template-columns:1fr}
.foot-cols{grid-template-columns:1fr;gap:16px}
.preview-strip img{height:200px}
.toast{font-size:12.5px;padding:10px 14px}
/* 常搜词小屏排布（2026-09-26 调）：
原来把「常搜」标签 display:none 了 —— 结果 5 个胶囊在窄屏上排成 4+1，
「一键抠图」孤零零掉到第二行，看着像没排好。
改成标签独占一行做小标题（flex:0 0 100%），胶囊在下一行自己铺开，
读起来是「常搜：」+ 一行快捷入口，比藏掉标签更清楚。 */
.hot{gap:6px;margin-bottom:12px}
.hot-l{display:block;flex:0 0 100%;font-size:11.5px}
.hot-i{font-size:12px;padding:5px 11px}
/* 跳转条：小屏改成横向滚动，别让它把首屏顶下去 */
.anchors{flex-wrap:nowrap;overflow-x:auto;padding:9px 11px;-webkit-overflow-scrolling:touch}
.an-group{flex:0 0 auto;padding-left:0!important;border-left:0!important}
.an-group + .an-group{margin-left:4px}
.an-i{font-size:12px;padding:4px 10px}
/* 首页二轮改版：手机上进一步收紧，但保持「不贴边」的下限 */
.main-home{padding:18px 13px 38px}
.hero-panel{padding:34px 16px 30px;border-radius:18px}
.hero h1{font-size:25px;letter-spacing:-.5px}
.hero h1 small{font-size:14px;margin-top:9px}
.hero p{margin-bottom:20px;font-size:13.5px}
.hero-search{height:50px;border-radius:14px;padding:0 14px}
.main-home .grp{margin:32px 0 13px;font-size:16.5px}
.main-home .grp::before{width:4px;height:15px}
.main-home .catgrid{gap:12px}
.main-home .tgrid{gap:11px}
.main-home .catcard{padding:18px 16px 18px 21px}
.main-home .tcard{padding:14px}
.main-home section.card{margin-top:32px;padding:20px 16px}
}