.tools-hub {
    --hub-border: #e8edf3;
    --hub-muted: #64748b;
    --hub-panel: #fff;
    color: #172033;
}
.tools-hub-hero {
    align-items: stretch;
    background:
        radial-gradient(circle at 82% 18%, rgba(255,255,255,.7) 0 9%, transparent 10%),
        radial-gradient(circle at 92% 76%, rgba(255,255,255,.48) 0 12%, transparent 13%),
        linear-gradient(125deg, #eaf7ff 0%, #f1f7ff 42%, #fff5de 100%);
    border: 1px solid #dceaf3;
    border-radius: 14px;
    display: grid;
    gap: 28px;
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 270px;
    overflow: hidden;
    padding: 38px 42px;
    position: relative;
}
.tools-hub-hero::after {
    background: linear-gradient(135deg, rgba(59,130,246,.15), rgba(16,185,129,.12));
    border: 1px solid rgba(255,255,255,.65);
    border-radius: 44px;
    content: '';
    height: 190px;
    position: absolute;
    right: -66px;
    top: -72px;
    transform: rotate(18deg);
    width: 190px;
}
.tools-hub-hero-copy { max-width: 720px; position: relative; z-index: 1; }
.tools-hub-eyebrow {
    align-items: center;
    color: #2563eb;
    display: inline-flex;
    font-size: 12px;
    font-weight: 700;
    gap: 7px;
    letter-spacing: .09em;
}
.tools-hub-eyebrow > span { font-size: 18px; }
.tools-hub-hero h1 {
    color: #12213a;
    font-size: clamp(34px, 4vw, 48px);
    font-weight: 750;
    letter-spacing: -.04em;
    line-height: 1.12;
    margin: 12px 0 0;
}
.tools-hub-hero-copy > p {
    color: #52627a;
    font-size: 15px;
    line-height: 1.85;
    margin: 14px 0 0;
    max-width: 650px;
}
.tools-hub-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.tools-hub-hero-actions a {
    align-items: center;
    background: #2563eb;
    border: 1px solid #2563eb;
    border-radius: 8px;
    color: #fff;
    display: inline-flex;
    font-size: 13px;
    font-weight: 650;
    gap: 7px;
    height: 40px;
    padding: 0 16px;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.tools-hub-hero-actions a:hover { box-shadow: 0 8px 20px rgba(37,99,235,.2); transform: translateY(-1px); }
.tools-hub-hero-actions a.is-secondary { background: rgba(255,255,255,.7); border-color: #d8e1eb; color: #334155; }
.tools-hub-summary {
    align-self: center;
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(255,255,255,.9);
    border-radius: 12px;
    box-shadow: 0 18px 50px rgba(48,74,105,.09);
    display: grid;
    min-width: 300px;
    padding: 10px;
    position: relative;
    z-index: 1;
}
.tools-hub-summary div {
    align-items: center;
    border-bottom: 1px solid #e8eef5;
    display: flex;
    gap: 13px;
    padding: 12px 14px;
}
.tools-hub-summary div:last-child { border-bottom: 0; }
.tools-hub-summary strong { color: #2563eb; font-size: 23px; line-height: 1; min-width: 40px; }
.tools-hub-summary span { color: #607087; font-size: 13px; }
.tools-hub-featured,
.tools-hub-catalog {
    background: var(--hub-panel);
    border: 1px solid var(--hub-border);
    border-radius: 12px;
    margin-top: 16px;
    padding: 22px;
}
.tools-hub-section-heading { align-items: end; display: flex; justify-content: space-between; }
.tools-hub-section-heading > div > span { color: #94a3b8; display: block; font-size: 10px; font-weight: 700; letter-spacing: .12em; }
.tools-hub-section-heading h2 { color: #172033; font-size: 20px; font-weight: 700; margin-top: 3px; }
.tools-hub-section-heading > p { color: var(--hub-muted); font-size: 12px; }
.tools-hub-featured-grid { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 16px; }
.tools-hub-featured-card {
    --tool-accent: #3b82f6;
    --tool-soft: #eff6ff;
    align-items: center;
    background: linear-gradient(145deg, #fff 0%, var(--tool-soft) 145%);
    border: 1px solid var(--hub-border);
    border-radius: 10px;
    display: grid;
    gap: 12px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    min-height: 118px;
    overflow: hidden;
    padding: 17px;
    position: relative;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.tools-hub-featured-card:hover { border-color: color-mix(in srgb, var(--tool-accent) 42%, #fff); box-shadow: 0 12px 30px rgba(15,23,42,.08); transform: translateY(-2px); }
.tools-hub-featured-number { color: color-mix(in srgb, var(--tool-accent) 16%, #fff); font-size: 54px; font-weight: 800; line-height: 1; position: absolute; right: 36px; top: -8px; }
.tools-hub-tool-icon {
    align-items: center;
    background: var(--tool-soft);
    border-radius: 9px;
    color: var(--tool-accent);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 25px;
    height: 48px;
    justify-content: center;
    position: relative;
    width: 48px;
}
.tools-hub-featured-copy,
.tools-hub-card-copy { min-width: 0; position: relative; }
.tools-hub-card-title { align-items: center; display: flex; gap: 7px; }
.tools-hub-card-title strong { color: #1e293b; font-size: 15px; font-weight: 680; }
.tools-hub-card-title em { background: var(--tool-accent); border-radius: 999px; color: #fff; font-size: 9px; font-style: normal; font-weight: 700; line-height: 17px; padding: 0 6px; }
.tools-hub-featured-copy small,
.tools-hub-card-copy small { color: var(--hub-muted); display: block; font-size: 12px; line-height: 1.65; margin-top: 5px; }
.tools-hub-open { color: #94a3b8; font-size: 18px; position: relative; transition: color .18s ease, transform .18s ease; }
.tools-hub-featured-card:hover .tools-hub-open,
.tools-hub-card:hover .tools-hub-open { color: var(--tool-accent); transform: translateX(2px); }
.tools-hub-catalog { padding-bottom: 24px; }
.tools-hub-catalog-head { align-items: center; display: flex; gap: 20px; justify-content: space-between; }
.tools-hub-search {
    align-items: center;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    color: #94a3b8;
    display: flex;
    height: 40px;
    max-width: 330px;
    padding: 0 11px;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
    width: 100%;
}
.tools-hub-search:focus-within { background: #fff; border-color: #93c5fd; box-shadow: 0 0 0 3px rgba(59,130,246,.09); }
.tools-hub-search > span { flex: 0 0 auto; font-size: 18px; }
.tools-hub-search input { background: transparent !important; border: 0 !important; box-shadow: none !important; color: #334155; font-size: 13px; height: 100%; min-width: 0; outline: 0 !important; padding: 0 9px; width: 100%; }
.tools-hub-search input::-webkit-search-cancel-button { display: none; }
.tools-hub-search button { align-items: center; color: #94a3b8; display: none; font-size: 16px; justify-content: center; }
.tools-hub-search.has-value button { display: inline-flex; }
.tools-hub-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.tools-hub-filters button {
    align-items: center;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    color: #64748b;
    display: inline-flex;
    font-size: 12px;
    font-weight: 600;
    gap: 6px;
    height: 34px;
    padding: 0 10px;
    transition: all .18s ease;
}
.tools-hub-filters button:hover { border-color: #bfdbfe; color: #2563eb; }
.tools-hub-filters button.is-active { background: #eff6ff; border-color: #93c5fd; color: #2563eb; }
.tools-hub-filters button > span { font-size: 15px; }
.tools-hub-filters button em { background: #f1f5f9; border-radius: 999px; color: #94a3b8; font-size: 10px; font-style: normal; line-height: 18px; min-width: 18px; padding: 0 5px; text-align: center; }
.tools-hub-filters button.is-active em { background: #dbeafe; color: #2563eb; }
.tools-hub-grid { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 16px; }
.tools-hub-card {
    --tool-accent: #3b82f6;
    --tool-soft: #eff6ff;
    align-items: center;
    border: 1px solid var(--hub-border);
    border-radius: 9px;
    display: grid;
    gap: 12px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    min-height: 126px;
    padding: 15px;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.tools-hub-card:hover { background: linear-gradient(145deg, #fff, var(--tool-soft)); border-color: color-mix(in srgb, var(--tool-accent) 36%, #fff); box-shadow: 0 9px 24px rgba(15,23,42,.065); transform: translateY(-1px); }
.tools-hub-card[hidden] { display: none !important; }
.tools-hub-card .tools-hub-tool-icon { height: 44px; width: 44px; }
.tools-hub-category-name { color: var(--tool-accent); display: block; font-size: 10px; font-weight: 650; margin-top: 8px; }
.tools-hub-empty { align-items: center; color: var(--hub-muted); flex-direction: column; padding: 54px 20px 40px; text-align: center; }
.tools-hub-empty:not([hidden]) { display: flex; }
.tools-hub-empty > span { color: #94a3b8; font-size: 34px; }
.tools-hub-empty strong { color: #334155; font-size: 15px; margin-top: 10px; }
.tools-hub-empty p { font-size: 12px; margin-top: 5px; }
.tools-hub-empty button { background: #eff6ff; border-radius: 7px; color: #2563eb; font-size: 12px; font-weight: 650; margin-top: 14px; padding: 8px 12px; }
.tools-hub-footer-card {
    align-items: center;
    background: linear-gradient(135deg, #172554, #1e3a5f);
    border-radius: 12px;
    color: #fff;
    display: grid;
    gap: 14px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    margin-top: 16px;
    padding: 22px 26px;
}
.tools-hub-footer-card > span { color: #fde68a; font-size: 30px; }
.tools-hub-footer-card strong { font-size: 15px; }
.tools-hub-footer-card p { color: #bfdbfe; font-size: 12px; margin-top: 3px; }
.tools-hub-footer-card a { align-items: center; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); border-radius: 8px; display: inline-flex; font-size: 12px; font-weight: 650; gap: 6px; height: 36px; padding: 0 13px; }
.tools-hub [data-tone="violet"] { --tool-accent: #8b5cf6; --tool-soft: #f5f3ff; }
.tools-hub [data-tone="rose"] { --tool-accent: #f43f5e; --tool-soft: #fff1f2; }
.tools-hub [data-tone="pink"] { --tool-accent: #ec4899; --tool-soft: #fdf2f8; }
.tools-hub [data-tone="amber"] { --tool-accent: #d97706; --tool-soft: #fffbeb; }
.tools-hub [data-tone="orange"] { --tool-accent: #ea580c; --tool-soft: #fff7ed; }
.tools-hub [data-tone="emerald"] { --tool-accent: #059669; --tool-soft: #ecfdf5; }
.tools-hub [data-tone="cyan"] { --tool-accent: #0891b2; --tool-soft: #ecfeff; }
.tools-hub [data-tone="blue"] { --tool-accent: #2563eb; --tool-soft: #eff6ff; }

.dark .tools-hub { --hub-border: #2b2b2b; --hub-muted: #9ca3af; --hub-panel: #171717; color: #f1f5f9; }
.dark .tools-hub-hero { background: radial-gradient(circle at 86% 12%, rgba(14,165,233,.13), transparent 25%), linear-gradient(125deg, #171717, #18212a 55%, #1e2118); border-color: #30363d; }
.dark .tools-hub-hero-copy h1,
.dark .tools-hub-section-heading h2,
.dark .tools-hub-card-title strong { color: #f1f5f9; }
.dark .tools-hub-hero-copy > p { color: #a9b4c2; }
.dark .tools-hub-hero-actions a.is-secondary { background: rgba(255,255,255,.04); border-color: #3b4148; color: #e5e7eb; }
.dark .tools-hub-summary { background: rgba(23,23,23,.72); border-color: #343a40; box-shadow: 0 18px 50px rgba(0,0,0,.18); }
.dark .tools-hub-summary div { border-color: #30363d; }
.dark .tools-hub-featured-card { background: linear-gradient(145deg, #1b1b1b, color-mix(in srgb, var(--tool-soft) 8%, #171717)); }
.dark .tools-hub-featured-card:hover,
.dark .tools-hub-card:hover { background: linear-gradient(145deg, #1d1d1d, color-mix(in srgb, var(--tool-accent) 9%, #171717)); border-color: color-mix(in srgb, var(--tool-accent) 48%, #333); }
.dark .tools-hub-tool-icon { background: color-mix(in srgb, var(--tool-accent) 15%, #171717); }
.dark .tools-hub-search { background: #1c1c1c; border-color: #333; }
.dark .tools-hub-search:focus-within { background: #202020; border-color: #0ea5e9; }
.dark .tools-hub-search input { color: #e5e7eb; }
.dark .tools-hub-filters button { background: #1c1c1c; border-color: #333; color: #a3a3a3; }
.dark .tools-hub-filters button.is-active { background: rgba(14,165,233,.13); border-color: rgba(56,189,248,.45); color: #7dd3fc; }
.dark .tools-hub-filters button em { background: #292929; }
.dark .tools-hub-filters button.is-active em { background: rgba(14,165,233,.18); color: #7dd3fc; }
.dark .tools-hub-empty strong { color: #e5e7eb; }

@media (max-width: 1024px) {
    .tools-hub-hero { padding: 32px; }
    .tools-hub-summary { min-width: 240px; }
    .tools-hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .tools-hub-hero { grid-template-columns: minmax(0, 1fr); padding: 26px 22px; }
    .tools-hub-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); min-width: 0; }
    .tools-hub-summary div { border-bottom: 0; border-right: 1px solid #e8eef5; display: block; padding: 10px; text-align: center; }
    .tools-hub-summary div:last-child { border-right: 0; }
    .tools-hub-summary strong,
    .tools-hub-summary span { display: block; min-width: 0; }
    .tools-hub-summary span { margin-top: 5px; }
    .tools-hub-featured-grid { grid-template-columns: minmax(0, 1fr); }
    .tools-hub-catalog-head { align-items: stretch; flex-direction: column; }
    .tools-hub-search { max-width: none; }
    .tools-hub-grid { grid-template-columns: minmax(0, 1fr); }
    .dark .tools-hub-summary div { border-color: #30363d; }
}
@media (max-width: 480px) {
    .tools-hub-featured,
    .tools-hub-catalog { padding: 17px; }
    .tools-hub-hero h1 { font-size: 34px; }
    .tools-hub-footer-card { grid-template-columns: auto minmax(0, 1fr); padding: 19px; }
    .tools-hub-footer-card a { grid-column: 1 / -1; justify-content: center; }
}