:root {
  --app-safe-top: env(safe-area-inset-top, 0px);
  --app-safe-bottom: env(safe-area-inset-bottom, 0px);
  --app-red: #c1121f;
}

html { overflow-x: hidden; text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
body { overflow-wrap: anywhere; min-width: 0; }
img, video, iframe, canvas { max-width: 100%; }
img { height: auto; }
table { max-width: 100%; }
.table-responsive, .responsive-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
input, select, textarea, button { font-size: 16px; }
:focus-visible { outline: 3px solid #0d6efd; outline-offset: 2px; }

.app-bottom-nav, .app-install-prompt { display: none; }

@media (max-width: 991.98px) {
  body { padding-bottom: calc(68px + var(--app-safe-bottom)); }
  .container, .container-sm, .container-md, .container-lg, .container-xl { max-width: 100%; }
  .navbar-brand img { max-width: min(52vw, 210px); height: auto !important; }
  .navbar-collapse { max-height: calc(100dvh - 80px); overflow-y: auto; overscroll-behavior: contain; }
  .dropdown-menu { max-width: calc(100vw - 2rem); }
  .row > [class*="col-"] { min-width: 0; }
  pre, code { white-space: pre-wrap; word-break: break-word; }
  .app-bottom-nav {
    position: fixed; display: grid; grid-template-columns: repeat(4, 1fr);
    left: 0; right: 0; bottom: 0; z-index: 2147483000;
    min-height: calc(62px + var(--app-safe-bottom)); padding: 6px 8px var(--app-safe-bottom);
    background: #fff; background: color-mix(in srgb, #fff 94%, transparent); border-top: 1px solid #dfe3e8;
    box-shadow: 0 -8px 24px #00000014; backdrop-filter: blur(16px);
  }
  .app-bottom-nav a, .app-bottom-nav button {
    appearance: none; border: 0; background: transparent; color: #48515b; text-decoration: none;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-width: 44px; min-height: 50px; font: 600 11px/1.1 system-ui, sans-serif;
  }
  .app-bottom-nav i { font-size: 19px; }
  .app-bottom-nav a:hover, .app-bottom-nav button:hover { color: var(--app-red); }
  .app-install-prompt {
    position: fixed; display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 10px;
    left: 12px; right: 12px; bottom: calc(76px + var(--app-safe-bottom)); z-index: 2147483001;
    padding: 12px 44px 12px 12px; border: 1px solid #e1e4e8; border-radius: 16px;
    background: #fff; color: #18202a; box-shadow: 0 18px 50px #0003; font-family: system-ui, sans-serif;
  }
  .app-install-prompt[hidden] { display: none; }
  .app-install-prompt img { border-radius: 12px; }
  .app-install-prompt strong, .app-install-prompt span { display: block; }
  .app-install-prompt span { color: #66717d; font-size: 12px; margin-top: 2px; }
  .app-install-prompt [data-install-app] { border: 0; border-radius: 10px; padding: 10px 14px; background: var(--app-red); color: #fff; font-weight: 800; }
  .app-install-close { position: absolute; right: 8px; top: 5px; border: 0; background: transparent; color: #65707c; font-size: 24px; }
  #push-permission-bar { left: 12px !important; right: 12px !important; bottom: calc(76px + var(--app-safe-bottom)) !important; width: auto !important; max-width: 430px; margin-inline: auto; }
}

@media (max-width: 575.98px) {
  h1 { font-size: clamp(1.65rem, 7vw, 2.15rem); }
  h2 { font-size: clamp(1.35rem, 5.5vw, 1.8rem); }
  .card-body, .main-content { padding: 1rem; }
  .btn { min-height: 42px; }
  .modal-dialog { margin: .5rem; }
  .app-install-prompt { grid-template-columns: 46px 1fr; }
  .app-install-prompt img { width: 46px; height: 46px; }
  .app-install-prompt [data-install-app] { grid-column: 1 / -1; width: 100%; }
}

@media (display-mode: standalone) {
  body { padding-top: var(--app-safe-top); }
  .app-install-prompt { display: none !important; }
}

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