:root {
    --pwa-navy: #0b315f;
    --pwa-navy-dark: #061f3c;
    --pwa-gold: #e8b62f;
    --pwa-text: #10233d;
  }
  
  /* =========================
     Splash Screen
  ========================= */
  
  html.pwa-splash-active,
  html.pwa-splash-active body {
    overflow: hidden !important;
  }
  
  html.pwa-splash-active body > *:not(#pwa-splash) {
    visibility: hidden !important;
  }
  
  .pwa-splash {
    position: fixed;
    inset: 0;
    z-index: 2147483647;
  
    display: grid;
    place-items: center;
  
    background: radial-gradient(
      circle at 50% 38%,
      #fff 0,
      #f7f9fc 52%,
      #e9eff6 100%
    );
  
    opacity: 1;
    visibility: visible !important;
  
    transition:
      opacity 0.4s ease,
      visibility 0.4s ease;
  }
  
  .pwa-splash.is-leaving {
    opacity: 0;
    visibility: hidden !important;
  }
  
  .pwa-splash__content {
    display: flex;
    flex-direction: column;
    align-items: center;
  
    gap: 18px;
    padding: 24px;
  
    text-align: center;
  }
  
  .pwa-splash__logo {
    width: min(52vw, 230px);
    height: min(52vw, 230px);
  
    object-fit: contain;
  
    filter: drop-shadow(
      0 18px 30px rgba(11, 49, 95, 0.14)
    );
  
    animation: pwa-logo-in 0.65s ease-out both;
  }
  
  .pwa-splash__spinner {
    width: 44px;
    height: 44px;
  
    border: 4px solid rgba(11, 49, 95, 0.14);
    border-top-color: var(--pwa-gold);
    border-right-color: var(--pwa-navy);
    border-radius: 50%;
  
    animation: pwa-spin 0.8s linear infinite;
  }
  
  .pwa-splash__text {
    color: #53657a;
  
    font-size: 14px;
    font-weight: 700;
  
    letter-spacing: 0.01em;
  }
  
  @keyframes pwa-spin {
    to {
      transform: rotate(360deg);
    }
  }
  
  @keyframes pwa-logo-in {
    from {
      opacity: 0;
      transform: scale(0.88);
    }
  
    to {
      opacity: 1;
      transform: scale(1);
    }
  }
  
  /* =========================
     Install App Bar
  ========================= */
  
  .pwa-install-button {
    position: fixed;
    z-index: 1080;
  
    top: 0;
    right: 0;
    left: 0;
    bottom: auto;
  
    width: 100%;
    min-height: 56px;
  
    padding:
      calc(12px + env(safe-area-inset-top))
      max(20px, env(safe-area-inset-right))
      12px
      max(20px, env(safe-area-inset-left));
  
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
  
    border: 0;
    border-radius: 0;
  
    background: linear-gradient(
      135deg,
      #5f0b0b,
      #0b134b
    );
  
    color: #fff;
  
    font-size: 14px;
    font-weight: 700;
  
    box-shadow: 0 5px 18px rgba(11, 19, 75, 0.28);
  
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  
    animation: pwa-install-bar-in 0.4s ease-out both;
  }
  
  .pwa-install-button[hidden],
  .pwa-update-card[hidden],
  .pwa-install-modal[hidden],
  .pwa-connection-status[hidden] {
    display: none !important;
  }
  
  .pwa-install-button__icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
  
    width: 28px;
    height: 28px;
  
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.16);
  
    font-size: 20px;
    line-height: 1;
  }
  
  .pwa-install-button:hover {
    filter: brightness(1.06);
  }
  
  .pwa-install-button:focus-visible {
    outline: 3px solid rgba(232, 182, 47, 0.8);
    outline-offset: -4px;
  }
  
  .pwa-install-button:active {
    filter: brightness(0.9);
  }
  
  @keyframes pwa-install-bar-in {
    from {
      opacity: 0;
      transform: translateY(-100%);
    }
  
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  /* =========================
     Update Notification
  ========================= */
  
  .pwa-update-card {
    position: fixed;
    z-index: 1090;
  
    right: max(16px, env(safe-area-inset-right));
    bottom: max(18px, env(safe-area-inset-bottom));
  
    width: min(410px, calc(100vw - 32px));
  
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  
    gap: 14px;
    padding: 17px;
  
    border: 1px solid #d9e3ee;
    border-radius: 18px;
  
    background: #fff;
    color: var(--pwa-text);
  
    box-shadow: 0 18px 48px rgba(6, 31, 60, 0.22);
  
  }
  
  .pwa-update-card strong,
  .pwa-update-card small {
    display: block;
  }
  
  .pwa-update-card strong {
    margin-bottom: 5px;
    font-size: 15px;
  }
  
  .pwa-update-card small {
    color: #63758b;
    font-size: 12px;
    line-height: 1.7;
  }
  
  .pwa-update-card__actions {
    display: flex;
    gap: 8px;
  }
  
  .pwa-update-card button {
    min-height: 40px;
    padding: 8px 13px;
  
    border: 0;
    border-radius: 10px;
  
    font-size: 12px;
    font-weight: 700;
  
    cursor: pointer;
  }
  
  .pwa-update-card button:first-child {
    background: var(--pwa-navy);
    color: #fff;
  }
  
  .pwa-update-card button:last-child {
    background: #edf2f7;
    color: #43546a;
  }
  
  .pwa-update-card button:active {
    transform: scale(0.97);
  }
  
  /* =========================
     Connection Status
  ========================= */
  
  .pwa-connection-status {
    position: fixed;
    z-index: 1100;
  
    top: max(12px, env(safe-area-inset-top));
    left: 50%;
  
    width: max-content;
    max-width: calc(100vw - 32px);
  
    padding: 10px 16px;
  
    transform: translateX(-50%);
  
    border-radius: 999px;
  
    color: #fff;
  
    font-size: 12px;
    font-weight: 700;
    text-align: center;
  
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
  }
  
  .pwa-connection-status.is-offline {
    background: #b42318;
  }
  
  .pwa-connection-status.is-online {
    background: #027a48;
  }
  
  /* =========================
     Install Instructions Modal
  ========================= */
  
  .pwa-install-modal {
    position: fixed;
    inset: 0;
    z-index: 1110;
  
  }
  
  .pwa-install-modal__backdrop {
    position: absolute;
    inset: 0;
  
    background: rgba(4, 17, 32, 0.62);
  
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
  }
  
  .pwa-install-modal__dialog {
    position: absolute;
  
    left: 50%;
    bottom: max(16px, env(safe-area-inset-bottom));
  
    width: min(430px, calc(100vw - 28px));
  
    padding: 28px 24px 24px;
  
    transform: translateX(-50%);
  
    border-radius: 24px;
  
    background: #fff;
    color: var(--pwa-text);
  
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.3);
  
    text-align: right;
  }
  
  .pwa-install-modal__dialog img {
    display: block;
  
    width: 76px;
    height: 76px;
  
    margin: 0 auto 12px;
  
    border-radius: 18px;
  
    object-fit: contain;
  }
  
  .pwa-install-modal__dialog h2 {
    margin: 8px 0 18px;
  
    font-size: 19px;
    text-align: center;
  }
  
  .pwa-install-modal__dialog p {
    margin: 8px 0;
  
    color: #506176;
  
    font-size: 14px;
    line-height: 2;
  }
  
  .pwa-install-modal__close {
    position: absolute;
  
    top: 12px;
    left: 12px;
  
    width: 38px;
    height: 38px;
  
    display: grid;
    place-items: center;
  
    border: 0;
    border-radius: 50%;
  
    background: #edf2f7;
    color: #344054;
  
    font-size: 25px;
    line-height: 1;
  
    cursor: pointer;
  }
  
  .pwa-install-modal__close:active {
    transform: scale(0.94);
  }
  
  .pwa-modal-open {
    overflow: hidden !important;
  }
  
  /* =========================
     Installed Application
  ========================= */
  
  @media (display-mode: standalone) {
    .pwa-install-button {
      display: none !important;
    }
  
    body {
      padding-top: env(safe-area-inset-top);
      padding-right: env(safe-area-inset-right);
      padding-left: env(safe-area-inset-left);
    }
  }
  
  /* =========================
     Desktop
  ========================= */
  
  @media (min-width: 992px) {
    .pwa-install-button {
      top: auto;
      right: auto;
      left: 24px;
      bottom: 24px;
  
      width: auto;
      min-height: 48px;
  
      padding: 11px 18px;
  
      border-radius: 999px;
  
      animation: pwa-button-desktop-in 0.35s ease-out both;
    }
  
    .pwa-install-modal__dialog {
      top: 50%;
      bottom: auto;
  
      transform: translate(-50%, -50%);
    }
  }
  
  @keyframes pwa-button-desktop-in {
    from {
      opacity: 0;
      transform: translateY(12px);
    }
  
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  /* =========================
     Small Mobile Screens
  ========================= */
  
  @media (max-width: 480px) {
    .pwa-install-button {
      font-size: 13px;
    }
  
    .pwa-update-card {
      right: 12px;
      bottom: max(12px, env(safe-area-inset-bottom));
  
      width: calc(100vw - 24px);
  
      padding: 15px;
    }
  
    .pwa-update-card__actions {
      width: 100%;
    }
  
    .pwa-update-card__actions button {
      flex: 1;
    }
  
    .pwa-install-modal__dialog {
      width: calc(100vw - 20px);
      padding: 26px 20px 22px;
    }
  }
  
  /* =========================
     Reduced Motion
  ========================= */
  
  @media (prefers-reduced-motion: reduce) {
    .pwa-splash,
    .pwa-splash__logo,
    .pwa-install-button {
      animation: none !important;
      transition: none !important;
    }
  
    .pwa-splash__spinner {
      animation-duration: 1.5s;
    }
  }