html,
      body,
      #root {
        min-height: 100%;
      }

      body {
        margin: 0;
        background: #180720;
        color: #ffffff;
        font-family: Arial, Helvetica, sans-serif;
      }

      .app-preload {
        min-height: 100vh;
        display: grid;
        place-items: center;
        padding: 24px;
        box-sizing: border-box;
        background:
          radial-gradient(circle at 20% 15%, rgba(255, 95, 162, 0.24), transparent 32%),
          radial-gradient(circle at 82% 22%, rgba(52, 182, 201, 0.2), transparent 30%),
          linear-gradient(135deg, #20072c 0%, #180720 48%, #101c35 100%);
      }

      .app-preload-card {
        width: min(360px, 92vw);
        padding: 28px 22px;
        border: 1px solid rgba(255, 255, 255, 0.16);
        border-radius: 24px;
        background: rgba(43, 17, 58, 0.82);
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
        text-align: center;
      }

      .app-preload-card img {
        width: 84px;
        height: 84px;
        object-fit: cover;
        border-radius: 22px;
        box-shadow: 0 12px 28px rgba(255, 95, 162, 0.18);
      }

      .app-preload-title {
        margin: 18px 0 8px;
        color: #ffffff;
        font-size: 28px;
        font-weight: 900;
      }

      .app-preload-text,
      .noscript-message {
        margin: 0;
        color: rgba(255, 255, 255, 0.78);
        font-size: 15px;
        line-height: 1.6;
      }

      .noscript-message {
        padding: 18px;
        background: #180720;
      }

      .app-preload-actions {
        display: none;
        gap: 10px;
        justify-content: center;
        margin-top: 18px;
        flex-wrap: wrap;
      }

      .app-preload.is-stalled .app-preload-actions {
        display: flex;
      }

      .app-preload-actions button {
        border: 0;
        border-radius: 999px;
        padding: 10px 16px;
        color: #4b1234;
        background: #ffffff;
        font-weight: 800;
        cursor: pointer;
      }