/* TOPMET 2026.221 — kompaktowy przycisk konta premium.
   Role pozostają wyłącznie w rozwijanym menu użytkownika. */
.app-topbar .user-menu-button.tm-account-trigger{
    display:inline-flex;align-items:center;justify-content:flex-start;
    gap:11px;max-width:min(330px, 45vw);min-height:50px;
    padding:5px 9px 5px 5px;border:1px solid #e9e6dc;border-radius:999px;
    background:linear-gradient(145deg,#fff 0%,#faf9f5 100%);
    color:#262626;box-shadow:0 3px 11px rgba(29,29,23,.035);
    text-align:left;transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.app-topbar .user-menu-button.tm-account-trigger::after{display:none!important}
.app-topbar .user-menu-button.tm-account-trigger:hover,
.app-topbar .user-menu-button.tm-account-trigger[aria-expanded="true"]{
    transform:none;background:#fff;border-color:#d8c96e;
    box-shadow:0 5px 17px rgba(35,35,28,.09);
}
.app-topbar .user-menu-button.tm-account-trigger:focus-visible{
    outline:2px solid #a88b00;outline-offset:3px;
}
.app-topbar .tm-account-trigger .user-avatar{
    flex:0 0 40px;width:40px;height:40px;border-radius:50%;
    background:#ffe600;color:#262626;font-size:13px;font-weight:800;
    box-shadow:none;
}
.app-topbar .tm-account-trigger .user-avatar::after{
    content:"";position:absolute;right:0;bottom:0;width:10px;height:10px;
    border:2px solid #fff;border-radius:50%;background:#259966;
}
.app-topbar .tm-account-trigger .user-meta{
    display:flex;flex:1 1 auto;min-width:0;gap:3px;align-items:flex-start;
    line-height:1.16;
}
.app-topbar .tm-account-trigger .user-meta-kicker{
    font-size:9px;line-height:1.1;letter-spacing:.11em;
    font-weight:800;text-transform:uppercase;color:#837225;
}
.app-topbar .tm-account-trigger .user-meta strong{
    display:block;max-width:220px;overflow:hidden;text-overflow:ellipsis;
    white-space:nowrap;font-size:13px;line-height:1.2;
    font-weight:750;color:#242424;letter-spacing:-.015em;
}
.app-topbar .tm-account-trigger .tm-account-chevron{
    display:grid;place-items:center;flex:0 0 27px;width:27px;height:27px;
    background:#f3f1e7;border:1px solid #eeeadb;border-radius:50%;
    color:#73621e;transition:transform .18s ease, background .18s ease;
}
.app-topbar .tm-account-trigger .tm-account-chevron i{font-size:11px;line-height:1}
.app-topbar .tm-account-trigger[aria-expanded="true"] .tm-account-chevron{
    background:#fff3a8;transform:rotate(180deg);
}
@media(max-width:575.98px){
    .app-topbar .user-menu-button.tm-account-trigger{max-width:min(230px,55vw);gap:7px;min-height:46px}
    .app-topbar .tm-account-trigger .user-avatar{width:36px;height:36px;flex-basis:36px}
    .app-topbar .tm-account-trigger .user-meta strong{font-size:12px;max-width:130px}
    .app-topbar .tm-account-trigger .tm-account-chevron{width:23px;height:23px;flex-basis:23px}
}
@media(prefers-reduced-motion:reduce){
    .app-topbar .user-menu-button.tm-account-trigger,
    .app-topbar .tm-account-trigger .tm-account-chevron{transition:none}
}

/* Etap 222 — wspólny wygląd przycisku przed i po zalogowaniu. */
.app-topbar .tm-account-trigger.is-login .user-avatar::after{background:#a58d1c}
.app-topbar .tm-account-trigger.is-login .user-avatar i{font-size:18px;line-height:1}
.app-topbar .tm-account-trigger.is-login .user-meta strong{font-weight:750}