@media (max-width: 1100px) {
  .app-shell { grid-template-columns: 214px minmax(0,1fr); }
  .app-shell.sidebar-collapsed { grid-template-columns: 70px minmax(0,1fr); }
  .sidebar { padding-inline: 11px; }
  .content { padding-inline: 18px; }
  .service-info-row { grid-template-columns: 74px minmax(0,1fr) auto; }
}

@media (max-width: 760px) {
  .app-shell, .app-shell.sidebar-collapsed { display: block; }
  .sidebar { position: fixed; inset: 0 auto 0 0; width: min(82vw, 276px); transform: translateX(-105%); transition: transform var(--transition); box-shadow: var(--shadow-lg); padding: 14px 12px; }
  .app-shell.sidebar-open .sidebar { transform: translateX(0); }
  .app-shell.sidebar-collapsed .brand { justify-content: flex-start; }
  .app-shell.sidebar-collapsed .brand-copy,
  .app-shell.sidebar-collapsed .profile-copy,
  .app-shell.sidebar-collapsed .nav-label,
  .app-shell.sidebar-collapsed .sidebar-logout-text { display: initial; }
  .app-shell.sidebar-collapsed .nav-item { justify-content: flex-start; padding-inline: 11px; }
  .app-shell.sidebar-collapsed .nav-dot { width: 7px; height: 7px; }
  .app-shell.sidebar-collapsed .sidebar-profile { justify-items: stretch; }
  .app-shell.sidebar-collapsed .sidebar-logout { width: auto; padding: 0 16px; }
  .app-shell.sidebar-collapsed .sidebar-logout-icon { display: none; }
  .sidebar-toggle { top: 56px; right: -14px; }
  .mobile-menu { display: inline-flex; min-height: 36px; padding: 0 10px; }
  .topbar { padding: 0 12px; min-height: 54px; justify-content: flex-start; }
  .content { padding: 16px 12px 24px; }
  .services-head { align-items: flex-start; }
  .services-head .btn { min-height: 38px; padding-inline: 12px; }
  .service-info-row { grid-template-columns: 68px minmax(0,1fr); gap: 7px 10px; align-items: start; }
  .service-info-actions { grid-column: 2; justify-content: flex-start; }
  .user-summary { grid-template-columns: minmax(0,1fr) auto; }
  .user-summary .user-role-cell { display: none; }
  .permission-row { grid-template-columns: 1fr; }
  .permission-row .select { min-height: 38px; }
}

@media (max-width: 520px) {
  :root { --radius-xl: 18px; --radius-lg: 14px; }
  .auth-page { padding: 12px 9px; align-items: stretch; }
  .auth-card { padding: 20px 15px; border-radius: 17px; margin: auto 0; }
  .brand-title { font-size: 1rem; }
  .btn { min-height: 39px; font-size: .86rem; }
  .input, .select { min-height: 41px; font-size: .9rem; }
  .services-head { display: grid; gap: 12px; margin-bottom: 14px; }
  .services-head .btn { width: 100%; }
  .services-head h1 { font-size: 1.32rem; }
  .services-head p { font-size: .8rem; }
  .service-summary { min-height: 47px; padding: 8px 12px; }
  .service-detail-body { padding: 12px; }
  .service-info-row { grid-template-columns: 1fr; gap: 5px; }
  .service-info-actions { grid-column: 1; }
  .service-info-actions .btn { width: 100%; }
  .service-actions .btn { flex: 1 1 120px; }
  .toolbar { align-items: stretch; }
  .toolbar > * { width: 100%; }
  .user-actions .btn { flex: 1 1 140px; }
  .modal-backdrop { padding: 8px; align-items: end; }
  .modal { padding: 17px 14px; border-radius: 17px 17px 0 0; max-height: 92vh; overflow-y: auto; }
  .modal-actions .btn { flex: 1 1 120px; }
  .toast-root { right: 10px; bottom: 10px; max-width: calc(100vw - 20px); }
}

@media (max-width: 380px) {
  .content { padding-inline: 9px; }
  .topbar { padding-inline: 8px; }
  .service-row { border-radius: 11px; }
  .service-name { font-size: .87rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}