/* ============================================================
   索答啦AI V2 - 全站PC端公共样式
   css/v2.css
   
   包含两部分:
   A. V2核心页样式(基于index_v2设计标准)
      - 12个核心页面使用
      - 颜色体系: --blue:#2563eb
      - 字体: Noto Sans SC + JetBrains Mono
      - 导航: fixed暗色+blur
   
   B. 工具页兼容样式
      - 44个工具页使用的CSS变量(--bg-card/--border/--radius等)
      - 44个工具页使用的公共类(container/tool-hero/form-input等)
      - 工具页导航(s-nav)和页脚(s-footer)

   铁律: V1的style.css保留不删(兜底), v2.css为V2主样式
   ============================================================ */

/* === A1. V2 变量体系 === */
:root {
  /* -- 核心色 -- */
  --ink:#0a0e1a;--ink2:#141929;--ink3:#1c2237;
  --paper:#f8f9fc;--white:#ffffff;
  --blue:#2563eb;--blue-h:#1d4ed8;--blue-l:rgba(37,99,235,.06);
  --cyan:#06b6d4;--green:#10b981;--amber:#f59e0b;--hot:#ef4444;--purple:#8b5cf6;
  --t1:#1e293b;--t2:#475569;--t3:#94a3b8;
  --bd:#e2e8f0;--bd2:#f1f5f9;
  --mono:'JetBrains Mono',monospace;
  --sans:'Noto Sans SC',system-ui,-apple-system,sans-serif;
  --r:10px;
  /* -- 缓动(A12动画/浮动组件需要) -- */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --mw: 1200px;

  /* === B1. 工具页兼容变量(44个工具页依赖) === */
  --bg-card: #ffffff;
  --bg-deep: #f1f5f9;
  --bg-input: #f8fafc;
  --bg-0: #f8fafc;
  --bg-2: #f1f5f9;
  --bg-3: #e2e8f0;
  --text-0: #0f172a;
  --text-1: #1e293b;
  --text-2: #64748b;
  --text-3: #94a3b8;
  --accent: #2563eb;
  --accent-dim: rgba(37,99,235,.06);
  --accent-border: rgba(37,99,235,.15);
  --border: #e2e8f0;
  --border-hover: #cbd5e1;
  --radius: 12px;
  --radius-sm: 8px;
  --radius-xs: 4px;
  --red: #ef4444;
  --font-mono: 'JetBrains Mono', monospace;
  --nav-h: 60px;
  --transition: .2s ease;
  --bg: #f8f9fc;
  --card: #ffffff;
}

/* === A2. RESET === */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--t1);background:var(--paper);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none;transition:.2s}
a:hover { color: var(--blue); }
ul, li { list-style: none; }
button, input, select, textarea { font-family: inherit; outline: none; }
img { max-width: 100%; display: block; }
.w{max-width:1200px;margin:0 auto;padding:0 24px}

