/* ── Change-list KPI grid ─────────────────────────────────── */
.cl-kpi-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}
@media (min-width: 768px)  { .cl-kpi-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .cl-kpi-grid { grid-template-columns: repeat(6, 1fr); } }

.cl-kpi-card {
    display: flex;
    align-items: center;
    gap: .875rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: .875rem;
    padding: 1rem 1.125rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
    transition: box-shadow .15s, transform .15s;
}
.cl-kpi-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.09); transform: translateY(-1px); }
.dark .cl-kpi-card { background: #1e293b; border-color: #334155; box-shadow: 0 1px 3px rgba(0,0,0,.3); }

/* left accent borders */
.cl-kpi-blue    { border-left: 3px solid #0ea5e9; }
.cl-kpi-rose    { border-left: 3px solid #f43f5e; }
.cl-kpi-emerald { border-left: 3px solid #10b981; }
.cl-kpi-amber   { border-left: 3px solid #f59e0b; }
.cl-kpi-violet  { border-left: 3px solid #8b5cf6; }
.cl-kpi-teal    { border-left: 3px solid #14b8a6; }

/* icon wrapper */
.cl-kpi-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: .625rem;
    flex-shrink: 0;
}
.cl-kpi-icon-wrap .material-symbols-outlined { font-size: 1.25rem; }

.cl-kpi-icon-blue    { background: #e0f2fe; color: #0284c7; }
.cl-kpi-icon-rose    { background: #ffe4e6; color: #e11d48; }
.cl-kpi-icon-emerald { background: #d1fae5; color: #059669; }
.cl-kpi-icon-amber   { background: #fef3c7; color: #d97706; }
.cl-kpi-icon-violet  { background: #ede9fe; color: #7c3aed; }
.cl-kpi-icon-teal    { background: #ccfbf1; color: #0f766e; }

.dark .cl-kpi-icon-blue    { background: rgba(14,165,233,.15);  color: #38bdf8; }
.dark .cl-kpi-icon-rose    { background: rgba(244,63,94,.15);   color: #fb7185; }
.dark .cl-kpi-icon-emerald { background: rgba(16,185,129,.15);  color: #34d399; }
.dark .cl-kpi-icon-amber   { background: rgba(245,158,11,.15);  color: #fbbf24; }
.dark .cl-kpi-icon-violet  { background: rgba(139,92,246,.15);  color: #a78bfa; }
.dark .cl-kpi-icon-teal    { background: rgba(20,184,166,.15);  color: #2dd4bf; }

/* body / text */
.cl-kpi-body  { min-width: 0; }
.cl-kpi-label {
    font-size: .6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #64748b;
    white-space: nowrap;
}
.dark .cl-kpi-label { color: #94a3b8; }
.cl-kpi-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dark .cl-kpi-value { color: #f1f5f9; }
.cl-kpi-sub   { font-size: .6875rem; color: #64748b; margin-top: .0625rem; }
.dark .cl-kpi-sub { color: #94a3b8; }

/* inline positive / negative deltas */
.cl-kpi-positive { color: #059669; }
.cl-kpi-negative { color: #e11d48; }
.dark .cl-kpi-positive { color: #34d399; }
.dark .cl-kpi-negative { color: #fb7185; }

/* ── Date-range bar ───────────────────────────────────────── */
.cl-range-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.25rem;
}

/* preset pills */
.cl-range-pills { display: flex; flex-wrap: wrap; gap: .375rem; flex: 1; }

.cl-pill {
    display: inline-flex;
    align-items: center;
    padding: .3rem .75rem;
    font-size: .8125rem;
    font-weight: 500;
    color: #475569;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 9999px;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s, border-color .15s, color .15s;
    white-space: nowrap;
}
.cl-pill:hover { background: #f1f5f9; border-color: #cbd5e1; color: #0f172a; }
.dark .cl-pill { background: rgba(255,255,255,.05); border-color: #334155; color: #94a3b8; }
.dark .cl-pill:hover { background: rgba(255,255,255,.09); border-color: #475569; color: #e2e8f0; }

.cl-pill-active {
    background: #0ea5e9;
    border-color: #0ea5e9;
    color: #fff;
}
.cl-pill-active:hover { background: #0284c7; border-color: #0284c7; color: #fff; }
.dark .cl-pill-active { background: #0ea5e9; border-color: #0ea5e9; color: #fff; }

/* custom date form */
.cl-custom-wrap {
    display: none;
    flex-wrap: wrap;
    align-items: center;
    gap: .375rem;
}
.cl-custom-wrap.is-visible { display: flex; }

.cl-date-input {
    padding: .3rem .6rem;
    font-size: .8125rem;
    border: 1px solid #e2e8f0;
    border-radius: .5rem;
    background: #fff;
    color: #1e293b;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.cl-date-input:focus { border-color: #0ea5e9; box-shadow: 0 0 0 3px rgba(14,165,233,.15); }
.dark .cl-date-input { background: #1e293b; border-color: #334155; color: #f1f5f9; }

.cl-date-sep { font-size: .8125rem; color: #94a3b8; }

.cl-apply-btn {
    display: inline-flex;
    align-items: center;
    padding: .3rem .75rem;
    font-size: .8125rem;
    font-weight: 500;
    color: #fff;
    background: #0ea5e9;
    border: none;
    border-radius: .5rem;
    cursor: pointer;
    transition: background .15s;
}
.cl-apply-btn:hover { background: #0284c7; }

/* date badge (right side summary) */
.cl-date-badge {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    font-size: .8125rem;
    font-weight: 500;
    color: #64748b;
    background: rgba(0,0,0,.04);
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 9999px;
    padding: .3rem .75rem;
    white-space: nowrap;
    margin-left: auto;
}
.dark .cl-date-badge { color: #94a3b8; background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); }

.cl-days-count { font-size: .75rem; color: #94a3b8; }

/* ── Theme switcher popover ──────────────────────────────── */
.ts-wrap { position: relative; }

.ts-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: .5rem;
    border: none;
    background: none;
    cursor: pointer;
    color: #64748b;
    transition: background .15s, color .15s;
}
.ts-trigger:hover { background: #f1f5f9; color: #0f172a; }
.dark .ts-trigger { color: #94a3b8; }
.dark .ts-trigger:hover { background: rgba(255,255,255,.08); color: #f1f5f9; }
.ts-icon { font-size: 1.25rem !important; }

.ts-popover {
    position: absolute;
    top: calc(100% + .5rem);
    right: 0;
    min-width: 148px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: .75rem;
    box-shadow: 0 8px 30px rgba(0,0,0,.12);
    z-index: 9999;
    overflow: hidden;
    padding: .375rem;
    transform-origin: top right;
}
.dark .ts-popover {
    background: #1e293b;
    border-color: #334155;
    box-shadow: 0 8px 30px rgba(0,0,0,.45);
}

.ts-option {
    display: flex;
    align-items: center;
    gap: .625rem;
    width: 100%;
    padding: .5rem .625rem;
    font-size: .8125rem;
    font-weight: 500;
    color: #475569;
    background: none;
    border: none;
    border-radius: .5rem;
    cursor: pointer;
    text-align: left;
    transition: background .1s, color .1s;
}
.ts-option:hover { background: #f1f5f9; color: #0f172a; }
.dark .ts-option { color: #94a3b8; }
.dark .ts-option:hover { background: rgba(255,255,255,.07); color: #f1f5f9; }

.ts-option-active { color: #0284c7 !important; }
.dark .ts-option-active { color: #38bdf8 !important; }
.ts-option-active .ts-option-icon { color: #0284c7; }
.dark .ts-option-active .ts-option-icon { color: #38bdf8; }

.ts-option-icon { font-size: 1rem !important; color: #94a3b8; flex-shrink: 0; }
.ts-option:hover .ts-option-icon { color: #475569; }
.dark .ts-option:hover .ts-option-icon { color: #cbd5e1; }
.ts-option-label { flex: 1; }
.ts-check { font-size: .875rem !important; color: #0284c7; margin-left: auto; }
.dark .ts-check { color: #38bdf8; }

/* ── Sticky topbar ───────────────────────────────────────── */
.gw-header {
    position: sticky;
    top: 0;
    z-index: 50;
}

/* ── Content area top spacing (below sticky header) ─────── */
#content {
    padding-top: 1.5rem;
}

/* ── Global search bar ───────────────────────────────────── */
.gw-search-wrap {
    position: relative;
    flex: 1;
    max-width: 480px;
    margin: 0 1rem;
}
.gw-search-box {
    position: relative;
    display: flex;
    align-items: center;
}
.gw-search-icon {
    position: absolute;
    left: .75rem;
    font-size: 1.125rem !important;
    color: #94a3b8;
    pointer-events: none;
    user-select: none;
}
.gw-search-input {
    width: 100%;
    padding: .5rem 3.5rem .5rem 2.5rem;
    font-size: .875rem;
    color: #1e293b;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: .625rem;
    outline: none;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.gw-search-input::placeholder { color: #94a3b8; }
.gw-search-input:focus {
    border-color: #0ea5e9;
    box-shadow: 0 0 0 3px rgba(14,165,233,.12);
    background: #fff;
}
.dark .gw-search-input {
    background: rgba(255,255,255,.06);
    border-color: #334155;
    color: #f1f5f9;
}
.dark .gw-search-input::placeholder { color: #475569; }
.dark .gw-search-input:focus {
    border-color: #0ea5e9;
    background: rgba(255,255,255,.09);
}
.gw-search-shortcut {
    position: absolute;
    right: .625rem;
    display: inline-flex;
    align-items: center;
    padding: .125rem .4rem;
    font-size: .6875rem;
    font-family: inherit;
    font-weight: 500;
    color: #94a3b8;
    background: #e2e8f0;
    border: 1px solid #cbd5e1;
    border-radius: .3125rem;
    cursor: pointer;
    user-select: none;
}
.dark .gw-search-shortcut {
    background: rgba(255,255,255,.08);
    border-color: #334155;
    color: #475569;
}
/* results dropdown */
.gw-search-results {
    position: absolute;
    top: calc(100% + .5rem);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: .875rem;
    box-shadow: 0 12px 40px rgba(0,0,0,.13);
    z-index: 200;
    overflow: hidden;
    max-height: 380px;
    overflow-y: auto;
}
.dark .gw-search-results {
    background: #1e293b;
    border-color: #334155;
    box-shadow: 0 12px 40px rgba(0,0,0,.45);
}
.gw-sr-loading, .gw-sr-empty {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .875rem 1rem;
    font-size: .8125rem;
    color: #94a3b8;
}
.gw-sr-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .625rem 1rem;
    font-size: .8125rem;
    text-decoration: none;
    color: #334155;
    border-bottom: 1px solid #f1f5f9;
    transition: background .1s;
}
.dark .gw-sr-item { color: #cbd5e1; border-bottom-color: rgba(255,255,255,.04); }
.gw-sr-item:last-of-type { border-bottom: none; }
.gw-sr-item:hover, .gw-sr-item.active { background: #f0f9ff; color: #0284c7; }
.dark .gw-sr-item:hover, .dark .gw-sr-item.active { background: rgba(14,165,233,.1); color: #38bdf8; }
.gw-sr-icon { font-size: .9375rem !important; color: #94a3b8; flex-shrink: 0; }
.gw-sr-item:hover .gw-sr-icon, .gw-sr-item.active .gw-sr-icon { color: #0ea5e9; }
.gw-sr-title { font-weight: 600; }
.gw-sr-sep { color: #cbd5e1; font-size: .75rem; }
.gw-sr-desc { color: #64748b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.dark .gw-sr-desc { color: #94a3b8; }
.gw-sr-hint {
    padding: .5rem 1rem;
    border-top: 1px solid #f1f5f9;
    background: #f8fafc;
}
.dark .gw-sr-hint { border-top-color: rgba(255,255,255,.04); background: rgba(255,255,255,.03); }
.gw-sr-hint-text { font-size: .6875rem; color: #94a3b8; }

/* ── Notification bell ───────────────────────────────────── */
.notif-bell-wrap { position: relative; }
.notif-bell {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: .5rem;
    cursor: pointer;
    color: #64748b;
    position: relative;
    transition: background .15s, color .15s;
    text-decoration: none;
}
.notif-bell:hover { background: #f1f5f9; color: #0f172a; }
.dark .notif-bell { color: #94a3b8; }
.dark .notif-bell:hover { background: rgba(255,255,255,.08); color: #f1f5f9; }
.notif-bell .material-symbols-outlined { font-size: 1.25rem !important; }
.notif-badge {
    position: absolute;
    top: .0625rem;
    right: .0625rem;
    min-width: 1rem;
    height: 1rem;
    padding: 0 .25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ef4444;
    color: #fff;
    font-size: .5625rem;
    font-weight: 700;
    border-radius: 9999px;
    border: 2px solid #fff;
    line-height: 1;
}
.dark .notif-badge { border-color: #0f172a; }
/* backdrop */
.notif-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9998;
}
/* panel */
.notif-panel {
    position: fixed;
    top: 4.25rem;
    right: 1rem;
    width: 360px;
    max-height: calc(100vh - 5.5rem);
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    box-shadow: 0 20px 60px rgba(0,0,0,.14);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.dark .notif-panel {
    background: #1e293b;
    border-color: #334155;
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
/* panel header */
.notif-hdr {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .875rem 1rem;
    border-bottom: 1px solid #f1f5f9;
    flex-shrink: 0;
}
.dark .notif-hdr { border-bottom-color: #334155; }
.notif-hdr-icon { font-size: 1.125rem !important; color: #0ea5e9; flex-shrink: 0; }
.notif-hdr-title { font-size: .875rem; font-weight: 600; color: #0f172a; flex: 1; }
.dark .notif-hdr-title { color: #f1f5f9; }
.notif-hdr-count { font-size: .75rem; color: #0ea5e9; font-weight: 500; }
.notif-hdr-btn {
    font-size: .75rem;
    color: #0ea5e9;
    background: none;
    border: none;
    cursor: pointer;
    padding: .25rem .5rem;
    border-radius: .375rem;
    transition: background .15s;
}
.notif-hdr-btn:hover { background: #e0f2fe; }
.dark .notif-hdr-btn:hover { background: rgba(14,165,233,.15); }
.notif-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    background: none;
    border: none;
    border-radius: .375rem;
    cursor: pointer;
    color: #94a3b8;
    transition: background .15s, color .15s;
}
.notif-close:hover { background: #f1f5f9; color: #475569; }
.dark .notif-close:hover { background: rgba(255,255,255,.08); color: #e2e8f0; }
/* filter tabs */
.notif-tabs {
    display: flex;
    gap: .25rem;
    padding: .625rem 1rem;
    border-bottom: 1px solid #f1f5f9;
    overflow-x: auto;
    flex-shrink: 0;
    scrollbar-width: none;
}
.notif-tabs::-webkit-scrollbar { display: none; }
.dark .notif-tabs { border-bottom-color: #334155; }
.notif-tab {
    display: inline-flex;
    align-items: center;
    padding: .25rem .625rem;
    font-size: .6875rem;
    font-weight: 500;
    color: #64748b;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 9999px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, color .15s;
}
.notif-tab:hover { background: #f1f5f9; color: #334155; }
.dark .notif-tab { background: rgba(255,255,255,.05); border-color: #334155; color: #94a3b8; }
.dark .notif-tab:hover { background: rgba(255,255,255,.08); color: #e2e8f0; }
.notif-tab.active { background: #0ea5e9; border-color: #0ea5e9; color: #fff; }
.dark .notif-tab.active { background: #0ea5e9; border-color: #0ea5e9; color: #fff; }
/* list */
.notif-list { flex: 1; overflow-y: auto; }
.notif-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 2rem;
    color: #94a3b8;
    font-size: .8125rem;
}
.notif-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 2.5rem 1rem;
    color: #94a3b8;
    text-align: center;
}
.notif-empty-icon { font-size: 2.25rem !important; opacity: .35; }
.notif-empty-text { font-size: .8125rem; }
/* items */
.notif-item {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .875rem 1rem;
    border-bottom: 1px solid #f8fafc;
    cursor: pointer;
    transition: background .1s;
}
.dark .notif-item { border-bottom-color: rgba(255,255,255,.04); }
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: #f8fafc; }
.dark .notif-item:hover { background: rgba(255,255,255,.04); }
.notif-item.unread { background: #f0f9ff; }
.dark .notif-item.unread { background: rgba(14,165,233,.07); }
/* type icons */
.notif-type-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: .5rem;
    flex-shrink: 0;
}
.notif-type-icon .material-symbols-outlined { font-size: 1rem !important; }
.nti-draw        { background: #e0f2fe; color: #0284c7; }
.nti-balance     { background: #fef3c7; color: #d97706; }
.nti-new-draw    { background: #d1fae5; color: #059669; }
.nti-system      { background: #f3f4f6; color: #6b7280; }
.nti-claim       { background: #ede9fe; color: #7c3aed; }
.nti-winner      { background: #fef3c7; color: #d97706; }
.nti-transaction { background: #ccfbf1; color: #0f766e; }
.dark .nti-draw        { background: rgba(14,165,233,.15); color: #38bdf8; }
.dark .nti-balance     { background: rgba(245,158,11,.15); color: #fbbf24; }
.dark .nti-new-draw    { background: rgba(16,185,129,.15); color: #34d399; }
.dark .nti-system      { background: rgba(107,114,128,.12); color: #9ca3af; }
.dark .nti-claim       { background: rgba(139,92,246,.15); color: #a78bfa; }
.dark .nti-winner      { background: rgba(245,158,11,.15); color: #fbbf24; }
.dark .nti-transaction { background: rgba(20,184,166,.15); color: #2dd4bf; }
/* body */
.notif-body { flex: 1; min-width: 0; }
.notif-title-row { display: flex; align-items: center; gap: .375rem; margin-bottom: .125rem; }
.notif-title { font-size: .8125rem; font-weight: 600; color: #0f172a; }
.dark .notif-title { color: #f1f5f9; }
.notif-dot { width: .4375rem; height: .4375rem; border-radius: 50%; background: #0ea5e9; flex-shrink: 0; }
.notif-msg { font-size: .75rem; color: #475569; line-height: 1.45; margin: 0; }
.dark .notif-msg { color: #94a3b8; }
.notif-meta { display: flex; align-items: center; gap: .4rem; margin-top: .375rem; flex-wrap: wrap; }
/* type badges */
.notif-type-tag {
    display: inline-flex;
    align-items: center;
    padding: .0625rem .375rem;
    font-size: .5625rem;
    font-weight: 700;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.ntt-draw        { background: #e0f2fe; color: #0284c7; }
.ntt-balance     { background: #fef3c7; color: #d97706; }
.ntt-new-draw    { background: #d1fae5; color: #059669; }
.ntt-system      { background: #f3f4f6; color: #6b7280; }
.ntt-claim       { background: #ede9fe; color: #7c3aed; }
.ntt-winner      { background: #fef3c7; color: #d97706; }
.ntt-transaction { background: #ccfbf1; color: #0f766e; }
.dark .ntt-draw        { background: rgba(14,165,233,.15); color: #38bdf8; }
.dark .ntt-balance     { background: rgba(245,158,11,.15); color: #fbbf24; }
.dark .ntt-new-draw    { background: rgba(16,185,129,.15); color: #34d399; }
.dark .ntt-system      { background: rgba(107,114,128,.12); color: #9ca3af; }
.dark .ntt-claim       { background: rgba(139,92,246,.15); color: #a78bfa; }
.dark .ntt-winner      { background: rgba(245,158,11,.15); color: #fbbf24; }
.dark .ntt-transaction { background: rgba(20,184,166,.15); color: #2dd4bf; }
.notif-recipient { font-size: .6875rem; color: #94a3b8; }
.notif-time { font-size: .6875rem; color: #94a3b8; margin-left: auto; }
/* footer */
.notif-footer {
    display: flex;
    align-items: center;
    padding: .75rem 1rem;
    border-top: 1px solid #f1f5f9;
    flex-shrink: 0;
}
.dark .notif-footer { border-top-color: #334155; }
.notif-footer-link { font-size: .8125rem; color: #0ea5e9; text-decoration: none; }
.notif-footer-link:hover { text-decoration: underline; }
.notif-clear-btn {
    display: flex;
    align-items: center;
    gap: .25rem;
    margin-left: auto;
    font-size: .75rem;
    color: #94a3b8;
    background: none;
    border: none;
    cursor: pointer;
    padding: .25rem .5rem;
    border-radius: .375rem;
    transition: background .15s, color .15s;
}
.notif-clear-btn:hover { background: #fee2e2; color: #dc2626; }
.dark .notif-clear-btn:hover { background: rgba(239,68,68,.15); color: #f87171; }
/* spinner */
.notif-spin { animation: notif-spin-kf .7s linear infinite; display: inline-block; }
@keyframes notif-spin-kf { to { transform: rotate(360deg); } }

/* ── Sidebar user section ─────────────────────────────────── */
.sb-user-section {
    border-top: 1px solid #e2e8f0;
    padding: .5rem .75rem .75rem;
    flex-shrink: 0;
    position: relative;
}
.dark .sb-user-section { border-top-color: #334155; }
.sb-user-btn {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    padding: .625rem .75rem;
    border-radius: .625rem;
    cursor: pointer;
    background: none;
    border: none;
    text-align: left;
    transition: background .15s;
}
.sb-user-btn:hover { background: rgba(0,0,0,.05); }
.dark .sb-user-btn:hover { background: rgba(255,255,255,.07); }
.sb-user-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.125rem;
    height: 2.125rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%);
    color: #fff;
    font-size: .8125rem;
    font-weight: 700;
    flex-shrink: 0;
    letter-spacing: .02em;
}
.sb-user-info { flex: 1; min-width: 0; }
.sb-user-name {
    font-size: .8125rem;
    font-weight: 600;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dark .sb-user-name { color: #f1f5f9; }
.sb-user-role {
    font-size: .6875rem;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dark .sb-user-role { color: #94a3b8; }
.sb-user-caret { font-size: 1rem !important; color: #94a3b8; flex-shrink: 0; }
/* popover */
.sb-user-popover {
    position: absolute;
    bottom: calc(100% + .375rem);
    left: .75rem;
    right: .75rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: .875rem;
    box-shadow: 0 -8px 40px rgba(0,0,0,.11), 0 2px 8px rgba(0,0,0,.07);
    overflow: hidden;
    z-index: 300;
}
.dark .sb-user-popover {
    background: #1e293b;
    border-color: #334155;
    box-shadow: 0 -8px 40px rgba(0,0,0,.5);
}
.sb-user-pop-hdr {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .875rem 1rem;
    border-bottom: 1px solid #f1f5f9;
    background: #f8fafc;
}
.dark .sb-user-pop-hdr { border-bottom-color: #334155; background: rgba(255,255,255,.03); }
.sb-pop-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%);
    color: #fff;
    font-size: 1.125rem;
    font-weight: 700;
    flex-shrink: 0;
}
.sb-pop-name {
    font-size: .875rem;
    font-weight: 600;
    color: #0f172a;
}
.dark .sb-pop-name { color: #f1f5f9; }
.sb-pop-email {
    font-size: .75rem;
    color: #64748b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 180px;
}
.dark .sb-pop-email { color: #94a3b8; }
.sb-user-pop-body { padding: .375rem; }
.sb-pop-item {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .5625rem .75rem;
    font-size: .8125rem;
    color: #334155;
    text-decoration: none;
    border-radius: .5rem;
    transition: background .1s, color .1s;
    cursor: pointer;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
}
.sb-pop-item:hover { background: #f1f5f9; color: #0f172a; }
.dark .sb-pop-item { color: #cbd5e1; }
.dark .sb-pop-item:hover { background: rgba(255,255,255,.07); color: #f1f5f9; }
.sb-pop-item .material-symbols-outlined { font-size: 1rem !important; color: #64748b; flex-shrink: 0; }
.sb-pop-item:hover .material-symbols-outlined { color: #334155; }
.dark .sb-pop-item .material-symbols-outlined { color: #94a3b8; }
.dark .sb-pop-item:hover .material-symbols-outlined { color: #e2e8f0; }
.sb-pop-separator { height: 1px; background: #f1f5f9; margin: .375rem .75rem; }
.dark .sb-pop-separator { background: #334155; }
.sb-pop-item-danger { color: #dc2626 !important; }
.sb-pop-item-danger .material-symbols-outlined { color: #dc2626 !important; }
.sb-pop-item-danger:hover { background: #fee2e2 !important; color: #dc2626 !important; }
.dark .sb-pop-item-danger { color: #f87171 !important; }
.dark .sb-pop-item-danger .material-symbols-outlined { color: #f87171 !important; }
.dark .sb-pop-item-danger:hover { background: rgba(239,68,68,.15) !important; color: #f87171 !important; }