.admin-page {
    width:
        min(
            1200px,
            calc(100% - 32px)
        );

    margin:
        0 auto;

    padding:
        45px 0 90px;

    animation:
        pageEnter .42s both;
}

.admin-login {
    width:
        min(
            440px,
            100%
        );

    margin:
        80px auto;

    padding:
        30px;

    background:
        #fff;

    border:
        1px solid var(--line);

    border-radius:
        20px;

    animation:
        itemEnter .45s both;
}

.admin-login h1,
.admin-header h1 {
    margin:
        13px 0 6px;

    font-size:
        31px;

    letter-spacing:
        -.04em;
}

.admin-login p,
.admin-header p {
    color:
        var(--muted);

    font-size:
        13px;

    line-height:
        1.6;
}

.admin-input {
    width:
        100%;

    height:
        50px;

    margin-bottom:
        12px;

    padding:
        0 14px;

    border:
        1px solid #d8d8d3;

    border-radius:
        11px;

    outline:
        none;

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}

.admin-input:focus {
    border-color:
        #111;

    box-shadow:
        0 0 0 3px
        rgba(0,0,0,.04);
}

.admin-header {
    padding:
        25px;

    margin-bottom:
        20px;

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        flex-start;

    gap:
        20px;

    background:
        #fff;

    border:
        1px solid var(--line);

    border-radius:
        20px;

    animation:
        itemEnter .38s both;
}

.admin-nav {
    display:
        flex;

    gap:
        5px;

    overflow-x:
        auto;

    margin-bottom:
        20px;

    padding:
        5px;

    background:
        #fff;

    border:
        1px solid var(--line);

    border-radius:
        13px;
}

.admin-nav button {
    border:
        0;

    background:
        transparent;

    color:
        #666;

    white-space:
        nowrap;

    padding:
        10px 14px;

    border-radius:
        9px;

    font-size:
        12px;

    font-weight:
        750;

    transition:
        background .18s ease,
        color .18s ease,
        transform .18s ease;
}

.admin-nav button:hover {
    transform:
        translateY(-1px);
}

.admin-nav button.active {
    background:
        #111;

    color:
        #fff;
}

.admin-panel {
    padding:
        25px;

    background:
        #fff;

    border:
        1px solid var(--line);

    border-radius:
        20px;

    animation:
        stateEnter .32s both;
}

table {
    width:
        100%;

    min-width:
        850px;

    border-collapse:
        collapse;
}

th,
td {
    padding:
        13px 10px;

    border-bottom:
        1px solid var(--line);

    text-align:
        left;

    font-size:
        12px;
}

tbody tr {
    animation:
        itemEnter .3s both;

    transition:
        background .18s ease;
}

tbody tr:hover {
    background:
        #fafaf7;
}

th {
    color:
        #777;

    font-size:
        9px;

    text-transform:
        uppercase;

    letter-spacing:
        .1em;
}

.status {
    padding:
        5px 8px;

    border-radius:
        20px;

    background:
        #f2f2ef;

    font-size:
        9px;

    font-weight:
        800;
}

.status.awaiting_verification {
    background:
        #fff1c9;

    color:
        #805600;
}

.status.approved,
.status.completed {
    background:
        var(--success-bg);

    color:
        var(--success);
}

.status.rejected,
.status.cancelled {
    background:
        #fde6e6;

    color:
        #9a2020;
}

.application-list {
    display:
        grid;

    gap:
        10px;
}

.application-card {
    padding:
        18px;

    display:
        flex;

    justify-content:
        space-between;

    gap:
        20px;

    border:
        1px solid var(--line);

    border-radius:
        15px;

    animation:
        itemEnter .35s both;

    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

.application-card:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 12px 30px
        rgba(0,0,0,.05);
}

.small-button {
    border:
        1px solid #d8d8d3;

    background:
        #fff;

    border-radius:
        8px;

    padding:
        7px 11px;

    font-size:
        11px;

    font-weight:
        750;

    transition:
        transform .18s ease,
        background .18s ease,
        border-color .18s ease;
}

.small-button:hover {
    transform:
        translateY(-1px);

    background:
        #f7f7f4;
}

.small-button.approve {
    background:
        #111;

    color:
        #fff;
}

.small-button.approve:hover {
    background:
        #2a2a2a;
}

@media (max-width: 650px) {

    .admin-header {
        flex-direction:
            column;
    }

    .application-card {
        flex-direction:
            column;
    }

}

.admin-donation-note{
    margin-top:6px;
    color:#777;
    font-size:11px;
    line-height:1.45;
}
.admin-donation-note > div{
    margin-top:3px;
    color:#999;
}

.admin-header-actions{display:flex;align-items:center;justify-content:flex-end;gap:9px;flex-wrap:wrap}.admin-header-actions .button{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;white-space:nowrap}@media(max-width:600px){.admin-header-actions{width:100%;justify-content:stretch}.admin-header-actions .button{flex:1;min-width:0;padding:10px 9px;font-size:11px}}