/*
 * Shared cyberpunk balance layer.
 * Cyan carries structure; violet and magenta mark state, direction, and depth.
 */

:root {
    --neon-balance-cyan: #49eaff;
    --neon-balance-cyan-soft: #a9f7ff;
    --neon-balance-violet: #9b4dff;
    --neon-balance-violet-soft: #b99aff;
    --neon-balance-magenta: #ff2fa6;
    --neon-balance-magenta-soft: #ff9bd8;
    --neon-balance-indigo: #6257ff;
    --neon-balance-void: #020611;
    --neon-balance-panel: #061326;
}

/* -------------------------------------------------------------------------
 * Global sidebar: the same deep-navy / cyan / violet language in every view.
 * ------------------------------------------------------------------------- */

#sidebar#sidebar {
    color: rgba(215, 242, 248, 0.82) !important;
    background:
        linear-gradient(180deg, rgba(4, 16, 34, 0.99), rgba(2, 6, 18, 0.99)) !important;
    border-right-color: rgba(50, 246, 255, 0.42) !important;
    box-shadow:
        inset -1px 0 rgba(255, 47, 166, 0.16),
        12px 0 32px rgba(0, 0, 0, 0.34) !important;
}

#sidebar#sidebar > div:first-child {
    border-bottom-color: rgba(50, 246, 255, 0.36) !important;
    background:
        linear-gradient(90deg, rgba(50, 246, 255, 0.1), rgba(98, 87, 255, 0.035) 62%, rgba(255, 47, 166, 0.08)) !important;
}

#sidebar#sidebar > div:first-child img {
    box-shadow:
        0 0 0 1px rgba(50, 246, 255, 0.72),
        0 0 10px rgba(50, 246, 255, 0.22),
        0 0 16px rgba(255, 47, 166, 0.14) !important;
}

#sidebar#sidebar > div:first-child .text-white {
    color: #edfcff !important;
}

#sidebar#sidebar > div:first-child .text-neutral-500 {
    color: rgba(143, 211, 218, 0.76) !important;
}

#sidebar#sidebar > nav {
    scrollbar-color: rgba(50, 246, 255, 0.72) transparent !important;
    background:
        linear-gradient(180deg, rgba(4, 14, 31, 0.18), rgba(2, 6, 18, 0.34)) !important;
}

#sidebar#sidebar > nav::-webkit-scrollbar-track {
    background: rgba(98, 87, 255, 0.035) !important;
}

#sidebar#sidebar > nav::-webkit-scrollbar-thumb {
    border-color: rgba(50, 246, 255, 0.42) !important;
    background: linear-gradient(
        180deg,
        var(--neon-balance-cyan),
        var(--neon-balance-violet) 58%,
        var(--neon-balance-magenta)
    ) !important;
    box-shadow: 0 0 8px rgba(50, 246, 255, 0.24) !important;
}

#sidebar#sidebar > nav .menu-group > button {
    color: rgba(143, 211, 218, 0.86) !important;
}

#sidebar#sidebar > nav .menu-group > button::after {
    background:
        linear-gradient(
            90deg,
            rgba(50, 246, 255, 0.5),
            rgba(143, 61, 255, 0.42) 58%,
            rgba(255, 47, 166, 0.44)
        ) !important;
}

#sidebar#sidebar > nav .menu-group > button:hover {
    color: var(--neon-balance-cyan-soft) !important;
}

#sidebar#sidebar > nav .menu-group > button .chevron {
    color: var(--neon-balance-cyan) !important;
    filter: drop-shadow(0 0 5px rgba(50, 246, 255, 0.44)) !important;
}

#sidebar#sidebar > nav .menu-group-items {
    margin: 1px 0 10px !important;
    padding: 1px 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

