@media (max-width:760px) {
  body.menu-open { overflow:hidden; }
  .sidebar { display:flex; position:fixed; z-index:30; inset:0 auto 0 0; width:min(290px,82vw); padding-top:24px; box-shadow:18px 0 42px rgba(8,28,48,.28); transform:translateX(-105%); transition:transform .22s ease; }
  .sidebar.mobile-open { transform:translateX(0); }
  .mobile-menu-backdrop { display:block; position:fixed; z-index:20; inset:0; width:100%; border:0; background:rgba(8,28,48,.48); opacity:0; pointer-events:none; transition:opacity .22s ease; }
  .mobile-menu-backdrop.visible { opacity:1; pointer-events:auto; }
  .mobile-menu-toggle { display:grid; gap:4px; width:42px; height:42px; place-content:center; flex:0 0 42px; padding:0; border:1px solid var(--line); border-radius:8px; background:#fff; cursor:pointer; }
  .mobile-menu-toggle span { display:block; width:19px; height:2px; border-radius:2px; background:var(--navy); }
  .main-content { padding:20px 15px; }
  .topbar { gap:12px; flex-direction:row; align-items:flex-start; flex-wrap:wrap; }
  .topbar > div:first-of-type { flex:1; }
  .topbar-actions { width:100%; order:3; }
  .topbar-actions .btn { flex:1; }
  .settings-tabs { display:flex; flex-wrap:wrap; gap:4px; }
  .settings-tab { flex:1 1 calc(50% - 4px); min-width:0; }
}

@media (min-width:761px) {
  .mobile-menu-toggle, .mobile-menu-backdrop { display:none; }
}