.iqsb-search-panel {
    margin-top: 14px;
    border: 1px solid #d8e4eb;
    border-radius: 14px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 12px 34px rgba(15, 23, 42, .07);
    padding: 16px;
}

.iqsb-filter-form {
    display: grid;
    gap: 14px;
}

.iqsb-search-field,
.iqsb-filter {
    display: grid;
    min-width: 0;
    gap: 7px;
}

.iqsb-search-field > span:first-child,
.iqsb-filter > span {
    color: #64748b;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.iqsb-search-control {
    position: relative;
    display: block;
}

.iqsb-search-control > svg {
    position: absolute;
    top: 50%;
    left: 14px;
    z-index: 1;
    width: 19px;
    height: 19px;
    color: #0f766e;
    transform: translateY(-50%);
    pointer-events: none;
}

.iqsb-search-control .iqlab-input {
    min-height: 50px;
    border-radius: 12px;
    padding-left: 44px;
    font-size: 15px;
    font-weight: 720;
}

.iqsb-filter-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(120px, 1fr));
    gap: 10px;
}

.iqsb-filter .iqlab-select {
    min-height: 40px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 780;
}

.iqsb-filter-footer {
    display: flex;
    min-height: 30px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.iqsb-active-filters,
.iqsb-filter-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}

.iqsb-filter-chip {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    gap: 6px;
    border: 1px solid #99e5d0;
    border-radius: 999px;
    background: #ecfdf7;
    color: #075f56;
    cursor: pointer;
    font: inherit;
    font-size: 11px;
    font-weight: 850;
    padding: 4px 9px;
}

.iqsb-filter-chip:hover,
.iqsb-filter-chip:focus-visible {
    border-color: #10b981;
    background: #d9faed;
    outline: none;
}

.iqsb-filter-chip svg,
.iqsb-clear-filters svg {
    width: 14px;
    height: 14px;
}

.iqsb-filter-feedback {
    color: #64748b;
    font-size: 12px;
    font-weight: 780;
}

.iqsb-clear-filters {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    gap: 6px;
    border-radius: 8px;
    color: #0f766e;
    font-size: 12px;
    font-weight: 900;
    padding: 5px 7px;
    text-decoration: none;
}

.iqsb-clear-filters:hover,
.iqsb-clear-filters:focus-visible {
    background: #e7f7f3;
    outline: none;
}

[data-iqsb-result-list].iqlab-solutions-table-card {
    position: relative;
    overflow: visible !important;
}

.iqlab-solutions-table-card[data-iqsb-loading="1"]::after {
    position: absolute;
    inset: 0;
    z-index: 60;
    border-radius: inherit;
    background: rgba(247, 250, 252, .72);
    content: "";
    backdrop-filter: blur(2px);
}

.iqlab-solutions-table-card[data-iqsb-loading="1"]::before {
    position: absolute;
    top: 28px;
    left: 50%;
    z-index: 61;
    width: 25px;
    height: 25px;
    border: 3px solid rgba(15, 118, 110, .2);
    border-top-color: #0f766e;
    border-radius: 50%;
    content: "";
    animation: iqsb-spin .7s linear infinite;
}

@keyframes iqsb-spin {
    to { transform: rotate(360deg); }
}

.iqsb-solutions-table {
    table-layout: fixed;
}

.iqsb-solutions-table .iqsb-col-solution { width: 21%; }
.iqsb-solutions-table .iqsb-col-compatibility { width: 18%; }
.iqsb-solutions-table .iqsb-col-ecu { width: 19%; }
.iqsb-solutions-table .iqsb-col-functions { width: 17%; }
.iqsb-solutions-table .iqsb-col-access { width: 10%; }
.iqsb-solutions-table .iqsb-col-state { width: 8%; }
.iqsb-solutions-table .iqsb-col-rating { width: 76px; }
.iqsb-solutions-table .iqsb-col-open { width: 54px; }

.iqsb-solutions-table th,
.iqsb-solutions-table td {
    overflow: visible;
    padding: 15px 11px;
}

.iqsb-solutions-table th {
    font-size: 11.5px;
}

