.dos-demos-page {
        padding: 22px 0 36px;
}

.dos-demos-hero {
        position: relative;
        overflow: hidden;
        border-radius: 24px;
        padding: 28px;
        margin-bottom: 22px;
        background:
                radial-gradient(circle at 18% 10%, rgba(124, 60, 255, .32), transparent 34%),
                linear-gradient(135deg, rgba(34, 28, 54, .98), rgba(12, 12, 20, .98));
        border: 1px solid rgba(255, 255, 255, .09);
        box-shadow: 0 22px 70px rgba(0, 0, 0, .34);
}

.dos-demos-kicker {
        color: #a98cff;
        font-size: 12px;
        font-weight: 800;
        letter-spacing: .14em;
        text-transform: uppercase;
        margin-bottom: 8px;
}

.dos-demos-title {
        margin: 0 0 8px;
        font-size: 32px;
        line-height: 1.15;
        color: #fff;
        font-weight: 900;
}

.dos-demos-subtitle {
        margin: 0;
        max-width: 760px;
        color: rgba(255, 255, 255, .72);
        font-size: 15px;
        line-height: 1.55;
}

.dos-demos-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
}

.dos-demos-card {
        border-radius: 20px;
        padding: 18px;
        background: rgba(255, 255, 255, .045);
        border: 1px solid rgba(255, 255, 255, .09);
        box-shadow: 0 18px 50px rgba(0, 0, 0, .22);
}

.dos-demos-card__top {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 14px;
}

.dos-demos-card__icon {
        width: 42px;
        height: 42px;
        border-radius: 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        background: rgba(124, 60, 255, .18);
        color: #b99cff;
        font-size: 23px;
}

.dos-demos-card__name {
        margin: 0;
        color: #fff;
        font-size: 17px;
        line-height: 1.25;
        font-weight: 850;
}

.dos-demos-card__addr {
        margin-top: 5px;
        color: rgba(255, 255, 255, .56);
        font-size: 13px;
}

.dos-demos-card__badges {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        margin: 14px 0;
}

.dos-demos-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        border-radius: 999px;
        padding: 7px 10px;
        background: rgba(255, 255, 255, .07);
        color: rgba(255, 255, 255, .72);
        font-size: 12px;
        font-weight: 700;
}

.dos-demos-badge--on {
        color: #bcf7c8;
        background: rgba(46, 204, 113, .13);
}

.dos-demos-badge--off {
        color: #f0b7b7;
        background: rgba(255, 80, 80, .10);
}

.dos-demos-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 9px;
}

.dos-demos-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 42px;
        border-radius: 13px;
        text-decoration: none !important;
        color: #fff !important;
        font-weight: 800;
        background: rgba(124, 60, 255, .86);
        border: 1px solid rgba(255, 255, 255, .11);
        transition: transform .16s ease, background .16s ease;
}

.dos-demos-btn:hover {
        transform: translateY(-1px);
        background: rgba(142, 82, 255, .96);
}

.dos-demos-btn--soft {
        background: rgba(255, 255, 255, .075);
}

.dos-demos-btn--disabled {
        opacity: .55;
        pointer-events: none;
}

.dos-demos-empty {
        border-radius: 18px;
        padding: 20px;
        background: rgba(255, 255, 255, .045);
        border: 1px dashed rgba(255, 255, 255, .14);
        color: rgba(255, 255, 255, .68);
}

@media (max-width: 1100px) {
        .dos-demos-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
        }
}

@media (max-width: 640px) {
        .dos-demos-hero {
                padding: 22px;
        }

        .dos-demos-title {
                font-size: 26px;
        }

        .dos-demos-grid {
                grid-template-columns: 1fr;
        }
}

/* DOS-CS demos polish */
.dos-demos-grid {
        align-items: stretch;
}

.dos-demos-card {
        display: flex;
        flex-direction: column;
        min-height: 282px;
}

.dos-demos-card__top {
        min-height: 68px;
}

.dos-demos-card__name {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        min-height: 42px;
        word-break: break-word;
}

.dos-demos-card__addr {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
}

.dos-demos-card__badges {
        min-height: 72px;
        align-content: flex-start;
}

.dos-demos-actions {
        margin-top: auto;
}

.dos-demos-btn--disabled {
        display: none !important;
}

.dos-demos-btn {
        min-height: 44px;
        letter-spacing: .01em;
}

.dos-demos-btn i,
.dos-demos-badge i {
        line-height: 1;
}

