* {
    box-sizing: border-box
}

body {
    margin: 0;
    font-family: "DM Sans", sans-serif;
    background: #f4f6f9;
    color: #1e293b
}

.hidden {
    display: none !important
}

.auth-wrap {
    min-height: 100vh;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #0c2343, #183d6b)
}

.auth-card {
    width: min(420px, 92%);
    background: #fff;
    padding: 35px;
    border-radius: 10px;
    box-shadow: 0 20px 60px #0004
}

.brand-admin {
    color: #b78318;
    font-size: 18px;
    margin-bottom: 20px
}

.auth-card h1 {
    margin: 0 0 5px
}

.auth-card p {
    color: #697486;
    font-size: 14px
}

.auth-card input,
.auth-card button,
.upload-card input,
.upload-card textarea {
    width: 100%;
    padding: 12px;
    margin: 7px 0 12px;
    border: 1px solid #dbe1e8;
    border-radius: 5px;
    font: inherit
}

.auth-card button,
.upload-card button {
    border: 0;
    background: #102c55;
    color: #fff;
    font-weight: 700;
    cursor: pointer
}

.auth-card a {
    font-size: 13px;
    color: #102c55
}

.error {
    color: #c62828;
    font-size: 13px;
    min-height: 20px
}

.dashboard {
    display: flex;
    min-height: 100vh
}

.sidebar {
    width: 245px;
    background: #0c2343;
    color: #fff;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 6px
}

.side-brand {
    font-weight: 700;
    font-size: 19px;
    padding: 15px 10px 25px
}

.side-link {
    display: block;
    text-align: left;
    background: transparent;
    border: 0;
    color: #c5ceda;
    padding: 12px 13px;
    border-radius: 5px;
    font: inherit;
    cursor: pointer
}

.side-link:hover,
.side-link.active {
    background: #183d6b;
    color: #fff
}

.logout {
    margin-top: auto
}

.main {
    flex: 1;
    min-width: 0
}

.dash-header {
    background: #fff;
    padding: 20px 30px;
    border-bottom: 1px solid #e6eaf0;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.dash-header span {
    color: #8a95a4;
    font-size: 12px
}

.dash-header h2 {
    margin: 3px 0 0
}

.panel {
    padding: 30px
}

.stats-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-bottom: 22px
}

.stats-cards>div,
.card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 5px 20px #102c5510
}

.stats-cards>div {
    padding: 22px
}

.stats-cards span {
    display: block;
    color: #7b8794;
    font-size: 13px
}

.stats-cards b {
    font-size: 32px;
    color: #102c55
}

.card {
    padding: 24px;
    margin-bottom: 20px
}

.panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px
}

.panel-head h2 {
    margin: 0
}

.panel-head p {
    color: #7b8794
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px
}

.upload-card label {
    display: block;
    font-size: 13px;
    font-weight: 700
}

.upload-card textarea {
    resize: vertical
}

.upload-card button {
    width: auto;
    padding: 12px 20px
}

.progress {
    height: 7px;
    background: #e9edf2;
    border-radius: 20px;
    overflow: hidden;
    margin: 10px 0
}

.progress div {
    height: 100%;
    width: 0;
    background: #e2a72e
}

.table-wrap {
    overflow: auto
}

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

th,
td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #edf0f3;
    font-size: 13px;
    vertical-align: top
}

th {
    color: #667384;
    background: #fafbfc
}

td button,
td a {
    border: 0;
    background: #eef2f6;
    color: #102c55;
    padding: 7px 9px;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    font-size: 12px;
    margin-right: 4px
}

.danger {
    background: #fff0f0 !important;
    color: #c62828 !important
}

.published {
    color: #17834c;
    font-weight: 700
}

.draft {
    color: #9b6a00;
    font-weight: 700
}

.muted {
    color: #8792a0
}

@media(max-width:800px) {
    .sidebar {
        width: 190px
    }

    .stats-cards {
        grid-template-columns: 1fr
    }

    .form-grid {
        grid-template-columns: 1fr
    }

    .panel {
        padding: 18px
    }

    .dash-header {
        padding: 18px
    }

    .dash-header #adminEmail {
        display: none
    }
}

@media(max-width:600px) {
    .dashboard {
        display: block
    }

    .sidebar {
        width: 100%;
        min-height: auto
    }

    .side-link {
        display: inline-block
    }

    .logout {
        margin-top: 0
    }

    .main {
        width: 100%
    }
}