/* Normal website on phones and tablets, independent of viewport height. */
@media (max-width: 1100px) {
  body.koko-login-page, body.koko-dashboard-page, body.kokotank-home-page {
    width: 100%; min-width: 0 !important; height: auto !important;
    min-height: 100vh !important; overflow-y: auto !important;
    background-color: #071b29 !important;
  }
  body.koko-login-page .navbar, body.koko-dashboard-page .navbar, body.kokotank-home-page .navbar {
    position: relative !important; inset: auto !important;
    width: 100% !important; height: auto !important; min-height: 64px;
    display: grid !important; grid-template-columns: minmax(0,1fr) auto;
    gap: 8px 10px; align-items: center; padding: 12px 14px 8px !important;
  }
  body .navbar .navbar-left { display: contents !important; }
  body .navbar .logo, body .navbar .brand {
    grid-column: 1; grid-row: 1; width: auto !important; min-width: 0 !important; margin: 0 !important;
  }
  body .navbar .logo img, body .navbar .brand img { width: 110px !important; max-height: 56px !important; object-fit: contain; }
  body .navbar .nav-right, body .navbar .nav-actions {
    grid-column: 2; grid-row: 1; width: auto !important; display: flex !important;
    flex-wrap: wrap; gap: 6px; justify-content: flex-end; min-width: 0;
  }
  body .navbar .nav-links {
    grid-column: 1 / -1; grid-row: 2; display: flex !important;
    width: 100%; min-width: 0; max-width: 100%; gap: 6px !important;
    overflow-x: auto; overscroll-behavior-x: contain; padding: 4px 0;
    -webkit-overflow-scrolling: touch;
  }
  body .navbar .nav-links a { flex: 0 0 auto; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
  body .navbar .nav-links a, body .navbar .nav-right a, body .navbar .nav-actions a {
    min-height: 44px !important; height: auto !important; padding: 10px 12px !important; font-size: 12px !important;
  }
  body .navbar .koko-user-pill { max-width: 100%; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
  body .navbar .koko-user-text { display: none; }
  body.koko-login-page .page-wrapper {
    width: 100% !important; height: auto !important; min-height: 0 !important;
    padding: 28px 16px !important; margin-top: 0 !important;
  }
  body.koko-dashboard-page .koko-home-shell, body.koko-dashboard-page .download-shell,
  body.koko-dashboard-page .events-shell { margin-top: 24px !important; }
  body.kokotank-home-page .page { padding-top: 0 !important; }
  body .modal-box { max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); overflow-y: auto; }
  body .koko-global-footer { background: rgba(5,24,36,.94); color: #d3e4ed; padding: 24px 16px; }
  body.koko-events-page .event-link { position: static; margin-top: 16px; min-height: 44px; }
  body input, body select, body textarea { font-size: 16px !important; }
}
@media (max-width: 620px) {
  body.koko-login-page:not(.koko-register-page) .hero-section { grid-template-columns: minmax(0,1fr) !important; gap: 24px !important; }
  body.koko-login-page .left-column { width: 100% !important; min-width: 0 !important; }
  body.koko-login-page .login-card { max-width: 100% !important; }
  body.koko-login-page .login-promo-panel h1 { font-size: 34px !important; }
  body.koko-login-page .login-promo-panel { padding: 8px 0 !important; }
  body.koko-dashboard-page .koko-home-shell { width: calc(100% - 24px) !important; }
  body.koko-dashboard-page .koko-home-shell > * { min-width: 0; }
  body.koko-dashboard-page .koko-profile-card-new { width: 100% !important; max-width: none !important; }
  body .download-card-grid { grid-template-columns: minmax(0,1fr) !important; }
  body .download-card, body .download-hero { min-width: 0; overflow-wrap: anywhere; }
  body .download-card a { min-height: 44px; }
  body.kokotank-home-page .hero-actions { display: grid; grid-template-columns: minmax(0,1fr); }
  body.kokotank-home-page .hero-actions .btn { width: 100%; min-height: 48px; }
  body.kokotank-home-page .brand { min-width: 0; }
}