*{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#fff;--bg-alt:#f8fafc;--text:#333;--text-muted:#64748b;--border:#e2e8f0;--primary:#2563eb;--accent:#7c3aed;--success:#16a34a;--danger:#dc2626}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:#f5f7fa;color:var(--text);line-height:1.6}
body.dark{--bg:#1e293b;--bg-alt:#334155;--text:#e2e8f0;--text-muted:#94a3b8;--border:#475569;--primary:#60a5fa;--accent:#a78bfa;--success:#4ade80;--danger:#f87171}
.layout{display:flex;min-height:100vh}
/* Sidebar */
.sidebar{width:250px;background:#1e293b;color:#e2e8f0;position:fixed;top:0;left:0;bottom:0;overflow-y:auto;z-index:100;transition:transform 0.3s}
.sidebar-header{padding:16px;border-bottom:1px solid #334155}
.sidebar-header .logo{color:#fff;text-decoration:none;font-size:1.2rem;font-weight:700}
.sidebar-nav{padding:8px 0}
.nav-link{display:block;padding:8px 16px;color:#94a3b8;text-decoration:none;font-size:0.85rem;border-left:3px solid transparent;transition:all 0.2s}
.nav-link:hover{background:#334155;color:#fff}
.nav-link.active{background:#334155;color:#fff;border-left-color:#2563eb}
/* Main */
.main-content{flex:1;margin-left:250px;min-width:0}
header{color:#fff;padding:16px 24px}
.header-inner{display:flex;align-items:center;gap:12px}
header h1{font-size:1.4rem}
.hamburger{display:none;background:none;border:none;color:#fff;font-size:1.5rem;cursor:pointer}
.content{padding:20px 24px;max-width:1000px}
.ad-banner{background:#e2e8f0;border:2px dashed #94a3b8;padding:16px;text-align:center;color:#64748b;margin:16px 0;font-size:0.85rem;border-radius:6px}
.tool-area{background:var(--bg);border-radius:12px;padding:24px;box-shadow:0 2px 8px rgba(0,0,0,0.08);margin:16px 0;color:var(--text)}
.tool-area button,.tool-area .btn{background:var(--accent,#2563eb) !important;color:#fff !important;border:none;padding:10px 20px;border-radius:6px;cursor:pointer;font-weight:500;font-size:0.9rem}
.tool-area button:hover,.tool-area .btn:hover{opacity:0.9;filter:brightness(1.1)}
.tool-area input,.tool-area textarea,.tool-area select{border:1px solid var(--border);border-radius:6px;padding:10px;background:var(--bg);color:var(--text);font-size:0.95rem}
footer{background:#f8fafc;border-top:1px solid #e2e8f0;padding:16px 24px;text-align:center;color:#64748b;font-size:0.85rem}
footer a{color:#2563eb}
/* Homepage grid */
.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin:16px 0}
.tool-card{background:#fff;border-radius:12px;padding:20px;box-shadow:0 2px 8px rgba(0,0,0,0.08);text-decoration:none;color:inherit;transition:transform 0.2s,box-shadow 0.2s}
.tool-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,0.12)}
.tool-card .icon{font-size:2rem;margin-bottom:8px}
.tool-card h2{font-size:1rem;margin-bottom:4px}
.tool-card p{font-size:0.8rem;color:#64748b}
.tool-card .tag{display:inline-block;background:#eff6ff;color:#2563eb;font-size:0.7rem;padding:2px 8px;border-radius:4px;margin-top:6px}
/* Dark toggle */
.dark-toggle{position:fixed;bottom:20px;right:20px;background:#334155;border:none;color:#e2e8f0;width:44px;height:44px;border-radius:50%;cursor:pointer;font-size:1.3rem;z-index:999;box-shadow:0 2px 8px rgba(0,0,0,0.3)}
/* Dark mode */
body.dark{background:#0f172a;color:#e2e8f0}
body.dark .tool-area{background:var(--bg)}
body.dark .tool-card{background:#1e293b;color:#e2e8f0}
body.dark .tool-card p{color:#94a3b8}
body.dark .ad-banner{background:#1e293b;border-color:#475569;color:#94a3b8}
body.dark footer{background:#0f172a;border-color:#334155}
body.dark textarea,body.dark input[type="text"],body.dark input[type="number"],body.dark input[type="time"],body.dark input[type="date"],body.dark select{background:#334155;color:#e2e8f0;border-color:#475569}
body.dark .tool-card .tag{background:#334155}
/* Responsive */
@media(max-width:768px){
    .sidebar{transform:translateX(-100%)}
    .sidebar.open{transform:translateX(0)}
    .main-content{margin-left:0}
    .hamburger{display:block}
    .tools-grid{grid-template-columns:1fr}
    .content{padding:12px}
}
/* SEO content */
.seo-content{background:#fff;border-radius:12px;padding:24px;margin:16px 0;box-shadow:0 2px 8px rgba(0,0,0,0.08)}
.seo-content h2{font-size:1.2rem;margin-bottom:12px;color:#1e293b}
.seo-content h3{font-size:1rem;margin:16px 0 8px;color:#334155}
.seo-content p{color:#64748b;font-size:0.9rem;margin-bottom:8px}
.seo-content ul{padding-left:20px;color:#64748b;font-size:0.9rem;margin-bottom:8px}
.seo-content ul li{margin-bottom:4px}
.footer-seo{font-size:0.85rem;color:#64748b;margin-bottom:8px;font-style:italic}
body.dark .seo-content{background:#1e293b}
body.dark .seo-content h2,body.dark .seo-content h3{color:#e2e8f0}
body.dark .seo-content p,body.dark .seo-content ul{color:#94a3b8}
/* Breadcrumbs */
.breadcrumbs{padding:8px 24px;font-size:0.8rem;color:#64748b;background:#f8fafc;border-bottom:1px solid #e2e8f0}
.breadcrumbs a{color:#2563eb;text-decoration:none}
.breadcrumbs span{margin:0 4px}
body.dark .breadcrumbs{background:#1e293b;border-color:#334155;color:#94a3b8}
/* Related tools */
.related-tools{margin:24px 0}
.related-tools h2{font-size:1.1rem;margin-bottom:12px;color:#1e293b}
.related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.related-card{display:flex;align-items:center;gap:8px;padding:10px 12px;background:#fff;border:1px solid #e2e8f0;border-radius:8px;text-decoration:none;color:#333;font-size:0.85rem;transition:all 0.2s}
.related-card:hover{border-color:#2563eb;background:#eff6ff}
.related-card .r-icon{font-size:1.2rem}
body.dark .related-tools h2{color:#e2e8f0}
body.dark .related-card{background:#1e293b;border-color:#475569;color:#e2e8f0}
body.dark .related-card:hover{border-color:#2563eb;background:#334155}
/* Prev/Next navigation */
.prev-next{display:flex;justify-content:space-between;margin:20px 0;gap:12px;flex-wrap:wrap}
.pn-link{padding:10px 16px;background:#fff;border:1px solid #e2e8f0;border-radius:8px;text-decoration:none;color:#2563eb;font-size:0.85rem;transition:all 0.2s}
.pn-link:hover{border-color:#2563eb;background:#eff6ff}
.pn-next{margin-left:auto}
body.dark .pn-link{background:#1e293b;border-color:#475569;color:#60a5fa}
body.dark .pn-link:hover{border-color:#2563eb;background:#334155}
/* Header description */
.header-desc{font-size:0.9rem;opacity:0.9;margin-top:4px}
/* Sitemap list */
.sitemap-list{list-style:none;padding:0}
.sitemap-list li{padding:10px 0;border-bottom:1px solid #e2e8f0}
.sitemap-list li a{color:#2563eb;text-decoration:none;font-weight:500}
.sitemap-list li a:hover{text-decoration:underline}
body.dark .sitemap-list li{border-color:#475569}
/* Footer links grid */
.footer-links{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;margin:16px 0;padding:16px 0;border-top:1px solid #e2e8f0;border-bottom:1px solid #e2e8f0;text-align:left}
.footer-col{display:flex;flex-direction:column;gap:4px}
.footer-col strong{font-size:0.8rem;color:#333;margin-bottom:4px}
.footer-col a{font-size:0.78rem;color:#2563eb;text-decoration:none}
.footer-col a:hover{text-decoration:underline}
.footer-bottom{text-align:center;padding-top:12px}
.footer-bottom p{font-size:0.8rem;color:#64748b;margin:4px 0}
.footer-keywords{font-size:0.7rem;color:#94a3b8;letter-spacing:0.3px}
body.dark .footer-links{border-color:#334155}
body.dark .footer-col strong{color:#e2e8f0}
body.dark .footer-col a{color:#60a5fa}
@media(max-width:768px){.footer-links{grid-template-columns:1fr 1fr}}
/* Sidebar categories */
.nav-category{margin:4px 0}
.nav-cat-link{display:flex;align-items:center;padding:8px 16px;color:#e2e8f0;text-decoration:none;font-size:0.85rem;font-weight:600;border-left:3px solid transparent}
.nav-cat-link:hover,.nav-cat-link.active{background:#334155;border-left-color:#2563eb}
.nav-count{margin-left:auto;background:#334155;color:#94a3b8;font-size:0.65rem;padding:2px 6px;border-radius:10px;font-weight:400}
.nav-cat-link:hover .nav-count{background:#475569}
.nav-sub{padding-left:12px}
.nav-sub-link{font-size:0.8rem;padding:5px 16px;font-weight:400}
.sidebar-tagline{font-size:0.7rem;color:#94a3b8;margin-top:4px}
.sidebar-footer{padding:12px 16px;border-top:1px solid #334155;display:flex;gap:12px}
.sidebar-footer a{color:#94a3b8;text-decoration:none;font-size:0.75rem}
.sidebar-footer a:hover{color:#fff}
/* Homepage category sections */
.category-section{margin:24px 0}
.cat-heading{font-size:1.2rem;margin-bottom:12px}
.cat-heading a{color:#1e293b;text-decoration:none}
.cat-heading a:hover{color:#2563eb}
body.dark .cat-heading a{color:#e2e8f0}
body.dark .cat-heading a:hover{color:#60a5fa}
/* Top category links bar */
.top-links{display:flex;gap:8px;flex-wrap:wrap;padding:12px 24px;background:#fff;border-bottom:1px solid #e2e8f0}
.top-links a{padding:6px 12px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:6px;text-decoration:none;color:#333;font-size:0.8rem;font-weight:500;transition:all 0.2s}
.top-links a:hover{background:#eff6ff;border-color:#2563eb;color:#2563eb}
body.dark .top-links{background:#1e293b;border-color:#334155}
body.dark .top-links a{background:#334155;border-color:#475569;color:#e2e8f0}
body.dark .top-links a:hover{border-color:#2563eb;color:#60a5fa}
/* Tool internal links section */
.tool-internal-links{margin:24px 0}
.links-section{margin-bottom:20px}
.links-section h3{font-size:1rem;margin-bottom:10px;color:#1e293b}
.links-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px}
.links-grid a{display:flex;align-items:center;gap:10px;padding:10px 12px;background:#fff;border:1px solid #e2e8f0;border-radius:8px;text-decoration:none;color:#333;transition:all 0.2s}
.links-grid a:hover{border-color:#2563eb;background:#eff6ff;transform:translateX(2px)}
.links-grid .link-icon{font-size:1.3rem;flex-shrink:0}
.links-grid .link-text strong{display:block;font-size:0.85rem;color:#1e293b}
.links-grid .link-text small{font-size:0.72rem;color:#64748b}
.links-cta{font-size:0.85rem;color:#64748b;margin-top:12px}
.links-cta a{color:#2563eb;font-weight:500}
body.dark .links-section h3{color:#e2e8f0}
body.dark .links-grid a{background:#1e293b;border-color:#475569;color:#e2e8f0}
body.dark .links-grid a:hover{border-color:#2563eb;background:#334155}
body.dark .links-grid .link-text strong{color:#e2e8f0}
body.dark .links-grid .link-text small{color:#94a3b8}
/* Tool subtitle H2 */
.tool-subtitle{font-size:1rem;font-weight:500;color:#475569;margin:12px 0;line-height:1.4}
body.dark .tool-subtitle{color:#94a3b8}