/* ============================================================
   在线工具箱 - 全站公共样式（首页 / 工具页共用）
   主题：浅色 · 靛蓝主色 · 卡片式
   ============================================================ */
:root{
  --bg:#f5f7fa;
  --card:#ffffff;
  --ink:#1f2937;
  --muted:#6b7280;
  --accent:#4f46e5;
  --accent-dark:#4338ca;
  --accent-soft:#eef2ff;
  --border:#e5e7eb;
  --radius:12px;
  --shadow:0 1px 3px rgba(15,23,42,.08),0 4px 14px rgba(15,23,42,.05);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:system-ui,-apple-system,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.6;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.container{width:100%;max-width:1120px;margin:0 auto;padding:0 20px}

/* ---------- 页头 ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
}
.site-header .container{display:flex;align-items:center;gap:24px;height:60px}
.logo{font-size:20px;font-weight:800;color:var(--ink);white-space:nowrap}
.logo:hover{text-decoration:none}
.logo em{font-style:normal;color:var(--accent)}
.main-nav{display:flex;gap:18px;font-size:14px;overflow-x:auto;white-space:nowrap}
.main-nav a{color:var(--muted);font-weight:500}
.main-nav a:hover{color:var(--accent);text-decoration:none}
.main-nav a.current{color:var(--accent);font-weight:700}

/* ---------- 首页 Hero ---------- */
.hero{padding:56px 0 20px;text-align:center}
.hero h1{font-size:34px;font-weight:800;margin-bottom:10px}
.hero p{color:var(--muted);margin-bottom:26px;font-size:15px}
.search-box{max-width:560px;margin:0 auto;position:relative}
.search-box input{
  width:100%;padding:14px 20px 14px 46px;font-size:16px;
  border:2px solid var(--border);border-radius:999px;outline:none;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") 16px 50% no-repeat;
  transition:border-color .2s,box-shadow .2s;
}
.search-box input:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.stats-line{text-align:center;color:var(--muted);font-size:13px;margin-top:12px}

/* ---------- 分类区 ---------- */
.cat-section{margin:36px 0}
.cat-head{display:flex;align-items:baseline;gap:10px;margin-bottom:14px}
.cat-head .cat-emoji{font-size:22px}
.cat-head h2{font-size:22px;font-weight:700}
.cat-head .count{color:var(--muted);font-size:13px}
.tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:12px}
.tool-link{
  display:block;background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow);
  transition:transform .15s,box-shadow .15s,border-color .15s;
}
.tool-link:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(15,23,42,.10);border-color:var(--accent);text-decoration:none}
.tool-link b{display:block;font-size:15px;margin-bottom:4px;color:var(--ink)}
.tool-link small{color:var(--muted);font-size:12px;line-height:1.5;display:block}
.no-result{display:none;padding:48px 0;text-align:center;color:var(--muted)}

/* ---------- 页脚 ---------- */
.site-footer{margin-top:auto;border-top:1px solid var(--border);padding:26px 0 38px;text-align:center;color:var(--muted);font-size:13px}
.site-footer .footer-links{margin-bottom:8px;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px}
.site-footer a{color:var(--muted)}
.site-footer a:hover{color:var(--accent)}