:root {
    --a: #111827;
    --b: #1f2937;
    --c: #2d3748;
    --d: #fff;
    --e: #f6f6f7;
    --f: #6b7280;
    --g: #e5e7eb;
    --h: #008060
}

body {
    margin: 0;
    background: var(--e);
    font-family: Inter,sans-serif
}

* {
    box-sizing: border-box
}

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

.sD2 {
    width: 260px;
    min-width: 260px;
    background: var(--a);
    color: #fff
}

.tP8 {
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    background: #fff;
    border-bottom: 1px solid var(--g)
}

.sB1 {
    width: 320px;
    height: 42px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    background: #f9fafb;
    border: 1px solid var(--g);
    border-radius: 14px
}

    .sB1 input {
        width: 100%;
        border: none;
        outline: none;
        background: transparent
    }

.tR4 {
    display: flex;
    align-items: center;
    gap: 14px
}

.iB3 {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 1px solid var(--g);
    background: #fff
}

.pF1 {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: #fff;
    border: 1px solid var(--g);
    border-radius: 14px
}

.pA4 {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--h);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700
}

.pN1 {
    font-size: .92rem;
    font-weight: 700
}

.pR1 {
    font-size: .78rem;
    color: var(--f)
}

.cX7 {
    padding: 24px
}

.mH1 {
    display: none
}

.nW1 {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-top: 16px
}

.lO2 {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px 20px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    margin-bottom: 16px
}

.lX9 {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--h);
    display: flex;
    align-items: center;
    justify-content: center
}

.tQ1 {
    font-size: 1rem;
    font-weight: 700;
    color: #fff
}

.tQ2 {
    font-size: .75rem;
    color: rgba(255,255,255,.6)
}

.rB1 {
    margin: 0 16px 24px;
    background: rgba(255,255,255,.08);
    border-left: 4px solid #10b981;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: .75rem;
    font-weight: 700
}

.nV1 {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 12px
}

.nL1 {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    cursor: pointer;
    user-select: none
}
.nL1:hover {
        background: var(--b);
        color: #fff
    }

    .nL1.active {
        background: var(--c);
        color: #fff
    }
.b0 {
    width: 100%;
    border: none;
    background: transparent;
    text-align: left;
    cursor: pointer
}
@media(max-width:992px) {

    .pX9 {
        flex-direction: column
    }

    .mH1 {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 0 16px;
        height: 64px;
        background: var(--a);
        color: #fff
    }

    .sD2 {
        display: none;
        width: 100%;
        min-width: 100%
    }

    .sx {
        display: block
    }

    .tP8 {
        flex-direction: column;
        height: auto;
        padding: 16px;
        gap: 16px
    }

    .sB1 {
        width: 100%
    }
}