.sdl-block {
    margin: 0.25rem 0 1rem;
}

.sdl-title {
    text-align: center;
    color: #fff;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 0.75rem;
    letter-spacing: 0.01em;
}

.sdl-wrap {
    --sdl-btn-w: 7.5rem;
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
}

.sdl-feed {
    display: flex;
    align-items: stretch;
    gap: 0.65rem;
    width: calc(100% - (var(--sdl-btn-w) / 2));
    overflow: hidden;
    padding: 0.15rem 0 0.35rem;
}

.sdl-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 5.4rem;
    padding: 1rem;
    border-radius: 14px;
    border: 1px dashed rgba(255, 255, 255, 0.1);
    color: var(--text-secondary, #8b8f9a);
    background: rgba(255, 255, 255, 0.02);
}

.sdl-card {
    --sdl-rarity: #5e98d9;
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    min-height: 5.4rem;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.65rem 0.75rem 0.65rem 0.55rem;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background:
        radial-gradient(120% 90% at 50% -10%, color-mix(in srgb, var(--sdl-rarity) 28%, transparent), transparent 58%),
        linear-gradient(180deg, #1a1d24 0%, #12141a 100%);
    overflow: hidden;
    animation: sdl-in 0.35s ease;
}

.sdl-card:last-child:not(:only-child) {
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 42%, transparent 92%);
    mask-image: linear-gradient(90deg, #000 0%, #000 42%, transparent 92%);
}

.sdl-card.is-new {
    animation: sdl-pop 0.45s ease;
}

.sdl-card__glow {
    pointer-events: none;
    position: absolute;
    inset: 0 0 auto 0;
    height: 42%;
    background: radial-gradient(ellipse at top, color-mix(in srgb, var(--sdl-rarity) 35%, transparent), transparent 70%);
    opacity: 0.9;
}

.sdl-card__skin {
    position: relative;
    width: 5.4rem;
    height: 4rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sdl-card__hex {
    position: absolute;
    inset: 0.15rem;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.04), transparent),
        color-mix(in srgb, var(--sdl-rarity) 12%, transparent);
    clip-path: polygon(25% 6%, 75% 6%, 94% 50%, 75% 94%, 25% 94%, 6% 50%);
    opacity: 0.85;
}

.sdl-card__skin img {
    position: relative;
    z-index: 1;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.45));
}