.dos-demos-badge {
        min-height: 34px;
}

.dos-demos-hero {
        margin-top: 8px;
}

@media (min-width: 1101px) {
        .dos-demos-grid {
                grid-template-columns: repeat(3, minmax(260px, 1fr));
        }
}

@media (max-width: 640px) {
        .dos-demos-card {
                min-height: auto;
        }

        .dos-demos-card__top,
        .dos-demos-card__badges,
        .dos-demos-card__name {
                min-height: 0;
        }
}

/* DOS-CS demos compact fix */
.dos-demos-hero {
        padding: 24px 28px;
        margin-bottom: 22px;
}

.dos-demos-title {
        font-size: 30px;
        margin-bottom: 8px;
}

.dos-demos-subtitle {
        max-width: 820px;
}

.dos-demos-card {
        min-height: 246px;
        padding: 18px;
}

.dos-demos-card__top {
        min-height: 56px;
        margin-bottom: 10px;
}

.dos-demos-card__icon {
        width: 40px;
        height: 40px;
        border-radius: 13px;
}

.dos-demos-card__name {
        min-height: 0;
        font-size: 16px;
        line-height: 1.2;
}

.dos-demos-card__addr {
        margin-top: 7px;
        font-size: 13px;
}

.dos-demos-card__badges {
        min-height: 64px;
        margin: 10px 0 12px;
}

.dos-demos-badge {
        min-height: 32px;
        padding: 6px 10px;
}

.dos-demos-actions {
        gap: 8px;
}

.dos-demos-btn {
        min-height: 42px;
        border-radius: 12px;
}

/* чтобы у карточек без HLTV не было огромной пустоты */
.dos-demos-card:has(.dos-demos-btn--disabled) .dos-demos-actions {
        margin-top: 8px;
}

@supports not selector(:has(*)) {
        .dos-demos-actions {
                margin-top: 10px;
        }
}

/* DOS-CS real demos list */
.dos-demos-page {
        padding: 22px;
        color: #fff;
}

.dos-demos-main-head {
        display: flex;
        justify-content: space-between;
        gap: 18px;
        align-items: center;
        margin-bottom: 18px;
        padding: 22px;
        border: 1px solid rgba(255,255,255,.08);
        border-radius: 18px;
        background: linear-gradient(135deg, rgba(111,55,255,.18), rgba(0,0,0,.35));
}

.dos-demos-kicker {
        color: #9d6bff;
        font-weight: 900;
        letter-spacing: .14em;
        font-size: 12px;
        margin-bottom: 7px;
}

.dos-demos-main-head h1 {
        margin: 0;
        font-size: 30px;
        font-weight: 900;
}

.dos-demos-main-head p {
        margin: 8px 0 0;
        color: rgba(255,255,255,.68);
}

.dos-demos-main-stat {
        min-width: 120px;
        padding: 14px 18px;
        border-radius: 16px;
        background: rgba(255,255,255,.07);
        text-align: center;
}

.dos-demos-main-stat b {
        display: block;
        font-size: 28px;
        color: #b58cff;
}

.dos-demos-main-stat span {
        color: rgba(255,255,255,.62);
        font-size: 12px;
}

.dos-demos-layout {
        display: grid;
        grid-template-columns: 270px minmax(0, 1fr);
        gap: 18px;
}

.dos-demos-sidebar-box,
.dos-demos-content-box {
        border: 1px solid rgba(255,255,255,.08);
        border-radius: 18px;
        background: rgba(13,15,20,.92);
        box-shadow: 0 18px 45px rgba(0,0,0,.28);
}

.dos-demos-sidebar-box {
        padding: 14px;
        align-self: start;
}

.dos-demos-sidebar-title {
        padding: 10px 12px 14px;
        font-size: 16px;
        font-weight: 900;
}

.dos-demos-server-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
}

.dos-demos-server-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 13px 14px;
        border-radius: 13px;
        color: rgba(255,255,255,.74);
        background: rgba(255,255,255,.035);
        text-decoration: none;
        transition: .18s ease;
}

.dos-demos-server-link span {
        display: flex;
        align-items: center;
        gap: 9px;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
}

.dos-demos-server-link i {
        color: #8e5dff;
}

.dos-demos-server-link b {
        min-width: 28px;
        height: 24px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(142,93,255,.18);
        color: #fff;
        font-size: 12px;
}