#sidebar#sidebar > nav .menu-group-items::before,
#sidebar#sidebar > nav .menu-group-items::after,
#sidebar#sidebar > nav .menu-group-items.liquid-glass-surface::before,
#sidebar#sidebar > nav .menu-group-items.liquid-glass-surface::after {
    content: none !important;
    display: none !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
}

#sidebar#sidebar > nav .menu-group-items .sidebar-item,
#sidebar#sidebar > nav .sidebar-item {
    border: 1px solid transparent !important;
    border-radius: 2px !important;
    color: rgba(215, 242, 248, 0.78) !important;
    background:
        linear-gradient(90deg, rgba(6, 24, 44, 0.94), rgba(5, 11, 29, 0.96)) padding-box,
        linear-gradient(
            105deg,
            rgba(255, 47, 166, 0.34),
            rgba(143, 61, 255, 0.22) 48%,
            rgba(50, 246, 255, 0.34)
        ) border-box !important;
    box-shadow: none !important;
    filter: none !important;
}

#sidebar#sidebar > nav .menu-group-items .sidebar-item:hover,
#sidebar#sidebar > nav .sidebar-item:hover {
    border-color: rgba(50, 246, 255, 0.44) !important;
    color: var(--neon-balance-cyan-soft) !important;
    background:
        linear-gradient(90deg, rgba(0, 203, 216, 0.15), rgba(47, 29, 93, 0.2) 68%, rgba(255, 47, 166, 0.08)) padding-box,
        linear-gradient(
            105deg,
            rgba(50, 246, 255, 0.68),
            rgba(143, 61, 255, 0.46) 62%,
            rgba(255, 47, 166, 0.32)
        ) border-box !important;
    box-shadow:
        inset 2px 0 0 var(--neon-balance-cyan),
        0 0 9px rgba(50, 246, 255, 0.12) !important;
}

#sidebar#sidebar > nav .menu-group-items .sidebar-item.active,
#sidebar#sidebar > nav .sidebar-item.active {
    border-color: transparent !important;
    color: #ffffff !important;
    background:
        linear-gradient(96deg, rgba(32, 12, 65, 0.96), rgba(4, 38, 59, 0.96) 68%, rgba(14, 8, 43, 0.98)) padding-box,
        linear-gradient(
            104deg,
            var(--neon-balance-cyan),
            var(--neon-balance-violet) 54%,
            var(--neon-balance-magenta)
        ) border-box !important;
    box-shadow:
        inset 3px 0 var(--neon-balance-cyan),
        inset 0 0 18px rgba(143, 61, 255, 0.11),
        0 0 11px rgba(255, 47, 166, 0.12) !important;
    filter: drop-shadow(0 0 7px rgba(50, 246, 255, 0.18)) !important;
}

#sidebar#sidebar > nav .sidebar-item::before {
    background: transparent !important;
    box-shadow: none !important;
}

#sidebar#sidebar > nav .sidebar-item.active::before {
    background: var(--neon-balance-cyan) !important;
    box-shadow:
        0 0 10px rgba(50, 246, 255, 0.88),
        0 0 18px rgba(255, 47, 166, 0.34) !important;
}

#sidebar#sidebar > nav .sidebar-item::after {
    background: transparent !important;
    box-shadow: none !important;
}

#sidebar#sidebar > nav .sidebar-item.active::after {
    display: block !important;
    background:
        linear-gradient(
            90deg,
            transparent,
            var(--neon-balance-magenta) 48%,
            var(--neon-balance-cyan)
        ) !important;
    box-shadow: 0 0 9px rgba(255, 47, 166, 0.4) !important;
}

#sidebar#sidebar > nav .sidebar-item .item-icon,
#sidebar#sidebar > nav .sidebar-item .text-cyan-300,
#sidebar#sidebar > nav .sidebar-item .text-emerald-400,
#sidebar#sidebar > nav .sidebar-item .text-primary-400 {
    color: rgba(116, 221, 232, 0.86) !important;
    text-shadow: 0 0 7px rgba(50, 246, 255, 0.18) !important;
}

