/* ==========================================================
   SIDEBAR
========================================================== */

.png-sidebar{

    width:300px;

    background:#ffffff;

    border-right:1px solid #E5E7EB;

    display:flex;

    flex-direction:column;

    padding:26px;

    flex-shrink:0;

    position:fixed;

    top:0;

    left:0;

    height:100vh;

    overflow-y:auto;

    z-index:100;

}

/* ==========================================================
   LOGO
========================================================== */

.logo{

    display:flex;

    align-items:center;

    gap:14px;

    margin-bottom:42px;

}

.logo-icon{

    width:52px;

    height:52px;

    border-radius:16px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(
        135deg,
        #0E6544,
        #179B69
    );

    color:white;

    box-shadow:
        0 10px 25px rgba(14,101,68,.20);

}

.logo-icon svg{

    width:24px;

    height:24px;

}

.logo-text h2{

    margin:0;

    font-size:20px;

    font-weight:700;

    color:#111827;

}

.logo-text span{

    display:block;

    margin-top:3px;

    color:#64748B;

    font-size:13px;

}

/* ==========================================================
   MENU
========================================================== */

.png-sidebar nav{

    display:flex;

    flex-direction:column;

    gap:8px;

}

/* ==========================================================
   LINKS
========================================================== */

.menu-link{

    display:flex;

    align-items:center;

    gap:14px;

    padding:14px 16px;

    border-radius:14px;

    text-decoration:none;

    color:#475569;

    font-weight:600;

    transition:.25s;

    position:relative;

}

.menu-link span{

    white-space:nowrap;

}

.menu-link svg{

    width:20px;

    height:20px;

    flex-shrink:0;

}

/* ==========================================================
   HOVER
========================================================== */

.menu-link:hover{

    background:#F8FAFC;

    color:#111827;

    transform:translateX(3px);

}

/* ==========================================================
   ACTIVE
========================================================== */

.menu-link.active{

    background:#F0F9F5;

    color:#0E6544;

}

.menu-link.active svg{

    color:#0E6544;

}

/* ==========================================================
   FOOTER
========================================================== */

.sidebar-footer{

    margin-top:auto;

    padding-top:30px;

    border-top:1px solid #EEF2F7;

    font-size:13px;

    color:#94A3B8;

}

/* ==========================================================
   ACCOUNT SECTION
========================================================== */

.sidebar-account{

    padding:16px;

    margin-bottom:20px;

    border:1px solid #EEF2F7;

    border-radius:14px;

    background:#F8FAFC;

}

.account-info{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:14px;

}

.account-avatar{

    width:36px;

    height:36px;

    border-radius:50%;

    background:#0E6544;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:700;

    font-size:15px;

    flex-shrink:0;

}

.account-details{

    display:flex;

    flex-direction:column;

    min-width:0;

}

.account-name{

    font-size:14px;

    font-weight:600;

    color:#111827;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}

.account-logout{

    font-size:12px;

    color:#94A3B8;

    text-decoration:none;

}

.account-logout:hover{

    color:#EF4444;

}

.account-credits{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:10px 12px;

    background:#fff;

    border:1px solid #E5E7EB;

    border-radius:10px;

    margin-bottom:10px;

}

.credits-label{

    font-size:12px;

    font-weight:600;

    color:#64748B;

    text-transform:uppercase;

    letter-spacing:.03em;

}

.credits-value{

    font-size:16px;

    font-weight:700;

    color:#0E6544;

}

.account-listings-left{

    text-align:center;

    font-size:12px;

    color:#94A3B8;

    margin:-4px 0 10px;

}

.account-buy-credits{

    display:block;

    text-align:center;

    background:#D97706;

    color:#fff;

    text-decoration:none;

    font-size:13px;

    font-weight:600;

    padding:9px;

    border-radius:9px;

    transition:.2s;

}

.account-buy-credits:hover{

    background:#B45309;

    color:#fff;

}

.account-redeem-toggle{

    display:block;

    width:100%;

    box-sizing:border-box;

    text-align:center;

    background:transparent;

    color:#D97706;

    border:1px solid #D97706;

    font-size:13px;

    font-weight:600;

    padding:8px;

    border-radius:9px;

    margin-top:8px;

    cursor:pointer;

    transition:.2s;

}

.account-redeem-toggle:hover{

    background:#FFFBEB;

}

.account-redeem-form{

    margin-top:10px;

    display:flex;

    flex-direction:column;

    gap:8px;

}

.account-redeem-form input{

    width:100%;

    box-sizing:border-box;

    padding:8px 10px;

    border:1px solid #E5E7EB;

    border-radius:8px;

    font-size:13px;

    text-transform:uppercase;

}

.account-redeem-submit{

    width:100%;

    box-sizing:border-box;

    background:#111827;

    color:#fff;

    border:none;

    padding:8px;

    border-radius:8px;

    font-size:13px;

    font-weight:600;

    cursor:pointer;

}

.account-redeem-submit:disabled{

    opacity:.6;

    cursor:default;

}

.account-redeem-message{

    font-size:12px;

    color:#6B7280;

}

.account-redeem-message.success{

    color:#0E6544;

}

.account-redeem-message.error{

    color:#B91C1C;

}

.account-login-open-btn{

    display:block;

    width:100%;

    box-sizing:border-box;

    text-align:center;

    background:#2563EB;

    color:#fff;

    border:none;

    outline:none;

    appearance:none;

    -webkit-appearance:none;

    text-decoration:none;

    font-size:14px;

    font-weight:600;

    padding:11px;

    border-radius:10px;

    cursor:pointer;

    transition:.2s;

}

.account-login-open-btn:hover{

    background:#1D4ED8;

    color:#fff;

}
.account-delete-link{

    display:block;

    width:100%;

    background:none;

    border:none;

    text-align:center;

    margin-bottom:14px;

    font-size:11.5px;

    color:#B0BEB7;

    cursor:pointer;

    transition:.2s;

}

.account-delete-link:hover{

    color:#DC2626;

}