@media (min-width: 769px) {
    :root {
        --sidebar-width: 252px;
        --sidebar-transition: 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* ══════════════════════════════════════════
       SIDEBAR WRAPPER
    ══════════════════════════════════════════ */
    .sidebar {
        padding: 0;
        background: var(--star-navbar-bg);
        border-right: 1px solid var(--star-border-color);
        box-shadow:
            4px 0 24px rgba(0, 0, 0, 0.35),
            inset -1px 0 0 rgba(var(--primary-rgb), 0.06);
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .sidebar::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 180px;
        background: radial-gradient(
            ellipse 120% 80% at 50% -10%,
            rgba(var(--primary-rgb), 0.12) 0%,
            transparent 70%
        );
        pointer-events: none;
        z-index: 0;
    }

    .sidebar.collapsed {
        padding: 0;
    }

    /* ══════════════════════════════════════════
       LOGO AREA
    ══════════════════════════════════════════ */
    .logo-container {
        position: relative;
        z-index: 1;
        margin: 0;
        padding: 22px 20px 18px;
        background: transparent;
        border-radius: 0;
        border: none;
        border-bottom: 1px solid rgba(var(--primary-rgb), 0.1);
        box-shadow: none;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .sidebar.collapsed .logo-container {
        padding: 18px 10px 16px;
        margin-bottom: 0;
    }

    .logo {
        max-width: 120px;
        transition: max-width var(--sidebar-transition), opacity 0.2s ease;
        filter: drop-shadow(0 0 12px rgba(var(--primary-rgb), 0.25));
    }

    .sidebar.collapsed .logo {
        max-width: 36px;
    }

    /* ══════════════════════════════════════════
       NAVIGATION MENU
    ══════════════════════════════════════════ */
    .sidebar-menu {
        flex: 1;
        padding: 12px 10px 8px;
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-width: thin;
        scrollbar-color: rgba(var(--primary-rgb), 0.2) transparent;
    }

    .sidebar-menu::-webkit-scrollbar {
        width: 3px;
    }

    .sidebar-menu::-webkit-scrollbar-track {
        background: transparent;
    }

    .sidebar-menu::-webkit-scrollbar-thumb {
        background: rgba(var(--primary-rgb), 0.25);
        border-radius: 2px;
    }

    .sidebar-menu li {
        margin-bottom: 3px;
        list-style: none;
    }

    .sidebar-menu li a {
        position: relative;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 13px;
        font-size: 13px;
        font-weight: 500;
        letter-spacing: 0.01em;
        color: var(--star-normal-text-color);
        border-radius: 10px;
        border: 1px solid transparent;
        background-color: transparent;
        text-decoration: none;
        transition:
            background-color var(--sidebar-transition),
            color var(--sidebar-transition),
            border-color var(--sidebar-transition),
            transform 0.18s ease,
            box-shadow var(--sidebar-transition);
        overflow: hidden;
        white-space: nowrap;
    }

    /* Shimmer line on left */
    .sidebar-menu li a::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%) scaleY(0);
        width: 3px;
        height: 60%;
        background: linear-gradient(
            to bottom,
            transparent,
            var(--star-button-background-color),
            transparent
        );
        border-radius: 0 3px 3px 0;
        transition: transform 0.22s ease, opacity 0.22s ease;
        opacity: 0;
    }

    .sidebar-menu li a:hover {
        background-color: rgba(var(--primary-rgb), 0.08);
        color: var(--star-onemli-text-color);
        border-color: rgba(var(--primary-rgb), 0.15);
        transform: translateX(3px);
        box-shadow: 0 2px 12px rgba(var(--primary-rgb), 0.1);
    }

    .sidebar-menu li a:hover::before {
        transform: translateY(-50%) scaleY(1);
        opacity: 1;
    }

    .sidebar-menu li a.active {
        background: linear-gradient(
            135deg,
            rgba(var(--primary-rgb), 0.16) 0%,
            rgba(var(--primary-rgb), 0.07) 100%
        );
        color: var(--star-onemli-text-color);
        border-color: rgba(var(--primary-rgb), 0.22);
        font-weight: 600;
        box-shadow:
            0 2px 16px rgba(var(--primary-rgb), 0.15),
            inset 0 1px 0 rgba(var(--primary-rgb), 0.12);
        transform: translateX(2px);
    }

    .sidebar-menu li a.active::before {
        transform: translateY(-50%) scaleY(1);
        opacity: 1;
        background: var(--star-button-background-color);
        box-shadow: 0 0 8px rgba(var(--primary-rgb), 0.6);
    }

    /* Icon styles */
    .sidebar-menu li a i {
        width: 20px;
        font-size: 14px;
        text-align: center;
        flex-shrink: 0;
        transition: color var(--sidebar-transition), transform 0.22s ease;
    }

    .sidebar-menu li a:hover i,
    .sidebar-menu li a.active i {
        color: var(--star-onemli-text-color);
        transform: scale(1.12);
    }

    .sidebar-menu li a .menu-text {
        flex: 1;
        transition: opacity 0.2s ease;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* ══════════════════════════════════════════
       FOOTER
    ══════════════════════════════════════════ */
    .sidebar-footer {
        margin-top: auto;
        padding: 12px 10px 14px;
        border-top: 1px solid rgba(var(--primary-rgb), 0.1);
        background: linear-gradient(
            to top,
            rgba(var(--primary-rgb), 0.04),
            transparent
        );
        border-radius: 0;
        box-shadow: none;
        flex-shrink: 0;
    }

    /* ══════════════════════════════════════════
       SOCIAL ICONS
    ══════════════════════════════════════════ */
    .social-icons {
        margin: 0;
        gap: 5px;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .social-icon-sidebar span {
        display: none;
    }

    .social-icon-sidebar {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0;
        width: 38px;
        height: 38px;
        flex-shrink: 0;
        border-radius: 10px;
        font-size: 13px;
        font-weight: 500;
        text-decoration: none;
        color: var(--star-normal-text-color);
        background: rgba(var(--primary-rgb), 0.06);
        border: 1px solid rgba(var(--primary-rgb), 0.1);
        transition:
            background-color 0.22s ease,
            border-color 0.22s ease,
            color 0.22s ease,
            transform 0.2s ease,
            box-shadow 0.22s ease;
        overflow: hidden;
    }

    .social-icon-sidebar::after {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at center, rgba(255,255,255,0.06) 0%, transparent 70%);
        opacity: 0;
        transition: opacity 0.22s ease;
        pointer-events: none;
    }

    .social-icon-sidebar:hover {
        transform: translateY(-2px);
        background: rgba(var(--primary-rgb), 0.14);
        border-color: rgba(var(--primary-rgb), 0.3);
        color: var(--star-onemli-text-color);
        box-shadow: 0 4px 16px rgba(var(--primary-rgb), 0.2);
    }

    .social-icon-sidebar:hover::after {
        opacity: 1;
    }

    /* Platform-specific accent colours */
    .social-icon-sidebar.telegram:hover {
        background: rgba(36, 161, 222, 0.15);
        border-color: rgba(36, 161, 222, 0.35);
        color: #29b6f6;
        box-shadow: 0 4px 16px rgba(36, 161, 222, 0.2);
    }

    .social-icon-sidebar.discord:hover {
        background: rgba(88, 101, 242, 0.15);
        border-color: rgba(88, 101, 242, 0.35);
        color: #7289da;
        box-shadow: 0 4px 16px rgba(88, 101, 242, 0.2);
    }

    .social-icon-sidebar.twitch:hover {
        background: rgba(145, 70, 255, 0.15);
        border-color: rgba(145, 70, 255, 0.35);
        color: #9146ff;
        box-shadow: 0 4px 16px rgba(145, 70, 255, 0.2);
    }

    .social-icon-sidebar.youtube:hover {
        background: rgba(255, 0, 0, 0.12);
        border-color: rgba(255, 0, 0, 0.3);
        color: #ff4444;
        box-shadow: 0 4px 16px rgba(255, 0, 0, 0.18);
    }

    .social-icon-sidebar.instagram:hover {
        background: rgba(225, 48, 108, 0.12);
        border-color: rgba(225, 48, 108, 0.3);
        color: #e1306c;
        box-shadow: 0 4px 16px rgba(225, 48, 108, 0.18);
    }

    .social-icon-sidebar.kick:hover {
        background: rgba(83, 252, 29, 0.1);
        border-color: rgba(83, 252, 29, 0.3);
        color: #53fc1d;
        box-shadow: 0 4px 16px rgba(83, 252, 29, 0.18);
    }

    /* ══════════════════════════════════════════
       TOGGLE BUTTON
    ══════════════════════════════════════════ */
    .sidebar-toggle-btn {
        top: 58px;
        width: 24px;
        height: 24px;
        font-size: 9px;
        left: calc(var(--sidebar-width) - 12px);
        background: var(--star-card-background-color);
        border: 1px solid rgba(var(--primary-rgb), 0.25);
        color: var(--star-onemli-text-color);
        box-shadow:
            0 2px 8px rgba(0, 0, 0, 0.3),
            0 0 0 1px var(--star-navbar-bg),
            0 0 12px rgba(var(--primary-rgb), 0.1);
        transition:
            background-color 0.18s ease,
            border-color 0.18s ease,
            color 0.18s ease,
            left 0.28s cubic-bezier(0.4, 0, 0.2, 1),
            box-shadow 0.18s ease;
    }

    .sidebar.collapsed .sidebar-toggle-btn {
        left: calc(var(--collapsed-sidebar-width) - 12px);
    }

    .sidebar-toggle-btn:hover {
        background: rgba(var(--primary-rgb), 0.15);
        border-color: rgba(var(--primary-rgb), 0.5);
        box-shadow:
            0 3px 12px rgba(0, 0, 0, 0.35),
            0 0 0 1px var(--star-navbar-bg),
            0 0 18px rgba(var(--primary-rgb), 0.25);
        transition:
            background-color 0.18s ease,
            border-color 0.18s ease,
            color 0.18s ease,
            left 0.28s cubic-bezier(0.4, 0, 0.2, 1),
            box-shadow 0.18s ease,
            transform 0.18s ease;
    }

    .sidebar-toggle-btn:not(:hover) {
        animation: none;
    }

    /* ══════════════════════════════════════════
       COLLAPSED STATE
    ══════════════════════════════════════════ */
    .sidebar.collapsed .sidebar-menu {
        padding: 12px 6px 8px;
    }

    .sidebar.collapsed .sidebar-menu li a {
        padding: 10px;
        justify-content: center;
        border: 1px solid rgba(var(--primary-rgb), 0.08);
        border-left-width: 1px;
        background-color: rgba(var(--primary-rgb), 0.04);
        transform: none;
    }

    .sidebar.collapsed .sidebar-menu li a::before {
        display: none;
    }

    .sidebar.collapsed .sidebar-menu li a:hover {
        background-color: rgba(var(--primary-rgb), 0.12);
        border-color: rgba(var(--primary-rgb), 0.25);
        transform: scale(1.05);
        box-shadow: 0 2px 12px rgba(var(--primary-rgb), 0.15);
    }

    .sidebar.collapsed .sidebar-menu li a.active {
        background: linear-gradient(
            135deg,
            rgba(var(--primary-rgb), 0.18) 0%,
            rgba(var(--primary-rgb), 0.08) 100%
        );
        border-color: rgba(var(--primary-rgb), 0.3);
        box-shadow: 0 2px 14px rgba(var(--primary-rgb), 0.2);
        transform: none;
    }

    .sidebar.collapsed .sidebar-footer {
        padding: 10px 6px 12px;
    }

    .sidebar.collapsed .social-icons {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 5px;
        justify-content: center;
    }

    .sidebar.collapsed .social-icon-sidebar {
        width: 36px;
        height: 36px;
        min-width: 0;
        flex-shrink: 0;
    }

    /* span already hidden globally above */
}