#sidebar#sidebar > nav .sidebar-item:hover .item-icon,
#sidebar#sidebar > nav .sidebar-item:hover .text-cyan-300,
#sidebar#sidebar > nav .sidebar-item:hover .text-emerald-400,
#sidebar#sidebar > nav .sidebar-item:hover .text-primary-400,
#sidebar#sidebar > nav .sidebar-item.active .item-icon,
#sidebar#sidebar > nav .sidebar-item.active .text-cyan-300,
#sidebar#sidebar > nav .sidebar-item.active .text-emerald-400,
#sidebar#sidebar > nav .sidebar-item.active .text-primary-400 {
    color: var(--neon-balance-cyan-soft) !important;
    text-shadow:
        0 0 9px rgba(50, 246, 255, 0.46),
        0 0 12px rgba(143, 61, 255, 0.16) !important;
}

#sidebar#sidebar > div:last-child {
    border-top-color: rgba(50, 246, 255, 0.3) !important;
    background:
        linear-gradient(180deg, rgba(4, 12, 28, 0.84), rgba(14, 4, 29, 0.9)) !important;
}

#sidebar#sidebar > div:last-child::before,
#sidebar#sidebar > div:last-child .fa-circle {
    color: var(--neon-balance-magenta) !important;
    background: var(--neon-balance-magenta) !important;
    box-shadow: 0 0 9px rgba(255, 47, 166, 0.72) !important;
}

#sidebar#sidebar #sidebar-version {
    color: rgba(201, 165, 255, 0.78) !important;
}

#sidebar#sidebar #sidebar-version:hover {
    color: var(--neon-balance-cyan-soft) !important;
}

/* -------------------------------------------------------------------------
 * Chat-only balance: dark blue surfaces with cyan structure and neon edges.
 * ------------------------------------------------------------------------- */

body:has(#view-chat.view.active) {
    --chat-balance-cyan: #29e7f3;
    --chat-balance-cyan-soft: #b4f8ff;
    --chat-balance-violet: #8f3dff;
    --chat-balance-magenta: #ff2fa6;
    --chat-balance-indigo: #6257ff;
}

body:has(#view-chat.view.active) #content-area {
    background:
        linear-gradient(rgba(41, 231, 243, 0.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(41, 231, 243, 0.022) 1px, transparent 1px),
        radial-gradient(circle at 78% 10%, rgba(143, 61, 255, 0.12), transparent 30%),
        radial-gradient(circle at 94% 76%, rgba(255, 47, 166, 0.075), transparent 23%),
        #020611 !important;
}

body:has(#view-chat.view.active) #view-chat {
    background: #020611 !important;
}

body:has(#view-chat.view.active) #view-chat::after {
    background:
        linear-gradient(
            90deg,
            rgba(2, 8, 18, 0.8),
            rgba(2, 8, 18, 0.46) 52%,
            rgba(21, 7, 34, 0.62)
        ),
        linear-gradient(
            180deg,
            rgba(2, 8, 18, 0.08),
            rgba(2, 8, 18, 0.66) 90%
        ) !important;
}

body:has(#view-chat.view.active) #main-content > header {
    border-bottom-color: transparent !important;
    background:
        linear-gradient(96deg, rgba(3, 16, 33, 0.99), rgba(5, 8, 27, 0.99) 62%, rgba(22, 6, 37, 0.96)) padding-box,
        linear-gradient(
            96deg,
            rgba(41, 231, 243, 0.78),
            rgba(143, 61, 255, 0.72) 52%,
            rgba(255, 47, 166, 0.68),
            rgba(41, 231, 243, 0.54)
        ) border-box !important;
    box-shadow:
        inset 0 -1px rgba(41, 231, 243, 0.16),
        inset 0 0 24px rgba(143, 61, 255, 0.06),
        0 6px 24px rgba(28, 3, 45, 0.26) !important;
}

body:has(#view-chat.view.active) #main-content > header::before {
    content: "" !important;
    position: absolute !important;
    left: 16%;
    bottom: -1px;
    width: 18%;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--chat-balance-magenta), var(--chat-balance-violet), transparent) !important;
    box-shadow: 0 0 10px rgba(255, 47, 166, 0.38) !important;
}

