/* ==========================================================================
   NOVERA PANEL — responsive
   1200  ·  980  ·  760  ·  520  ·  380
   ========================================================================== */

@media (max-width: 1200px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .view { padding: 26px 24px 70px; }
}

@media (max-width: 980px) {
  .shell { grid-template-columns: 1fr; }

  .side {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--side-w);
    z-index: 60;
    transform: translateX(-100%);
    transition: transform var(--mid) var(--ease);
    box-shadow: none;
  }
  .side.is-open { transform: none; box-shadow: 12px 0 40px rgba(0, 0, 0, .5); }

  .side__backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(5, 6, 10, .62);
    backdrop-filter: blur(2px);
    animation: fade-in var(--mid) var(--ease);
  }
  @keyframes fade-in { from { opacity: 0; } }

  .burger { display: flex; }
  .top { padding: 0 20px; }

  .grid--2 { grid-template-columns: 1fr; }
  .form--two { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .view { padding: 22px 18px 70px; }

  .page__head { flex-direction: column; align-items: stretch; }
  .page__actions { flex-wrap: wrap; }

  .grid--3, .grid--4 { grid-template-columns: 1fr; }

  .hero { flex-direction: column; align-items: stretch; gap: 18px; }
  .hero__actions .btn { flex: 1; }

  .savebar { flex-direction: column; align-items: stretch; gap: 12px; bottom: 12px; }
  .savebar__actions { justify-content: stretch; }
  .savebar__actions .btn { flex: 1; }

  .card { padding: 18px; }
  .row { flex-direction: column; align-items: flex-start; gap: 4px; }

  .step { align-items: flex-start; }
}

@media (max-width: 520px) {
  .view { padding: 20px 14px 70px; }
  .top { padding: 0 14px; gap: 10px; }

  .crumb { font-size: .78rem; }
  .crumb__part { max-width: 110px; overflow: hidden; text-overflow: ellipsis; }

  .gate__box { padding: 34px 22px 26px; }

  .modal__foot { flex-direction: column-reverse; }
  .modal__foot .btn { width: 100%; }

  .toasts { left: 14px; right: 14px; bottom: 14px; }

  .lister__bar { flex-direction: column; gap: 14px; }
  .lister__meta { justify-content: space-between; width: 100%; }

  .card__foot .btn { flex: 1; }
}

@media (max-width: 380px) {
  .features-grid { grid-template-columns: 1fr; }
  .checks--inline { grid-template-columns: 1fr; }
  .side { width: 100%; }
}