.iqsb-solutions-table tbody tr {
    position: relative;
    transition: background-color .18s ease, box-shadow .18s ease;
}

.iqsb-solutions-table tbody tr:nth-child(even) {
    background: #fbfdff;
}

.iqsb-solutions-table tbody td:first-child {
    border-left: 3px solid transparent;
}

.iqsb-solutions-table tbody tr:hover {
    z-index: 5;
    background: #f0fbf8;
    box-shadow: 0 8px 22px rgba(15, 118, 110, .08);
}

.iqsb-solutions-table tbody tr:hover td:first-child {
    border-left-color: #10b981;
}

.iqsb-solution-cell .iqlab-solution-type-icon,
.iqsb-ecu-cell .iqlab-solution-type-icon {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
}

.iqsb-solution-cell .iqlab-solution-title {
    font-size: 14.5px;
}

.iqsb-solution-cell .iqlab-solution-code {
    max-width: 100%;
    overflow: hidden;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.iqsb-compatibility {
    position: relative;
    min-width: 0;
}

.iqsb-compatibility-trigger {
    display: grid;
    width: 100%;
    min-width: 0;
    gap: 2px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font: inherit;
    padding: 7px 8px;
    text-align: left;
}

.iqsb-compatibility-trigger:hover,
.iqsb-compatibility-trigger:focus-visible,
.iqsb-compatibility.is-open .iqsb-compatibility-trigger {
    background: #e6f8f3;
    outline: none;
}

.iqsb-compatibility-identity,
.iqsb-mobile-brand {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
}

.iqsb-compatibility-copy,
.iqsb-mobile-brand > div {
    display: grid;
    min-width: 0;
    gap: 1px;
}

.iqsb-brand-mark {
    display: inline-grid;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    place-items: center;
    overflow: hidden;
    border: 1px solid #dce7ec;
    border-radius: 50%;
    background: linear-gradient(145deg, #fff, #eef5f7);
    color: #0f766e;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .08);
    font-size: 10px;
    font-weight: 950;
    letter-spacing: -.02em;
}

.iqsb-brand-mark--image {
    padding: 4px;
}

.iqsb-brand-mark img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.iqsb-brand-summary,
.iqsb-model-summary {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.iqsb-brand-summary {
    color: #0f172a;
    font-size: 13.5px;
    font-weight: 920;
}

.iqsb-model-summary {
    color: #64748b;
    font-size: 12px;
    font-weight: 720;
}

.iqsb-compatibility-more {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-top: 3px;
    color: #0f766e;
    font-size: 11px;
    font-weight: 900;
}

.iqsb-compatibility-more svg {
    width: 14px;
    height: 14px;
    transition: transform .18s ease;
}

.iqsb-compatibility.is-open .iqsb-compatibility-more svg {
    transform: rotate(180deg);
}

.iqsb-compatibility-popover {
    position: fixed;
    top: var(--iqsb-popover-top, -9999px);
    left: var(--iqsb-popover-left, -9999px);
    z-index: 1000;
    display: grid;
    width: min(430px, calc(100vw - 40px));
    max-height: 410px;
    overflow: hidden;
    border: 1px solid #cfe0e8;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .2);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px) scale(.985);
    transform-origin: top left;
    transition: opacity .16s ease, transform .16s ease;
}

.iqsb-compatibility.is-above .iqsb-compatibility-popover {
    transform-origin: bottom left;
}

@media (hover: hover) and (pointer: fine) {
    .iqsb-compatibility.is-hovered .iqsb-compatibility-popover,
    .iqsb-compatibility:focus-within .iqsb-compatibility-popover,
    .iqsb-compatibility.is-open .iqsb-compatibility-popover {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0) scale(1);
    }
}

.iqsb-compatibility.is-open .iqsb-compatibility-popover {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.iqsb-popover-head,
.iqsb-popover-detail {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
}

.iqsb-popover-head {
    border-bottom: 1px solid #e2e8f0;
    color: #0f172a;
    font-size: 13px;
}

.iqsb-popover-head button {
    display: inline-grid;
    width: 29px;
    height: 29px;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: #f1f5f9;
    color: #475569;
    cursor: pointer;
}

.iqsb-popover-head button svg,
.iqsb-popover-detail svg {
    width: 15px;
    height: 15px;
}

.iqsb-popover-scroll {
    display: grid;
    max-height: 292px;
    overflow: auto;
    gap: 12px;
    overscroll-behavior: contain;
    padding: 12px 14px;
}

.iqsb-popover-scroll section {
    display: grid;
    gap: 4px;
}

.iqsb-popover-scroll h4 {
    margin: 0 0 2px;
    color: #0f766e;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.iqsb-compatible-vehicle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-radius: 8px;
    background: #f8fafc;
    padding: 8px 9px;
}

.iqsb-compatible-vehicle > div {
    min-width: 0;
}

.iqsb-compatible-vehicle strong,
.iqsb-compatible-vehicle small {
    display: block;
}

.iqsb-compatible-vehicle strong {
    color: #172033;
    font-size: 12px;
}

.iqsb-compatible-vehicle small {
    margin-top: 2px;
    color: #64748b;
    font-size: 10px;
}

.iqsb-compat-status {
    flex: 0 0 auto;
    border-radius: 999px;
    background: #eef2f6;
    color: #475569;
    font-size: 9px;
    font-weight: 900;
    padding: 4px 6px;
}

.iqsb-compat-status--confirmed { background: #dcfce7; color: #166534; }
.iqsb-compat-status--family,
.iqsb-compat-status--family_compatible { background: #dbeafe; color: #1d4ed8; }
.iqsb-compat-status--research { background: #fef3c7; color: #92400e; }
.iqsb-compat-status--excluded { background: #fee2e2; color: #991b1b; }

.iqsb-popover-detail {
    border-top: 1px solid #e2e8f0;
    color: #0f766e;
    font-size: 11px;
    font-weight: 900;
    text-decoration: none;
}

.iqsb-popover-detail:hover {
    background: #ecfdf7;
}

.iqsb-ecu-cell {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
}

.iqsb-ecu-cell > div {
    min-width: 0;
}

.iqsb-ecu-cell strong,
.iqsb-ecu-cell small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.iqsb-ecu-cell strong {
    color: #0f172a;
    font-size: 13px;
    font-weight: 900;
}

.iqsb-ecu-cell small {
    margin-top: 3px;
    color: #64748b;
    font-size: 11px;
    font-weight: 720;
}

.iqsb-function-list,
.iqsb-access-list {
    display: flex;
    min-width: 0;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}

.iqsb-function-list span,
.iqsb-function-list b {
    display: inline-flex;
    min-height: 27px;
    align-items: center;
    border-radius: 999px;
    background: #e0edff;
    color: #1d4ed8;
    font-size: 11px;
    font-weight: 900;
    padding: 4px 7px;
}

.iqsb-function-list b {
    background: #eef2f6;
    color: #475569;
}

.iqsb-access-badge {
    display: inline-flex;
    min-height: 29px;
    align-items: center;
    gap: 4px;
    border: 1px solid #b7e4d6;
    border-radius: 999px;
    background: #e9fbf5;
    color: #087262;
    font-size: 10.5px;
    font-weight: 950;
    padding: 4px 6px;
    white-space: nowrap;
}

.iqsb-access-badge svg {
    width: 16px;
    height: 16px;
}

.iqsb-solutions-table .iqlab-pill,
.iqsb-solutions-table .iqlab-solution-rating {
    min-height: 29px;
    font-size: 10.5px;
}

.iqsb-solutions-table .iqlab-icon-btn svg {
    width: 19px;
    height: 19px;
}

.iqsb-access-badge--pilot { border-color: #f4d58a; background: #fff8df; color: #8a5a00; }
.iqsb-access-badge--development { border-color: #d8c8fb; background: #f3efff; color: #6d28d9; }

.iqsb-mobile-list {
    display: none;
}

.iqsb-empty {
    display: grid;
    min-height: 250px;
    place-items: center;
    align-content: center;
    gap: 8px;
    text-align: center;
}

.iqsb-empty h2,
.iqsb-empty p { margin: 0; }
.iqsb-empty p { color: #64748b; }
.iqsb-empty-icon {
    display: grid;
    width: 50px;
    height: 50px;
    place-items: center;
    border-radius: 50%;
    background: #e8f8f4;
    color: #0f766e;
}

@media (max-width: 1280px) {
    .iqsb-filter-grid { grid-template-columns: repeat(3, minmax(140px, 1fr)); }
    .iqsb-solutions-table .iqsb-col-solution { width: 20%; }
    .iqsb-solutions-table .iqsb-col-compatibility { width: 18%; }
    .iqsb-solutions-table .iqsb-col-ecu { width: 18%; }
    .iqsb-solutions-table .iqsb-col-functions { width: 17%; }
}

@media (max-width: 920px) {
    .iqlab-bank-hero { min-height: auto; padding: 20px; }
    .iqsb-search-panel { padding: 12px; }
    .iqsb-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .iqsb-filter-footer { align-items: flex-start; flex-direction: column; }
    .iqsb-filter-actions { width: 100%; justify-content: space-between; }
    .iqsb-solutions-table { display: none; }
    .iqlab-solutions-table-card { border: 0; background: transparent; box-shadow: none; }
    .iqsb-mobile-list { display: grid; gap: 10px; }
    .iqsb-mobile-card {
        display: grid;
        min-width: 0;
        gap: 11px;
        border: 1px solid #d8e4eb;
        border-radius: 13px;
        background: #fff;
        box-shadow: 0 10px 28px rgba(15, 23, 42, .07);
        padding: 12px;
    }
    .iqsb-mobile-card header,
    .iqsb-mobile-card footer {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 9px;
    }
    .iqsb-mobile-title {
        display: flex;
        min-width: 0;
        align-items: flex-start;
        gap: 8px;
    }
    .iqsb-mobile-title .iqlab-solution-type-icon { width: 34px; height: 34px; flex: 0 0 34px; }
    .iqsb-mobile-title > div { min-width: 0; }
    .iqsb-mobile-title h2 { margin: 0; color: #0f172a; font-size: 14px; line-height: 1.25; overflow-wrap: anywhere; }
    .iqsb-mobile-title small { display: block; margin-top: 3px; color: #0f766e; font-size: 10px; font-weight: 850; overflow-wrap: anywhere; }
    .iqsb-mobile-section { display: grid; min-width: 0; gap: 2px; border-top: 1px solid #e8eef2; padding-top: 8px; }
    .iqsb-mobile-section > span { color: #64748b; font-size: 9px; font-weight: 950; letter-spacing: .05em; text-transform: uppercase; }
    .iqsb-mobile-section strong { color: #0f172a; font-size: 12px; }
    .iqsb-mobile-section small { overflow: hidden; color: #64748b; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
    .iqsb-mobile-brand { margin-top: 3px; }
    .iqsb-mobile-brand .iqsb-brand-mark { width: 34px; height: 34px; flex-basis: 34px; }
    .iqsb-mobile-card footer { align-items: center; border-top: 1px solid #e8eef2; padding-top: 9px; }
}

@media (max-width: 560px) {
    .iqlab-bank-hero { display: grid; gap: 12px; border-radius: 12px; padding: 16px 14px; }
    .iqlab-bank-hero h1 { font-size: 25px; }
    .iqsb-filter-grid { grid-template-columns: 1fr; }
    .iqsb-filter-feedback { width: 100%; }
    .iqsb-compatibility-popover {
        position: fixed;
        top: 50%;
        right: 12px;
        bottom: auto;
        left: 12px;
        width: auto;
        max-height: min(72vh, 520px);
        transform: translateY(-48%) scale(.985);
        transform-origin: center;
    }
    .iqsb-compatibility.is-open .iqsb-compatibility-popover,
    .iqsb-compatibility.is-above .iqsb-compatibility-popover {
        top: 50%;
        right: 12px;
        bottom: auto;
        left: 12px;
        transform: translateY(-50%) scale(1);
        transform-origin: center;
    }
    .iqsb-popover-scroll { max-height: 48vh; }
}

@media (prefers-reduced-motion: reduce) {
    .iqsb-compatibility-popover,
    .iqsb-compatibility-more svg,
    .iqsb-solutions-table tbody tr { transition: none; }
}
