/* Tailwind色板 */
    :root{
      --w:1180px;
      --bg:#f8fafc;              /* slate-50 */
      --card:#ffffff;
      --border:#e5e7eb;
      --text:#0f172a;            /* slate-900 */
      --muted:#475569;           /* slate-600 */
      --brand:#7c3aed;           /* violet-600 */
      --brand-700:#6d28d9;       /* violet-700 */
      --accent:#2563eb;          /* blue-600 */
      --accent-700:#1d4ed8;      /* blue-700 */
      --chip:#f1f5f9;
      --radius:16px;
      --shadow:0 8px 24px rgba(2,6,23,.08);
    }
    *{box-sizing:border-box;margin:0;padding:0}
    body{background:var(--bg);color:var(--text);font:14px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Arial}
    a{color:inherit;text-decoration:none}
	.top{max-width:var(--w);margin:0 auto;padding:14px 20px;display:flex;align-items:center;gap:16px;position:relative}
    .brand{font-weight:700}
.nav{margin-left:auto;display:flex;gap:18px;align-items:center;position:relative}
.nav a{color:#0f172a;position:relative;padding:4px 6px;border-radius:6px;transition:background .2s ease}
.nav a:hover{color:var(--accent);background:#eef2ff}
.notice{padding-bottom:20px;    font-size: 16px;}
.dropdown{position:relative}                    /* 容器要相对定位 */
.dropdown:hover .menu,
.dropdown:focus-within .menu{display:block}     /* 鼠标悬停 + 键盘/触摸聚焦都能展开 */

/* 关键：去掉 margin-top，紧贴触发器 */
.menu{
  display:none;position:absolute;top:100%;right:0;
  /* 保证触发器和菜单之间没有空隙 */
  margin-top:0;
  background:#fff;border:1px solid var(--border);border-radius:12px;
  box-shadow:var(--shadow);z-index:10;padding:8px 0;
}

/* 悬停桥接：让从触发器移动到菜单的过程中 .dropdown 仍保持 hover */
.dropdown::after{
  content:"";position:absolute;left:0;right:0;top:100%;
  height:8px;                                   /* 8px 的“透明桥”，可微调 */
  /* 不需要背景色；它只用来保持 hover，不会挡住点击 */
}
.menu a{display:block;padding:10px 14px;color:var(--text);white-space:nowrap}
.menu a:hover{background:#f1f5f9;color:var(--accent)}


    /* Hero Banner */
    .hero{padding:56px 0;background:#ffffff}
    .hero .wrap{max-width:var(--w);margin:0 auto;text-align:center;padding:0 20px}
    .hero h1{font-size:42px;margin:0 0 10px 0}
    .hero h1 span{color:var(--brand)}
    .hero .sub{color:var(--muted);margin-bottom:16px}
    .promo{
      display:inline-flex;gap:14px;align-items:center;
      background:linear-gradient(90deg,#ede9fe,#f5f3ff);
      color:#1f2937;border:1px solid #e5e7eb;border-radius:12px;
      padding:12px 16px;box-shadow:var(--shadow)
    }
    .promo em{
      background:var(--brand);color:#fff;border-radius:10px;padding:6px 10px;
      font-style:normal
    }
    .promo:hover em{background:var(--brand-700)}

    /* Section & grid */
    .section{max-width:var(--w);margin:32px auto;padding:0 20px}
    .section>h2{font-size:20px;margin:0 0 16px 0}
    .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
    @media (max-width:1024px){ .grid{grid-template-columns:repeat(2,1fr)} }
    @media (max-width:640px){ .grid{grid-template-columns:1fr} .hero h1{font-size:28px}}
    /* 推荐区块：更鲜艳的背景 */
    .section.featured{border-radius:0
    }
 .tool-card:hover .logo img {
      transform: scale(1.05);
      border-color: var(--brand);
      box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
    }
    /* 分类 chips */
    .chips{display:flex;gap:12px;flex-wrap:wrap}
    .cat-chip{
      display:flex;align-items:center;gap:8px;
      background:#fff;border:1px solid var(--border);border-radius:14px;
      padding:10px 14px;box-shadow:var(--shadow)
    }
    .cat-chip em{
      font-style:normal;background:var(--chip);color:#334155;
      border-radius:999px;padding:2px 8px
    }

    /* 卡片 */
    .tool-card{border:1px solid var(--border);border-radius:var(--radius);padding:14px}
    .tool-card-link{display:block;color:inherit;text-decoration:none;transition:transform .15s ease, box-shadow .2s ease}
    .tool-card-link:hover .tool-card{box-shadow:0 12px 28px rgba(2,6,23,.12);transform:translateY(-2px)}

    /* 推荐卡片（鲜艳） */
    .featured .tool-card{background:#f5f3ff;border-color:#ddd6fe;} /* violet-100 / violet-200 */
    .featured .tool-card:hover{transform: scale(1.05);
      border-color: var(--brand);
      box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);}

    /* 普通卡片（淡雅） */
    .section:not(.featured) .tool-card{background:#ffffffcc;border-color:#f1f5f9;}
    .section:not(.featured) .tool-card:hover{background:#f8fafc;}

    .tool-head{
      display:flex;grid-template-columns:64px 1fr 24px;
      gap:8px;align-items:flex-start
    }
    .logo img{width:56px;height:56px;border-radius:12px;background:#f8fafc;object-fit:contain}
    .meta .title{font-size:16px;margin:0 0 6px 0}
    .meta .desc{color:var(--muted);margin:0;font-size:13px}
    .tool-card-link:hover .ext-icon{opacity:1;color:var(--accent)}

    .tool-foot{margin-top:10px;display:flex;justify-content:space-between;align-items:center}
    .tag{font-size:12px;color:#6366f1;padding:2px 8px;margin-right:6px;display:inline-block;font-weight: 600;}
    .price{font-size:12px;background:#fff7ed;border:1px solid #fed7aa;color:#b45309;border-radius:999px;padding:2px 8px;white-space:nowrap}
	.footer {
  text-align: center;
  font-size: 13px;
  color: #98a2b3;
  margin-top: 36px;
}