.sdl-card__meta {
    position: relative;
    z-index: 1;
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.sdl-card__row {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.sdl-card__avatar {
    display: inline-flex;
    width: 1.55rem;
    height: 1.55rem;
    border-radius: 7px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    flex-shrink: 0;
}

.sdl-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sdl-card__price {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1;
}

.sdl-card__price svg {
    width: 0.95rem;
    height: 0.95rem;
    fill: #e4ae39;
    color: #e4ae39;
}

.sdl-card__time {
    color: rgba(255, 255, 255, 0.48);
    font-size: 0.78rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sdl-card.sd-rarity-consumer { --sdl-rarity: #b0c3d9; }
.sdl-card.sd-rarity-industrial { --sdl-rarity: #5e98d9; }
.sdl-card.sd-rarity-milspec { --sdl-rarity: #4b69ff; }
.sdl-card.sd-rarity-restricted { --sdl-rarity: #8847ff; }
.sdl-card.sd-rarity-classified { --sdl-rarity: #d32ce6; }
.sdl-card.sd-rarity-covert { --sdl-rarity: #eb4b4b; }
.sdl-card.sd-rarity-stattrak { --sdl-rarity: #cf6a32; }
.sdl-card.sd-rarity-souvenir { --sdl-rarity: #ffd700; }

.sdl-all-btn {
    position: absolute;
    right: 0;
    top: 0.15rem;
    bottom: 0.35rem;
    z-index: 3;
    width: var(--sdl-btn-w);
    min-height: 5.4rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.55rem;
    padding: 0.85rem 0.8rem;
    border-radius: 14px;
    border: 1px solid rgba(94, 152, 217, 0.35);
    background:
        radial-gradient(120% 100% at 100% 0%, rgba(94, 152, 217, 0.28), transparent 55%),
        linear-gradient(160deg, #1c2433 0%, #121722 100%);
    color: #fff;
    text-align: left;
    cursor: pointer;
    box-shadow: -22px 0 28px 10px rgba(10, 12, 18, 0.88);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.sdl-all-btn:hover {
    transform: translateY(-2px);
    border-color: rgba(142, 197, 255, 0.65);
    box-shadow: -22px 0 28px 10px rgba(10, 12, 18, 0.88), 0 10px 24px rgba(30, 60, 110, 0.28);
}

.sdl-all-btn__icon {
    width: 1.65rem;
    height: 1.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: rgba(94, 152, 217, 0.18);
    color: #8ec5ff;
}

.sdl-all-btn__icon svg {
    width: 0.95rem;
    height: 0.95rem;
    fill: currentColor;
}

.sdl-all-btn__text {
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.25;
}

.sdl-all-btn__arrow {
    align-self: flex-end;
    width: 1.1rem;
    height: 1.1rem;
    color: rgba(255, 255, 255, 0.55);
}

.sdl-all-btn__arrow svg {
    width: 100%;
    height: 100%;
}

.sdl-modal.popup_modal_content,
.popup_modal_content.sdl-modal {
    width: min(860px, 94vw);
    max-height: min(78vh, 720px);
    display: flex;
    flex-direction: column;
}

.sdl-table-wrap {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
}

.sdl-table-head,
.sdl-table-row {
    display: grid;
    grid-template-columns: minmax(140px, 1.1fr) minmax(180px, 1.6fr) 90px 110px;
    gap: 0.75rem;
    align-items: center;
}

.sdl-table-head {
    padding: 0.35rem 0.85rem 0.75rem;
    color: rgba(255, 255, 255, 0.42);
    font-size: 0.8rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.sdl-table-body {
    overflow-y: auto;
    max-height: min(58vh, 560px);
    padding: 0.35rem 0.25rem 0.5rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

.sdl-table-row {
    padding: 0.7rem 0.6rem;
    border-radius: 10px;
    transition: background 0.15s ease;
}

.sdl-table-row:hover {
    background: rgba(255, 255, 255, 0.035);
}

.sdl-table-row + .sdl-table-row {
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.sdl-player {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
    color: #fff;
    text-decoration: none;
}

.sdl-player img {
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 7px;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

.sdl-player span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

.sdl-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
}

.sdl-item img {
    width: 3.1rem;
    height: 2rem;
    object-fit: contain;
    flex-shrink: 0;
}

.sdl-item a,
.sdl-item span {
    color: #6eb6ff;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.9rem;
}

.sdl-price {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: #fff;
    font-weight: 700;
}

.sdl-price svg {
    width: 0.95rem;
    height: 0.95rem;
    fill: #e4ae39;
}

.sdl-when {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.85rem;
}

.sdl-table-loading,
.sdl-table-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 8rem;
    color: rgba(255, 255, 255, 0.45);
}

@keyframes sdl-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}

@keyframes sdl-pop {
    0% { opacity: 0; transform: translateX(-18px) scale(0.96); }
    100% { opacity: 1; transform: none; }
}

@media (max-width: 768px) {
    .sdl-wrap {
        --sdl-btn-w: 0;
        display: flex;
        flex-direction: column;
        gap: 0.65rem;
        overflow: visible;
    }

    .sdl-feed {
        width: 100%;
        flex-direction: column;
        gap: 0.5rem;
    }

    .sdl-card:last-child:not(:only-child) {
        -webkit-mask-image: none;
        mask-image: none;
    }

    .sdl-card:nth-child(n + 4) {
        display: none;
    }

    .sdl-all-btn {
        position: static;
        width: 100%;
        min-height: auto;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 0.85rem 1rem;
        box-shadow: none;
    }

    .sdl-all-btn__text {
        flex: 1;
        font-size: 0.9rem;
    }

    .sdl-all-btn__arrow {
        align-self: center;
    }

    .sdl-table-head,
    .sdl-table-row {
        grid-template-columns: 1fr;
        gap: 0.35rem;
    }

    .sdl-table-head {
        display: none;
    }

    .sdl-table-row {
        padding: 0.85rem 0.65rem;
    }
}