:root{
  --bg:#faf9f7; --card:#ffffff; --line:rgba(0,0,0,.09); --line2:rgba(0,0,0,.18);
  --t1:#191817; --t2:#5c5b56; --t3:#8d8c86;
  --brand:#e8384f; --brand-2:#ff6b7a; --brand-bg:#fdeced;
  --ok:#2f7a4d; --ok-bg:#e8f4ec;
  --warn:#9a5b00; --warn-bg:#fbf0dd;
  --r:14px; --r-s:10px;
  --sh:0 1px 2px rgba(20,18,16,.04), 0 4px 14px rgba(20,18,16,.05);
  --sh-h:0 2px 6px rgba(20,18,16,.06), 0 12px 28px rgba(20,18,16,.10);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--t1);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
  font-size:15px;line-height:1.75;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.wrap{max-width:1120px;margin:0 auto;padding:0 22px}
::selection{background:#ffdfe3;color:#8c1424}

/* ============ 顶栏 ============ */
#site-header{border-bottom:1px solid var(--line);background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(10px);position:sticky;top:0;z-index:80}
.hd{display:flex;align-items:center;gap:14px;height:62px}
.logo{font-size:17px;font-weight:700;letter-spacing:-.3px;white-space:nowrap;display:flex;align-items:center;gap:7px}
.logo .dot{color:var(--brand)}
.logo .mark{width:26px;height:26px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;font-size:14px;font-weight:700}
.hd-search{position:relative;flex:1;max-width:340px;display:block}
/* 注意：用 input[type=search] 提高优先级，否则会被下方全局 input 规则覆盖 padding，导致图标压住文字 */
.hd-search input[type=search]{
  width:100%;height:38px;box-sizing:border-box;
  padding:0 14px 0 38px;font-size:13.5px;
  border:1px solid transparent;background:#f4f2ee;border-radius:999px;
  -webkit-appearance:none;appearance:none}
.hd-search input[type=search]::-webkit-search-decoration,
.hd-search input[type=search]::-webkit-search-cancel-button,
.hd-search input[type=search]::-webkit-search-results-button{-webkit-appearance:none;display:none}
.hd-search input[type=search]::placeholder{color:var(--t3)}
.hd-search input[type=search]:focus{background:#fff;border-color:rgba(232,56,79,.45);
  box-shadow:0 0 0 3px rgba(232,56,79,.10)}
.hd-search .ico{position:absolute;left:13px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;color:var(--t3);pointer-events:none;line-height:0}
.hd-search .ico svg{width:16px;height:16px;display:block}
.hd-search input[type=search]:focus+.hd-ac,.hd-search .ico.on{color:var(--brand)}
.hd-ac{position:absolute;top:44px;left:0;right:0;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-s);box-shadow:var(--sh-h);overflow:hidden;display:none;max-height:340px;overflow-y:auto}
.hd-ac.show{display:block}
.hd-ac a{display:block;padding:10px 14px;font-size:13.5px;border-bottom:1px solid #f4f2ee}
.hd-ac a:last-child{border-bottom:none}
.hd-ac a:hover,.hd-ac a.cur{background:#faf7f6}
.hd-ac a b{font-weight:600}
.hd-ac a span{color:var(--t3);font-size:12px;margin-left:6px}
.hd-ac .empty{padding:12px 14px;color:var(--t3);font-size:13px}
.hd-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
.hd-actions .btn{white-space:nowrap}
#allBtn{border-radius:999px;background:#f4f2ee;border-color:transparent;font-size:13.5px;height:38px;padding:0 15px}
#allBtn:hover{background:#eae7e1}
#allBtn .caret{display:inline-block;transition:.2s;margin-left:2px}
#allBtn.open .caret{transform:rotate(180deg)}

/* ============ 分类条（可拖拽 / 滚轮横滚 / 带箭头） ============ */
.catbar{border-top:1px solid var(--line);background:rgba(255,255,255,.9);position:relative}
.catwrap{display:flex;gap:8px;padding:9px 22px;overflow-x:auto;overflow-y:hidden;
  scrollbar-width:thin;scroll-behavior:smooth;cursor:grab;
  -webkit-overflow-scrolling:touch}
.catwrap.drag{cursor:grabbing;user-select:none}
.catwrap::-webkit-scrollbar{height:5px}
.catwrap::-webkit-scrollbar-thumb{background:rgba(0,0,0,.16);border-radius:99px}
.catwrap::-webkit-scrollbar-track{background:transparent}
.cat{white-space:nowrap;border:1px solid var(--line);background:#fff;border-radius:999px;
  padding:5px 14px;font-size:13px;color:var(--t2);cursor:pointer;transition:.15s;flex:0 0 auto}
.cat:hover{border-color:var(--line2);color:var(--t1)}
.cat.on{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:500}
.cat .n{opacity:.6;font-size:11.5px;margin-left:4px}
.catfade{position:absolute;top:0;bottom:0;width:34px;pointer-events:none;z-index:2}
.catfade.l{left:0;background:linear-gradient(90deg,#fff,rgba(255,255,255,0))}
.catfade.r{right:0;background:linear-gradient(270deg,#fff,rgba(255,255,255,0))}
.catarrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:26px;height:26px;border-radius:50%;
  border:1px solid var(--line);background:#fff;box-shadow:var(--sh);cursor:pointer;display:none;
  align-items:center;justify-content:center;font-size:12px;color:var(--t2);padding:0}
.catarrow:hover{color:var(--t1);border-color:var(--line2)}
.catarrow.l{left:6px}.catarrow.r{right:6px}
.catbar.can-l .catarrow.l,.catbar.can-r .catarrow.r{display:flex}

/* ============ 全部工具面板 ============ */
.mega{position:fixed;left:0;right:0;top:0;bottom:0;z-index:79;display:none}
.mega.show{display:block}
.mega .mask{position:absolute;inset:0;background:rgba(25,24,23,.28);backdrop-filter:blur(2px)}
.mega .box{position:relative;background:#fff;border-bottom:1px solid var(--line);
  box-shadow:var(--sh-h);max-height:80vh;overflow-y:auto;padding:20px 0 24px}
.mega .wrap{padding-top:0}
.mega h4{margin:0 0 10px;font-size:13px;color:var(--t3);font-weight:600;letter-spacing:.4px}
.mega-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:22px}
.mega-col .t{font-size:13.5px;font-weight:600;margin:0 0 8px;display:flex;align-items:center;gap:6px}
.mega-col .t i{width:6px;height:6px;border-radius:50%;background:var(--brand);display:inline-block}
.mega-col a{display:block;padding:5px 0;font-size:13.5px;color:var(--t2);border-radius:6px}
.mega-col a:hover{color:var(--brand)}
.mega-foot{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center}

/* ============ 面包屑 ============ */
.crumb{background:#fff;border-bottom:1px solid var(--line)}
.crumb .wrap{display:flex;align-items:center;gap:8px;height:44px;font-size:13px;color:var(--t3);overflow:hidden}
.crumb a{color:var(--t2)}
.crumb a:hover{color:var(--brand)}
.crumb .sep{opacity:.5}
.crumb .now{color:var(--t1);font-weight:500}

/* ============ 首页 ============ */
.hero{padding:46px 0 8px}
.hero h1{font-size:34px;font-weight:700;margin:0 0 12px;letter-spacing:-.8px;line-height:1.3}
.hero h1 em{font-style:normal;color:var(--brand)}
.hero p{margin:0;color:var(--t2);font-size:15.5px;max-width:660px}
.badges{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 0}
.badge{background:#fff;border:1px solid var(--line);border-radius:999px;padding:4px 12px;
  font-size:12.5px;color:var(--t2);display:inline-flex;align-items:center;gap:5px}
.badge b{color:var(--t1);font-weight:600}
.search{margin:24px 0 4px;position:relative;max-width:480px}
.search input[type=search]{width:100%;height:46px;box-sizing:border-box;padding:0 16px 0 46px;
  font-size:15px;border-radius:999px;border:1px solid var(--line2);background:#fff;
  -webkit-appearance:none;appearance:none}
.search input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;display:none}
.search input[type=search]:focus{border-color:rgba(232,56,79,.45);box-shadow:0 0 0 4px rgba(232,56,79,.10)}
.search .ico{position:absolute;left:18px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;color:var(--t3);pointer-events:none;line-height:0}
.search .ico svg{width:18px;height:18px;display:block}
input[type=text],input[type=number],input[type=search],input[type=password],textarea,select{
  font:inherit;font-size:14px;color:var(--t1);background:#fff;
  border:1px solid var(--line2);border-radius:var(--r-s);padding:9px 12px;width:100%;outline:none;transition:.15s}
input:focus,textarea:focus,select:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(232,56,79,.10)}
textarea{line-height:1.75;resize:vertical;min-height:150px}
label{font-size:13px;color:var(--t2);display:block;margin:0 0 6px;font-weight:500}

button,.btn{font:inherit;font-size:14px;font-weight:500;cursor:pointer;
  border:1px solid var(--line2);background:#fff;color:var(--t1);
  border-radius:var(--r-s);padding:9px 16px;transition:.15s;display:inline-block}
button:hover,.btn:hover{border-color:var(--t1)}
.btn-p{background:var(--brand);border-color:var(--brand);color:#fff}
.btn-p:hover{background:#cf2b41;border-color:#cf2b41}
.btn-s{padding:6px 13px;font-size:13px;border-radius:8px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* 工具卡片 */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:15px;margin:22px 0 8px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:18px 19px;display:flex;flex-direction:column;transition:.18s;position:relative}
.card:hover{border-color:rgba(232,56,79,.35);box-shadow:var(--sh-h);transform:translateY(-2px)}
.card h3{margin:0 0 6px;font-size:15.5px;font-weight:600;display:flex;align-items:center;justify-content:space-between;gap:8px}
.card h3 .ico{font-size:17px;margin-right:2px;line-height:1;
  filter:saturate(1.05)}
.card h3 .arw{color:var(--t3);font-size:13px;transition:.18s;opacity:0;transform:translateX(-3px)}
.card:hover h3 .arw{opacity:1;transform:none;color:var(--brand)}
.card p{margin:0;color:var(--t2);font-size:13.5px;line-height:1.6;flex:1}
.card .meta{margin-top:11px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.tag{display:inline-block;font-size:11.5px;padding:2px 9px;border-radius:20px;
  background:#f2f0ec;color:var(--t2)}
.tag.hot{background:var(--brand-bg);color:var(--brand);font-weight:500}
.tag.cat{background:#eef2fb;color:#3b5bdb}
.tag.new{background:var(--ok-bg);color:var(--ok);font-weight:500}
.tag.pro{background:var(--warn-bg);color:var(--warn)}

h2{font-size:20px;font-weight:650;margin:44px 0 14px;letter-spacing:-.3px;
  padding-left:12px;border-left:3px solid var(--brand)}
h3.sec{font-size:15px;font-weight:600;margin:24px 0 8px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;margin-bottom:14px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:760px){.two{grid-template-columns:1fr}}

.res{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;margin-top:4px}
.stat{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;margin-bottom:12px}
.stat div{background:#f6f4f0;border-radius:var(--r-s);padding:10px 12px}
.stat .l{font-size:12px;color:var(--t2)}
.stat .v{font-size:20px;font-weight:600;font-variant-numeric:tabular-nums}
mark{background:#ffe3a3;color:#5a3a00;border-radius:3px;padding:1px 3px;font-weight:500}
mark.risk{background:#ffc9ce;color:#8c1424}
.hit{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-bottom:1px dashed var(--line);font-size:14px;flex-wrap:wrap}
.hit:last-child{border-bottom:none}
.hit b{color:#8c1424;font-weight:600}
.hit .alt{color:var(--ok);font-weight:500}
.hit .why{color:var(--t3);font-size:12.5px}

.note{background:#f6f4f0;border-radius:var(--r-s);padding:13px 16px;color:var(--t2);font-size:13.5px;margin:14px 0}
.alert{background:var(--warn-bg);color:var(--warn);border-radius:var(--r-s);padding:11px 15px;font-size:13.5px;margin:12px 0}
.ok{background:var(--ok-bg);color:var(--ok);border-radius:var(--r-s);padding:11px 15px;font-size:13.5px;margin:12px 0}
.muted{color:var(--t3);font-size:12.5px}
.err{color:var(--brand);font-size:13.5px}
.hint{color:var(--t3);font-size:12.5px}

.up{background:linear-gradient(135deg,#fff5f6,#fff);border:1px solid rgba(232,56,79,.22);border-radius:var(--r);
  padding:18px 20px;margin-top:18px;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.up p{margin:0;font-size:13.5px;color:var(--t2)}
ul.tips{margin:0;padding-left:20px;font-size:14px;color:var(--t2)}
ul.tips li{margin-bottom:7px}
ul.tips a{color:var(--brand);font-weight:500}
ul.step{margin:0 0 10px;padding-left:20px;font-size:14px;color:var(--t2)}
ul.step li{margin-bottom:5px}

/* 页脚 */
footer{border-top:1px solid var(--line);margin-top:56px;padding:34px 0 44px;color:var(--t3);font-size:13px;background:#fff}
.fcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:24px;margin-bottom:18px}
.fcols h5{margin:0 0 10px;font-size:13px;color:var(--t1);font-weight:600}
.fcols a{display:block;padding:3px 0;color:var(--t3)}
.fcols a:hover{color:var(--brand)}
.fbot{border-top:1px solid var(--line);padding-top:16px;line-height:1.7}

canvas{max-width:100%;border-radius:var(--r-s);border:1px solid var(--line);background:#fff}
.preview{background:#fff;border:1px solid var(--line);border-radius:var(--r-s);padding:16px;white-space:pre-wrap;
  font-size:15px;line-height:1.85;max-height:460px;overflow:auto}
.chip{display:inline-block;background:#f2f0ec;border-radius:7px;padding:4px 10px;margin:0 6px 6px 0;font-size:13px;cursor:pointer}
.chip:hover{background:#e7e4dd}
.chip.on{background:var(--brand);color:#fff}

/* 回到顶部 */
#toTop{position:fixed;right:18px;bottom:22px;width:40px;height:40px;border-radius:50%;
  background:#fff;border:1px solid var(--line);box-shadow:var(--sh);cursor:pointer;
  display:none;align-items:center;justify-content:center;font-size:15px;color:var(--t2);z-index:70;padding:0}
#toTop.show{display:flex}
#toTop:hover{color:var(--brand);border-color:var(--brand)}

/* FAQ（SEO 正文，搜索引擎可抓取的静态内容） */
.seo-faq{margin:36px auto 10px;padding-top:26px;border-top:1px solid var(--line)}
.seo-faq h2{font-size:19px;margin:0 0 14px}
.seo-faq h2+.qa{margin-top:0}
.qa{margin:0 0 4px}
.qa h3{font-size:15.5px;font-weight:600;margin:18px 0 6px;padding-left:12px;
  border-left:3px solid var(--brand);line-height:1.55}
.qa p{margin:0 0 2px;padding-left:15px;color:var(--t2);font-size:14.5px;line-height:1.85}
/* 相关工具内链 */
.rels{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin:4px 0 8px}
.rels .rel{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--r-s);
  padding:12px 14px;transition:.16s}
.rels .rel:hover{border-color:rgba(232,56,79,.35);box-shadow:var(--sh)}
.rels .rel b{display:block;font-size:14.5px;font-weight:600}
.rels .rel span{display:block;font-size:12.5px;color:var(--t3);margin-top:2px;line-height:1.6}

/* 移动端 */
@media(max-width:860px){
  .hero{padding:34px 0 6px}
  .hero h1{font-size:27px}
  /* 移动端保留顶栏搜索（收窄），隐藏「全部工具」按钮（分类条已够用） */
  .hd-search{display:block;max-width:none}
  #allBtn{display:none}
  .hd{height:56px;gap:10px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(46%,1fr));gap:12px}
  .card{padding:15px 16px}
  .wrap{padding:0 16px}
  .catwrap{padding:9px 16px}
  .mega .box{max-height:86vh}
}
@media(max-width:520px){
  .grid{grid-template-columns:1fr}
  h2{font-size:18px}
}

/* ===== 意见反馈悬浮按钮 + 弹窗 ===== */
#fbFab{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:1200}
#fbBtn{display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 8px;border:none;cursor:pointer;
  background:var(--brand);color:#fff;font-size:12px;border-radius:10px 0 0 10px;
  box-shadow:var(--sh-h);transition:.18s;writing-mode:vertical-rl;letter-spacing:2px}
#fbBtn:hover{padding-right:13px}
#fbBtn span{font-size:12px}
#fbPanel{position:fixed;inset:0;z-index:1300;display:none}
#fbPanel.show{display:block}
.fb-mask{position:absolute;inset:0;background:rgba(0,0,0,.4)}
.fb-box{position:absolute;right:16px;top:50%;transform:translateY(-50%);width:340px;max-width:calc(100vw - 24px);
  background:var(--card);border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.18);overflow:hidden}
.fb-hd{padding:14px 18px;font-weight:600;font-size:15px;display:flex;justify-content:space-between;align-items:center;
  border-bottom:1px solid var(--line)}
.fb-x{color:var(--t3);text-decoration:none;font-size:14px;padding:2px 6px}
.fb-bd{padding:16px 18px 14px}
.fb-tip{margin:0 0 12px;font-size:13px;color:var(--t2);line-height:1.6}
.fb-type{display:flex;gap:8px;margin-bottom:12px}
.fb-type button{flex:1;padding:7px 0;border:1px solid var(--line);background:#fff;border-radius:8px;
  font-size:13px;cursor:pointer;color:var(--t2);transition:.15s}
.fb-type button.on{border-color:var(--brand);color:var(--brand);background:var(--brand-bg);font-weight:500}
#fbText{width:100%;box-sizing:border-box;height:96px;resize:vertical;padding:10px 12px;border:1px solid var(--line);
  border-radius:10px;font-size:13.5px;font-family:inherit;line-height:1.6;margin-bottom:10px}
#fbText:focus{outline:none;border-color:var(--brand)}
#fbContact{width:100%;box-sizing:border-box;padding:9px 12px;border:1px solid var(--line);border-radius:10px;
  font-size:13px;margin-bottom:6px}
#fbContact:focus{outline:none;border-color:var(--brand)}
.fb-err{color:#c92a2a;font-size:12px;min-height:16px;margin-bottom:4px}
.fb-go{width:100%;padding:11px 0;border:none;border-radius:10px;background:var(--brand);color:#fff;
  font-size:14.5px;font-weight:500;cursor:pointer;transition:.15s}
.fb-go:hover{opacity:.9}
.fb-go:disabled{opacity:.5;cursor:wait}
.fb-privacy{margin:10px 0 0;font-size:11.5px;color:var(--t3);text-align:center}
.fb-done{text-align:center;padding:26px 6px;font-size:15px;font-weight:500;line-height:1.7}
.fb-done span{display:block;margin-top:8px;font-size:12.5px;font-weight:400;color:var(--t2)}
@media(max-width:860px){
  .fb-box{right:0;left:0;top:auto;bottom:0;transform:none;width:100%;max-width:none;border-radius:16px 16px 0 0}
  #fbBtn{padding:9px 6px}
}

/* ===== 广告位预留 ===== */
.ad-slot{margin:26px auto 0;max-width:1080px;padding:0 20px}
.ad-inner{min-height:64px;display:flex;align-items:center;justify-content:center;gap:10px;
  border:1px dashed var(--line);border-radius:var(--r);background:#faf9f7;color:var(--t3);font-size:12.5px}
.ad-tag{font-size:10.5px;padding:1px 7px;border:1px solid var(--line);border-radius:4px;color:var(--t3)}