.dos-demos-server-link:hover,
.dos-demos-server-link.is-active {
        color: #fff;
        background: linear-gradient(135deg, rgba(142,93,255,.38), rgba(142,93,255,.14));
}

.dos-demos-content-box {
        padding: 18px;
        min-width: 0;
}

.dos-demos-selected-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        margin-bottom: 18px;
        padding-bottom: 16px;
        border-bottom: 1px solid rgba(255,255,255,.08);
}

.dos-demos-selected-head h2 {
        margin: 0;
        font-size: 22px;
        font-weight: 900;
}

.dos-demos-selected-head p {
        margin: 6px 0 0;
        color: rgba(255,255,255,.58);
}

.dos-demos-head-actions {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        justify-content: flex-end;
}

.dos-demos-head-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        height: 42px;
        padding: 0 16px;
        border-radius: 12px;
        border: 1px solid rgba(255,255,255,.12);
        color: #fff;
        background: rgba(255,255,255,.06);
        text-decoration: none;
        font-weight: 900;
}

.dos-demos-head-btn--primary {
        background: linear-gradient(135deg, #7a39ff, #5c2de2);
        border-color: transparent;
}

.dos-demos-table-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 12px;
}

.dos-demos-table-head h3 {
        margin: 0;
        font-size: 20px;
        font-weight: 900;
}

.dos-demos-table-head span {
        color: rgba(255,255,255,.58);
        font-size: 13px;
}

.dos-demos-table-wrap {
        overflow-x: auto;
        border-radius: 15px;
        border: 1px solid rgba(255,255,255,.07);
}

.dos-demos-table {
        width: 100%;
        border-collapse: collapse;
        min-width: 760px;
}

.dos-demos-table th {
        padding: 14px 16px;
        color: rgba(255,255,255,.48);
        font-size: 12px;
        text-align: left;
        text-transform: uppercase;
        letter-spacing: .06em;
        background: rgba(255,255,255,.035);
}

.dos-demos-table td {
        padding: 15px 16px;
        border-top: 1px solid rgba(255,255,255,.065);
}

.dos-demos-table tr:hover td {
        background: rgba(255,255,255,.025);
}

.dos-demo-cell-main {
        display: grid;
        grid-template-columns: 24px minmax(0, 1fr);
        column-gap: 9px;
        align-items: center;
}

.dos-demo-cell-main i {
        grid-row: 1 / span 2;
        color: #8e5dff;
        font-size: 18px;
}

.dos-demo-cell-main span {
        color: #fff;
        font-weight: 800;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
}

.dos-demo-cell-main small {
        color: rgba(255,255,255,.45);
        font-size: 12px;
}

.dos-demo-download-cell {
        text-align: right;
}

.dos-demo-download {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        height: 38px;
        padding: 0 14px;
        border-radius: 11px;
        color: #fff;
        background: rgba(142,93,255,.18);
        border: 1px solid rgba(142,93,255,.35);
        text-decoration: none;
        font-weight: 900;
}

.dos-demo-download:hover {
        background: rgba(142,93,255,.32);
        color: #fff;
}

.dos-demos-empty-list {
        padding: 42px 20px;
        text-align: center;
        color: rgba(255,255,255,.62);
}

.dos-demos-empty-list i {
        display: block;
        font-size: 42px;
        color: #8e5dff;
        margin-bottom: 10px;
}

.dos-demos-empty-list b {
        display: block;
        color: #fff;
        font-size: 18px;
        margin-bottom: 6px;
}

@media (max-width: 900px) {
        .dos-demos-layout {
                grid-template-columns: 1fr;
        }

        .dos-demos-main-head,
        .dos-demos-selected-head {
                align-items: flex-start;
                flex-direction: column;
        }

        .dos-demos-head-actions {
                width: 100%;
                justify-content: stretch;
        }

        .dos-demos-head-btn {
                flex: 1;
        }
}


/* DOS DEMOS: copy ZIP link button */
.dos-demo-copy-head,
.dos-demo-copy-cell {
    text-align: center !important;
    white-space: nowrap !important;
}

.dos-demo-copy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 16px;
    border: 1px solid rgba(255, 199, 0, .75);
    border-radius: 10px;
    background: rgba(255, 199, 0, .08);
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
    transition: .18s ease;
}

.dos-demo-copy-btn:hover {
    background: rgba(255, 199, 0, .18);
    color: #ffd34d;
}

.dos-demo-copy-btn.is-copied {
    background: rgba(255, 199, 0, .25);
    color: #ffd34d;
}