.challenge-head,.challenge-hero,.challenge-toolbar,.challenge-actions{
    display:flex;justify-content:space-between;
    align-items:center;
    gap:1rem
}

.challenge-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:1rem
}

.challenge-card,.challenge-page section,.challenge-hero{
    padding:1.25rem;
    border:1px solid var(--border-color,#444);
    border-radius:14px
}

.challenge-difficulty,.challenge-status,.programming-rank-badge{
    display:inline-flex;
    padding:.2rem .55rem;
    border-radius:999px;
    font-size:.78rem;
    font-weight:700;
    background:var(--surface-strong,#333)
}

.challenge-status-draft{
    color:#ffd98a
}

.challenge-status-pending_review{
    color:#8fc7ff
}

.challenge-status-rejected{
    color:#ff9f9f
}

.difficulty-hard,.difficulty-expert,.difficulty-jedi{
    color:#ffb3b3
}

.challenge-examples,.two-column{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1rem
}

.challenge-workbench{
    margin:1.5rem 0
}

.challenge-timer{
    font:700 1.25rem ui-monospace,monospace
}

.challenge-actions{
    justify-content:flex-start;
    margin-top:1rem;
    flex-wrap:wrap
}

.challenge-actions form{
    display:inline-flex;
    margin:0
}

.challenge-form-shell{
    max-width:980px;
    margin:auto
}

.challenge-form-shell fieldset{
    margin:1rem 0
}

.challenge-result-tests{
    display:grid;
    gap:.5rem
}

.challenge-feedback{
    display:grid;
    gap:.75rem
}

.challenge-feedback-summary{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    flex-wrap:wrap
}

.challenge-feedback-summary span{
    font-size:.9rem;
    opacity:.8
}

.challenge-feedback p{
    margin:0
}

.challenge-feedback-output{
    min-width:0;
    padding:.75rem;
    border:1px solid color-mix(in srgb,var(--border-color,#444) 75%,transparent);
    border-radius:10px;
    background:color-mix(in srgb,var(--surface-strong,#111827) 88%,transparent)
}

.challenge-feedback-output strong{
    display:block;
    margin-bottom:.4rem;
    font-size:.85rem
}

.challenge-feedback-output pre{
    max-height:16rem;
    margin:0;
    overflow:auto;
    white-space:pre-wrap;
    overflow-wrap:anywhere;
    color:inherit
}

.challenge-feedback-stderr{
    color:var(--danger-text,#ffb4b4)!important
}

.challenge-management-table{
    min-width:940px
}

.challenge-row-actions{
    display:flex;
    align-items:center;
    gap:.45rem;
    flex-wrap:wrap
}

.challenge-row-actions form{
    display:inline-flex;
    gap:.35rem;
    align-items:center;margin:0
}

.challenge-row-actions input{
    min-width:180px
}

.challenge-application-form{
    margin-top:1rem
}

.challenge-leaderboard{
    display:grid;
    gap:.5rem
}

.challenge-own-work{
    margin:1.5rem 0;
    padding:1.25rem;
    border:1px solid color-mix(in srgb,var(--accent,#4b9cff) 55%,var(--border-color,#444));
    border-radius:14px;
    background:color-mix(in srgb,var(--surface,#101827) 94%,var(--accent,#4b9cff))
}

.challenge-own-work>.challenge-head{
    margin-bottom:1rem
}

.challenge-section-heading{
    margin:2rem 0 1rem
}

.challenge-description-footer {
    display: flex;
    align-items: center;
    gap: 1rem;          /* расстояние между кнопками */
}

.challenge-leaderboard {
    display: table;
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.challenge-leaderboard thead {
    display: table-header-group;
}

.challenge-leaderboard tbody {
    display: table-row-group;
}

.challenge-leaderboard tr {
    display: table-row;
}

.challenge-leaderboard th,
.challenge-leaderboard td {
    display: table-cell;
    padding: .75rem;
    border: 1px solid var(--line);
    vertical-align: middle;
    white-space: nowrap;
}

.challenge-leaderboard th:nth-child(1),
.challenge-leaderboard td:nth-child(1) {
    width: 5%;
    text-align: center;
}

.challenge-leaderboard th:nth-child(2),
.challenge-leaderboard td:nth-child(2) {
    width: 22%;
}

.challenge-leaderboard th:nth-child(3),
.challenge-leaderboard td:nth-child(3) {
    width: 16%;
}

.challenge-leaderboard th:nth-child(4),
.challenge-leaderboard td:nth-child(4) {
    width: 18%;
}

.challenge-leaderboard th:nth-child(5),
.challenge-leaderboard td:nth-child(5) {
    width: 17%;
}

.challenge-leaderboard th:nth-child(6),
.challenge-leaderboard td:nth-child(6) {
    width: 22%;
    text-align: right;
}

@media(max-width:720px){
    .challenge-head,.challenge-hero,.challenge-toolbar{
        align-items:stretch;
        flex-direction:column
    }

    .challenge-examples,.two-column{
        grid-template-columns:1fr
    }

    .challenge-grid{
        grid-template-columns:minmax(0,1fr)
    }

    .challenge-card,
    .challenge-page section,
    .challenge-hero,
    .challenge-own-work{
        min-width:0;
        max-width:100%;
        padding:clamp(.8rem,4vw,1.1rem)
    }

    .challenge-row-actions,
    .challenge-description-footer{
        align-items:stretch;
        flex-direction:column
    }

    .challenge-row-actions form,
    .challenge-row-actions :where(input,button,.button),
    .challenge-description-footer :where(a,button,.button){
        width:100%;
        min-width:0;
        max-width:100%
    }

    .challenge-leaderboard{
        display:block;
        width:100%;
        min-width:0;
        table-layout:auto;
        background:transparent
    }

    .challenge-leaderboard thead{
        display:none
    }

    .challenge-leaderboard tbody{
        display:grid;
        gap:.75rem;
        width:100%
    }

    .challenge-leaderboard tr{
        display:grid;
        width:100%;
        overflow:hidden;
        border:1px solid var(--line);
        border-radius:12px;
        background:var(--panel)
    }

    .challenge-leaderboard td{
        display:grid;
        grid-template-columns:minmax(7.5rem,42%) minmax(0,1fr);
        align-items:center;
        gap:.75rem;
        width:100%!important;
        max-width:100%;
        padding:.65rem .75rem;
        border:0;
        border-bottom:1px solid var(--line);
        white-space:normal;
        text-align:left!important;
        overflow-wrap:anywhere
    }

    .challenge-leaderboard td:last-child{
        border-bottom:0
    }

    .challenge-leaderboard td::before{
        content:attr(data-label);
        color:var(--muted);
        font-size:.75rem;
        font-weight:700;
        line-height:1.25;
        text-transform:uppercase
    }

    .challenge-leaderboard td:nth-child(even){
        background:color-mix(in srgb,var(--panel) 92%,var(--accent))
    }

    .challenge-leaderboard .programming-rank-badge{
        margin-top:.25rem;
        white-space:normal
    }
}