@font-face {
    font-family: 'Vazirmatn';
    src: url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-Regular.woff2') format('woff2');
    font-weight: 400;
}

@font-face {
    font-family: 'Vazirmatn';
    src: url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-Medium.woff2') format('woff2');
    font-weight: 500;
}

@font-face {
    font-family: 'Vazirmatn';
    src: url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-Bold.woff2') format('woff2');
    font-weight: 700;
}

:root {
    --navy-deep: #0D1B2A;
    --navy-brand: #18467A;
    --amber: #C8811A;
    --amber-soft: #FCEFD9;
    --bg-page: #EEF1F5;
    --white: #FFFFFF;
    --ink: #1B2430;
    --ink-soft: #6B7789;
    --sb-border: #5c5f6b;
    --sb-border-menu: #e6e6e6;
    --online: #3CB878;
    --offline: #ed3907fc;
    --radius-lg: 18px;
    --radius-md: 12px;
    --shadow-card: 0 8px 24px rgba(13,27,42,0.08);
}


.sidebar {
    /*flex: 0 0 var(--sidebar-width);*/
    background-color:transparent;/*var(--accent);*/
    margin-top: calc(var(--gap) - var(--sidebar-overlap));
    min-height: calc(420px + var(--sidebar-overlap) - var(--gap));
    padding: var(--gap) 5px;
    position: relative;
    z-index: 2;
    border-radius: 20px;
    position: sticky;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

@media (max-width:759px)
{
    .sidebar {
        /*flex: 0 0 var(--sidebar-width);*/
        background-color: transparent; /*var(--accent);*/
        margin-top: calc(var(--gap) - var(--sidebar-overlap));
        min-height: calc(420px + var(--sidebar-overlap) - var(--gap));
        padding: var(--gap) 5px;
        position: relative;
        z-index: 2;
        border-radius: 20px;
        position: sticky;
        display: none;
        flex-direction: column;
        gap: 24px;
    }
}

.sb-card-wrapper {
    background: linear-gradient( 180deg, #0A1626 0%, /* هم‌رنگ تیره‌ترین نقطه کارت */
    #16283f 40%, /* گذار نرم */
    #eef1f5 100% /* رنگ پس‌زمینه‌ی اصلی صفحه */
    );
    padding-bottom: 24px; /* یا هر مقداری که فاصله طبیعی بده */
}

/*
.sidebar-normal {
    /*flex: 0 0 var(--sidebar-width);
    background: var(--accent);
  
    min-height: calc(420px + var(--sidebar-overlap) - var(--gap));
    padding: var(--gap) 5px;
    position: relative;
    z-index: 2;
    border-radius: 4px;
    position: sticky;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
*/

/* ============ ASIDE CARD ============ */
.sb-card {
    width: 280px;
    background-color:transparent;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    border: 1px solid var(--sb-border);
}

.is-open {
    border: 1px solid var(--sb-border-menu) !important;
}
/* ---- top identity block ---- */
.sb-top {
    position: relative;
    background: radial-gradient(120% 140% at 100% 0%, rgba(200,129,26,0.35) 0%, rgba(200,129,26,0) 45%), linear-gradient(160deg, var(--navy-deep) 0%, var(--navy-brand) 100%);
    padding: 24px 20px 20px;
    color: var(--white);
}

.sb-avatar-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

.sb-avatar {
    position: relative;
    width: 56px;
    height: 56px;
    flex: none;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    border: 2px solid rgba(255,255,255,0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 20px;
}

    .sb-avatar .sb-dot {
        position: absolute;
        bottom: 2px;
        left: 2px;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: var(--online);
        border: 2px solid rgb(162 184 199 / 83%);
    }

    .sb-avatar .sb-dot-red {
        position: absolute;
        bottom: 2px;
        left: 2px;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: var(--offline);
        border: 2px solid rgb(162 184 199 / 83%);
    }

.sb-identity {
    min-width: 0;
}

.sb-greeting {
    font-size: 12.5px;
    color: rgba(255,255,255,0.65);
    margin: 0 0 3px;
}

.sb-username {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sb-level {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.14);
    color: var(--amber-soft);
    width: fit-content;
}

    .sb-level::before {
        content: '';
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--amber);
    }

    .sb-level.is-guest {
        background: rgba(255,255,255,0.10);
        color: rgba(255,255,255,0.7);
    }

        .sb-level.is-guest::before {
            background: rgba(255,255,255,0.5);
        }

/* ---- toggle button ---- */
.sb-toggle {
    width: 100%;
    border: none;
    cursor: pointer;
    background: var(--white);
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
    transition: background .15s ease;
}

    .sb-toggle:hover {
        background: #FAFBFC;
    }

    .sb-toggle:focus-visible {
        outline: 2px solid var(--amber);
        outline-offset: -2px;
    }

.sb-toggle-label {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sb-toggle-icon {
    width: 18px;
    height: 18px;
    color: var(--navy-brand);
    flex: none;
}

.sb-chevron {
    width: 16px;
    height: 16px;
    color: var(--ink-soft);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
    flex: none;
}

.sb-card.is-open .sb-chevron {
    transform: rotate(180deg);
}

/* ---- expandable menu ---- */
.sb-menu-wrap {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .38s cubic-bezier(.4,0,.2,1);
    border-top: 1px solid transparent;
}

.sb-card.is-open .sb-menu-wrap {
    grid-template-rows: 1fr;
    border-top: 1px solid var(--sb-border-menu);
}

.sb-menu-inner {
    overflow: hidden;
}

.sb-menu {
    list-style: none;
    margin: 0;
    padding: 8px;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .28s ease .06s, transform .28s ease .06s;
}

.sb-card.is-open .sb-menu {
    opacity: 1;
    transform: translateY(0);
    background: #fff;
}

.sb-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border-radius: var(--radius-md);
    color: var(--ink);
    text-decoration: none;
    font-size: 13.5px;
    transition: background .15s ease;
}

    .sb-menu-item:hover {
        background: var(--amber-soft);
    }

    .sb-menu-item:focus-visible {
        outline: 2px solid var(--amber);
        outline-offset: 1px;
    }

.sb-menu-icon {
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: 9px;
    background: #F3F5F8;
    color: var(--navy-brand);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .sb-menu-icon svg {
        width: 16px;
        height: 16px;
    }

.sb-menu-text {
    min-width: 0;
}

.sb-menu-title {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sb-menu-sub {
    font-size: 11px;
    color: var(--ink-soft);
    margin-top: 1px;
}

.sb-divider {
    height: 1px;
    background: var(--sb-border-menu);
    margin: 6px 4px;
}

.sb-menu-item.is-danger {
    color: #C0392B;
}

    .sb-menu-item.is-danger .sb-menu-icon {
        background: #FBEAE8;
        color: #C0392B;
    }

    .sb-menu-item.is-danger:hover {
        background: #FBEAE8;
    }



.sb-auth-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}
.sb-btn {
    flex: 1;
    text-align: center;
    padding: 0px 15px;
    border-radius: 13px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.sb-btn-login {
    background-color: #d1e0f8;
    border: 1px solid #0f223800;
    color: #112944;
}

    .sb-btn-login:hover {
        background-color: rgb(105 125 148);
        color: #fafafa;
    }

.sb-btn-register {
    background-color: var(--sb-amber, #E2932C);
    border: 1px solid var(--sb-amber, #E2932C);
    color: #0A1626;
}

    .sb-btn-register:hover {
        background-color: #C97A1D;
        border-color: #C97A1D;
    }

.sb-dot {
    display: flex;
    align-items: center;
    justify-content: center;
}

.sb-guest-icon {
    width: 34px;
    height: 34px;
    color: #ffffff;
}
/* honor reduced motion */
@media (prefers-reduced-motion: reduce) {
    .sb-menu-wrap, .sb-menu, .sb-chevron {
        transition: none;
    }
}