/* === A3. V2 NAV (fixed暗色+blur) === */
nav.v2-nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(10,14,26,.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,.06)}
.nav-in{display:flex;align-items:center;height:60px}
.nav-logo{display:flex;align-items:center;gap:10px;font-weight:900;font-size:17px;color:#fff;letter-spacing:-.5px}
.nav-logo i{width:32px;height:32px;background:linear-gradient(135deg,var(--blue),var(--cyan));border-radius:8px;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:15px;font-weight:900;color:#fff}
.nav-links{display:flex;gap:4px;margin-left:40px}
.nav-links a{padding:8px 14px;font-size:13px;color:rgba(255,255,255,.6);font-weight:500;border-radius:6px;transition:.2s}
.nav-links a:hover,.nav-links a.on{color:#fff;background:rgba(255,255,255,.08)}
.nav-cta{margin-left:auto;padding:8px 20px;background:var(--blue);color:#fff;font-size:13px;font-weight:700;border-radius:6px;border:none;cursor:pointer;transition:.2s}
.nav-cta:hover{background:var(--blue-h);transform:translateY(-1px)}

/* === A4. V2 HERO === */
.hero{background:var(--ink);position:relative;overflow:hidden;padding:120px 0 80px}
.hero::before{content:'';position:absolute;width:800px;height:800px;background:radial-gradient(circle,rgba(37,99,235,.15),transparent 60%);top:-200px;right:-200px}
.hero::after{content:'';position:absolute;width:600px;height:600px;background:radial-gradient(circle,rgba(6,182,212,.1),transparent 60%);bottom:-200px;left:-100px}
.hero-grid{display:grid;grid-template-columns:1fr 420px;gap:60px;align-items:center;position:relative;z-index:1}
.hero-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:100px;font-size:12px;color:rgba(255,255,255,.5);margin-bottom:20px}
.hero-badge i{width:6px;height:6px;background:var(--green);border-radius:50%;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.hero h1{font-size:44px;font-weight:900;color:#fff;line-height:1.2;letter-spacing:-1.5px;margin-bottom:16px;display:flex;flex-direction:column}
.hero h1 em{font-style:normal;background:linear-gradient(90deg,var(--cyan),var(--blue));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.tw-wrap{display:inline}
.tw-text{border-right:3px solid var(--cyan);padding-right:2px;animation:blink .7s step-end infinite}
.tw-text:empty{border-right-color:var(--cyan)}
@keyframes blink{0%,100%{border-color:var(--cyan)}50%{border-color:transparent}}
.hero-sub{font-size:16px;color:rgba(255,255,255,.5);line-height:1.7;margin-bottom:32px}
.hero-sub strong{color:rgba(255,255,255,.85)}
.hero-acts{display:flex;gap:12px}
.btn-pri{padding:14px 32px;background:var(--blue);color:#fff;font-size:15px;font-weight:700;border-radius:8px;border:none;cursor:pointer;transition:.2s}
.btn-pri:hover{background:var(--blue-h);transform:translateY(-2px);box-shadow:0 8px 30px rgba(37,99,235,.3)}
.btn-sec{padding:14px 32px;background:rgba(255,255,255,.06);color:rgba(255,255,255,.8);font-size:15px;font-weight:600;border-radius:8px;border:1px solid rgba(255,255,255,.1);cursor:pointer;transition:.2s}
.btn-sec:hover{background:rgba(255,255,255,.1);color:#fff}
/* Hero right: search card */
.hero-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:28px;backdrop-filter:blur(10px)}
.hero-card h4{font-size:14px;color:rgba(255,255,255,.4);font-weight:500;margin-bottom:12px;letter-spacing:1px;text-transform:uppercase}
.hc-input{width:100%;padding:14px 16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:8px;color:#fff;font-size:15px;font-family:var(--sans);outline:none;margin-bottom:12px;transition:.2s}
.hc-input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.2)}
.hc-input::placeholder{color:rgba(255,255,255,.25)}
.hc-btn{width:100%;padding:14px;background:linear-gradient(135deg,var(--blue),var(--cyan));color:#fff;font-size:15px;font-weight:700;border:none;border-radius:8px;cursor:pointer;transition:.2s;font-family:var(--sans)}
.hc-btn:hover{transform:translateY(-1px);box-shadow:0 6px 24px rgba(37,99,235,.4)}
.hc-tags{display:flex;gap:6px;margin-top:14px;flex-wrap:wrap}
.hc-tags a{padding:4px 12px;font-size:12px;color:rgba(255,255,255,.4);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:100px;transition:.2s}
.hc-tags a:hover{color:var(--cyan);border-color:rgba(6,182,212,.3)}

/* === A5. STATS BAR === */
.stats{background:var(--white);border-bottom:1px solid var(--bd);padding:0}
.stats-in{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:28px 0;text-align:center;position:relative}
.stat:not(:last-child)::after{content:'';position:absolute;right:0;top:20%;height:60%;width:1px;background:var(--bd)}
.stat-v{font-size:36px;font-weight:900;font-family:var(--mono);letter-spacing:-2px}
.stat-v.c1{color:var(--blue)}.stat-v.c2{color:var(--purple)}.stat-v.c3{color:var(--cyan)}.stat-v.c4{color:var(--green)}
.stat-l{font-size:13px;color:var(--t3);margin-top:2px}

/* === A6. THREE PILLARS === */
.pillars{padding:60px 0}
.pillars-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pil{background:var(--white);border:1px solid var(--bd);border-radius:var(--r);padding:32px 28px;position:relative;overflow:hidden;transition:.3s}
.pil:hover{border-color:var(--blue);transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,.06)}
.pil-ic{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;position:relative;z-index:1}
.pil:nth-child(1) .pil-ic{background:rgba(37,99,235,.08);color:var(--blue)}
.pil:nth-child(2) .pil-ic{background:rgba(139,92,246,.08);color:var(--purple)}
.pil:nth-child(3) .pil-ic{background:rgba(6,182,212,.08);color:var(--cyan)}
.pil-ic svg { width: 24px; height: 24px; }
.pil h3{font-size:18px;font-weight:800;margin-bottom:8px;position:relative;z-index:1}
.pil p{font-size:14px;color:var(--t2);line-height:1.7;margin-bottom:16px;position:relative;z-index:1}
.pil-lk{font-size:13px;font-weight:700;color:var(--blue);display:inline-flex;align-items:center;gap:4px;position:relative;z-index:1}
.pil-lk:hover{gap:8px}
.pil::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;opacity:0;transition:.3s}
.pil:nth-child(1)::before{background:linear-gradient(90deg,var(--blue),var(--cyan))}
.pil:nth-child(2)::before{background:linear-gradient(90deg,var(--purple),#c084fc)}
.pil:nth-child(3)::before{background:linear-gradient(90deg,var(--cyan),var(--green))}
.pil:hover::before{opacity:1}
.pil::after{content:'';position:absolute;top:-30px;right:-30px;width:120px;height:120px;border-radius:50%;opacity:.04;transition:.3s}
.pil:nth-child(1)::after{background:var(--blue)}
.pil:nth-child(2)::after{background:var(--purple)}
.pil:nth-child(3)::after{background:var(--cyan)}
.pil:hover::after{opacity:.08;width:160px;height:160px}
.pil-num{position:absolute;top:20px;right:24px;font-size:64px;font-weight:900;font-family:var(--mono);line-height:1;opacity:.04;letter-spacing:-4px}
.pil-dots{position:absolute;bottom:0;left:0;right:0;height:40px;background-image:radial-gradient(circle,var(--bd) 1px,transparent 1px);background-size:16px 16px;opacity:.5}

/* === A6b. TOOL GRID === */
.tools-sec{padding:60px 0}
.tools-layout{display:grid;grid-template-columns:220px 1fr;gap:24px}
.tools-nav{position:sticky;top:80px;align-self:start}
.tn-item{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-radius:8px;font-size:13px;font-weight:600;color:var(--t2);cursor:pointer;transition:.2s;margin-bottom:2px;border-left:3px solid transparent}
.tn-item:hover{background:var(--bd2);color:var(--t1)}
.tn-item.on{background:var(--blue-l);color:var(--blue);border-left-color:var(--blue)}
.tn-cnt{font-size:11px;font-weight:700;padding:2px 8px;background:var(--bd2);border-radius:100px;color:var(--t3)}
.tn-item.on .tn-cnt{background:rgba(37,99,235,.1);color:var(--blue)}
.tool-group{margin-bottom:32px}
.tg-hd{display:flex;align-items:center;gap:12px;padding:16px 20px;background:var(--white);border:1px solid var(--bd);border-radius:var(--r) var(--r) 0 0;border-bottom:none}
.tg-hd h3{font-size:16px;font-weight:800;display:flex;align-items:center;gap:8px}
.tg-hd h3::before{content:'';width:4px;height:16px;border-radius:2px;display:block}
.tg-dx h3::before{background:var(--blue)}
.tg-infra h3::before{background:var(--green)}
.tg-schema h3::before{background:var(--purple)}
.tg-content h3::before{background:var(--amber)}
.tg-monitor h3::before{background:var(--cyan)}
.tg-adv h3::before{background:var(--hot)}
.tg-hd span{margin-left:auto;font-size:12px;color:var(--t3)}
.tg-body{display:grid;grid-template-columns:repeat(3,1fr);background:var(--white);border:1px solid var(--bd);border-radius:0 0 var(--r) var(--r);overflow:hidden}
.tc{display:flex;align-items:center;gap:12px;padding:16px 18px;border-right:1px solid var(--bd2);border-bottom:1px solid var(--bd2);transition:.15s;cursor:pointer;text-decoration:none;color:inherit}
.tc:hover{background:var(--blue-l)}
.tc:nth-child(3n){border-right:none}
.tc-ic{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--bd2)}
.tc-ic svg{width:18px;height:18px}
.tc-info{min-width:0}
.tc-name{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:6px}
.tc-desc{font-size:11px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.tag{font-size:9px;font-weight:700;padding:1px 6px;border-radius:3px;letter-spacing:.5px}
.tag-hot{background:#fef2f2;color:var(--hot)}.tag-free{background:#f0fdf4;color:var(--green)}.tag-new{background:#eff6ff;color:var(--blue)}.tag-pro{background:#faf5ff;color:var(--purple)}.tag-basic{background:#fff7ed;color:var(--amber)}

/* === A7. PLATFORM CARDS === */
.plat-sec{padding:60px 0;background:var(--white)}
.plat-sec h2{font-size:24px;font-weight:900;text-align:center;margin-bottom:4px}
.plat-sec .sub{text-align:center;font-size:14px;color:var(--t3);margin-bottom:32px}
.plat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:40px}
.plat-card{border:1px solid var(--bd);border-radius:var(--r);padding:24px 20px;transition:.2s}
.plat-card:hover{border-color:var(--blue);box-shadow:0 4px 20px rgba(0,0,0,.04)}
.plat-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.plat-name{font-size:16px;font-weight:800;display:flex;align-items:center;gap:8px}
.plat-dot{width:8px;height:8px;border-radius:50%}
.plat-co{font-size:12px;color:var(--t3)}
.plat-num{font-size:32px;font-weight:900;font-family:var(--mono);letter-spacing:-2px;margin-bottom:2px;display:flex;align-items:baseline;gap:1px}
.plat-num small{font-size:13px;font-weight:700;font-family:var(--sans);letter-spacing:0;opacity:.4;margin-left:2px}
.plat-src{font-size:11px;color:var(--t3);margin-bottom:12px}
.plat-desc{font-size:13px;color:var(--t2);line-height:1.7;margin-bottom:14px}
.plat-tags{display:flex;gap:6px;flex-wrap:wrap}
.plat-tag{font-size:11px;padding:3px 10px;border-radius:4px;font-weight:600}
.plat-tag-time{background:rgba(37,99,235,.06);color:var(--blue)}
.plat-tag-act{background:rgba(16,185,129,.06);color:var(--green)}
.plat-fit{font-size:12px;color:var(--t3);margin-top:10px}
/* Chart */
.chart-wrap{max-width:800px;margin:0 auto}
.chart-legend{display:flex;gap:20px;justify-content:center;margin-bottom:16px;font-size:13px;color:var(--t2)}
.chart-legend span { display: flex; align-items: center; gap: 6px; }
.chart-legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:4px;vertical-align:middle}
.chart-bar-group{margin-bottom:10px;display:flex;align-items:center;gap:12px}
.chart-label{width:70px;font-size:13px;font-weight:700;text-align:right;flex-shrink:0}
.chart-bar-bg{flex:1;height:28px;background:var(--bd2);border-radius:4px;overflow:hidden;position:relative}
.chart-bar{height:100%;border-radius:4px;transition:width 1.5s ease;width:0}
.chart-bar-val{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:11px;font-weight:700;color:var(--t2)}
.chart-axis{display:flex;justify-content:space-between;margin-top:6px;font-size:11px;color:var(--t3);padding-left:82px}
.chart-note{text-align:center;font-size:11px;color:var(--t3);margin-top:12px}

/* === A8. V2 PRICING === */
.price-sec{padding:60px 0}
.price-sec h2{font-size:24px;font-weight:900;text-align:center;margin-bottom:4px}
.price-sec .sub{text-align:center;font-size:14px;color:var(--t3);margin-bottom:32px}
.price-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:1000px;margin:0 auto}
.price-card{border:1px solid var(--bd);border-radius:var(--r);padding:28px 24px;text-align:center;position:relative;transition:.2s;background:var(--white)}
.price-card:hover{border-color:var(--blue);transform:translateY(-4px);box-shadow:0 8px 30px rgba(0,0,0,.06)}
.price-card.hot{border:2px solid var(--blue);box-shadow:0 4px 20px rgba(37,99,235,.1)}
.price-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--blue);color:#fff;font-size:11px;font-weight:700;padding:3px 14px;border-radius:100px}
.price-name{font-size:16px;font-weight:800;margin-bottom:12px;margin-top:4px}
.price-amount{font-size:36px;font-weight:900;font-family:var(--mono);letter-spacing:-2px}
.price-amount small{font-size:14px;font-weight:500;color:var(--t3);letter-spacing:0}
.price-period{font-size:12px;color:var(--t3);margin-bottom:16px}
.price-yearly{font-size:12px;color:var(--blue);margin-bottom:16px;display:block}
.price-features{text-align:left;margin-bottom:20px;min-height:120px}
.price-features li{list-style:none;font-size:13px;color:var(--t2);padding:4px 0;padding-left:18px;position:relative}
.price-features li::before{content:'';position:absolute;left:0;top:10px;width:6px;height:6px;border-radius:50%;background:var(--blue)}
.price-btn{display:block;width:100%;padding:12px;border-radius:8px;font-size:14px;font-weight:700;border:1px solid var(--bd);background:var(--white);color:var(--t1);cursor:pointer;transition:.2s;text-align:center}
.price-btn:hover{border-color:var(--blue);color:var(--blue)}
.price-btn.pri{background:var(--blue);color:#fff;border-color:var(--blue)}
.price-btn.pri:hover{background:var(--blue-h)}
.price-note{text-align:center;margin-top:20px;font-size:13px;color:var(--blue)}
.price-note a { color: var(--blue); }

/* === A9. V2 CTA === */
.cta-sec{background:var(--ink);padding:60px 0;text-align:center;position:relative;overflow:hidden}
.cta-sec::before{content:'';position:absolute;width:600px;height:600px;background:radial-gradient(circle,rgba(37,99,235,.12),transparent 60%);top:-200px;left:50%;transform:translateX(-50%)}
.cta-sec h2{font-size:28px;font-weight:900;color:#fff;margin-bottom:8px;position:relative}
.cta-sec p{font-size:15px;color:rgba(255,255,255,.5);margin-bottom:28px;position:relative}
.cta-sec .btn-pri{font-size:16px;padding:16px 40px;position:relative}

/* === A10. V2 FAQ === */
.faq{padding:60px 0}
.faq h2{font-size:22px;font-weight:800;text-align:center;margin-bottom:32px}
.faq-list{max-width:720px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--bd);padding:18px 0}
.faq-q{font-size:15px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:space-between;transition:.2s}
.faq-q:hover { color: var(--blue); }
.faq-q::after{content:'+';font-size:20px;color:var(--t3);font-weight:400;transition:.2s;flex-shrink:0}
.faq-item.open .faq-q::after{transform:rotate(45deg);color:var(--blue)}
.faq-a{max-height:0;overflow:hidden;transition:.3s;font-size:14px;color:var(--t2);line-height:1.8}
.faq-item.open .faq-a{max-height:200px;padding-top:10px}
.faq-a p { padding: 0 0 18px; font-size: 14px; color: var(--t2); line-height: 1.8; }

/* === A11. V2 FOOTER === */
footer.v2-ft{background:var(--ink);color:rgba(255,255,255,.4);padding:48px 0 24px;font-size:13px}
.ft-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:32px}
.ft-brand{font-size:18px;font-weight:900;color:#fff;margin-bottom:8px}
.ft-brand-desc{font-size:13px;color:rgba(255,255,255,.35);line-height:1.7}
.ft-col h5{font-size:13px;font-weight:700;color:rgba(255,255,255,.6);margin-bottom:12px}
.ft-col a{display:block;padding:4px 0;color:rgba(255,255,255,.35);transition:.2s;font-size:13px}
.ft-col a:hover{color:var(--cyan)}
.ft-bottom{border-top:1px solid rgba(255,255,255,.06);padding-top:20px;display:flex;justify-content:space-between;font-size:12px;color:rgba(255,255,255,.25)}
.ft-bottom a { color: rgba(255,255,255,.35); }

/* === A12. 动画 === */
.reveal{opacity:0;transform:translateY(20px);transition:.6s ease}
.reveal.vis{opacity:1;transform:translateY(0)}
.fade-up { opacity: 0; transform: translateY(20px); animation: v2fu .7s var(--ease) forwards; }
.d1 { animation-delay: .1s; }
.d2 { animation-delay: .2s; }
.d3 { animation-delay: .3s; }
@keyframes v2fu { to { opacity: 1; transform: none; } }

/* === A13. 右侧浮动组件 === */
.float-top {
  position: fixed; right: 24px; bottom: 100px; z-index: 90;
  width: 44px; height: 44px;
  background: var(--white); border: 1px solid var(--bd);
  border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
  opacity: 0; transform: translateY(10px);
  transition: .3s; pointer-events: none;
}
.float-top.show { opacity: 1; transform: none; pointer-events: auto; }
.float-top:hover { background: var(--blue); color: #fff; border-color: var(--blue); }
.float-top svg { width: 20px; height: 20px; }

.float-assist {
  position: fixed; right: 24px; bottom: 160px; z-index: 90;
  width: 44px; height: 44px;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(37,99,235,.3);
  transition: .3s;
}
.float-assist:hover { transform: scale(1.1); }
.float-assist svg { width: 20px; height: 20px; color: #fff; }
.float-panel {
  position: fixed; right: 24px; bottom: 220px; z-index: 91;
  width: 360px; max-height: 480px;
  background: var(--white); border: 1px solid var(--bd);
  border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.12);
  display: none; flex-direction: column; overflow: hidden;
}
.float-panel.open { display: flex; }
.float-panel-head {
  padding: 16px 20px; border-bottom: 1px solid var(--bd);
  display: flex; align-items: center; justify-content: space-between;
  font-size: 15px; font-weight: 700;
}
.float-panel-close {
  width: 28px; height: 28px; border-radius: 6px;
  border: none; background: var(--bd2); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.float-panel-body { flex: 1; overflow-y: auto; padding: 16px 20px; }
.float-panel-foot {
  padding: 12px 20px; border-top: 1px solid var(--bd);
  display: flex; gap: 8px;
}
.float-panel-foot input {
  flex: 1; padding: 8px 12px; border: 1px solid var(--bd);
  border-radius: 6px; font-size: 13px;
}
.float-panel-foot button {
  padding: 8px 16px; background: var(--blue); color: #fff;
  border: none; border-radius: 6px; font-size: 13px; font-weight: 700;
  cursor: pointer;
}

/* === A14. V2 RESPONSIVE === */
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:30px}
  .hero h1{font-size:28px}
  .hero-card{display:none}
  .pillars-grid{grid-template-columns:1fr}
  .tools-layout{grid-template-columns:1fr}
  .tools-nav{display:none}
  .tg-body{grid-template-columns:1fr}
  .tc{border-right:none}
  .stats-in{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(2)::after{display:none}
  .ft-grid{grid-template-columns:1fr 1fr}
  .plat-grid{grid-template-columns:1fr 1fr}
  .price-grid{grid-template-columns:1fr 1fr}
}

/* ============================================================
   B. 工具页兼容样式
   44个工具页使用的公共类
   V1时这些类未定义(样式缺失), V2补全
   ============================================================ */

/* === B2. 工具页布局容器 === */
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* === B3. 工具页导航(s-nav) === */
.s-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--nav-h);
  background: rgba(10,14,26,.95);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,.06);
  display: flex; align-items: center; padding: 0 24px;
}
.s-nav-logo {
  display: flex; align-items: center; gap: 8px;
  font-weight: 800; font-size: 16px; color: #fff;
}
.s-nav-logo i {
  width: 28px; height: 28px;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  border-radius: 6px; display: flex; align-items: center; justify-content: center;
  font-style: normal; font-size: 13px; font-weight: 900; color: #fff;
}
.s-nav-links {
  display: flex; gap: 4px; margin-left: 32px;
}
.s-nav-links a {
  padding: 6px 12px; font-size: 13px;
  color: rgba(255,255,255,.5); font-weight: 500;
  border-radius: 6px; transition: .2s;
}
.s-nav-links a:hover, .s-nav-links a.on {
  color: #fff; background: rgba(255,255,255,.08);
}
.s-nav-cta {
  margin-left: auto; padding: 7px 18px;
  background: var(--blue); color: #fff;
  font-size: 12px; font-weight: 700;
  border-radius: 6px; border: none; cursor: pointer;
}

/* === B4. 工具页页脚(s-footer) === */
.s-footer {
  background: var(--ink); color: rgba(255,255,255,.5);
  padding: 40px 0 20px; font-size: 13px;
}

/* === B5. 工具页HERO区域 === */
.tool-hero {
  padding: 32px 0 24px;
  padding-top: 16px;
}
.tool-hero-badge {
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: 12px;
}
.tool-hero h1 {
  font-size: 32px; font-weight: 900; color: var(--text-1);
  margin-bottom: 10px; letter-spacing: -1px;
}
.tool-hero h1 .hl {
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.tool-hero-desc {
  font-size: 15px; color: var(--text-2); line-height: 1.7;
  max-width: none;
}

/* === B6. 工具页表单 === */
.form-group { margin-bottom: 16px; }
.form-label {
  display: block; font-size: 13px; font-weight: 600;
  color: var(--text-1); margin-bottom: 6px;
}
.form-hint { font-size: 12px; color: var(--text-3); margin-top: 4px; }
.form-input {
  width: 100%; padding: 10px 14px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px; color: var(--text-1);
  transition: var(--transition);
}
.form-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
  outline: none;
}
.form-input::placeholder { color: var(--text-3); }
.form-select {
  width: 100%; padding: 10px 14px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px; color: var(--text-1);
  cursor: pointer;
}
.form-textarea {
  width: 100%; padding: 10px 14px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px; color: var(--text-1);
  min-height: 100px; resize: vertical;
  font-family: var(--sans);
}

/* === B7. 工具页按钮 === */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; padding: 10px 20px;
  border: none; border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 600; cursor: pointer;
  transition: var(--transition); font-family: var(--sans);
}
.btn-primary {
  background: var(--accent); color: #fff;
}
.btn-primary:hover { background: var(--blue-h); transform: translateY(-1px); }
.btn-secondary {
  background: var(--bg-deep); color: var(--text-1);
  border: 1px solid var(--border);
}
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }
.btn-sm { padding: 6px 14px; font-size: 12px; }
.btn-lg { padding: 14px 28px; font-size: 16px; }
.btn-block { width: 100%; }

/* === B8. 工具页面板 === */
.panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0;
}
.panel-title {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 700;
}
.panel-title-icon {
  width: 28px; height: 28px; border-radius: 6px;
  background: var(--accent-dim);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* === B9. 工具页使用指南 === */
.use-guide { padding: 0 0 24px; }
.use-guide-inner {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px;
}
.ug-what h2 { font-size: 16px; font-weight: 700; margin-bottom: 8px; color: var(--text-1); }
.ug-what p { font-size: 13px; color: var(--text-2); line-height: 1.7; margin-bottom: 8px; }
.ug-usecases { display: flex; flex-wrap: wrap; gap: 6px; }
.ug-usecase {
  padding: 4px 12px; font-size: 12px; font-weight: 600;
  background: var(--accent-dim); color: var(--accent);
  border: 1px solid var(--accent-border); border-radius: 100px;
}
.ug-steps {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px; margin-top: 16px;
}
.ug-step {
  padding: 14px; background: var(--bg-deep);
  border-radius: var(--radius-sm);
}
.ug-step-num {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent); color: #fff;
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 8px;
}
.ug-step-title { font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.ug-step-desc { font-size: 12px; color: var(--text-2); }

/* === B10. 工具页布局 === */
.tool-body {
  padding: 0 0 40px;
}
.tool-cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
.tool-workspace { padding: 20px; }
.tool-header {
  padding: 16px 20px; border-bottom: 1px solid var(--border);
  font-size: 14px; font-weight: 700;
}
.tool-form { padding: 20px; }

/* === B11. 工具页代码块 === */
.code-block {
  background: #0f172a; border-radius: var(--radius-sm);
  overflow: hidden;
}
.code-block-header {
  padding: 8px 14px; background: rgba(255,255,255,.05);
  border-bottom: 1px solid rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; color: rgba(255,255,255,.5);
}
.code-block pre {
  padding: 16px; font-size: 13px;
  color: #e2e8f0; line-height: 1.6;
  overflow-x: auto; font-family: var(--font-mono);
  white-space: pre-wrap; word-break: break-all;
}

/* === B12. 工具页推荐课程 === */
.tool-recommend {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px; margin-top: 20px;
}
.tool-recommend h4 {
  font-size: 14px; font-weight: 800; margin-bottom: 12px;
  display: flex; align-items: center; gap: 6px;
}
.tool-recommend h4::before {
  content: ''; width: 3px; height: 12px;
  background: var(--purple); border-radius: 2px; display: block;
}
.tool-rec-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--bd2); font-size: 13px;
}
.tool-rec-item:last-child { border: none; }
.tool-rec-item .lesson-tag {
  font-size: 11px; font-weight: 700; color: var(--blue);
  background: var(--blue-l); padding: 2px 8px; border-radius: 4px; flex-shrink: 0;
}
.tool-rec-item a { color: var(--blue); font-weight: 600; margin-left: auto; }

