.category-pills {
    background: var(--card);
    border-bottom: 1px solid var(--line);
}

.category-pills-inner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.category-pills-inner::-webkit-scrollbar {
    display: none;
}

.category-pill {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--paper);
    color: var(--muted);
    font-size: 0.82rem;
    white-space: nowrap;
    text-decoration: none;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.category-pill:hover,
.category-pill:focus-visible {
    color: var(--brand-deep);
    border-color: color-mix(in srgb, var(--brand) 35%, var(--line));
    background: #fff;
}

.category-pill.is-current {
    color: #fff;
    background: var(--brand-deep);
    border-color: var(--brand-deep);
    font-weight: 600;
}

.category-section + .category-section {
    margin-top: 2.5rem;
}

.category-section-head {
    margin-bottom: 1rem;
}

.category-section-title {
    margin: 0 0 0.35rem;
    font-size: 1.2rem;
    font-weight: 700;
}

.category-section-title a {
    color: var(--ink);
    text-decoration: none;
}

.category-section-title a:hover,
.category-section-title a:focus-visible {
    color: var(--brand-deep);
}

.category-section-desc {
    margin: 0;
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.6;
}

.pagination-container {
    margin-top: 2rem;
}

.pagination-container .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    margin: 0 0.15rem;
    padding: 0 0.65rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    text-decoration: none;
    background: var(--card);
}

.pagination-container .page-numbers.current,
.pagination-container .page-numbers:hover {
    color: #fff;
    background: var(--brand-deep);
    border-color: var(--brand-deep);
}

.search-form-inline {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: auto;
}

.search-form-inline .form-control {
    min-width: 10rem;
    max-width: 14rem;
    border-radius: 999px;
    border-color: rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.search-form-inline .form-control::placeholder {
    color: rgba(255, 255, 255, 0.72);
}

.search-form-inline .btn {
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border-radius: 50%;
    border-color: rgba(255, 255, 255, 0.55);
    color: #fff;
}

.search-form-inline .btn:hover {
    background: #fff;
    color: var(--brand-deep);
    border-color: #fff;
}

.search-form-inline .btn:hover {
    background: #fff;
    color: var(--brand-deep);
    border-color: #fff;
}

.brand-logo-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.14);
    font-size: 1.2rem;
}

.portal-tool-cards,
body.letools-portal-page {
    --brand: #4f8a3a;
    --brand-deep: #3a6b2b;
    --ink: #1c2418;
    --muted: #5c6756;
    --line: #dce4d6;
    --paper: #f3f6f0;
    --card: #ffffff;
    --create: #2f7d4a;
    --idphoto: #2b6cb0;
    --image: #c05621;
    --office: #6b46c1;
    --tap: 2.75rem;
}

.portal-tool-cards .tool-card,
body.letools-portal-page .tool-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    column-gap: 0.9rem;
    row-gap: 0.45rem;
    height: 100%;
    min-height: 100%;
    padding: 1.2rem 1.15rem 1.1rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 1rem;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 8px 24px rgba(28, 36, 24, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.portal-tool-cards .tool-card-icon,
body.letools-portal-page .tool-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    flex-shrink: 0;
    border-radius: 0.85rem;
    font-size: 1.25rem;
}

.portal-tool-cards .tool-card-body,
body.letools-portal-page .tool-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

.portal-tool-cards .tool-card-name,
body.letools-portal-page .tool-card-name {
    font-size: 1.05rem;
    font-weight: 700;
}

.portal-tool-cards .tool-card-desc,
body.letools-portal-page .tool-card-desc {
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.6;
}

.portal-tool-cards .tool-card-go,
body.letools-portal-page .tool-card-go {
    display: inline-flex;
    align-items: center;
    align-self: center;
    gap: 0.28rem;
    min-height: var(--tap);
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0.72;
}

.portal-tool-cards .accent-a .tool-card-icon,
body.letools-portal-page .accent-a .tool-card-icon { color: var(--create); background: color-mix(in srgb, var(--create) 12%, #fff); }
.portal-tool-cards .accent-a .tool-card-go,
body.letools-portal-page .accent-a .tool-card-go { color: var(--create); }
.portal-tool-cards .accent-b .tool-card-icon,
body.letools-portal-page .accent-b .tool-card-icon { color: var(--idphoto); background: color-mix(in srgb, var(--idphoto) 12%, #fff); }
.portal-tool-cards .accent-b .tool-card-go,
body.letools-portal-page .accent-b .tool-card-go { color: var(--idphoto); }
.portal-tool-cards .accent-c .tool-card-icon,
body.letools-portal-page .accent-c .tool-card-icon { color: var(--image); background: color-mix(in srgb, var(--image) 12%, #fff); }
.portal-tool-cards .accent-c .tool-card-go,
body.letools-portal-page .accent-c .tool-card-go { color: var(--image); }
.portal-tool-cards .accent-d .tool-card-icon,
body.letools-portal-page .accent-d .tool-card-icon { color: var(--office); background: color-mix(in srgb, var(--office) 12%, #fff); }
.portal-tool-cards .accent-d .tool-card-go,
body.letools-portal-page .accent-d .tool-card-go { color: var(--office); }

@media (hover: hover) and (pointer: fine) {
    .portal-tool-cards .tool-card:hover,
    body.letools-portal-page .tool-card:hover {
        color: inherit;
        transform: translateY(-3px);
        box-shadow: 0 14px 32px rgba(28, 36, 24, 0.1);
    }
}

@media (max-width: 767.98px) {
    .search-form-inline {
        display: none;
    }

    .portal-tool-cards .tool-card-go-text,
    body.letools-portal-page .tool-card-go-text {
        display: none;
    }
}