*{box-sizing:border-box;margin:0;padding:0}body{font-family:Inter,system-ui,sans-serif;background:#f8fafc;color:#0f172a;line-height:1.6}
.container{max-width:1100px;margin:0 auto;padding:0 16px}
.header{background:#0f172a;color:#fff;padding:16px 0;position:sticky;top:0;z-index:10}
.header .container{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.logo{font-weight:800;font-size:1.4rem;color:#fff;text-decoration:none} .logo span{color:#38bdf8} .logo small{background:#38bdf8;color:#0f172a;padding:2px 6px;border-radius:99px;font-size:.7rem;margin-left:6px}
.search{display:flex;gap:0} .search input{padding:10px 14px;border:0;border-radius:8px 0 0 8px;width:280px} .search button{padding:10px 16px;border:0;background:#38bdf8;color:#0f172a;font-weight:700;border-radius:0 8px 8px 0;cursor:pointer}
.cat-nav{background:#fff;border-bottom:1px solid #e2e8f0;padding:8px 0;overflow:auto}
.cat-nav .container{display:flex;gap:8px}
.cat-nav a{background:#f1f5f9;padding:6px 12px;border-radius:99px;text-decoration:none;color:#334155;font-size:.85rem;white-space:nowrap}
.cat-nav a span{background:#0f172a;color:#fff;padding:1px 6px;border-radius:99px;font-size:.7rem}
.hero{text-align:center;padding:40px 0}
.hero h1{font-size:2.6rem} .hero p{color:#64748b;margin:8px 0 16px}
.stats{display:flex;gap:24px;justify-content:center;color:#334155}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin:16px 0 32px}
.card{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:16px;text-decoration:none;color:inherit;transition:.15s}
.card:hover{border-color:#38bdf8;transform:translateY(-2px)}
.card .icon{font-size:1.6rem} .card h3{font-size:1rem;margin:6px 0} .card p{font-size:.85rem;color:#64748b}
.cat-card{text-align:center}
.tool-box{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:20px;margin-top:16px}
.tool-box textarea,.tool-box input, .tool-box select{width:100%;padding:10px;border:1px solid #cbd5e1;border-radius:8px;margin:8px 0}
.tool-box button{padding:10px 16px;background:#0f172a;color:#fff;border:0;border-radius:8px;cursor:pointer;margin-right:8px}
.tool-box button.secondary{background:#e2e8f0;color:#0f172a}
.breadcrumb{font-size:.85rem;color:#64748b;margin:16px 0 8px}
.muted{color:#64748b}
.hint{background:#fffbeb;border:1px dashed #facc15;padding:12px;border-radius:8px;margin:24px 0;font-size:.85rem}
.footer{text-align:center;padding:32px 0;color:#94a3b8;font-size:.85rem;border-top:1px solid #e2e8f0;margin-top:32px}