* { box-sizing: border-box; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    margin: 0;
    background: #f6f7f9;
    color: #1c1f23;
}
header {
    background: #1f2937;
    color: #fff;
    padding: 1.4rem 1.5rem 1.6rem;
}
header h1 { margin: 0 0 .25rem; font-size: 1.5rem; }
header p { margin: 0; color: #cbd5e1; font-size: .95rem; }

main { max-width: 1100px; margin: 1.5rem auto; padding: 0 1rem; }

.tool-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}
.tool-card {
    display: block;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 1.1rem 1.2rem;
    text-decoration: none;
    color: inherit;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.tool-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(15, 23, 42, .08);
    border-color: #2563eb;
}
.tool-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.tool-card h2 { margin: 0; font-size: 1.1rem; color: #1f2937; }
.tag {
    background: #ecfdf5; color: #047857;
    font-size: .7rem; font-weight: 600;
    padding: 2px 8px; border-radius: 999px;
    text-transform: uppercase; letter-spacing: .03em;
}
.tool-card p { margin: .55rem 0 .85rem; color: #4b5563; font-size: .92rem; line-height: 1.45; }
.open { color: #2563eb; font-size: .9rem; font-weight: 600; }