/* Вынесено из sidebar.php. Правьте здесь — страница подключает этот файл. */
    @import url('/fonts/inter/inter.css');

:root {
    --sb-w: 208px;
    --sb-w-mobile: 67px;
    --sb-ease: cubic-bezier(0.2, 0, 0, 1);
    --sb-speed: 0.2s;
}

    /* --- GPU acceleration & layout isolate --- */
    .sidebar {
        --c-void: #05070d; --c-tg: #2AABEE; --c-signal: #00e5a0;
        --c-violet: #9b7bff; --c-gold: #ffc24b; --c-danger: #ff5470;
        --c-text: #f5f8fc; --c-text-muted: #8ba0bd; --c-line: rgba(255,255,255,0.08);
        flex-shrink: 0 !important;
        box-sizing: border-box !important;
        padding: 0 !important;
        flex-direction: column !important;
        border-right: 1px solid var(--c-line) !important;
        font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
        background-color: #030218 !important;
        isolation: isolate !important;
        
        will-change: width !important;
        transform: translateZ(0) !important;
        backface-visibility: hidden !important;
        contain: layout style !important;
        transition: width var(--sb-speed) var(--sb-ease) !important;
        overflow-x: hidden !important;
        scrollbar-width: none !important;
        -webkit-font-smoothing: antialiased !important;
        -moz-osx-font-smoothing: grayscale !important;
    }
    
    .sidebar::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; }

    .sidebar *, .sidebar *::before, .sidebar *::after {
        white-space: nowrap !important;
    }
    .sidebar svg {
        flex-shrink: 0 !important;
    }

    .main {
        box-sizing: border-box !important;
    }
    .layout { display: block !important; }

    /* --- Ambient aurora backdrop --- */
    .sb-aurora { position: absolute !important; inset: 0 !important; z-index: 0 !important; pointer-events: none !important;  }
    .sb-aurora::before {
        content: '' !important; position: absolute !important; inset: -17% !important;
        background:radial-gradient(40% 24% at 50% 0%, rgb(61 189 255 / 26%), transparent 72%), radial-gradient(444% 30% at 25% 16%, rgb(7 255 180 / 20%), transparent 70%), radial-gradient(80% 52% at 85% 64%, rgb(48 246 202 / 22%), transparent 70%), radial-gradient(78% 38% at 5% 75%, rgb(42 210 125 / 13%), transparent 70%), radial-gradient(30% 20% at 50% 100%, rgb(42 213 238 / 7%), transparent 70%) !important;
        animation: sbAuroraDrift 16s ease-in-out infinite alternate !important;
        will-change: transform !important;
    }
    .sb-aurora::after {
        content: '' !important; position: absolute !important; inset: 0 !important; opacity: 0.5 !important;
        background-image:
            radial-gradient(1px 1px at 18% 22%, rgba(255,255,255,0.45) 50%, transparent 51%),
            radial-gradient(1px 1px at 68% 45%, rgba(255,255,255,0.3) 50%, transparent 51%),
            radial-gradient(1px 1px at 40% 68%, rgba(255,255,255,0.35) 50%, transparent 51%),
            radial-gradient(1px 1px at 85% 82%, rgba(255,255,255,0.28) 50%, transparent 51%) !important;
        background-size: 130px 130px !important; background-repeat: repeat !important;
    }
    @keyframes sbAuroraDrift { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(-2%, 1.5%, 0) scale(1.04); } }

    .sidebar-inner { 
        width: 100% !important; 
        box-sizing: border-box !important; 
        display: flex !important; 
        flex-direction: column !important; 
        position: relative !important; 
        z-index: 1 !important; 
        flex: 1 1 auto !important; 
        min-height: 0 !important; 
        transition: padding var(--sb-speed) var(--sb-ease) !important; 
    }
    html, body { overflow-x: hidden !important; }
    @media (prefers-reduced-motion: reduce) { .sidebar *, .sidebar *::before, .sidebar *::after { animation: none !important; transition: none !important; } }

    /* --- Profile block --- */
    .sidebar-user { display: flex !important; flex-direction: column !important; align-items: center !important; width: 100% !important; box-sizing: border-box !important; padding-bottom: 1px !important; text-align: center !important; }

    .sb-avatar-frame { position: relative !important; flex-shrink: 0 !important; transition: width var(--sb-speed) var(--sb-ease), height var(--sb-speed) var(--sb-ease), margin var(--sb-speed) var(--sb-ease) !important; }

    .sb-avatar-glow {
        position: absolute !important; border-radius: 50% !important;
        background: conic-gradient(from 0deg, #31fca3, var(--c-signal), #70ffa1, #0fd2ff, #10ffd0) !important; animation: sbGlowSpin 7s linear infinite !important;
        will-change: transform !important;
    }
    @keyframes sbGlowSpin { to { transform: rotate(360deg); } }

    .sb-xp-ring { position: absolute !important; inset: 0 !important; transform: rotate(-90deg) !important; z-index: 1 !important; }
    .sb-xp-ring-track { fill: none !important; stroke: rgba(5,7,13,0.9) !important; stroke-width: 3 !important; }
    .sb-xp-ring-fill { fill: none !important; stroke: url(#sbXpGrad2) !important; stroke-width: 3 !important; stroke-linecap: round !important; transition: stroke-dashoffset 0.6s ease !important; }
    .sidebar-user .sb-user-avatar { position: absolute !important; border-radius: 50% !important; object-fit: cover !important; border: 2px solid #fbfbfb !important; z-index: 2 !important; transition: width var(--sb-speed) var(--sb-ease), height var(--sb-speed) var(--sb-ease) !important; }

    /* --- Pulse rings --- */
    .sb-pulse-ring {
        position: absolute !important; inset: 2px !important; border-radius: 50% !important;
        border: 1px solid rgba(0, 229, 160, 0.55) !important;
        animation: sbAvatarPulse 2.6s ease-out infinite !important;
        pointer-events: none !important;
    }
    .sb-pulse-ring.delay { animation-delay: 1.3s !important; }
    @keyframes sbAvatarPulse {
        0%   { transform: scale(0.86); opacity: 0.6; }
        100% { transform: scale(1.35); opacity: 0; }
    }

    /* --- Verified badge --- */
    .sb-verified-badge {
        position: absolute !important; right: -2px !important; bottom: -2px !important; z-index: 3 !important; border-radius: 50% !important;
        background: var(--c-tg) !important; border: 2px solid var(--c-void) !important;
        display: flex !important; align-items: center !important; justify-content: center !important;
        box-shadow: 0 0 8px rgba(42,171,238,0.55) !important;
    }
    .sb-verified-badge svg { color: #fff !important; }

    .sb-user-name-row { align-items: center !important; justify-content: center !important; min-width: 0 !important; max-width: 100% !important; }
    .sb-user-name { font-weight: 800 !important; color: var(--c-text) !important; overflow: hidden !important; text-overflow: ellipsis !important; }

    /* --- Level chip --- */
    .sb-level-badge {
        position: absolute !important; left: 51% !important;
        transform: translateX(-50%) !important; align-items: center !important;
        font-family: 'JetBrains Mono', monospace !important; font-weight: 800 !important;
        color: #ffffff !important;
        background: linear-gradient(135deg, #1f3869, #040406c4) !important; border-radius: 20px !important;
        border: 2px solid #ffffff !important;
        box-shadow: 0 2px 10px rgba(255,194,75,0.5), 0 0 14px rgba(255,194,75,0.25) !important;
        letter-spacing: 0.3px !important; z-index: 4 !important;
    }

    /* --- Meta row: @username · ID --- */
    .sb-user-meta-row { justify-content: center !important; flex-wrap: nowrap !important; }
    .sb-user-tag { font-weight: 700 !important; color: #7fd4ff !important; overflow: hidden !important; text-overflow: ellipsis !important; margin: 0 !important; }
    .sb-meta-dot { font-size: 8px !important; color: var(--c-text-muted) !important; }
    .sb-user-id { font-weight: 700 !important; color: #d3e2f5 !important; background: rgba(255,255,255,0.09) !important; border-radius: 5px !important; font-family: 'JetBrains Mono', monospace !important; display: inline-flex !important; align-items: center !important; }
    .sb-id-copy { color: #9fb4d1 !important; cursor: pointer !important; transition: color 0.2s !important; }
    .sb-id-copy:hover { color: var(--c-tg) !important; }

    /* --- Hairline dividers --- */
    .sb-divider { height: 1px !important; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.16) 18%, rgba(255,255,255,0.16) 82%, transparent) !important; flex-shrink: 0 !important; }

    /* --- Full-width XP bar --- */
    .sb-xp-full { margin: 0 0 2px !important; width: 100% !important; }
    .sb-xp-full-label { font-weight: 700 !important; text-transform: uppercase !important; color: #cfe0f5 !important; font-family: 'Manrope', sans-serif !important; }
    .sb-xp-full-pct { font-weight: 800 !important; color: var(--c-signal) !important; font-family: 'JetBrains Mono', monospace !important; }
    .sb-xp-full-track { width: 100% !important; border-radius: 4px !important; background: rgba(255,255,255,0.07) !important; overflow: hidden !important; box-sizing: border-box !important; border: 1px solid var(--c-line) !important; }
    .sb-xp-full-fill { height: 100% !important; border-radius: 4px !important; background: linear-gradient(90deg, var(--c-tg), var(--c-signal) 60%, #89fc3c) !important; box-shadow: 0 0 8px rgba(0,229,160,0.55) !important; }

    /* --- Status cards --- */
    .sb-status-grid { grid-template-columns: 1fr 1fr !important; }
    .sb-status-cell {
        position: relative !important; display: flex !important;
        border-radius: 10px !important;
        
        background: var(--c-cell-bg) !important;
        text-decoration: none !important; color: inherit !important; cursor: pointer !important;
        overflow: hidden !important;
        transition: transform 0.16s ease, border-color 0.16s ease !important;
    }
    .sb-status-cell.tariff { --c-cell-bg: linear-gradient(150deg, rgba(42,171,238,0.22), rgba(42,171,238,0.04)); --c-cell-border: rgba(42,171,238,0.35); }
    .sb-status-cell.tokens { --c-cell-bg: linear-gradient(150deg, rgba(0,229,160,0.22), rgba(255,194,75,0.05)); --c-cell-border: rgba(0,229,160,0.35); }
    .sb-status-cell:hover { transform: translateY(-1px) !important; }
    .sb-status-cell:hover.tariff { border-color: var(--c-tg) !important; box-shadow: 0 0 14px rgba(42,171,238,0.25) !important; }
    .sb-status-cell:hover.tokens {  box-shadow: 0 0 14px rgba(0,229,160,0.25) !important; }
    .sb-status-cell-top { display: flex !important; align-items: center !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.3px !important; color: var(--c-text-muted) !important; flex-shrink: 0 !important; }
    .sb-status-cell-value { font-weight: 800 !important; color: var(--c-text) !important; font-family: 'JetBrains Mono', monospace !important; }

    .sb-tokens-hover {
        position: absolute !important; inset: 0 !important; display: flex !important;
        align-items: center !important; justify-content: center !important; gap: 2px !important;
        background: linear-gradient(135deg, #00d492 0%, #00b8c4 100%) !important;
        opacity: 0 !important; transform: translateY(3px) !important;
        transition: opacity 0.18s ease, transform 0.18s ease !important; font-weight: 800 !important; color: #ffffff !important;
        letter-spacing: 0.3px !important; pointer-events: none !important;
        border-radius: inherit !important;
        text-shadow: 0 1px 3px rgba(0,0,0,0.35) !important;
    }
    .sb-tokens-hover svg { height: 12px !important; color: #ffffff !important; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3)) !important; }
    .sb-status-cell.tokens:hover .sb-tokens-hover { opacity: 1 !important; transform: translateY(0) !important; }

    /* --- Shimmering CTA --- */
    .btn-add-sidebar {
        position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important;
        color: #ffffff !important; text-decoration: none !important; width: 100% !important; box-sizing: border-box !important;
        background: linear-gradient(115deg, var(--c-tg) 0%, var(--c-signal) 35%, var(--c-gold) 65%, var(--c-tg) 100%) !important;
        background-size: 260% 100% !important;
        animation: sbCtaShimmer 5s ease-in-out infinite !important;
        box-shadow: 0 3px 16px rgba(0,229,160,0.28) !important;
        transition: transform 0.15s ease, box-shadow 0.15s ease, padding var(--sb-speed) var(--sb-ease) !important;
    }
    @keyframes sbCtaShimmer { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
    .btn-add-sidebar svg { stroke-width: 3 !important; color: #ffffff !important; }
    
    .btn-add-sidebar span {
        display: inline-block !important;
        overflow: hidden !important;
        opacity: 1 !important;
        transition: max-width var(--sb-speed) var(--sb-ease), opacity 0.15s ease !important;
    }
    .btn-add-sidebar:hover { transform: translateY(-1px) !important; box-shadow: 0 5px 22px rgba(0,229,160,0.42) !important; }

    .sb-menu-label { font-size: 8px !important; font-weight: 700 !important; letter-spacing: 1.4px !important; text-transform: uppercase !important; color: var(--c-text-muted) !important; margin: 0 2px 5px !important; font-family: 'JetBrains Mono', monospace !important; }

    /* --- Navigation --- */
    .sidebar-nav { display: flex !important; flex-direction: column !important; gap: 1px !important; }
    .sidebar .sb-nav-link {
        display: flex !important; align-items: center !important; text-decoration: none !important; color: #a4b6cf !important;
        border-radius: 7px !important; position: relative !important;
        transition: color 0.16s, background 0.16s, padding var(--sb-speed) var(--sb-ease) !important;
    }
    .sidebar .sb-nav-link span { color: inherit !important; }
    .sidebar .sb-nav-link svg { stroke-width: 1.8 !important; color: #7488a6 !important; fill: none !important; stroke: currentColor !important; }

    .sb-nav-badge { margin-left: auto !important; font-family: 'JetBrains Mono', monospace !important; font-size: 8.5px !important; color: var(--c-text-muted) !important; }

    .sidebar .sb-nav-link.promo-nav:not(:hover):not(.active) { color: var(--c-gold) !important; }
    .sidebar .sb-nav-link.promo-nav:not(:hover):not(.active) svg { color: var(--c-gold) !important; }

    .sidebar .sb-nav-link[href="/logout"] { color: var(--c-danger) !important;  }
    .sidebar .sb-nav-link[href="/logout"] svg { color: var(--c-danger) !important; }
    .sidebar .sb-nav-link[href="/logout"]:hover { background: rgba(255,84,112,0.1) !important; }

    .sidebar-nav .sb-nav-link:not([href="/logout"]):hover, .sidebar-nav .sb-nav-link:not([href="/logout"]).active { background: rgba(255,255,255,0.06) !important; color: #fff !important; }
    .sidebar-nav .sb-nav-link:not([href="/logout"]):hover svg, .sidebar-nav .sb-nav-link:not([href="/logout"]).active svg { color: var(--c-tg) !important; }
    .sidebar-nav .sb-nav-link.active { background: rgba(255,255,255,0.055) !important; }
    .sidebar-nav .sb-nav-link.active::before {
        content: '' !important; position: absolute !important; border-radius: 2px !important; background: linear-gradient(180deg, var(--c-tg), var(--c-signal)) !important;
        box-shadow: 0 0 8px rgba(0,229,160,0.6) !important;
    }

    .sidebar .sb-nav-link:focus-visible, .btn-add-sidebar:focus-visible, .sb-id-copy:focus-visible, .sb-toggle-btn:focus-visible { outline: 2px solid var(--c-signal) !important; outline-offset: 2px !important; }

    .sb-separate { height: 1px !important; background: var(--c-line) !important; margin: 2px 4px !important; }
    .sb-image-container { display: none !important; }

    @media (max-width: 992px) {
        .sidebar {
            width: var(--sb-w-mobile) !important; min-width: var(--sb-w-mobile) !important;
            display: block !important; position: fixed !important; top: 0 !important; left: 0 !important;
            height: 100vh !important; padding-top: 40px !important; overflow-y: auto !important; z-index: 500 !important;
        }
        .layout { grid-template-columns: 1fr !important; }
        .main { margin-left: var(--sb-w-mobile) !important; width: calc(100% - var(--sb-w-mobile)) !important; }
        .sidebar-inner { padding: 8px 4px !important; }

        /* --- Свёрнутое (стандартное) состояние на телефоне --- */
       .sb-avatar-frame { width: 52px !important; height: 52px !important; margin-bottom: 7px !important; }
        .sidebar-user .sb-user-avatar { width: 43px !important; height: 43px !important; inset: 5px !important; }
        .sb-avatar-glow { inset: -5px !important; filter: blur(6px) !important; opacity: 0.7 !important; }
        .sb-verified-badge { width: 14px !important; height: 14px !important; }
        .sb-verified-badge svg { width: 7px !important; height: 7px !important; }

        .sb-user-name-row { display: flex !important; }
        .sb-user-name { font-size: 8px !important; max-width: 66px !important; }
        .sb-level-badge { display: inline-flex !important; font-size: 5.5px !important; padding: 1px 4px !important; bottom:-3.5px !important; border-width: 1.3px !important; gap: 1.5px !important;}
        .sb-level-badge svg { width: 6px !important; height: 6px !important; }

        .sb-user-meta-row { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 1px !important; margin-top: 2px !important; }
        .sb-user-tag { font-size: 7px !important; max-width: 66px !important; }
        .sb-meta-dot { display: none !important; }
        .sb-user-id { font-size: 6.5px !important; padding: 1px 3px !important; gap: 2px !important; }
        .sb-id-copy { width: 7px !important; height: 7px !important; }

        .sb-divider { margin: 3px 0 !important; }

        .sb-xp-full { display: block !important; }
        .sb-xp-full-labels { display: flex !important; align-items: baseline !important; justify-content: space-between !important; gap: 2px !important; margin-bottom: 3px !important;  }
        .sb-xp-full-label { font-size: 4.2px !important; letter-spacing: 0.2px !important;  white-space: nowrap !important; text-align: left !important; line-height: 1 !important; }
        .sb-xp-full-pct { font-size: 6px !important; line-height: 1 !important; }
        .sb-xp-full-track { height: 4px !important; }

        /* --- Тариф/Токены: иконка + значение в одну строку, без подписи --- */
        .sb-status-grid { display: flex !important; flex-direction: column !important; gap: 4px !important; }
        .sb-status-cell {
            flex-direction: row !important; align-items: center !important; justify-content: center !important;
            gap: 2px !important; padding: 5px 4px !important;
        }
          .sb-status-grid {  margin: 1px 0 1px !important; }
   
        .sb-status-cell-top { font-size: 0 !important; gap: 0 !important; }
        .sb-status-cell-top svg { width: 13px !important; height: 13px !important; }
        .sb-status-cell-value { font-size: 7px !important; max-width: 58px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
        .sb-tokens-hover { font-size: 0 !important; }
        .sb-tokens-hover svg { width: 13px !important; }

        .sb-menu-label { display: none !important; }
        .sb-nav-badge { display: none !important; }

       .btn-add-sidebar { flex-direction: row !important; font-size: 8px !important; font-weight: 800 !important; gap: 1px !important; padding: 6px 2px !important; margin: 5px 0 6px !important; border-radius: 9px !important; text-align: left !important; }
        .btn-add-sidebar svg { width: 12px !important; height: 12px !important; }
        .btn-add-sidebar span { white-space: normal !important; text-align: left !important; max-width: 48px !important; line-height: 1.15 !important; }
        .sb-add-break { display: none !important; }
        .sidebar .sb-nav-link { flex-direction: column !important; text-align: center !important; gap: 3px !important; padding: 8px 2px !important; font-size: 7.5px !important; font-weight: 700 !important; }
        .sidebar .sb-nav-link span { white-space: normal !important; text-align: center !important; max-width: 54px !important; line-height: 1.2 !important; }
        .sidebar .sb-nav-link svg { width: 16px !important; height: 16px !important; }
        .sidebar-nav .sb-nav-link.active::before { left: 50% !important; top: auto !important; bottom: 0 !important; width: 16px !important; height: 2.5px !important; transform: translateX(-50%) !important; }
    }


/* ===== ФИКСИРОВАННОЕ увеличение +19% для всех десктопных экранов (993px+), БЕЗ vw/clamp/тиров ===== */
@media (min-width: 993px) {


:root {
    --sb-w: 247.5px;
    --sb-w-mobile: 79.7px;
    --sb-ease: cubic-bezier(0.2, 0, 0, 1);
    --sb-speed: 0.2s;
}

    /* --- GPU acceleration & layout isolate --- */
    .sidebar {
        --c-void: #05070d; --c-tg: #2AABEE; --c-signal: #00e5a0;
        --c-violet: #9b7bff; --c-gold: #ffc24b; --c-danger: #ff5470;
        --c-text: #f5f8fc; --c-text-muted: #8ba0bd; --c-line: rgba(255,255,255,0.08);

        top: 61.9px !important; 
        height: calc(100vh - 61.9px) !important;
        width: var(--sb-w) !important;
        flex-shrink: 0 !important;
        box-sizing: border-box !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        position: fixed !important;
        left: 0 !important;
        z-index: 10 !important;
        border-right: 1.2px solid var(--c-line) !important;
        font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
        background-color: #030218 !important;
        isolation: isolate !important;
        
        will-change: width !important;
        transform: translateZ(0) !important;
        backface-visibility: hidden !important;
        contain: layout style !important;
        transition: width var(--sb-speed) var(--sb-ease) !important;
        
        overflow-y: auto !important;
        overflow-x: hidden !important;
        scrollbar-width: none !important;
        -webkit-font-smoothing: antialiased !important;
        -moz-osx-font-smoothing: grayscale !important;
    }
    
    .sidebar::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; }

    .sidebar *, .sidebar *::before, .sidebar *::after {
        white-space: nowrap !important;
    }
    .sidebar svg {
        flex-shrink: 0 !important;
    }

    .main {
        margin-left: var(--sb-w) !important;
        width: calc(100% - var(--sb-w)) !important;
        box-sizing: border-box !important;
    }
    .layout { display: block !important; }

    /* --- Ambient aurora backdrop --- */
    .sb-aurora { position: absolute !important; inset: 0 !important; z-index: 0 !important; pointer-events: none !important;  }
    .sb-aurora::before {
        content: '' !important; position: absolute !important; inset: -17% !important;
        background:radial-gradient(40% 24% at 50% 0%, rgb(61 189 255 / 26%), transparent 72%), radial-gradient(444% 30% at 25% 16%, rgb(7 255 180 / 20%), transparent 70%), radial-gradient(80% 52% at 85% 64%, rgb(48 246 202 / 22%), transparent 70%), radial-gradient(78% 38% at 5% 75%, rgb(42 210 125 / 13%), transparent 70%), radial-gradient(30% 20% at 50% 100%, rgb(42 213 238 / 7%), transparent 70%) !important;
        animation: sbAuroraDrift 16s ease-in-out infinite alternate !important;
        will-change: transform !important;
    }
    .sb-aurora::after {
        content: '' !important; position: absolute !important; inset: 0 !important; opacity: 0.5 !important;
        background-image:
            radial-gradient(1.2px 1.2px at 18% 22%, rgba(255,255,255,0.45) 50%, transparent 51%),
            radial-gradient(1.2px 1.2px at 68% 45%, rgba(255,255,255,0.3) 50%, transparent 51%),
            radial-gradient(1.2px 1.2px at 40% 68%, rgba(255,255,255,0.35) 50%, transparent 51%),
            radial-gradient(1.2px 1.2px at 85% 82%, rgba(255,255,255,0.28) 50%, transparent 51%) !important;
        background-size: 154.7px 154.7px !important; background-repeat: repeat !important;
    }
    @keyframes sbAuroraDrift { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(-2%, 1.5%, 0) scale(1.04); } }

    .sidebar-inner { 
        width: 100% !important; 
        box-sizing: border-box !important; 
        padding: 17.8px 8.3px 2.4px 9.5px !important; 
        display: flex !important; 
        flex-direction: column !important; 
        position: relative !important; 
        z-index: 1 !important; 
        flex: 1 1 auto !important; 
        min-height: 0 !important; 
        transition: padding var(--sb-speed) var(--sb-ease) !important; 
    }
    html, body { overflow-x: hidden !important; }
    

    /* --- Profile block --- */
    .sidebar-user { display: flex !important; flex-direction: column !important; align-items: center !important; width: 100% !important; box-sizing: border-box !important; padding-bottom: 1.2px !important; text-align: center !important; }

    .sb-avatar-frame { position: relative !important; width: 96.4px !important; height: 96.4px !important; flex-shrink: 0 !important; margin-bottom: 2.4px !important; transition: width var(--sb-speed) var(--sb-ease), height var(--sb-speed) var(--sb-ease), margin var(--sb-speed) var(--sb-ease) !important; }

    .sb-avatar-glow {
        position: absolute !important; inset: -1.2px !important; border-radius: 50% !important;
        background: conic-gradient(from 0deg, #31fca3, var(--c-signal), #70ffa1, #0fd2ff, #10ffd0) !important;
        filter: blur(9.5px) !important; opacity: 1 !important; animation: sbGlowSpin 7s linear infinite !important;
        will-change: transform !important;
    }
    @keyframes sbGlowSpin { to { transform: rotate(360deg); } }

    .sb-xp-ring { position: absolute !important; inset: 0 !important; transform: rotate(-90deg) !important; z-index: 1 !important; }
    .sb-xp-ring-track { fill: none !important; stroke: rgba(5,7,13,0.9) !important; stroke-width: 3 !important; }
    .sb-xp-ring-fill { fill: none !important; stroke: url(#sbXpGrad2) !important; stroke-width: 3 !important; stroke-linecap: round !important; transition: stroke-dashoffset 0.6s ease !important; }
    .sidebar-user .sb-user-avatar { position: absolute !important; inset: 8.3px !important; width: 80.9px !important; height: 79.7px !important; border-radius: 50% !important; object-fit: cover !important; border: 2.4px solid #fbfbfb !important; z-index: 2 !important; transition: width var(--sb-speed) var(--sb-ease), height var(--sb-speed) var(--sb-ease) !important; }

    /* --- Pulse rings --- */
    .sb-pulse-ring {
        position: absolute !important; inset: 2.4px !important; border-radius: 50% !important;
        border: 1.2px solid rgba(0, 229, 160, 0.55) !important;
        animation: sbAvatarPulse 2.6s ease-out infinite !important;
        pointer-events: none !important;
    }
    .sb-pulse-ring.delay { animation-delay: 1.3s !important; }
    @keyframes sbAvatarPulse {
        0%   { transform: scale(0.86); opacity: 0.6; }
        100% { transform: scale(1.35); opacity: 0; }
    }

    /* --- Verified badge --- */
    .sb-verified-badge {
        position: absolute !important; right: -2.4px !important; bottom: -2.4px !important; z-index: 3 !important;
        width: 20.2px !important; height: 20.2px !important; border-radius: 50% !important;
        background: var(--c-tg) !important; border: 2.4px solid var(--c-void) !important;
        display: flex !important; align-items: center !important; justify-content: center !important;
        box-shadow: 0 0 9.5px rgba(42,171,238,0.55) !important;
    }
    .sb-verified-badge svg { width: 10.7px !important; height: 10.7px !important; color: #fff !important; }

    .sb-user-name-row { display: flex !important; align-items: center !important; justify-content: center !important; min-width: 0 !important; max-width: 100% !important; }
    .sb-user-name { font-size: 14.3px !important; font-weight: 800 !important; color: var(--c-text) !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 190.4px !important; }

    /* --- Level chip --- */
    .sb-level-badge {
        position: absolute !important; left: 51% !important; bottom: 1.2px !important;
        transform: translateX(-50%) !important;
        display: inline-flex !important; align-items: center !important; gap: 2.4px !important;
        font-family: 'JetBrains Mono', monospace !important; font-size: 10.7px !important; font-weight: 800 !important;
        color: #ffffff !important;
        background: linear-gradient(135deg, #1f3869, #040406c4) !important;
        padding: 1.2px 5.9px !important; border-radius: 23.8px !important;
        border: 2.4px solid #ffffff !important;
        box-shadow: 0 2.4px 11.9px rgba(255,194,75,0.5), 0 0 16.7px rgba(255,194,75,0.25) !important;
        letter-spacing: 0.4px !important; z-index: 4 !important;
    }
    .sb-level-badge svg { width: 10.7px !important; height: 10.7px !important; }

    /* --- Meta row: @username · ID --- */
    .sb-user-meta-row { display: flex !important; align-items: center !important; justify-content: center !important; gap: 3.6px !important; margin-top: 2.4px !important; flex-wrap: nowrap !important; }
    .sb-user-tag { font-size: 11.9px !important; font-weight: 700 !important; color: #7fd4ff !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 130.9px !important; margin: 0 !important; }
    .sb-meta-dot { font-size: 9.5px !important; color: var(--c-text-muted) !important; }
    .sb-user-id { font-size: 10.1px !important; font-weight: 700 !important; color: #d3e2f5 !important; background: rgba(255,255,255,0.09) !important; padding: 2.4px 7.1px !important; border-radius: 5.9px !important; font-family: 'JetBrains Mono', monospace !important; display: inline-flex !important; align-items: center !important; gap: 3.6px !important; }
    .sb-id-copy { width: 10.7px !important; height: 10.7px !important; color: #9fb4d1 !important; cursor: pointer !important; transition: color 0.2s !important; }
    .sb-id-copy:hover { color: var(--c-tg) !important; }

    /* --- Hairline dividers --- */
    .sb-divider { height: 1.2px !important; margin: 4.8px 2.4px !important; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.16) 18%, rgba(255,255,255,0.16) 82%, transparent) !important; flex-shrink: 0 !important; }

    /* --- Full-width XP bar --- */
    .sb-xp-full { margin: 0 0 2.4px !important; width: 100% !important; }
    .sb-xp-full-labels { display: flex !important; align-items: center !important; justify-content: space-between !important; margin-bottom: 4.8px !important; }
    .sb-xp-full-label { font-size: 10.1px !important; font-weight: 700 !important; letter-spacing: 0.7px !important; text-transform: uppercase !important; color: #cfe0f5 !important; font-family: 'Manrope', sans-serif !important; }
    .sb-xp-full-pct { font-size: 11.9px !important; font-weight: 800 !important; color: var(--c-signal) !important; font-family: 'JetBrains Mono', monospace !important; }
    .sb-xp-full-track { width: 100% !important; height: 7.1px !important; border-radius: 4.8px !important; background: rgba(255,255,255,0.07) !important; overflow: hidden !important; box-sizing: border-box !important; border: 1.2px solid var(--c-line) !important; }
    .sb-xp-full-fill { height: 100% !important; border-radius: 4.8px !important; background: linear-gradient(90deg, var(--c-tg), var(--c-signal) 60%, #89fc3c) !important; box-shadow: 0 0 9.5px rgba(0,229,160,0.55) !important; }

    /* --- Status cards --- */
    .sb-status-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 3.6px !important; margin: 2.4px 0 7.1px !important; }
    .sb-status-cell {
        position: relative !important; display: flex !important; flex-direction: row !important;
        align-items: center !important; gap: 3.6px !important;
        border-radius: 11.9px !important; padding: 4.8px 5.9px !important;
        
        background: var(--c-cell-bg) !important;
        text-decoration: none !important; color: inherit !important; cursor: pointer !important;
        overflow: hidden !important;
        transition: transform 0.16s ease, border-color 0.16s ease !important;
    }
    .sb-status-cell.tariff { --c-cell-bg: linear-gradient(150deg, rgba(42,171,238,0.22), rgba(42,171,238,0.04)); --c-cell-border: rgba(42,171,238,0.35); }
    .sb-status-cell.tokens { --c-cell-bg: linear-gradient(150deg, rgba(0,229,160,0.22), rgba(255,194,75,0.05)); --c-cell-border: rgba(0,229,160,0.35); }
    .sb-status-cell:hover { transform: translateY(-1.2px) !important; }
    .sb-status-cell:hover.tariff { border-color: var(--c-tg) !important; box-shadow: 0 0 16.7px rgba(42,171,238,0.25) !important; }
    .sb-status-cell:hover.tokens {  box-shadow: 0 0 16.7px rgba(0,229,160,0.25) !important; }
    .sb-status-cell-top { display: flex !important; align-items: center !important; gap: 2.4px !important; font-size: 9.5px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.4px !important; color: var(--c-text-muted) !important; flex-shrink: 0 !important; }
    .sb-status-cell-top svg { width: 13.1px !important; height: 13.1px !important; }
    .sb-status-cell-value { font-size: 10.7px !important; font-weight: 800 !important; color: var(--c-text) !important; font-family: 'JetBrains Mono', monospace !important; overflow: hidden !important; text-overflow: ellipsis !important; }

    .sb-tokens-hover {
        position: absolute !important; inset: 0 !important; display: flex !important;
        align-items: center !important; justify-content: center !important; gap: 2.4px !important;
        background: linear-gradient(135deg, #00d492 0%, #00b8c4 100%) !important;
        opacity: 0 !important; transform: translateY(3.6px) !important;
        transition: opacity 0.18s ease, transform 0.18s ease !important;
        font-size: 11.9px !important; font-weight: 800 !important; color: #ffffff !important;
        letter-spacing: 0.4px !important; pointer-events: none !important;
        border-radius: inherit !important;
        text-shadow: 0 1.2px 3.6px rgba(0,0,0,0.35) !important;
    }
    .sb-tokens-hover svg { width: 14.3px !important; height: 14.3px !important; color: #ffffff !important; filter: drop-shadow(0 1.2px 2.4px rgba(0,0,0,0.3)) !important; }
    .sb-status-cell.tokens:hover .sb-tokens-hover { opacity: 1 !important; transform: translateY(0) !important; }

    /* --- Shimmering CTA --- */
    .btn-add-sidebar {
        position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 7.1px !important;
        color: #ffffff !important; text-decoration: none !important;
        padding: 7.1px 11.9px !important; border-radius: 11.9px !important; font-size: 12.5px !important; font-weight: 800 !important;
        margin: 0 0 5.9px !important; width: 100% !important; box-sizing: border-box !important;
        background: linear-gradient(115deg, var(--c-tg) 0%, var(--c-signal) 35%, var(--c-gold) 65%, var(--c-tg) 100%) !important;
        background-size: 260% 100% !important;
        animation: sbCtaShimmer 5s ease-in-out infinite !important;
        box-shadow: 0 3.6px 19px rgba(0,229,160,0.28) !important;
        transition: transform 0.15s ease, box-shadow 0.15s ease, padding var(--sb-speed) var(--sb-ease) !important;
    }
    @keyframes sbCtaShimmer { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
    .btn-add-sidebar svg { width: 22px !important; height: 22px !important; stroke-width: 3 !important; color: #ffffff !important; }
    
    .sb-add-break { display: none !important; }
    
    .btn-add-sidebar span {
        display: inline-block !important;
        overflow: hidden !important;
        max-width: 190.4px !important;
        opacity: 1 !important;
        transition: max-width var(--sb-speed) var(--sb-ease), opacity 0.15s ease !important;
    }
    .btn-add-sidebar:hover { transform: translateY(-1.2px) !important; box-shadow: 0 5.9px 26.2px rgba(0,229,160,0.42) !important; }

    .sb-menu-label { font-size: 9.5px !important; font-weight: 700 !important; letter-spacing: 1.7px !important; text-transform: uppercase !important; color: var(--c-text-muted) !important; margin: 0 2.4px 5.9px !important; font-family: 'JetBrains Mono', monospace !important; }

    /* --- Navigation --- */
    .sidebar-nav { display: flex !important; flex-direction: column !important; gap: 1.2px !important; }
    .sidebar .sb-nav-link {
        display: flex !important; align-items: center !important; text-decoration: none !important; color: #a4b6cf !important;
        padding: 6.5px 9.5px !important; font-size: 11.9px !important; font-weight: 650 !important; gap: 10.7px !important;
        border-radius: 8.3px !important; position: relative !important;
        transition: color 0.16s, background 0.16s, padding var(--sb-speed) var(--sb-ease) !important;
    }
    .sidebar .sb-nav-link span { color: inherit !important; }
    .sidebar .sb-nav-link svg { width: 16.7px !important; height: 16.7px !important; stroke-width: 1.8 !important; color: #7488a6 !important; fill: none !important; stroke: currentColor !important; }

    .sb-nav-badge { margin-left: auto !important; font-family: 'JetBrains Mono', monospace !important; font-size: 10.1px !important; color: var(--c-text-muted) !important; }

    .sidebar .sb-nav-link.promo-nav:not(:hover):not(.active) { color: var(--c-gold) !important; }
    .sidebar .sb-nav-link.promo-nav:not(:hover):not(.active) svg { color: var(--c-gold) !important; }

    .sidebar .sb-nav-link[href="/logout"] { color: var(--c-danger) !important;  }
    .sidebar .sb-nav-link[href="/logout"] svg { color: var(--c-danger) !important; }
    .sidebar .sb-nav-link[href="/logout"]:hover { background: rgba(255,84,112,0.1) !important; }

    .sidebar-nav .sb-nav-link:not([href="/logout"]):hover, .sidebar-nav .sb-nav-link:not([href="/logout"]).active { background: rgba(255,255,255,0.06) !important; color: #fff !important; }
    .sidebar-nav .sb-nav-link:not([href="/logout"]):hover svg, .sidebar-nav .sb-nav-link:not([href="/logout"]).active svg { color: var(--c-tg) !important; }
    .sidebar-nav .sb-nav-link.active { background: rgba(255,255,255,0.055) !important; }
    .sidebar-nav .sb-nav-link.active::before {
        content: '' !important; position: absolute !important; left: 0 !important; top: 7.1px !important; bottom: 7.1px !important;
        width: 3px !important; border-radius: 2.4px !important; background: linear-gradient(180deg, var(--c-tg), var(--c-signal)) !important;
        box-shadow: 0 0 9.5px rgba(0,229,160,0.6) !important;
    }

    .sidebar .sb-nav-link:focus-visible, .btn-add-sidebar:focus-visible, .sb-id-copy:focus-visible, .sb-toggle-btn:focus-visible { outline: 2.4px solid var(--c-signal) !important; outline-offset: 2.4px !important; }

    .sb-separate { height: 1.2px !important; background: var(--c-line) !important; margin: 2.4px 4.8px !important; }
    .sb-image-container { display: none !important; }

    

}