/* === User Menu – komponent ujednolicony === */
:root{
/* Dziedziczenie z globalnych zmiennych – jeśli masz inne, zostaw poniższe jak jest */
--um-text: var(--text, #fff);
--um-muted: color-mix(in oklab, var(--um-text) 72%, transparent);
--um-border: rgba(255,255,255,.12);
--um-bg: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
--um-bg-strong: linear-gradient(180deg, #0f1e33, #0c1728);
--um-pill: linear-gradient(145deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}


.user-menu{ position:relative; font:inherit; color:var(--um-text); }


/* przycisk */
.user-menu__btn{
position:relative; z-index:31; display:flex; align-items:center; gap:8px;
height:42px; padding:4px 12px; border-radius:999px;
background: var(--um-bg);
border:1px solid var(--um-border); color:var(--um-text); cursor:pointer;
box-shadow: 0 8px 24px rgba(0,0,0,.35);
transition: box-shadow .2s ease, border-color .2s ease, background .2s ease, transform .12s ease;
}
.user-menu__btn:hover{ transform: translateY(-1px); box-shadow: 0 12px 32px rgba(0,0,0,.45); }
.user-menu__btn:focus-visible{ outline: none; box-shadow: 0 0 0 2px rgba(120,139,255,.55), 0 8px 24px rgba(0,0,0,.35); }


.user-menu__avatar{
width:28px; height:28px; border-radius:999px; object-fit:cover;
box-shadow:0 0 0 2px rgba(255,255,255,.08) inset;
}
.user-menu__name{
max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
font-weight:600; opacity:.95;
}
.user-menu__caret{ width:16px; height:16px; opacity:.75; transition: transform .18s ease }


/* dropdown */
.user-menu__menu{
position:absolute; right:0; top:100%;
margin-top:12px; min-width:145px; display:none; padding:8px;
background: var(--um-bg-strong); border: 1px solid var(--um-border); border-radius: 14px;
box-shadow: 0 10px 26px rgba(0,0,0,.45);
}
.user-menu[data-open="true"] .user-menu__menu{
display:flex; flex-direction:column; gap:10px; animation: menuIn .18s ease forwards;
}
.user-menu[data-open="true"] .user-menu__btn .user-menu__caret{ transform: rotate(180deg) }


/* elementy menu */
.user-menu__item{
display:flex; align-items:center; gap:12px; height:30px; padding:0 14px; margin:0;
border-radius:14px; cursor:pointer; text-decoration:none; color:var(--um-text);
font:inherit; font-weight:600; line-height:1; background: var(--um-pill);
border:1px solid var(--um-border);
box-shadow: 0 10px 26px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.04);
transition: transform .14s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.user-menu__item:hover{ transform: translateY(-1px); background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); box-shadow: 0 14px 32px rgba(0,0,0,.45); }
.user-menu__item:focus-visible{ outline: none; box-shadow: 0 0 0 2px rgba(120,139,255,.55), 0 14px 32px rgba(0,0,0,.45); }
.user-menu__item svg{ flex:0 0 18px; width:18px; height:18px; display:block; transform: translateY(1px); opacity:.95; }


@keyframes menuIn { from { opacity:0; transform: translateY(6px) scale(.98) } to { opacity:1; transform: translateY(0) scale(1) } }