@media (min-width: 1280px) {
  :root { --sidebar-width: 258px; }

  .app-sidebar {
    inset: 12px auto 12px 12px;
    width: 234px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 26px;
    background:
      radial-gradient(circle at 20% 0%, rgba(89,190,125,.2), transparent 32%),
      linear-gradient(176deg, rgba(5,91,51,.98), rgba(3,112,61,.96));
    box-shadow: 0 20px 55px rgba(6,66,39,.25), inset 0 1px rgba(255,255,255,.08);
  }

  .app-main { margin-left: var(--sidebar-width); width: calc(100% - var(--sidebar-width)); }
  html.sidebar-collapsed .app-sidebar { transform: translateX(calc(-100% - 16px)); }
  .sidebar-desktop-toggle { top: 25px; left: 202px; }
  html.sidebar-collapsed .sidebar-desktop-toggle { left: 14px; }
}

.sidebar-scroll { padding: 12px 10px 7px; }
.sidebar-environment {
  margin: 0 0 16px;
  padding: 12px 8px;
  border: 2px solid #dc2626;
  border-radius: 12px;
  background: #fff1f2;
  color: #b91c1c;
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
}
.sidebar-brand {
  min-height: 53px;
  margin: 0 0 10px;
  padding: 7px 42px 12px 8px;
  border-bottom-color: rgba(255,255,255,.12);
  font-size: .94rem;
  letter-spacing: -.015em;
}
.sidebar-brand-icon {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: rgba(255,255,255,.15);
  box-shadow: inset 0 1px rgba(255,255,255,.12);
}
.sidebar-section { margin-bottom: 10px; }
.sidebar-section-title { padding: 4px 9px; color: rgba(221,247,230,.58); font-size: .59rem; letter-spacing: .12em; }
.sidebar-link,
.sidebar-collapse-btn {
  min-height: 43px;
  padding: 6px 8px;
  border-radius: 14px;
  font-size: .81rem;
}
.sidebar-link:hover,
.sidebar-collapse-btn:hover { background: rgba(255,255,255,.11); transform: translateX(1px); }
.sidebar-link.active,
.sidebar-collapse-btn.active {
  color: #fff;
  background: linear-gradient(100deg, rgba(255,255,255,.19), rgba(255,255,255,.09));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 7px 16px rgba(0,40,21,.12);
}
.sidebar-link.active .sidebar-icon,
.sidebar-collapse-btn.active .sidebar-icon { color: #17462d; background: #d7f289; border-color: transparent; }
.sidebar-icon { width: 29px; height: 29px; border-radius: 10px; background: rgba(255,255,255,.10); }
.sidebar-submenu { margin: 4px 0 4px 13px; padding: 4px 0 4px 8px; border-left: 1px solid rgba(255,255,255,.13); }
.sidebar-sublink { min-height: 34px; padding: 6px 8px; border-radius: 10px; font-size: .75rem; }
.sidebar-sublink:hover { background: rgba(255,255,255,.09); }
.sidebar-user { margin: 0 8px 8px; padding: 9px; border: 1px solid rgba(255,255,255,.11); border-radius: 17px; background: rgba(0,42,23,.16); }
.sidebar-user-avatar { border-radius: 11px; background: linear-gradient(135deg,rgba(255,255,255,.21),rgba(255,255,255,.10)); }
.sidebar-user-btn { min-height: 34px; border-radius: 10px; }
.sidebar-desktop-toggle,
.sidebar-mobile-close { border-radius: 12px; background: rgba(3,83,45,.96); box-shadow: 0 8px 22px rgba(0,46,24,.28); }

@media (max-width: 1279.98px) {
  .app-sidebar {
    inset: 8px auto 8px 8px;
    width: min(86vw, 286px);
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 14px 0 45px rgba(5,43,25,.28);
    transform: translateX(calc(-100% - 12px));
  }
  .app-sidebar.show { transform: translateX(0); }
  .mobile-topbar { margin: 8px 8px 0; border: 1px solid #e4e9e6; border-radius: 17px; box-shadow: 0 5px 18px rgba(19,45,30,.06); }
}