* {
    box-sizing:border-box;
}

body {
    margin:0;
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    color:#292421;
    background:#f7f5f2;
}

.login-body {
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;

    background:
        radial-gradient(
            circle at top,
            #f9f5f0,
            #e9dfd5
        );
}

.login-card {
    width:420px;
    max-width:calc(100% - 30px);

    background:#fff;
    padding:48px;

    border-radius:24px;

    box-shadow:
        0 30px 80px
        rgba(55,40,30,.14);
}

.login-logo {
    display:block;
    width:300px;
    height:130px;
    max-width:100%;
    max-height:none;
    object-fit:contain;
    margin:0 auto 20px;
    transform:scale(1.65);
    transform-origin:center center;
}

.login-card h1 {
    text-align:center;
}

.muted {
    color:#857b72;
}

.login-card .muted {
    text-align:center;
    margin-bottom:28px;
}

label {
    display:block;
    margin:16px 0 7px;
    font-size:13px;
    font-weight:600;
}

input,
select {
    width:100%;

    border:1px solid #ded8d1;
    border-radius:10px;

    padding:13px 14px;

    background:white;
    font-size:14px;
}

button {
    border:0;
    border-radius:10px;

    padding:13px 18px;

    background:#292421;
    color:white;

    cursor:pointer;
    font-weight:600;
}

.login-card button {
    width:100%;
    margin-top:22px;
}

.otp {
    text-align:center;
    font-size:26px;
    letter-spacing:10px;
}

.error {
    padding:12px 14px;

    background:#fbe9e7;
    color:#9d382f;

    border-radius:9px;
    margin:15px 0;
}

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

.sidebar {
    position:fixed;
    inset:0 auto 0 0;

    width:255px;

    padding:24px 18px;

    background:#272321;
    overflow-y:auto;
}

.side-logo {
    display:block;
    width:190px;
    height:95px;
    max-width:100%;
    max-height:none;
    object-fit:contain;
    margin:4px auto 26px;
    filter:brightness(0) invert(1);
    transform:scale(1.20);
    transform-origin:center center;
}

.sidebar a {
    display:block;

    text-decoration:none;

    padding:10px 12px;

    color:#d9d1cb;

    border-radius:8px;

    font-size:14px;
}

.sidebar a:hover,
.sidebar a.active {
    color:#fff;
    background:#3b3531;
}

.section {
    margin:23px 12px 7px;

    color:#8f857e;

    font-size:10px;
    font-weight:700;

    letter-spacing:1.3px;
}

.main {
    margin-left:255px;

    width:calc(100% - 255px);

    padding:38px 42px;
}

.top {
    display:flex;

    align-items:center;
    justify-content:space-between;

    margin-bottom:28px;
}

h1 {
    margin:0;
    font-size:30px;
}

h2 {
    margin-top:30px;
}

.role {
    padding:8px 13px;

    border-radius:20px;

    background:#e9e1d9;

    font-size:12px;
    font-weight:700;
}

.stats {
    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:18px;
}

.stat,
.panel,
.setup a {
    background:#fff;

    border-radius:16px;

    padding:22px;

    box-shadow:
        0 4px 18px
        rgba(40,30,20,.04);
}

.stat span,
.stat small {
    display:block;
    color:#857b72;
}

.stat strong {
    display:block;

    margin:8px 0;

    font-size:27px;
}

.setup {
    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:18px;
}

.setup a {
    text-decoration:none;
    color:#292421;
}

.setup strong,
.setup span {
    display:block;
}

.setup span {
    margin-top:7px;

    color:#857b72;

    font-size:13px;
}

.panel {
    margin-bottom:20px;
}

.form-grid {
    display:grid;

    grid-template-columns:
        110px
        minmax(180px,1fr)
        110px
        140px
        auto;

    gap:12px;
}

table {
    width:100%;
    border-collapse:collapse;
}

th,
td {
    text-align:left;

    padding:13px 12px;

    border-bottom:
        1px solid #eee9e4;
}

th {
    color:#857b72;

    font-size:11px;

    letter-spacing:.5px;
    text-transform:uppercase;
}

@media(max-width:900px) {

    .sidebar {
        width:210px;
    }

    .main {
        margin-left:210px;
        width:calc(100% - 210px);
        padding:25px;
    }

    .stats,
    .setup {
        grid-template-columns:1fr 1fr;
    }

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