.sb-related-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.sb-related-head .title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 700;
}
.sb-related-count {
    font-size: 10px;
    color: #8a9bb0;
    background: #f4f6fc;
    padding: 2px 8px;
    border-radius: 20px;
    font-weight: 600;
}
.sb-related-filters {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.sb-related-filter {
    font-size: 10.5px;
    padding: 3px 8px;
    border-radius: 30px;
    background: #f4f6fc;
    color: #5b6e8c;
    cursor: pointer;
    border: 1px solid transparent;
    font-weight: 600;
    transition: all .12s;
}
.sb-related-filter.active {
    background: #6c5ce7;
    color: #fff;
}
.sb-related-current {
    display: grid;
    grid-template-columns: 8px 1fr auto auto;
    gap: 8px;
    align-items: center;
    padding: 7px 10px;
    margin-bottom: 6px;
    background: linear-gradient(135deg, #e9e6ff 0%, #f0ebff 100%);
    border: 1px solid #6c5ce7;
    border-radius: 10px;
    font-size: 12px;
}
.sb-related-current .indicator {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #6c5ce7;
    box-shadow: 0 0 0 2px rgba(108, 92, 231, .22);
}
.sb-related-current .name {
    font-weight: 700;
    color: #0a1927;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sb-related-current .score {
    font-weight: 800;
    font-family: ui-monospace, monospace;
    font-size: 12px;
}
.sb-related-current .badge {
    font-size: 9px;
    font-weight: 700;
    color: #6c5ce7;
    background: rgba(108, 92, 231, .18);
    padding: 1px 6px;
    border-radius: 20px;
    letter-spacing: .3px;
}
.sb-related-list {
    max-height: 260px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    border: 1px solid #eef2f8;
    border-radius: 10px;
    background: #fff;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}
.sb-related-row {
    display: grid;
    grid-template-columns: 6px 1fr auto;
    gap: 8px;
    align-items: center;
    padding: 6px 10px;
    cursor: pointer;
    border-bottom: 1px solid #f1f3f8;
    font-size: 12px;
    transition: background .12s;
}

.sb-related-row .indicator {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #cbd5e1;
}
.sb-related-row .name {
    font-weight: 500;
    color: #0a1927;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sb-related-row .right {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.sb-related-row .score {
    font-weight: 700;
    font-family: ui-monospace, monospace;
    font-size: 11px;
    min-width: 22px;
    text-align: right;
}
.sb-related-row .delta {
    font-size: 9px;
    padding: 0 4px;
    border-radius: 10px;
    font-weight: 700;
}
.sb-related-row .delta.up {
    color: #059669;
    background: #d1fae5;
}
.sb-related-row .delta.down {
    color: #dc2626;
    background: #fee2e2;
}
.sb-related-row .arrow {
    font-size: 11px;
    color: #cbd5e1;
    transition: all .12s;
}
.sb-spec-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    color: #6c5ce7;
    background: #f4f6fc;
    text-decoration: none;
    transition: all .15s;
}
.sb-spec-more i {
    font-size: 12px;
    transition: transform .15s;
}
.sb-related-more {
    padding: 6px 10px;
    text-align: center;
    font-size: 10.5px;
    color: #8a9bb0;
    background: #fafbfd;
    border-top: 1px solid #f1f3f8;
    font-weight: 500;
}