/* === B13. 工具页SEO区域 === */
.seo-section { padding: 24px 0; }
.seo-faq { margin-top: 16px; }
.seo-faq-item { border-bottom: 1px solid var(--border); }
.seo-faq-q {
  padding: 14px 0; font-size: 14px; font-weight: 600;
  cursor: pointer; display: flex; align-items: center; justify-content: space-between;
}
.seo-faq-q::after { content: '+'; font-size: 18px; color: var(--text-3); transition: .3s; }
.seo-faq-item.open .seo-faq-q::after { transform: rotate(45deg); color: var(--accent); }
.seo-faq-a { max-height: 0; overflow: hidden; transition: max-height .3s; }
.seo-faq-item.open .seo-faq-a { max-height: 300px; }
.seo-faq-a p { padding: 0 0 14px; font-size: 13px; color: var(--text-2); line-height: 1.8; }

/* === B14. 工具页Tags === */
.tag { font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 3px; letter-spacing: .5px; }
.tag-hot { background: #fef2f2; color: var(--hot); }
.tag-free { background: #f0fdf4; color: var(--green); }
.tag-new { background: #eff6ff; color: var(--blue); }
.tag-pro { background: #faf5ff; color: var(--purple); }
.tag-basic { background: #fff7ed; color: var(--amber); }
.tag-paid { background: #fefce8; color: #ca8a04; border: 1px solid #fde68a; }
.tag-enterprise { background: #faf5ff; color: var(--purple); border: 1px solid #e9d5ff; }
.tag-dev { background: var(--bd2); color: var(--t3); border: 1px solid var(--bd); }

/* === B15. 工具页动画 === */
.anim-in { opacity: 0; transform: translateY(16px); animation: v2anim .6s var(--ease) forwards; }
.anim-d1 { animation-delay: .1s; }
.anim-d2 { animation-delay: .2s; }
.anim-d3 { animation-delay: .3s; }
@keyframes v2anim { to { opacity: 1; transform: none; } }

/* === B16. 工具页动态列表 === */
.dyn-list { display: flex; flex-direction: column; gap: 8px; }
.dyn-item {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; background: var(--bg-deep);
  border-radius: var(--radius-sm); transition: var(--transition);
}
.dyn-item-num {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent-dim); color: var(--accent);
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.dyn-item-del {
  width: 24px; height: 24px; border-radius: 4px;
  border: none; background: none; color: var(--text-3);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.dyn-item-del:hover { color: var(--red); background: rgba(239,68,68,.08); }
.dyn-add {
  padding: 10px; text-align: center;
  border: 1px dashed var(--border); border-radius: var(--radius-sm);
  color: var(--text-3); font-size: 13px; cursor: pointer; transition: var(--transition);
}
.dyn-add:hover { border-color: var(--accent); color: var(--accent); }

/* === B17. 工具页步骤指示器 === */
.steps-bar { padding: 12px 0; border-bottom: 1px solid var(--border); }
.step-dot {
  width: 32px; height: 4px; border-radius: 2px;
  background: var(--bg-3); display: inline-block;
}
.step-dot.done { background: var(--green); }
.step-dot.active { background: var(--accent); }
.step-info { text-align: center; font-size: 12px; color: var(--text-3); margin-top: 6px; }

/* === B18. 工具页响应式 === */
@media (max-width: 768px) {
  .tool-cols { grid-template-columns: 1fr; }
  .tool-hero h1 { font-size: 24px; }
  .s-nav { padding: 0 16px; }
  .container { padding: 0 16px; }
}

/* sr-only: 视觉隐藏但屏幕阅读器/爬虫可见 */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }


/* ============================================================
   B19. 工具页布局完整修复(2026-03-30 V3)
   修复: 卡片内边距 / use-guide两栏 / seo排版 / 悬浮工具栏
   铁律: 只改CSS不动HTML
   ============================================================ */

/* -- B19-1. use-guide 两栏布局 -- */
.use-guide-inner {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 32px;
  align-items: start;
}
.ug-what > h2,
.ug-steps > h2 {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-1);
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.ug-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 0;
}
.ug-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-deep);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
}
.ug-step-num {
  margin-bottom: 0;
  flex-shrink: 0;
}

/* -- B19-2. panel 卡片内边距 -- */
.panel {
  overflow: hidden;
}
.panel > .form-group:first-of-type {
  padding-top: 20px;
}
.panel > .form-group,
.panel > .form-row,
.panel > .dyn-list,
.panel > h4,
.panel > p,
.panel > .btn,
.panel > button {
  margin-left: 20px;
  margin-right: 20px;
}
.panel > .btn,
.panel > button.btn {
  margin-bottom: 20px;
  width: calc(100% - 40px);
}
.panel > div[id]:not(.panel-title) {
  padding: 16px 20px;
}

/* -- B19-3. tool-workspace 间距 -- */
.tool-workspace {
  padding: 0 0 40px;
}

/* -- B19-4. seo-section 排版 -- */
.seo-section {
  padding: 32px 0;
}
.seo-section h2 {
  font-size: 20px;
  font-weight: 900;
  color: var(--text-1);
  margin-bottom: 12px;
  margin-top: 28px;
}
.seo-section h2:first-child,
.seo-section > .container > h2:first-child {
  margin-top: 0;
}
.seo-section h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-1);
  margin-top: 24px;
  margin-bottom: 8px;
}
.seo-section p {
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.8;
  margin-bottom: 8px;
  max-width: 760px;
}

/* -- B19-5. 表单辅助文字 -- */
.required { color: var(--red); font-weight: 400; }
.optional {
  font-size: 11px;
  color: var(--text-3);
  font-weight: 400;
  margin-left: 4px;
}

/* -- B19-6. tag 标签 -- */
.tag-free, .tag-paid {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 4px;
  font-weight: 600;
}

/* -- B19-7. 面包屑间距 -- */

/* -- B19-8. 悬浮工具切换栏 -- */
.float-tools {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px;
  box-shadow: 0 4px 24px rgba(0,0,0,.08);
  max-height: 60vh;
  overflow-y: auto;
}
.float-tools::-webkit-scrollbar { width: 3px; }
.float-tools::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.float-tools a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-2);
  border-radius: 6px;
  transition: .15s;
  white-space: nowrap;
  text-decoration: none;
}
.float-tools a:hover {
  background: var(--blue-l);
  color: var(--blue);
}
.float-tools a.current {
  background: var(--accent-dim);
  color: var(--accent);
  font-weight: 700;
}
.float-tools .ft-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.float-tools .ft-label {
  max-width: 0;
  overflow: hidden;
  transition: max-width .2s;
}
.float-tools:hover .ft-label {
  max-width: 120px;
}