body:has(#view-chat.view.active) #main-content > header::after {
    background: linear-gradient(90deg, transparent, var(--chat-balance-violet), var(--chat-balance-cyan)) !important;
    box-shadow: 0 0 12px rgba(143, 61, 255, 0.42) !important;
}

body:has(#view-chat.view.active) #main-content > header
    :is(#breadcrumb-group, .active-life-summary-label) {
    color: rgba(137, 203, 214, 0.9) !important;
}

body:has(#view-chat.view.active) #main-content > header
    :is(#breadcrumb-page, #account-username, #active-life-name) {
    color: #e8fbff !important;
    text-shadow: 0 0 8px rgba(41, 231, 243, 0.14) !important;
}

body:has(#view-chat.view.active) #main-content > header #breadcrumb-separator {
    color: var(--chat-balance-magenta) !important;
    text-shadow: 0 0 8px rgba(255, 47, 166, 0.4) !important;
}

body:has(#view-chat.view.active) .active-life-summary {
    border-color: transparent !important;
    background:
        linear-gradient(135deg, rgba(5, 28, 46, 0.98), rgba(5, 9, 28, 0.98)) padding-box,
        linear-gradient(105deg, rgba(41, 231, 243, 0.74), rgba(143, 61, 255, 0.58) 54%, rgba(255, 47, 166, 0.66)) border-box !important;
    box-shadow:
        inset 0 0 16px rgba(41, 231, 243, 0.05),
        0 0 12px rgba(143, 61, 255, 0.12) !important;
}

body:has(#view-chat.view.active) .active-life-summary::before {
    border-top-color: var(--chat-balance-cyan) !important;
    box-shadow: 0 0 8px rgba(41, 231, 243, 0.4) !important;
}

body:has(#view-chat.view.active) .active-life-summary::after {
    border-bottom-color: var(--chat-balance-magenta) !important;
    box-shadow: 0 0 8px rgba(255, 47, 166, 0.3) !important;
}

body:has(#view-chat.view.active) .active-life-summary-signal {
    background: var(--chat-balance-cyan) !important;
    box-shadow: 0 0 9px rgba(41, 231, 243, 0.6) !important;
}

body:has(#view-chat.view.active) #welcome-screen {
    background:
        linear-gradient(145deg, rgba(5, 24, 44, 0.96), rgba(4, 9, 26, 0.97) 62%, rgba(18, 7, 35, 0.94)) padding-box,
        linear-gradient(118deg, rgba(41, 231, 243, 0.68), rgba(143, 61, 255, 0.46) 58%, rgba(255, 47, 166, 0.54)) border-box !important;
    box-shadow:
        inset 0 0 24px rgba(41, 231, 243, 0.04),
        0 0 14px rgba(143, 61, 255, 0.12),
        0 20px 50px rgba(0, 0, 0, 0.38) !important;
}

body:has(#view-chat.view.active) .example-card {
    background:
        repeating-linear-gradient(90deg, transparent 0 27px, rgba(41, 231, 243, 0.02) 27px 28px),
        linear-gradient(140deg, rgba(5, 28, 47, 0.97), rgba(4, 9, 26, 0.98)) padding-box,
        linear-gradient(108deg, rgba(41, 231, 243, 0.62), rgba(143, 61, 255, 0.42) 58%, rgba(255, 47, 166, 0.44)) border-box !important;
    box-shadow:
        inset 0 0 20px rgba(41, 231, 243, 0.035),
        0 0 10px rgba(143, 61, 255, 0.1),
        0 14px 30px rgba(0, 0, 0, 0.3) !important;
}

body:has(#view-chat.view.active) .example-card:nth-child(2) {
    background:
        repeating-linear-gradient(90deg, transparent 0 27px, rgba(255, 47, 166, 0.018) 27px 28px),
        linear-gradient(140deg, rgba(16, 20, 56, 0.97), rgba(7, 8, 29, 0.98)) padding-box,
        linear-gradient(108deg, rgba(143, 61, 255, 0.7), rgba(255, 47, 166, 0.5) 58%, rgba(41, 231, 243, 0.34)) border-box !important;
}

body:has(#view-chat.view.active) .hud-assistant-frame {
    background:
        linear-gradient(130deg, rgba(6, 34, 50, 0.96), rgba(4, 13, 29, 0.98)) padding-box,
        linear-gradient(135deg, var(--chat-balance-cyan), rgba(143, 61, 255, 0.44) 70%, var(--chat-balance-magenta)) border-box !important;
}

body:has(#view-chat.view.active) .hud-user-frame {
    background:
        linear-gradient(130deg, rgba(10, 23, 52, 0.96), rgba(8, 10, 31, 0.98)) padding-box,
        linear-gradient(135deg, rgba(255, 47, 166, 0.72), rgba(143, 61, 255, 0.54) 56%, var(--chat-balance-cyan)) border-box !important;
}

body:has(#view-chat.view.active) .hud-user-frame::before {
    border-right-color: var(--chat-balance-magenta) !important;
    border-bottom-color: var(--chat-balance-violet) !important;
    box-shadow: 3px 3px 10px rgba(255, 47, 166, 0.24) !important;
}

body:has(#view-chat.view.active) .hud-user-frame::after {
    background: linear-gradient(90deg, transparent, var(--chat-balance-magenta), var(--chat-balance-violet)) !important;
    box-shadow: 0 0 12px rgba(255, 47, 166, 0.44) !important;
}

body:has(#view-chat.view.active) #chat-input-shell {
    background:
        linear-gradient(110deg, rgba(4, 23, 41, 0.98), rgba(4, 10, 28, 0.98) 68%, rgba(20, 6, 38, 0.98)) padding-box,
        linear-gradient(106deg, rgba(41, 231, 243, 0.72), rgba(143, 61, 255, 0.58) 52%, rgba(255, 47, 166, 0.6)) border-box !important;
    box-shadow:
        inset 0 1px 1px rgba(215, 247, 248, 0.1),
        inset 0 0 22px rgba(143, 61, 255, 0.05),
        0 0 13px rgba(41, 231, 243, 0.08),
        0 15px 33px rgba(0, 0, 0, 0.33) !important;
}

body:has(#view-chat.view.active) #chat-input-shell::before {
    background: linear-gradient(90deg, var(--chat-balance-cyan), var(--chat-balance-violet), transparent) !important;
    box-shadow: 0 0 9px rgba(41, 231, 243, 0.44) !important;
}

body:has(#view-chat.view.active) #chat-input-shell::after {
    background: linear-gradient(90deg, transparent, var(--chat-balance-magenta), var(--chat-balance-cyan)) !important;
    box-shadow: 0 0 9px rgba(255, 47, 166, 0.38) !important;
}

body:has(#view-chat.view.active) #chat-input-shell > .chat-input-stack,
body:has(#view-chat.view.active) #chat-input-shell > .flex-1 {
    background:
        linear-gradient(90deg, rgba(3, 10, 23, 0.98), rgba(5, 9, 28, 0.98)) padding-box,
        linear-gradient(90deg, rgba(41, 231, 243, 0.44), rgba(143, 61, 255, 0.28) 58%, rgba(255, 47, 166, 0.38)) border-box !important;
    box-shadow: inset 0 0 16px rgba(143, 61, 255, 0.035) !important;
}

body:has(#view-chat.view.active) #chat-input-actions button,
body:has(#view-chat.view.active) #mic-btn,
body:has(#view-chat.view.active) #send-btn {
    border-color: rgba(41, 231, 243, 0.5) !important;
    background:
        linear-gradient(135deg, rgba(5, 30, 47, 0.98), rgba(12, 8, 38, 0.98)) padding-box,
        linear-gradient(135deg, var(--chat-balance-cyan), var(--chat-balance-violet) 50%, var(--chat-balance-magenta)) border-box !important;
    color: var(--chat-balance-cyan-soft) !important;
    box-shadow:
        inset 0 0 10px rgba(41, 231, 243, 0.04),
        0 0 8px rgba(143, 61, 255, 0.14) !important;
}

body:has(#view-chat.view.active) #chat-input-actions button:hover,
body:has(#view-chat.view.active) #mic-btn:hover,
body:has(#view-chat.view.active) #send-btn:hover:not(:disabled) {
    border-color: var(--chat-balance-cyan) !important;
    background:
        linear-gradient(135deg, rgba(0, 55, 70, 0.96), rgba(31, 9, 59, 0.99)) padding-box,
        linear-gradient(135deg, var(--chat-balance-cyan), var(--chat-balance-magenta), var(--chat-balance-violet)) border-box !important;
    color: #effeff !important;
    box-shadow:
        inset 0 0 14px rgba(41, 231, 243, 0.08),
        0 0 12px rgba(255, 47, 166, 0.2) !important;
}

body:has(#view-chat.view.active) #clear-context-btn {
    color: var(--chat-balance-magenta-soft) !important;
}

body:has(#view-chat.view.active) .slash-menu {
    border-color: rgba(143, 61, 255, 0.56) !important;
    background: rgba(4, 10, 28, 0.98) !important;
    box-shadow: 0 0 18px rgba(143, 61, 255, 0.16) !important;
}

body:has(#view-chat.view.active) .slash-menu-item:hover,
body:has(#view-chat.view.active) .slash-menu-item.active {
    background: linear-gradient(90deg, rgba(41, 231, 243, 0.1), rgba(143, 61, 255, 0.16), rgba(255, 47, 166, 0.08)) !important;
    color: #effeff !important;
}

@media (prefers-reduced-motion: reduce) {
    body:has(#view-chat.view.active) #main-content > header::before,
    body:has(#view-chat.view.active) #main-content > header::after {
        animation: none !important;
    }
}

/* Universal sidebar palette: keep the Life Simulator navigation language
 * stable while the active workspace view changes. The extra active-view
 * scope intentionally outranks older page-specific sidebar declarations. */

body:has(.view.active) #sidebar#sidebar {
    color: #e7fbff !important;
    background:
        linear-gradient(180deg, rgba(5, 17, 34, 0.99), rgba(5, 8, 22, 0.99)) !important;
    border-right-color: rgba(0, 229, 255, 0.42) !important;
    box-shadow:
        inset -1px 0 rgba(0, 229, 255, 0.12),
        10px 0 26px rgba(0, 0, 0, 0.24) !important;
}

body:has(.view.active) #sidebar#sidebar > div:first-child {
    border-bottom-color: rgba(50, 246, 255, 0.36) !important;
    background:
        linear-gradient(90deg, rgba(50, 246, 255, 0.1), rgba(98, 87, 255, 0.035) 62%, rgba(255, 47, 166, 0.08)) !important;
}

body:has(.view.active) #sidebar#sidebar > div:first-child img {
    box-shadow:
        0 0 0 1px rgba(50, 246, 255, 0.72),
        0 0 10px rgba(50, 246, 255, 0.22),
        0 0 16px rgba(255, 47, 166, 0.14) !important;
}

body:has(.view.active) #sidebar#sidebar > div:first-child .text-white {
    color: #edfcff !important;
}

body:has(.view.active) #sidebar#sidebar > div:first-child .text-neutral-500 {
    color: rgba(143, 211, 218, 0.76) !important;
}

body:has(.view.active) #sidebar#sidebar > nav {
    background: transparent !important;
    scrollbar-color: rgba(50, 246, 255, 0.72) transparent !important;
}

body:has(.view.active) #sidebar#sidebar > nav::-webkit-scrollbar-track {
    background: rgba(98, 87, 255, 0.035) !important;
}

body:has(.view.active) #sidebar#sidebar > nav::-webkit-scrollbar-thumb {
    border-color: rgba(50, 246, 255, 0.42) !important;
    background: linear-gradient(
        180deg,
        var(--neon-balance-cyan),
        var(--neon-balance-violet) 58%,
        var(--neon-balance-magenta)
    ) !important;
    box-shadow: 0 0 8px rgba(50, 246, 255, 0.24) !important;
}

body:has(.view.active) #sidebar#sidebar > nav .menu-group > button {
    color: rgba(143, 211, 218, 0.72) !important;
}

