html {
    font-size: 13px;
    font-weight: 400;
    font-family: Inter,Helvetica,sans-serif;
    -webkit-font-smoothing: antialiased;
  }
  
  body.page-loading {
    margin: 0;
    height: 100%;
    overflow: hidden;
    transition: none !important;
  }
  
  .splash-screen {
    display: none;
  }
  
  .page-loading .splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
    width: 100vw;
    height: 100vh;
    height: 100dvh; /* dvh accounts for mobile browser toolbars (URL bar, nav bar) that 100vh ignores */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-family: Inter, Helvetica, 'sans-serif';
    background-color: #fff;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
  }
  
  .page-loading .splash-screen .loading-text {
    color: #3F4254;
    margin-left: 1.25rem;
    font-size: 1.075rem;
    font-weight: 600;
  }

  html[data-bs-theme='dark'] .page-loading .splash-screen {
    background-color: #151521;
    color: #ffffff;
  }

  html[data-bs-theme='dark'] .page-loading .splash-screen .loading-text {
    color: #ffffff;
  }

  /* ── banner_for_sm (phones & tablets, width < 1366px) ────────────────
     Anchor to top-center so the logo/header at the top of the sm banner
     is never cropped when the image aspect ratio differs from the device.
     The bottom of the image may clip slightly — that is acceptable.
  ── */
  @media (max-width: 1365px) {
    .page-loading .splash-screen {
      background-position: top center;
    }
  }

  /* ── banner_for_lg (desktop, width >= 1366px) ────────────────────────
     Center-center is correct for landscape banners on wide screens.
     Matches the JS breakpoint: window.innerWidth >= 1366 → banner_for_lg
  ── */
  @media (min-width: 1366px) {
    .page-loading .splash-screen {
      background-position: center center;
    }
  }
  
  .splash-screen .dark-logo {
    display: none;
  }
  
  .splash-screen .light-logo {
    display: block;
    width: 10rem;
  }
  
  html[data-bs-theme='dark'] .splash-screen .light-logo {
    display: none;
  }
  
  html[data-bs-theme='dark'] .splash-screen .dark-logo {
    display: block;
  }
  
  .loader {
    width: 2rem;
    height: 2rem;
    border: 0.185rem solid #1B84FF;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 0.65s linear infinite;
  }
  
  @keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
  }
  
  .loader-wrapper {
    display: flex;
    align-items: center;
    margin-top: 1.25rem;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 0.55rem 1.25rem;
    border-radius: 2rem;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.15);
  }

  html[data-bs-theme='dark'] .loader-wrapper {
    background: rgba(21, 21, 33, 0.88);
  }