/* Modern user menu styles - assets/css/menu_user.css */
:root{
    --menu-bg: #ffffff;
    --muted: #6b7280;
    --accent: #0ea5e9; /* sky-500 */
    --accent-2: #0369a1; /* darker */
    --card-shadow: 0 6px 20px rgba(2,6,23,0.08);
    --radius: 12px;
    --gap: 10px;
}

.user-menu{
    background: var(--menu-bg);
    border-radius: var(--radius);
    box-shadow: var(--card-shadow);
    padding: 14px;
    max-width: 360px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    position: sticky;
    top: 20px;
}

.user-menu .title-user{
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    padding: 6px 6px 12px 6px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: url();
    border-radius: unset;
    text-align: unset;
}

.user-menu .title-user.title-bar {
    justify-content: start;
    gap: 14px;
    align-items: center;
}

.user-menu .title-user span{display:block;color: #000;}

.list_mananger{
    list-style: none;
    margin: 0;
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    border: none;
    padding: 0;
    border-radius: 0;
}

.list_mananger li{margin:0;border: none;margin-bottom: 5px;}

a.sty_list{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    color: #0f172a;
    text-decoration: none;
    background: transparent;
    transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, color .12s ease;
    border: 1px solid transparent;
    font-size: 14px;
    margin: 0;
    border: none;
}

a.sty_list:hover{
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(2,6,23,0.06);
    background: linear-gradient(180deg, #f8fafc, #ffffff);
}

a.sty_list .label{flex:1}

/* active */
a.sty_list.act{
    background: linear-gradient(90deg, #ef9911, #ef99115e);
    color: #fff !important;
    box-shadow: 0 8px 22px rgb(239 153 17 / 17%);
    border: none;
}

/* small meta style used for rank */
.sty_list.rank{
    display: block;
    padding: 10px 12px;
    border-radius: 10px;
    background: linear-gradient(90deg,#f8fafc,#fff);
    color: #0b1220;
    border: 1px solid #eef2f7;
    font-size: 13px;
}

.sty_list .point-rank{
    display:inline-block;
    margin-left:8px;
    font-weight:600;
    color: var(--muted);
    font-size: 13px;
}

/* badge for membership name */
.sty_list .badge{
    background: rgba(14,165,233,0.12);
    color: var(--accent-2);
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight:600;
}

/* responsive: collapse width on small screens */
@media (max-width:480px){
    .user-menu{max-width:100%; padding:10px}
    a.sty_list{padding:10px}
}