:root {
    --bs-primary: #087f72;
    --bs-primary-rgb: 8, 127, 114;
}

body {
    background: #f3f5f7;
    color: #243042;
}

.brand {
    color: #243042;
    font-weight: 750;
    letter-spacing: -.4px;
}

.brand-icon {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    background: #087f72;
    color: white;
    border-radius: 8px;
    margin-right: 8px;
    font-size: 23px;
    line-height: 1;
    vertical-align: middle;
}

.eyebrow {
    color: #087f72;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .13em;
}

h1 {
    letter-spacing: -.04em;
}

.catalog-total {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    background: #e5efed;
    border-radius: 12px;
}

.catalog-total strong {
    font-size: 1.4rem;
    color: #087f72;
}

.catalog-total span {
    font-size: .8rem;
    color: #59696b;
}

.card {
    border-radius: 14px;
}

.form-label {
    font-size: .85rem;
    font-weight: 600;
}

.form-control, .form-select {
    border-color: #dce2e7;
}

.form-control:focus, .form-select:focus {
    border-color: #087f72;
    box-shadow: 0 0 0 .2rem #087f721c;
}

.btn-link {
    color: #087f72;
    text-decoration: none;
}

.btn-outline-primary {
    --bs-btn-color: #087f72;
    --bs-btn-border-color: #087f72;
    --bs-btn-hover-bg: #087f72;
    --bs-btn-hover-border-color: #087f72;
    --bs-btn-active-bg: #087f72;
    --bs-btn-active-border-color: #087f72;
}

.catalog-table {
    font-size: .85rem;
    white-space: nowrap;
}

.catalog-table th {
    background: #f8fafb;
    padding: 13px 14px;
}

.catalog-table td {
    padding: 15px 14px;
    border-color: #edf0f3;
    font-variant-numeric: tabular-nums;
}

.catalog-table th:first-child, .catalog-table td:first-child {
    padding-left: 24px;
    color: #7a8795;
}

.sort-button {
    background: none;
    border: 0;
    color: #627083;
    font: inherit;
    font-weight: 600;
    padding: 0;
}

.sort-button span {
    margin-left: 3px;
    color: #adb6c0;
}

th[aria-sort]:not([aria-sort="none"]) .sort-button, th[aria-sort]:not([aria-sort="none"]) span {
    color: #087f72;
}

.cpu-name {
    font-weight: 650;
    white-space: normal;
    min-width: 180px;
}

a.cpu-name {
    color: #087f72;
    text-decoration: underline;
    text-underline-offset: 3px;
}

a.cpu-name:hover, a.cpu-name:focus-visible {
    color: #087f72;
    text-decoration: underline;
}

.source-arrow {
    color: #087f72;
    font-size: .8rem;
}

.cpu-meta {
    font-size: .72rem;
    color: #81909f;
    margin-top: 3px;
    white-space: normal;
}

.score {
    color: #087f72;
    font-weight: 650;
}

@media (min-width: 992px) {
    .filter-card {
        position: sticky;
        top: 20px;
    }
}