:root {
    --green: #007c6f;
    --ink: #18313a;
    --line: #dce7e3
}

* {
    box-sizing: border-box
}

body {
    font-family: Arial, sans-serif;
    color: var(--ink);
    background: #f3f6f5
}

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

aside {
    width: 245px;
    background: #132a35;
    color: #d0e0dc;
    padding: 1.5rem;
    display: flex;
    flex-direction: column
}

.admin-logo {
    color: #fff;
    font-weight: bold;
    font-size: 1.25rem;
    margin-bottom: 2.5rem;
    display: flex;
    align-items: center;
    gap: .75rem
}

.admin-logo small {
    display: block;
    font-size: .55rem;
    letter-spacing: .1em;
    margin-top: .35rem
}

.admin-logo img {
    width: 2.6rem;
    height: 2.6rem;
    object-fit: contain;
    flex: 0 0 auto;
    background: #fff;
    border-radius: .5rem;
    padding: .2rem;
}

.admin-logo i {
    font-size: 1.4rem;
}

aside nav a,
aside button {
    display: block;
    color: #c2d5d0;
    padding: .7rem .4rem;
    margin: .25rem 0;
    border: 0;
    background: none;
    text-align: left;
    width: 100%
}

aside nav a:hover {
    color: #fff;
    background: #21434b
}

aside form {
    margin-top: auto
}

.admin-main {
    flex: 1;
    padding: 1.5rem 3rem
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2.5rem
}

header p {
    margin: 0;
    font-weight: bold
}

header small {
    color: #697b7f
}

.page-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem
}

.page-title h1 {
    font-size: 1.75rem;
    margin: 0
}

.page-title p {
    color: #697b7f;
    margin: .3rem 0
}

.metric-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem
}

.metric,
.admin-card {
    background: #fff;
    border: 1px solid var(--line);
    padding: 1.25rem
}

.metric span {
    display: block;
    color: #65777b;
    font-size: .8rem
}

.metric strong {
    font-size: 2.1rem
}

.admin-card h2 {
    font-size: 1.1rem
}

.status {
    font-size: .7rem;
    padding: .25rem .5rem;
    text-transform: uppercase
}

.status.published,
.status.approved {
    background: #d8eee5;
    color: #076442
}

.status.draft,
.status.pending {
    background: #fff1c7;
    color: #795a00
}

.status.rejected {
    background: #f8d8d8;
    color: #932525
}

.editor-form label {
    font-size: .8rem;
    font-weight: bold;
    margin-bottom: .3rem
}

.login-page {
    display: grid;
    place-items: center;
    min-height: 100vh;
    background: #e8f0ed
}

.login-card {
    width: min(420px, 92vw);
    background: #fff;
    padding: 2.5rem;
    border-top: 5px solid var(--green);
    box-shadow: 0 1rem 3rem #17363118
}

.login-mark {
    font-weight: bold;
    color: var(--green);
    letter-spacing: .12em
}

.login-mark img {
    display: block;
    width: 4.5rem;
    height: 4.5rem;
    object-fit: contain;
    margin: 0 auto 1rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: .75rem;
    padding: .35rem;
}

.login-mark span {
    display: block;
    text-align: center;
}

.login-card h1 {
    font-size: 1.7rem;
    margin-top: 1rem
}

.login-card label {
    font-size: .8rem;
    font-weight: bold;
    margin: .8rem 0 .3rem
}

.login-card a {
    display: block;
    text-align: center;
    margin-top: 1rem;
    color: var(--green);
    font-size: .8rem
}

@media(max-width:800px) {
    aside {
        width: 65px;
        padding: .8rem
    }

    aside span,
    aside small,
    aside a:not(.admin-logo) {
        font-size: 0
    }

    .admin-logo {
        font-size: 1.1rem
    }

    .admin-main {
        padding: 1.25rem
    }

    .metric-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .page-title {
        align-items: start;
        gap: 1rem
    }

    .page-title .btn {
        font-size: .75rem
    }
}