:root{
    --bg: #ffffff;
    --fg: #111827;
    --muted: #6b7280;
    --primary: #0d6efd;
    --card: #ffffff;
    --border: #e5e7eb;
}
[data-theme="dark"]{
    --bg: #0b0f14;
    --fg: #e5e7eb;
    --muted: #9ca3af;
    --primary: #4ea1ff;
    --card: #0f1720;
    --border: #1f2937;
}
html,body{height:100%}
body{
    font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    background: var(--bg);
    color: var(--fg);
}
.hero{
    background: radial-gradient(1000px 500px at 50% -50%, rgba(13,110,253,.15), transparent 60%),
                linear-gradient(180deg,rgba(13,110,253,.06),transparent);
}
.tool-search{
    max-width: 720px;
    margin: 0 auto;
}
.tool-card{
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.tool-card:hover{
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0,0,0,.08);
    border-color: rgba(13,110,253,.3);
}
.badge-soft{
    background: rgba(13,110,253,.12);
    color: var(--primary);
}
.category-title{
    position: sticky;
    top: 64px;
    background: var(--bg);
    z-index: 1;
    padding: .25rem 0;
}
.input-mini{
    max-width: 220px;
}
.form-text-muted{color: var(--muted)}

/* Accessibility focus */
:focus-visible{
    outline: 3px solid rgba(13,110,253,.45);
    outline-offset: 2px;
    border-radius: 6px;
}

/* Modal body spacing for tools */
.tool-grid{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}