body:has(.view.active) #sidebar#sidebar > nav .menu-group > button::after {
    background:
        linear-gradient(
            90deg,
            rgba(255, 47, 166, 0.58),
            rgba(155, 77, 255, 0.42) 58%,
            transparent 92%
        ) !important;
}

body:has(.view.active) #sidebar#sidebar > nav .menu-group > button:hover {
    color: var(--neon-balance-cyan-soft) !important;
}

body:has(.view.active) #sidebar#sidebar > nav .menu-group > button .chevron {
    color: var(--neon-balance-cyan) !important;
    filter: drop-shadow(0 0 5px rgba(50, 246, 255, 0.44)) !important;
}

body:has(.view.active) #sidebar#sidebar > nav .menu-group-items {
    margin: 1px 0 10px !important;
    padding: 1px 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body:has(.view.active) #sidebar#sidebar > nav .menu-group-items::before,
body:has(.view.active) #sidebar#sidebar > nav .menu-group-items::after,
body:has(.view.active) #sidebar#sidebar > nav .menu-group-items.liquid-glass-surface::before,
body:has(.view.active) #sidebar#sidebar > nav .menu-group-items.liquid-glass-surface::after {
    content: none !important;
    display: none !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
}

body:has(.view.active) #sidebar#sidebar > nav .menu-group-items .sidebar-item,
body:has(.view.active) #sidebar#sidebar > nav .sidebar-item {
    border: 1px solid transparent !important;
    border-radius: 0 !important;
    color: rgba(224, 239, 249, 0.78) !important;
    background:
        linear-gradient(96deg, rgba(5, 22, 40, 0.9), rgba(8, 11, 31, 0.92)) padding-box,
        linear-gradient(
            105deg,
            rgba(255, 79, 216, 0.34),
            rgba(50, 246, 255, 0.26) 56%,
            rgba(141, 107, 255, 0.3)
        ) border-box !important;
    box-shadow: none !important;
    filter: drop-shadow(0 0 5px rgba(50, 246, 255, 0.08)) !important;
    transition:
        color 180ms cubic-bezier(0.22, 1, 0.36, 1),
        border-color 180ms cubic-bezier(0.22, 1, 0.36, 1),
        background 220ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

