.user-badge-control { display:inline-flex; align-items:center; gap:3px; vertical-align:middle; line-height:1; font-size:14px; font-weight:400; }
.user-badge-control .ki-15 { font-size:15px !important; line-height:1; }
.user-badges { display:inline-flex; align-items:center; gap:3px; }
.user-badges[hidden], .user-badge-panel[hidden] { display:none !important; }
.user-badge-symbol { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; padding:0; border:0; background:none; line-height:1; vertical-align:middle; }
.user-badge-symbol--vip { color:#b77908 !important; }
.user-badge-symbol--oldtimer { color:#198754 !important; }
.user-badge-symbol--administrator { color:#0d6efd !important; }
html.dark .user-badge-symbol--vip { color:#f5c451 !important; }
html.dark .user-badge-symbol--oldtimer { color:#4dbb91 !important; }
html.dark .user-badge-symbol--administrator { color:#60a5fa !important; }
.user-badge-symbol > i, .user-badge-option > i { color:inherit !important; }
.user-badge-add { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; padding:0; border:0; border-radius:50%; color:#6c757d; background:#f0f1f3; flex-shrink:0; }
.user-badge-add:hover { color:#212529; background:#e4e7eb; }
.user-badge-control button:focus-visible, .user-badge-panel button:focus-visible { outline:2px solid #0d6efd; outline-offset:2px; }
.user-badge-panel { position:fixed; z-index:1090; display:flex; flex-direction:column; gap:10px; width:244px; max-width:calc(100vw - 24px); padding:14px; border:1px solid #e5e7eb; border-radius:12px; background:#fff; color:#212529; box-shadow:0 6px 24px rgb(0 0 0 / 14%); font-size:14px; font-weight:400; line-height:1.4; text-align:left; }
.tooltip.user-badge-tooltip { z-index:1100; pointer-events:none; }
.user-badge-panel-heading { display:flex; align-items:center; justify-content:space-between; font-weight:500; }
.user-badge-panel-heading [data-badge-count] { color:#6c757d; font-size:12px; font-weight:400; }
.user-badge-options { display:flex; flex-wrap:wrap; gap:8px; }
.user-badge-option { position:relative; display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; padding:0; border:1px solid transparent; border-radius:9px; background:#f5f6f8; color:#6c757d; }
.user-badge-option[aria-pressed="true"] { border-color:#0d6efd; background:#eaf3ff; }
.user-badge-option:disabled { opacity:.5; cursor:default; }
.user-badge-check { position:absolute; right:1px; bottom:-1px; font-size:12px; font-weight:700; color:#0d6efd; display:none; }
.user-badge-option[aria-pressed="true"] .user-badge-check { display:block; }
.user-badge-feedback:empty { display:none; }
.user-badge-feedback { color:#b02a37; font-size:12px; }
html.dark .user-badge-add { background:#293548; color:#cbd5e1; }
html.dark .user-badge-add:hover { background:#374151; color:#fff; }
html.dark .user-badge-panel { background:#1f2937; color:#e5e7eb; border-color:#374151; }
html.dark .user-badge-option { background:#293548; color:#cbd5e1; }
html.dark .user-badge-option[aria-pressed="true"] { background:#253e60; border-color:#60a5fa; }
html.dark .user-badge-panel-heading [data-badge-count] { color:#9ca3af; }
html.dark .user-badge-feedback { color:#fca5a5; }