/* -- B19-9. 响应式补充 -- */
@media (max-width: 900px) {
  .use-guide-inner {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .float-tools {
    display: none;
  }
}

/* ============================================================
   B21. 旧版工具页兼容样式(25个旧版工具页)
   旧版: .tool-header(深色Hero) + .tool-body(单栏) + .tool-form + .tool-btn
   ============================================================ */
.tool-header {
  background: var(--ink);
  background-image: radial-gradient(circle at 30% 0%, rgba(37,99,235,.12), transparent 50%);
  padding: calc(var(--nav-h) + 32px) 0 32px !important;
  color: #fff;
  text-align: center;
}
.tool-header h1 {
  font-size: 28px;
  font-weight: 900;
  margin-bottom: 6px;
}
.tool-header p {
  font-size: 14px;
  color: rgba(255,255,255,.6);
}
.tool-body {
  max-width: 900px;
  margin: 0 auto;
  padding: 24px 24px 48px;
}
.tool-form {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 20px;
}
.tool-form label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-1);
  margin-bottom: 6px;
}
.tool-form input,
.tool-form select,
.tool-form textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--text-1);
  background: var(--bg-input);
  margin-bottom: 14px;
  font-family: var(--sans);
  transition: var(--transition);
}
.tool-form input:focus,
.tool-form select:focus,
.tool-form textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
  outline: none;
}
.tool-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px 24px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
  font-family: var(--sans);
}
.tool-btn:hover {
  background: var(--blue-h);
  transform: translateY(-1px);
}
.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
.tool-recommend + .tool-recommend {
  margin-top: 12px;
}

/* === B22. 排版细节修复(2026-03-30) === */

/* -- use-guide步骤列表紧凑化 -- */
.ug-step-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ug-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
}
.ug-step-num {
  flex-shrink: 0;
  margin-bottom: 0;
}
.ug-step-body {
  min-width: 0;
}

/* -- tool-cols两栏统一宽度 -- */
.tool-cols {
  display: grid;
  grid-template-columns: 5fr 5fr;
  gap: 20px;
}

/* === B23. site-check特殊布局(检测前单栏/检测后双栏) === */
#scoreArea[style*="display:none"] + div,
#scoreArea[style*="display: none"] + div {
  grid-column: 1 / -1;
}
.check-items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 768px) {
  .check-items {
    grid-template-columns: 1fr;
  }
}

/* === B24. 悬浮工具栏圆点优化 === */
.float-tools {
  right: 12px;
  padding: 4px;
  border-radius: 20px;
  gap: 4px;
  max-height: 50vh;
}
.float-tools a {
  padding: 5px;
  border-radius: 50%;
  justify-content: center;
}
.float-tools .ft-dot {
  width: 8px;
  height: 8px;
}
.float-tools:hover a {
  border-radius: 6px;
  padding: 6px 10px;
  justify-content: flex-start;
}