/* Sidebar / navigation */
.sidebar {
      width: 260px; background: var(--sidebar); border-right: 1px solid var(--border);
      padding: 20px 14px; position: fixed; inset: 0 auto 0 0; overflow-y: auto; z-index: 40;
    }

    .logo { font-size: 20px; font-weight: 800; margin-bottom: 20px; color: #fff; padding: 0 8px; }
    .logo span { color: var(--accent); }
    .menu { list-style: none; }
    .menu > li { margin-bottom: 2px; }
    .menu a, .menu .menu-parent {
      display: flex; align-items: center; gap: 8px; color: #9da9be; text-decoration: none;
      padding: 10px 12px; border-radius: 8px; font-size: 13px; cursor: pointer; transition: .2s;
      user-select: none;
    }

    .menu a:hover, .menu a.active, .menu-parent:hover { background: #202a44; color: #fff; }
    .menu-parent { justify-content: space-between; }
    .menu-parent .arrow { font-size: 10px; transition: transform .2s; }
    .menu-parent.open .arrow { transform: rotate(90deg); }
    .submenu { display: none; list-style: none; padding-left: 12px; margin: 4px 0 6px; }
    .submenu.open { display: block; }
    .submenu a { font-size: 12px; padding: 8px 12px; }
    .sidebar-bottom { margin-top: 24px; padding: 0 8px; }
    .server-status {
      background: #172037; padding: 12px; border-radius: 10px; font-size: 11px; color: var(--muted);
    }

    .status-dot {
      width: 8px; height: 8px; background: var(--success); border-radius: 50%;
      display: inline-block; margin-right: 6px;
    }

    .mobile-menu-btn {
      display: none; background: var(--panel); border: 1px solid var(--border);
      color: #fff; padding: 10px 14px; border-radius: 8px; cursor: pointer; margin-bottom: 14px;
    }

    .sidebar-overlay {
      display: none; position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 35;
    }

    .sidebar-overlay.show { display: block; }
      .mobile-menu-btn { display: block; }
      .sidebar { transform: translateX(-100%); transition: transform .3s; }
      .sidebar.open { transform: translateX(0); }