@media (max-width: 1280px) {
  .topbar {
    flex-wrap: wrap;
  }

  .header-actions {
    flex-basis: 100%;
    justify-content: flex-start;
  }

  .login-page {
    grid-template-columns: 1fr 440px;
    padding: 42px 32px 24px;
  }

  .login-showcase {
    padding-left: 80px;
  }

  .autonect-word {
    font-size: 42px;
  }

  .steelops-word {
    font-size: 42px;
  }

  .capability-row {
    flex-wrap: wrap;
  }
}

@media (max-width: 980px) {
  .sidebar {
    width: 232px;
    padding-inline: 16px;
  }

  .page {
    margin-left: 232px;
  }

  .sidebar-collapsed .page {
    margin-left: 76px;
  }

  .header-meta,
  .header-divider {
    display: none;
  }

  .login-page {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .login-showcase {
    min-height: 540px;
    padding: 56px 24px 24px;
  }

  .login-panel {
    padding-left: 0;
  }

  .plant-scene {
    bottom: 96px;
    height: 300px;
  }

  .login-footer {
    padding: 18px 32px;
  }
}

@media (max-width: 760px) {
  .app-shell {
    display: block;
  }

  .sidebar {
    position: static;
    width: 100%;
    min-height: auto;
  }

  .sidebar-collapsed .sidebar {
    width: 76px;
    height: auto;
    padding: 14px;
  }

  .powered-by {
    display: none;
  }

  .page {
    margin-left: 0;
  }

  .topbar {
    min-height: auto;
    padding: 16px;
  }

  .title-block {
    min-width: 0;
  }

  .title-block h1 {
    font-size: 20px;
  }

  .title-block p {
    font-size: 12px;
  }

  .header-actions {
    gap: 10px;
  }

  .search-box {
    width: 100%;
  }

  .view-toggle {
    width: 100%;
  }

  .view-toggle button {
    flex: 1;
  }

  .login-page {
    min-height: auto;
    padding: 26px 16px;
  }

  .login-showcase {
    min-height: auto;
    padding: 18px 0;
  }

  .steelops-brand {
    flex-wrap: wrap;
    gap: 8px 14px;
  }

  .autonect-word,
  .steelops-word {
    font-size: 34px;
  }

  .showcase-content h1 {
    font-size: 18px;
  }

  .capability-row,
  .plant-scene {
    display: none;
  }

  .insight-strip {
    flex-direction: column;
    gap: 18px;
  }

  .insight-item + .insight-item {
    padding-left: 0;
    border-left: 0;
  }

  .login-card {
    padding: 28px 20px 24px;
  }

  .login-footer {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
}

@media (max-width: 520px) {
  .sidebar {
    padding: 18px 14px;
  }

  .brand-logo {
    font-size: 34px;
  }

  .header-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .live-status,
  .bell-button,
  .user-menu {
    align-self: flex-start;
  }

  .form-options,
  .login-footer nav {
    flex-direction: column;
    gap: 12px;
  }

  .form-options {
    align-items: flex-start;
  }

  .sks-card-logo span {
    width: 82px;
    height: 82px;
    font-size: 70px;
  }

  .powered-login {
    flex-direction: column;
    gap: 8px;
  }
}