* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background:#f5f7fb; color:#111827; }
a { text-decoration:none; color:inherit; }
.container { width: 96%; max-width: 1240px; margin: 0 auto; }

/* Header */
.top-header { background:#0b63ff; color:#fff; padding:10px 0; box-shadow:0 2px 4px rgba(0,0,0,.08); }
.header-flex { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.logo-main { font-weight:800; }
.logo-sub { font-weight:600; opacity:.9; }
.logo a { color:#fff; font-size:1.2rem; }
.main-nav { display:flex; gap:14px; font-size:.9rem; }
.main-nav a { color:#dbeafe; }
.main-nav a:hover { color:#fff; }
.nav-auth { display:flex; gap:8px; align-items:center; }
.nav-link { font-size:.85rem; color:#e5e7eb; }
.btn { display:inline-flex; align-items:center; justify-content:center; border-radius:999px; padding:6px 14px; font-size:.82rem; font-weight:600; cursor:pointer; border:none; }
.btn-outline { border:1px solid #e5e7eb; color:#0b63ff; background:#fff; }

.page-content { padding-bottom:40px; }

/* Hero */
.hero { background:#0b63ff; color:#fff; padding:40px 0 30px; }
.hero-inner { display:flex; flex-wrap:wrap; gap:24px; align-items:center; }
.hero-left { flex:1 1 320px; }
.hero-right { flex:1 1 260px; text-align:center; }
.hero h1 { font-size:2.1rem; margin-bottom:10px; }
.hero p { font-size:.95rem; max-width:520px; line-height:1.5; opacity:.95; }
.hero-cta { margin-top:16px; }
.hero-cta .btn-primary { background:#fff; color:#0b63ff; }
.hero-illustration { background:#0f5ae6; border-radius:14px; padding:30px 20px; box-shadow:0 15px 30px rgba(0,0,0,.25); font-size:.9rem; }

/* Search + popular tools */
.search-section { background:#eef2ff; padding:18px 0 24px; border-bottom:1px solid #e5e7eb; }
.search-flex { display:flex; flex-wrap:wrap; gap:20px; }
.search-left { flex:1 1 340px; }
.search-right { flex:0 0 260px; background:#fff; border-radius:10px; padding:12px 14px; box-shadow:0 1px 3px rgba(15,23,42,.08); }
.tool-search-bar { display:flex; background:#fff; border-radius:999px; overflow:hidden; border:1px solid #d1d5db; }
.tool-search-bar input { flex:1; border:none; padding:10px 14px; font-size:.9rem; outline:none; }
.tool-search-bar button { border:none; background:#0b63ff; color:#fff; padding:0 18px; font-size:.85rem; font-weight:600; cursor:pointer; }
.search-help { margin-top:6px; font-size:.8rem; color:#6b7280; }
.popular-title { font-size:.9rem; font-weight:600; margin-bottom:6px; }
.popular-list a { display:block; font-size:.82rem; padding:3px 0; color:#2563eb; }

/* Category blocks */
.home-section { padding:26px 0 0; }
.category-block { margin-bottom:26px; }
.cat-title { text-align:center; font-size:1.15rem; color:#0f766e; margin-bottom:4px; font-weight:600; }
.cat-subtitle { text-align:center; font-size:.82rem; color:#6b7280; margin-bottom:16px; }
.category-inner { display:flex; flex-wrap:wrap; gap:18px; align-items:flex-start; }
.category-left-ad { flex:0 0 260px; min-height:200px; background:#e5e7eb; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:.8rem; color:#4b5563; border:1px dashed #9ca3af; }
.category-right-tools { flex:1 1 0; }

.tools-grid-3 { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; }
.tool-card { background:#fff; border-radius:10px; padding:12px 10px; text-align:center; box-shadow:0 1px 4px rgba(15,23,42,.06); border:1px solid #e5e7eb; transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.tool-card:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(15,23,42,.12); border-color:#93c5fd; }
.tool-icon-circle { width:34px; height:34px; border-radius:999px; margin:0 auto 6px; background:linear-gradient(135deg,#0b63ff,#22c55e); opacity:.9; }
.tool-name { font-size:.82rem; font-weight:500; color:#1f2937; }

/* Category link in title (home sections) */
.cat-title a { color:#0f766e; }
.cat-title a:hover { text-decoration:underline; }

/* Category pages */
.category-page-title { font-size:1.4rem; margin:8px 0 4px; }
.category-page-desc { font-size:.9rem; color:#6b7280; margin-bottom:14px; }
.category-page-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.category-page-card { background:#fff; border-radius:10px; padding:10px; border:1px solid #e5e7eb; font-size:.85rem; }
.category-page-card a { color:#1d4ed8; }

/* Tool detail pages */
.tool-detail { padding:20px 0; }
.tool-detail h1 { font-size:1.4rem; margin-bottom:10px; }
.tool-detail p { font-size:.9rem; color:#4b5563; margin-bottom:10px; }

/* Footer */
.site-footer { background:#020617; color:#e5e7eb; margin-top:30px; }
.footer-top { border-top:1px solid #111827; padding:26px 0 18px; }
.footer-grid { display:grid; grid-template-columns:2fr 1.5fr 1.5fr; gap:26px; }
.footer-logo { font-size:1.1rem; margin-bottom:6px; }
.footer-text { font-size:.85rem; color:#9ca3af; line-height:1.5; margin-bottom:12px; }
.footer-title { font-size:.9rem; font-weight:600; margin-bottom:8px; }
.footer-links { list-style:none; }
.footer-links li { margin-bottom:4px; }
.footer-links a { font-size:.83rem; color:#9ca3af; }
.footer-links a:hover { color:#e5e7eb; }
.footer-ssl { margin-top:8px; }
.ssl-badge { display:inline-flex; align-items:center; justify-content:center; padding:4px 10px; border-radius:999px; border:1px solid #22c55e; color:#bbf7d0; font-size:.8rem; }
.footer-social { margin-top:10px; display:flex; flex-wrap:wrap; gap:6px; }
.social-circle { width:26px; height:26px; border-radius:999px; border:1px solid #4b5563; display:flex; align-items:center; justify-content:center; font-size:.7rem; color:#e5e7eb; }

.footer-bottom { border-top:1px solid #111827; padding:10px 0; }
.footer-bottom-inner { text-align:center; font-size:.8rem; color:#6b7280; }

@media (max-width:900px){
    .header-flex { flex-wrap:wrap; }
    .main-nav { flex-wrap:wrap; }
    .category-page-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .footer-grid { grid-template-columns:1fr 1fr; }
    .category-left-ad { flex:1 1 100%; max-width:260px; }
}
@media (max-width:700px){
    .hero-inner { flex-direction:column; }
    .hero-right { order:-1; }
    .search-flex { flex-direction:column; }
    .category-inner { flex-direction:column; }
    .footer-grid { grid-template-columns:1fr; }
}
@media (max-width:550px){
    .tools-grid-3 { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .category-page-grid { grid-template-columns:repeat(1,minmax(0,1fr)); }
}