body:has(.view.active) #sidebar#sidebar > nav .menu-group-items .sidebar-item:hover,
body:has(.view.active) #sidebar#sidebar > nav .sidebar-item:hover {
    border-color: transparent !important;
    color: #fff2fb !important;
    background:
        linear-gradient(96deg, rgba(56, 10, 73, 0.96), rgba(23, 10, 61, 0.95)) padding-box,
        linear-gradient(
            104deg,
            rgba(255, 47, 166, 0.92),
            rgba(155, 77, 255, 0.88) 56%,
            rgba(98, 87, 255, 0.74)
        ) border-box !important;
    box-shadow: none !important;
    filter:
        drop-shadow(0 0 7px rgba(255, 47, 166, 0.24))
        drop-shadow(0 0 12px rgba(155, 77, 255, 0.16)) !important;
}

body:has(.view.active) #sidebar#sidebar > nav .menu-group-items .sidebar-item.active,
body:has(.view.active) #sidebar#sidebar > nav .sidebar-item.active {
    border-color: transparent !important;
    color: #ffffff !important;
    background:
        linear-gradient(95deg, rgba(32, 12, 65, 0.96), rgba(4, 42, 57, 0.94)) padding-box,
        linear-gradient(
            102deg,
            var(--neon-balance-magenta),
            var(--neon-balance-cyan) 51%,
            var(--neon-balance-violet)
        ) border-box !important;
    box-shadow: none !important;
    filter: none !important;
}

body:has(.view.active) #sidebar#sidebar > nav .sidebar-item::before {
    background: transparent !important;
    box-shadow: none !important;
}

body:has(.view.active) #sidebar#sidebar > nav .sidebar-item.active::before {
    background: var(--neon-balance-cyan) !important;
    box-shadow:
        0 0 10px rgba(50, 246, 255, 0.86),
        0 0 18px rgba(255, 47, 166, 0.34) !important;
}

body:has(.view.active) #sidebar#sidebar > nav .sidebar-item::after {
    background: transparent !important;
    box-shadow: none !important;
}

body:has(.view.active) #sidebar#sidebar > nav .sidebar-item.active::after {
    display: none !important;
    animation: none !important;
    background: none !important;
    box-shadow: none !important;
}

body:has(.view.active) #sidebar#sidebar > nav .sidebar-item .item-icon,
body:has(.view.active) #sidebar#sidebar > nav .sidebar-item .text-cyan-300,
body:has(.view.active) #sidebar#sidebar > nav .sidebar-item .text-emerald-400,
body:has(.view.active) #sidebar#sidebar > nav .sidebar-item .text-primary-400 {
    color: rgba(124, 213, 242, 0.78) !important;
    text-shadow: 0 0 8px rgba(50, 246, 255, 0.18) !important;
}

body:has(.view.active) #sidebar#sidebar > nav .sidebar-item:hover .item-icon,
body:has(.view.active) #sidebar#sidebar > nav .sidebar-item:hover .text-cyan-300,
body:has(.view.active) #sidebar#sidebar > nav .sidebar-item:hover .text-emerald-400,
body:has(.view.active) #sidebar#sidebar > nav .sidebar-item:hover .text-primary-400,
body:has(.view.active) #sidebar#sidebar > nav .sidebar-item.active .item-icon,
body:has(.view.active) #sidebar#sidebar > nav .sidebar-item.active .text-cyan-300,
body:has(.view.active) #sidebar#sidebar > nav .sidebar-item.active .text-emerald-400,
body:has(.view.active) #sidebar#sidebar > nav .sidebar-item.active .text-primary-400 {
    color: var(--neon-balance-cyan-soft) !important;
    text-shadow:
        0 0 9px rgba(50, 246, 255, 0.46),
        0 0 12px rgba(143, 61, 255, 0.16) !important;
}

body:has(.view.active) #sidebar#sidebar > div:last-child {
    border-top-color: rgba(0, 229, 255, 0.28) !important;
    background: transparent !important;
}

body:has(.view.active) #sidebar#sidebar > div:last-child::before,
body:has(.view.active) #sidebar#sidebar > div:last-child .fa-circle {
    color: var(--neon-balance-magenta) !important;
    background: var(--neon-balance-magenta) !important;
    box-shadow: 0 0 9px rgba(255, 47, 166, 0.72) !important;
}

body:has(.view.active) #sidebar#sidebar #sidebar-version {
    color: rgba(201, 165, 255, 0.78) !important;
}

body:has(.view.active) #sidebar#sidebar #sidebar-version:hover {
    color: var(--neon-balance-cyan-soft) !important;
}