/*
 * Sistem visual bersama untuk seluruh pengalaman publik. Aturan ini dimuat
 * terakhir agar halaman legacy, game, dompet, dan popup tetap memakai ritme
 * yang sama tanpa mengubah kontrak route maupun API.
 */

/*
 * Override font-display Font Awesome dari 'block' ke 'swap'.
 * FA vendor memakai font-display:block yang menyebabkan teks ikon invisible
 * (FOIT) selama font belum siap. Swap memastikan fallback glyph tampil dulu.
 */
@font-face {
    font-family: "Font Awesome 5 Brands";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/plugins/fontawesome-free/webfonts/fa-brands-400.woff2') format('woff2'),
         url('/plugins/fontawesome-free/webfonts/fa-brands-400.woff') format('woff'),
         url('/plugins/fontawesome-free/webfonts/fa-brands-400.ttf') format('truetype');
}
@font-face {
    font-family: "Font Awesome 5 Free";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/plugins/fontawesome-free/webfonts/fa-regular-400.woff2') format('woff2'),
         url('/plugins/fontawesome-free/webfonts/fa-regular-400.woff') format('woff'),
         url('/plugins/fontawesome-free/webfonts/fa-regular-400.ttf') format('truetype');
}
@font-face {
    font-family: "Font Awesome 5 Free";
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('/plugins/fontawesome-free/webfonts/fa-solid-900.woff2') format('woff2'),
         url('/plugins/fontawesome-free/webfonts/fa-solid-900.woff') format('woff'),
         url('/plugins/fontawesome-free/webfonts/fa-solid-900.ttf') format('truetype');
}

:root {
    /* === SHARED PUBLIC THEME TOKENS === */
    --public-canvas: var(--theme-canvas, #0B0D10);
    --public-canvas-raised: var(--theme-canvas-raised, #10151B);
    --public-surface: var(--theme-surface, #18212B);
    --public-surface-strong: var(--theme-surface-strong, #202B36);
    --public-surface-soft: var(--theme-surface-soft, #121820);
    --public-border: var(--theme-border, rgba(245, 199, 92, 0.34));
    --public-border-soft: var(--theme-border-soft, rgba(255, 229, 154, 0.15));
    --public-text: var(--theme-text, #FFF8E6);
    --public-text-muted: var(--theme-text-muted, #8FA0B2);
    --public-accent: var(--theme-accent, #DCAE49);
    --public-accent-strong: var(--theme-accent-strong, #FFE59A);
    --public-blue: var(--theme-primary, #18C7B6);
    --public-blue-strong: var(--theme-primary-hover, #5DE4D6);
    --public-positive: var(--theme-positive, #32D583);
    --public-danger: var(--theme-danger, #E34B5F);
    --public-radius-sm: var(--theme-radius-sm, 12px);
    --public-radius: var(--theme-radius, 18px);
    --public-radius-lg: var(--theme-radius-lg, 24px);
    --public-shadow: var(--theme-shadow, 0 18px 42px rgba(0, 6, 20, 0.35));
    --public-shell: min(100%, var(--theme-shell-max, 480px));
    --public-safe-bottom: calc(78px + env(safe-area-inset-bottom));
    --public-touch-target: 44px;
}

html.public-ui-root {
    display: block !important;
    height: auto !important;
    min-height: 100%;
    color-scheme: dark;
    font-size: var(--theme-legacy-rem-base, 37.5px) !important;
    background: var(--public-canvas);
    overflow-x: clip !important;
    overflow-y: auto !important;
}

body.public-ui-theme {
    display: block !important;
    height: auto !important;
    min-height: 100dvh;
    margin: 0;
    color: var(--public-text);
    background:
        linear-gradient(180deg, #070807 0%, var(--public-canvas) 42%, #151109 100%) fixed;
    font-family: var(--font-family);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow: visible !important;
}

body.public-ui-theme.popup-open {
    overflow: hidden !important;
}

body.public-ui-theme:not(.public-route-auth) #app,
body.public-ui-theme .slots-shell,
body.public-ui-theme .page-content,
body.public-ui-theme > main {
    width: var(--public-shell);
    min-height: 100dvh;
    margin-inline: auto;
    background: transparent;
}

body.public-ui-theme:not(.public-route-auth) #app {
    overflow-x: clip;
}

body.public-ui-theme :is(a, button, input, textarea, select) {
    -webkit-tap-highlight-color: transparent;
}

body.public-ui-theme * {
    min-width: 0;
}

body.public-ui-theme a {
    color: inherit;
}

body.public-ui-theme :is(button, [role="button"], [onclick], .van-button, .btn) {
    min-width: var(--public-touch-target);
    min-height: var(--public-touch-target);
    touch-action: manipulation;
}

body.public-ui-theme :is(button, input, textarea, select, .van-field__control) {
    font-family: inherit;
}

body.public-ui-theme :is(button, input, textarea, select, [role="button"]):focus-visible {
    outline: 2px solid var(--public-accent-strong) !important;
    outline-offset: 2px;
}

/* Primitive publik dipakai lintas feature tanpa membawa behaviour bisnis. */
.public-button {
    display: inline-flex;
    min-width: 44px;
    min-height: 44px;
    padding: 0 16px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--public-text);
    background: var(--public-surface);
    border: 1px solid var(--public-border);
    border-radius: var(--public-radius-sm);
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    touch-action: manipulation;
}

.public-button--primary {
    color: #171107;
    background: linear-gradient(180deg, var(--public-accent-strong), var(--public-accent));
    border-color: var(--public-accent-strong);
}

.public-button:disabled,
.public-button[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: .52;
}

body.public-ui-theme :is(
    .member-account__header-action,
    .account-header__action,
    .wallet-navbar__action,
    .tf-navbar__action,
    .navbar-left > a,
    .navbar-right > a
) {
    display: inline-flex;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
}

.public-state {
    display: grid;
    width: min(100%, 420px);
    min-height: 220px;
    margin: 16px auto;
    padding: 24px 18px;
    place-items: center;
    align-content: center;
    gap: 10px;
    color: var(--public-text);
    background: linear-gradient(145deg, var(--public-surface), var(--public-surface-soft));
    border: 1px solid var(--public-border-soft);
    border-radius: var(--public-radius);
    box-shadow: var(--public-shadow);
    text-align: center;
}

.public-state[hidden] {
    display: none;
}

.public-state__icon {
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    color: var(--public-accent-strong);
    background: color-mix(in srgb, var(--public-accent) 14%, transparent);
    border: 1px solid var(--public-border);
    border-radius: 16px;
    font-size: 22px;
}

.public-state__title {
    margin: 2px 0 0;
    font-size: 19px;
    line-height: 1.3;
}

.public-state__message {
    max-width: 34ch;
    margin: 0;
    color: var(--public-text-muted);
    font-size: 14px;
    line-height: 1.55;
}

.public-state__action {
    margin-top: 6px;
}

body.public-ui-theme :is(img, svg, video, canvas) {
    max-width: 100%;
}

body.public-ui-theme :is(.toast-container, .auth-toast-container) {
    position: fixed;
    right: max(12px, calc((100% - var(--theme-shell-max, 480px)) / 2 + 12px));
    bottom: calc(88px + env(safe-area-inset-bottom));
    left: max(12px, calc((100% - var(--theme-shell-max, 480px)) / 2 + 12px));
    z-index: var(--theme-z-toast, 3000);
    display: grid;
    gap: 8px;
    pointer-events: none;
}

body.public-ui-theme :is(.toast, .auth-toast, .account-toast, .mem-toast, .wd-toast, .rd-toast, .ab-toast, .promo-toast, .alert-toast .msg) {
    max-width: 100%;
    min-height: 44px;
    margin-inline: auto;
    padding: 10px 14px;
    color: var(--public-text);
    background: rgb(14 23 38 / 96%);
    border: 1px solid var(--public-border-soft);
    border-radius: var(--public-radius-sm);
    box-shadow: var(--public-shadow);
    font-size: 13px;
    line-height: 1.35;
    pointer-events: auto;
}

body.public-ui-theme :is(.toast--success, .auth-toast--success, .account-toast--success, .mem-toast--success, .wd-toast--success, .ab-toast--success) {
    border-color: color-mix(in srgb, var(--public-positive) 46%, transparent);
}

body.public-ui-theme :is(.toast--error, .toast--danger, .auth-toast--error, .account-toast--error, .mem-toast--error, .wd-toast--error, .ab-toast--error) {
    border-color: color-mix(in srgb, var(--public-danger) 46%, transparent);
}

body.public-ui-theme :is(.toast__close, .auth-toast__close) {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
}

body.public-ui-theme :is(.van-empty, .promo-empty, .empty-state-content):not([hidden]) {
    display: grid;
    width: min(100%, 420px);
    min-height: 180px;
    margin: 16px auto;
    padding: 22px 16px;
    place-items: center;
    align-content: center;
    gap: 8px;
    color: var(--public-text);
    background: linear-gradient(145deg, var(--public-surface), var(--public-surface-soft));
    border: 1px solid var(--public-border-soft);
    border-radius: var(--public-radius);
    text-align: center;
}

body.public-ui-theme :is(.van-empty__description, .promo-empty p, .empty-state__description) {
    max-width: 34ch;
    margin: 0;
    color: var(--public-text-muted) !important;
    font-size: 13px;
    line-height: 1.45;
}

/* Loading global hadir sebelum konten untuk semua route publik, termasuk
   halaman legacy yang tidak menyertakan partial loading sendiri. */
.public-app-loading {
    box-sizing: border-box;
    position: fixed;
    z-index: var(--theme-z-loading, 10000);
    inset: 0;
    display: grid;
    width: 100% !important;
    max-width: var(--theme-shell-max, 480px) !important;
    margin: 0 auto !important;
    height: 100dvh;
    min-height: 100svh;
    padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
    place-items: center;
    color: var(--public-text);
    background: linear-gradient(180deg, #070807 0%, var(--public-canvas) 50%, #151109 100%);
    opacity: 1;
    visibility: visible;
    transition: opacity 360ms ease, visibility 360ms ease;
}

/* Global utility — tambahkan .is-hidden untuk sembunyikan elemen */
.is-hidden {
    display: none !important;
}

.public-app-loading.is-hidden:not([hidden]) {
    display: grid !important; /* Tahan display tetap aktif selama transisi 360ms */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

body.public-ui-theme #loading-banner.is-hidden,
body.public-ui-theme #loading-banner[hidden] {
    display: none !important;
}

.public-app-loading__content {
    display: grid;
    justify-items: center;
    gap: 20px;
}

.public-app-loading__mark {
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    color: #111827;
    background: linear-gradient(145deg, #ffe08a, var(--public-accent) 55%, #d99b12);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgb(245 196 81 / 22%);
    font-size: 24px;
}

.public-app-loading__mark::before {
    content: "♛";
    font-family: Georgia, serif;
    font-size: 29px;
    line-height: 1;
}

.public-app-loading__rings {
    position: relative;
    width: 92px;
    height: 92px;
}

.public-app-loading__rings span {
    position: absolute;
    inset: 0;
    border: 3px solid transparent;
    border-top-color: var(--public-blue-strong);
    border-right-color: var(--public-blue-strong);
    border-radius: 50%;
    animation: public-loading-spin 1.1s linear infinite;
}

.public-app-loading__rings span:last-child {
    inset: 15px;
    border-color: transparent transparent var(--public-accent) var(--public-accent);
    animation-direction: reverse;
    animation-duration: 1.55s;
}

.public-app-loading p {
    display: flex;
    min-height: 24px;
    margin: 0;
    align-items: center;
    color: var(--public-text);
    font-size: 18px;
    font-weight: 760;
    letter-spacing: .01em;
}

.public-app-loading small {
    color: var(--public-text-muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .18em;
}

.public-app-loading__dots {
    display: inline-flex;
    margin-left: 7px;
    gap: 4px;
}

.public-app-loading__dots i {
    width: 5px;
    height: 5px;
    background: var(--public-accent);
    border-radius: 50%;
    animation: public-loading-dot 1.2s ease-in-out infinite;
}

.public-app-loading__dots i:nth-child(2) { animation-delay: 120ms; }
.public-app-loading__dots i:nth-child(3) { animation-delay: 240ms; }

@keyframes public-loading-spin {
    to { transform: rotate(360deg); }
}

@keyframes public-loading-dot {
    50% { opacity: .35; transform: translateY(-3px); }
}

/* Reduced motion: nonaktifkan animasi loading */
@media (prefers-reduced-motion: reduce) {
    .public-app-loading__rings span,
    .public-app-loading__dots i {
        animation: none;
    }

    .public-app-loading__dots i {
        opacity: 0.5;
    }
}

/* Bilah atas konsisten pada halaman legacy tanpa mengubah struktur DOM. */
body.public-ui-theme .navbar {
    position: sticky;
    top: 0;
    z-index: var(--theme-z-header, 100);
    display: grid;
    width: 100%;
    min-height: calc(60px + env(safe-area-inset-top));
    grid-template-columns: 52px minmax(0, 1fr) 52px;
    align-items: end;
    padding: env(safe-area-inset-top) 8px 6px;
    color: var(--public-text);
    background: rgb(7 17 31 / 94%);
    border-bottom: 1px solid var(--public-border-soft);
    box-shadow: 0 8px 22px rgb(0 6 20 / 18%);
    backdrop-filter: blur(16px);
}

body.public-ui-theme .navbar :is(.navbar-left, .navbar-right) {
    display: flex;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
}

body.public-ui-theme :is(.navbar__content-left, .navbar__content-right),
body.public-ui-theme .navbar [onclick] {
    display: flex;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
}

body.public-ui-theme .navbar .navbar-title {
    display: flex;
    min-width: 0;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--public-text) !important;
    font-size: clamp(16px, 4.5vw, 19px);
    font-weight: 780;
    letter-spacing: 0;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.public-ui-theme .navbar :is(.navbar-back, .audio, .item-audio, .item-volume) {
    width: 22px !important;
    height: 22px !important;
    object-fit: contain;
}

body.public-ui-theme .mian:not(.member-account) {
    min-height: 100dvh;
    padding-bottom: var(--public-safe-bottom);
    background: transparent !important;
}

body.public-ui-theme :is(.wallet, .promotion, .selectBox, .bank, .forgot-box, .profile-box, .check-box) {
    padding: 16px;
}

body.public-ui-theme .wallet-box .box,
body.public-ui-theme .promotion > .box,
body.public-ui-theme .selectBox > .box,
body.public-ui-theme .bank > .box,
body.public-ui-theme .status-container,
body.public-ui-theme .card-item,
body.public-ui-theme .record-card,
body.public-ui-theme .game-list .box {
    color: var(--public-text);
    background: rgb(16 42 72 / 92%);
    border: 1px solid var(--public-border);
    border-radius: var(--public-radius);
    box-shadow: var(--public-shadow);
}

body.public-ui-theme .wallet-box .box,
body.public-ui-theme .bank > .box {
    padding: 16px;
}

body.public-ui-theme .wallet-user,
body.public-ui-theme .wallet .wallet-user {
    padding: 8px 16px 18px;
    color: var(--public-text);
}

body.public-ui-theme .wallet-user .title,
body.public-ui-theme .wallet .title,
body.public-ui-theme .promotion .tit,
body.public-ui-theme .bank .lab,
body.public-ui-theme .selectBox .des {
    color: var(--public-text) !important;
    font-weight: 760;
}

body.public-ui-theme .wallet .balance,
body.public-ui-theme .selectBox .txtBox,
body.public-ui-theme .wallet .info,
body.public-ui-theme .promotion .infoItem {
    color: var(--public-text);
    background: var(--public-surface-soft) !important;
    border: 1px solid var(--public-border-soft);
    border-radius: var(--public-radius-sm);
}

body.public-ui-theme .wallet .balance,
body.public-ui-theme .selectBox .txtBox {
    padding: 14px;
}

body.public-ui-theme :is(.money, .money .txt, .balanceMoney, .balanceMoney .money) {
    color: var(--public-accent-strong) !important;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
}

body.public-ui-theme .wallet .info .item,
body.public-ui-theme .balance .item {
    min-width: 0;
    padding: 8px;
    color: var(--public-text-muted);
    text-align: center;
}

body.public-ui-theme .wallet .info .item > :last-child,
body.public-ui-theme .balance .item > :last-child {
    margin-top: 5px;
    color: var(--public-text);
    font-size: 14px;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
}

/* Transfer legacy memiliki struktur form berbeda; jarak dan prioritas data
   dijaga agar prefix nomor tidak bertabrakan dengan placeholder. */
body.public-ui-theme.public-page--wallet-transfer .wallet-user {
    margin: 16px 16px 0;
    padding: 16px;
    color: var(--public-text);
    background: var(--public-surface) !important;
    border: 1px solid var(--public-border);
    border-radius: var(--public-radius);
}

body.public-ui-theme.public-page--wallet-transfer .wallet-user .name {
    margin-top: 8px;
    color: var(--public-text);
    font-size: 18px;
    font-weight: 800;
}

body.public-ui-theme.public-page--wallet-transfer .mian-from .item {
    display: flex;
    gap: 10px;
    align-items: center;
}

body.public-ui-theme.public-page--wallet-transfer .mian-from .number {
    flex: 0 0 auto;
    gap: 6px;
    color: var(--public-accent-strong);
    font-weight: 780;
}

body.public-ui-theme.public-page--wallet-transfer .mian-from .number span,
body.public-ui-theme.public-page--wallet-transfer .mian-from .item > .img {
    display: grid;
    width: 24px;
    min-width: 24px;
    height: 24px;
    place-items: center;
}

body.public-ui-theme.public-page--wallet-transfer .mian-from .number,
body.public-ui-theme.public-page--wallet-transfer .mian-from .item > .img {
    position: static !important;
}

body.public-ui-theme.public-page--wallet-transfer .mian-from .item input {
    width: 0;
    flex: 1;
}

/* Form dan field transaksi. */
body.public-ui-theme :is(.mian-from, .requiredBox, .conBox, .bank .item, .profile .item) {
    color: var(--public-text);
}

body.public-ui-theme .mian-from .item,
body.public-ui-theme .requiredBox .box,
body.public-ui-theme .bank .item,
body.public-ui-theme .profile .item,
body.public-ui-theme .conBox .list .item {
    min-height: 54px;
    margin-bottom: 12px;
    padding: 0 14px;
    color: var(--public-text);
    background: var(--public-surface-soft) !important;
    border: 1px solid var(--public-border-soft);
    border-radius: var(--public-radius-sm);
}

body.public-ui-theme :is(.mian-from, .requiredBox, .bank, .profile) :is(input:not([type="hidden"]), textarea, select) {
    min-width: 0;
    min-height: 48px;
    padding: 10px 0;
    color: var(--public-text) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-size: 16px !important;
    outline: 0;
}

body.public-ui-theme :is(input, textarea, select)::placeholder {
    color: #7f99b7 !important;
    opacity: 1;
}

body.public-ui-theme :is(.mian-from .item, .requiredBox .box, .bank .item):focus-within {
    border-color: var(--public-blue) !important;
    box-shadow: 0 0 0 3px rgb(61 140 255 / 14%);
}

body.public-ui-theme :is(.mian-btn .van-button, .withdrawal-btn .btn, .bank-btn .btn, .wallet .total-btn .item, .popup .activity-button, .slots-empty__action, .load-more-btn) {
    min-height: 48px;
    padding: 0 18px;
    color: #15150d !important;
    background: var(--public-accent) !important;
    border: 1px solid var(--public-accent-strong) !important;
    border-radius: var(--public-radius-sm) !important;
    box-shadow: 0 10px 22px rgb(245 196 81 / 16%);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0;
    text-decoration: none;
}

body.public-ui-theme :is(.mian-btn .van-button, .withdrawal-btn .btn, .bank-btn .btn, .wallet .total-btn .item, .popup .activity-button, .slots-empty__action, .load-more-btn):active {
    transform: translateY(1px);
}

body.public-ui-theme .wallet .total-btn .item {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
}

body.public-ui-theme :is(.back-btn, .menu-btn, .infoBtn .item, .promotion .tab ul li, [onclick].item) {
    min-width: 44px !important;
    min-height: 44px !important;
    align-items: center;
    justify-content: center;
}

body.public-ui-theme :is(.infoBtn .item, .promotion .tab ul li) {
    display: flex;
}

body.public-ui-theme :is(.reload-money-button, .balance-visibility-button) {
    display: inline-flex;
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    color: inherit;
}

body.public-ui-theme .wallet .total-btn .item .li {
    color: inherit;
    font-weight: inherit;
}

/* Tabel dan riwayat memakai baris yang ringkas dan mudah dipindai. */
body.public-ui-theme :is(.table, .promotion .table, .game-list .table) {
    overflow: hidden;
    background: var(--public-surface-soft);
    border: 1px solid var(--public-border-soft);
    border-radius: var(--public-radius-sm);
}

body.public-ui-theme :is(.table .hd, .promotion .hd, .game-list .hd) {
    min-height: 42px;
    color: var(--public-text-muted);
    background: rgb(7 17 31 / 54%);
    border-bottom: 1px solid var(--public-border-soft);
    font-size: 11px;
    font-weight: 760;
}

body.public-ui-theme :is(.table .bd, .promotion .bd, .game-list .bd) {
    min-height: 48px;
    color: var(--public-text);
    border-bottom: 1px solid rgb(159 180 205 / 10%);
    font-size: 12px;
}

body.public-ui-theme :is(.table .bd, .promotion .bd, .game-list .bd):last-child {
    border-bottom: 0;
}

body.public-ui-theme .status-container {
    margin: 12px 16px;
    padding: 14px;
}

body.public-ui-theme .status-header,
body.public-ui-theme .info-row {
    min-height: 34px;
    color: var(--public-text);
    border-bottom: 1px solid rgb(159 180 205 / 12%);
}

body.public-ui-theme .info-row:last-child {
    border-bottom: 0;
}

body.public-ui-theme .info-label {
    color: var(--public-text-muted);
}

body.public-ui-theme .info-value {
    color: var(--public-text) !important;
    font-variant-numeric: tabular-nums;
}

/* Navigasi bawah dan tombol bantuan tetap berada di dalam shell mobile. */
body.public-ui-theme .user-navigation .user-tabbar {
    width: var(--public-shell);
    height: calc(var(--user-tabbar-height, 68px) + env(safe-area-inset-bottom));
    right: auto !important;
    left: 0 !important;
    margin-inline: 0;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    background: rgb(18 24 32 / 96%);
    border: 1px solid var(--public-border-soft);
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -14px 30px rgb(0 0 0 / 42%);
    backdrop-filter: blur(18px);
    transform: none !important;
}

@media (min-width: 481px) {
    body.public-ui-theme .user-navigation .user-tabbar {
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
}

body.public-ui-theme .user-navigation .user-tabbar__item {
    min-height: 52px;
    color: var(--public-text-muted);
    font-size: 12px;
    font-weight: 700;
}

body.public-ui-theme .user-navigation .user-tabbar__item.active,
body.public-ui-theme .user-navigation .user-tabbar__item:hover {
    color: var(--public-accent-strong);
}

body.public-ui-theme .user-navigation .user-tabbar__item--primary .user-tabbar__icon {
    width: 34px;
    height: 30px;
    margin-top: 0;
    color: #171107;
    background: var(--gradient-gold, linear-gradient(180deg, #FFF2B8, #F5C75C));
    border: 0;
    border-radius: 12px;
    box-shadow: 0 8px 18px rgb(245 199 92 / 22%);
}

body.public-ui-theme .user-navigation .user-support-fab {
    right: max(16px, calc((100% - var(--theme-shell-max, 480px)) / 2 + 16px));
    background: var(--public-surface);
    border: 1px solid var(--public-border);
    box-shadow: var(--public-shadow);
}

/* Popup, dialog, dan bottom sheet public. */
body.public-ui-theme .van-overlay,
body.public-ui-theme .popup-backdrop {
    background: rgb(0 7 18 / 72%) !important;
    backdrop-filter: blur(5px);
}

body.public-ui-theme .van-dialog,
body.public-ui-theme .van-popup--center,
body.public-ui-theme .popup {
    width: min(calc(100% - 32px), 424px) !important;
    max-width: 424px !important;
    max-height: min(82svh, 720px);
    color: var(--public-text);
    background: var(--public-surface) !important;
    border: 1px solid var(--public-border);
    border-radius: var(--public-radius) !important;
    box-shadow: 0 26px 70px rgb(0 4 15 / 56%);
}

body.public-ui-theme .popup {
    overflow: hidden;
}

body.public-ui-theme .van-popup--bottom,
body.public-ui-theme .popup-join,
body.public-ui-theme .pop-total {
    width: var(--public-shell) !important;
    max-width: var(--public-shell) !important;
    max-height: min(82svh, 720px);
    overflow: auto;
    color: var(--public-text);
    background: var(--public-surface) !important;
    border: 1px solid var(--public-border);
    border-bottom: 0;
    border-radius: 24px 24px 0 0 !important;
    box-shadow: 0 -18px 48px rgb(0 4 15 / 52%);
}

body.public-ui-theme .popup-header,
body.public-ui-theme .van-dialog__header {
    padding: 22px 54px 10px;
    color: var(--public-text);
    background: transparent;
    font-size: 20px;
    font-weight: 800;
    text-align: center;
}

body.public-ui-theme .popup-header h2,
body.public-ui-theme .popup-header p,
body.public-ui-theme .van-dialog__message,
body.public-ui-theme .van-dialog__message--has-title {
    color: inherit !important;
}

body.public-ui-theme .popup-header p,
body.public-ui-theme .popup-detail,
body.public-ui-theme .popup-note {
    color: var(--public-text-muted) !important;
    line-height: 1.55;
}

body.public-ui-theme .popup-content,
body.public-ui-theme .van-dialog__content {
    padding: 12px 18px 18px;
}

body.public-ui-theme .popup-muted-text {
    color: var(--public-text-muted);
    margin-bottom: 16px;
}

body.public-ui-theme .popup-rule {
    padding: 13px 0;
    border-bottom-color: var(--public-border-soft);
}

body.public-ui-theme .popup-rule strong,
body.public-ui-theme .deposit-header strong,
body.public-ui-theme .bonus {
    color: var(--public-accent-strong) !important;
}

body.public-ui-theme .popup-footer,
body.public-ui-theme .van-dialog__footer {
    min-height: 64px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--public-border-soft);
}

body.public-ui-theme .popup :is(.activity-button, .reminder-button),
body.public-ui-theme .van-dialog .van-button {
    min-height: 44px;
    border-radius: 10px;
    font-weight: 760;
}

body.public-ui-theme .popup .reminder-button,
body.public-ui-theme .van-dialog__cancel {
    color: var(--public-text-muted) !important;
    background: transparent !important;
    border-color: transparent !important;
}

body.public-ui-theme .van-dialog__confirm,
body.public-ui-theme .van-dialog__confirm:active {
    color: #15150d !important;
    background: var(--public-accent) !important;
    border-color: var(--public-accent) !important;
}

body.public-ui-theme .close-button {
    top: 10px;
    right: 10px;
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    color: var(--public-text-muted);
    background: rgb(159 180 205 / 10%);
    border: 1px solid var(--public-border-soft);
    border-radius: 50%;
    font-size: 22px;
}

body.public-ui-theme .betting-mark,
body.public-ui-theme .rule-box {
    color: var(--public-text) !important;
    background: var(--public-surface) !important;
}

body.public-ui-theme :is(.popup-join, .pop-total, #box-join) .info {
    padding: 18px 16px;
}

body.public-ui-theme :is(.popup-join, .pop-total, #box-join) .foot {
    min-height: 58px;
    padding-bottom: env(safe-area-inset-bottom);
    background: rgb(7 17 31 / 72%);
    border-top: 1px solid var(--public-border-soft);
}

body.public-ui-theme :is(.popup-join, .pop-total, #box-join) .foot .left {
    color: var(--public-text-muted);
}

body.public-ui-theme :is(.popup-join, .pop-total, #box-join) .foot .right {
    color: #15150d !important;
    background: var(--public-accent) !important;
}

/* Game tetap padat namun memiliki panel dan pilihan yang jelas. */
body.public-ui-theme.public-route-game .game-betting .content,
body.public-ui-theme.public-route-game .game-list,
body.public-ui-theme.public-route-game .game .content,
body.public-ui-theme.public-route-game .game .infoBox {
    color: var(--public-text);
}

body.public-ui-theme.public-route-game :is(.time-box, .game-betting .content, .game-list .box, .game-list .list) {
    border-color: var(--public-border-soft) !important;
}

body.public-ui-theme.public-route-game :is(.amount-box .li, .multiple-box .li, .stepper-box .li, .bet-type-btn, .d5-bet-type, .c-row.item.c-row-middle-center, [onclick].item) {
    min-width: 44px !important;
    min-height: 44px !important;
    border: 1px solid var(--public-border-soft) !important;
    border-radius: 10px;
}

body.public-ui-theme.public-route-game :is(.amount-box .li.action, .multiple-box .li.action, .stepper-box .li.plus, .d5-bet-type.active) {
    color: #101827 !important;
    background: var(--public-accent) !important;
    border-color: var(--public-accent) !important;
}

body.public-ui-theme.public-route-game .van-field__control {
    min-height: 42px;
    color: var(--public-text) !important;
    background: transparent !important;
    font-size: 16px !important;
}

/* Slots dan provider sudah memakai struktur modern; penyegaran hanya menyamakan palet. */
body.public-ui-theme .slots-shell,
body.public-ui-theme .main-content,
body.public-ui-theme .page-content {
    color: var(--public-text);
    background: transparent;
}

body.public-ui-theme :is(.slots-header, .app-header) {
    background: rgb(7 17 31 / 94%) !important;
    border-bottom-color: var(--public-border-soft) !important;
    backdrop-filter: blur(16px);
}

body.public-ui-theme :is(.provider-card, .game-card, .game-detail-card, .slots-empty, .empty-state) {
    border-color: var(--public-border-soft) !important;
    box-shadow: 0 10px 26px rgb(0 6 20 / 22%);
}

body.public-ui-theme .game-play-page {
    padding-bottom: var(--public-safe-bottom);
}

body.public-ui-theme .game-play__header {
    position: sticky;
    top: 0;
    z-index: var(--theme-z-header, 100);
    display: grid;
    min-height: calc(60px + env(safe-area-inset-top));
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    gap: 10px;
    align-items: center;
    padding: calc(8px + env(safe-area-inset-top)) 12px 8px;
    background: rgb(7 17 31 / 96%) !important;
}

body.public-ui-theme .game-play__header .slots-back {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    color: var(--public-text);
    background: rgb(159 180 205 / 8%);
    border: 1px solid var(--public-border-soft);
    border-radius: 12px;
    text-decoration: none;
}

body.public-ui-theme :is(.game-play__header, .game-play__providers, .game-detail-container, .game-detail-card) {
    box-sizing: border-box;
}

body.public-ui-theme .game-play__heading {
    min-width: 0;
    color: var(--public-text-muted);
    font-size: 11px;
    line-height: 1.25;
}

body.public-ui-theme .game-play__heading strong {
    display: block;
    overflow: hidden;
    color: var(--public-text);
    font-size: 16px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.public-ui-theme .game-play__providers {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    color: var(--public-text);
    background: rgb(159 180 205 / 8%);
    border: 1px solid var(--public-border-soft);
    border-radius: 12px;
}

body.public-ui-theme .game-detail-container {
    display: grid;
    min-height: calc(100dvh - 190px);
    padding: 26px 16px;
    place-items: center;
}

body.public-ui-theme .game-detail-card {
    width: min(100%, 400px);
    padding: 20px;
    text-align: center;
    background: var(--public-surface) !important;
    border: 1px solid var(--public-border) !important;
    border-radius: var(--public-radius-lg) !important;
}

body.public-ui-theme :is(.game-detail-card__image, .game-detail-card__placeholder) {
    display: grid;
    width: min(200px, 62vw);
    aspect-ratio: 1;
    margin: 0 auto 18px;
    place-items: center;
    overflow: hidden;
    color: var(--public-accent-strong);
    background: var(--public-surface-soft);
    border: 1px solid var(--public-border-soft);
    border-radius: var(--public-radius);
    font-size: clamp(48px, 14vw, 64px);
    font-weight: 850;
    object-fit: cover;
}

body.public-ui-theme :is(.game-detail-card__image, .game-detail-card__placeholder)[hidden] {
    display: none !important;
}

body.public-ui-theme .game-detail-card__provider {
    margin: 0 0 6px;
    color: var(--public-text-muted);
    font-size: 13px;
}

body.public-ui-theme .game-detail-card h1 {
    margin: 0;
    color: var(--public-text);
    font-size: 21px;
    line-height: 1.25;
}

body.public-ui-theme .game-detail-card__rtp {
    display: inline-flex;
    margin: 16px 0 22px;
    padding: 7px 12px;
    color: var(--public-accent-strong);
    background: rgb(245 196 81 / 10%);
    border: 1px solid rgb(245 196 81 / 28%);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
}

body.public-ui-theme .game-detail-card__launch {
    display: inline-flex;
    width: 100%;
    min-height: 50px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: #15150d;
    background: var(--public-accent);
    border: 1px solid var(--public-accent-strong);
    border-radius: var(--public-radius-sm);
    cursor: pointer;
    font: inherit;
    font-size: 16px;
    font-weight: 850;
}

body.public-ui-theme .game-play__empty {
    margin: 42px 16px;
    padding: 28px 20px;
    color: var(--public-text);
    text-align: center;
}

body.public-ui-theme.public-route-settlement > main {
    box-sizing: border-box;
    width: min(420px, calc(100% - 32px));
    max-width: calc(100% - 32px);
    min-height: auto;
}

body.public-ui-theme :is(.slots-search__input, .search-input) {
    min-height: 48px;
    color: var(--public-text) !important;
    background: var(--public-surface-soft) !important;
    border-color: var(--public-border) !important;
    border-radius: var(--public-radius-sm) !important;
    font-size: 16px !important;
}

body.public-ui-theme .msg {
    z-index: var(--theme-z-toast, 3000) !important;
}

body.public-ui-theme .msg-content {
    max-width: min(calc(100% - 32px), 420px);
    padding: 12px 16px;
    color: var(--public-text) !important;
    background: rgb(16 42 72 / 98%) !important;
    border: 1px solid var(--public-border);
    border-radius: 12px;
    box-shadow: var(--public-shadow);
    font-size: 14px;
    line-height: 1.4;
}

/* Fallback dan halaman penyelesaian permainan memakai panel yang sama. */
body.public-ui-theme .error-page {
    width: var(--public-shell);
    max-width: var(--public-shell);
    padding: max(28px, env(safe-area-inset-top)) 24px max(28px, env(safe-area-inset-bottom));
    color: var(--public-text);
}

body.public-ui-theme .error-page__logo {
    width: min(180px, 50vw);
    margin-bottom: clamp(34px, 8vh, 48px);
}

body.public-ui-theme .error-page__code {
    margin: 0 0 12px;
    color: var(--public-accent-strong);
    font-size: clamp(64px, 20vw, 104px);
    font-weight: 800;
    line-height: .9;
}

body.public-ui-theme .error-page p {
    color: var(--public-text-muted);
}

body.public-ui-theme .error-page__action {
    min-height: 44px;
    color: var(--public-text);
    background: var(--public-surface-soft);
    border: 1px solid var(--public-border-soft);
    border-radius: var(--public-radius-sm);
    font-size: 16px;
    line-height: 1.2;
    white-space: nowrap;
}

body.public-ui-theme .error-page__action--primary {
    color: #15150d;
    background: var(--public-accent);
    border-color: var(--public-accent);
}

@media (max-width: 340px) {
    body.public-ui-theme :is(.wallet, .promotion, .selectBox, .bank, .forgot-box, .profile-box, .check-box) {
        padding-inline: 12px;
    }

    body.public-ui-theme .wallet-box .box,
    body.public-ui-theme .bank > .box {
        padding: 12px;
    }

    body.public-ui-theme .navbar {
        grid-template-columns: 44px minmax(0, 1fr) 44px;
        padding-inline: 4px;
    }

    body.public-ui-theme .navbar .navbar-title {
        font-size: 15px;
    }

    body.public-ui-theme .van-dialog,
    body.public-ui-theme .van-popup--center,
    body.public-ui-theme .popup {
        width: calc(100% - 24px) !important;
        max-width: calc(100% - 24px) !important;
    }
}

/*
 * Penyatuan akhir untuk template publik legacy. Banyak halaman berasal dari
 * bundle berbeda; selector di bawah sengaja berbasis anatomi yang sama agar
 * dompet, check-in, promosi, akun, dan dokumen mengikuti shell APK yang
 * seragam tanpa menyentuh kontrak data masing-masing halaman.
 */
body.public-ui-theme {
    background: var(--public-canvas) !important;
    overflow-x: clip !important;
}

body.public-ui-theme .mian:not(.member-account) {
    box-sizing: border-box;
    width: var(--public-shell) !important;
    min-height: 100svh;
    margin-inline: auto;
    padding-bottom: var(--public-safe-bottom);
    color: var(--public-text);
    background:
        radial-gradient(circle at 92% 0%, rgb(61 140 255 / 13%), transparent 24rem),
        var(--public-canvas) !important;
}

body.public-ui-theme .mian:not(.member-account) > .navbar {
    position: sticky !important;
    top: 0;
    z-index: var(--theme-z-header, 100);
    display: grid !important;
    width: 100% !important;
    min-height: calc(60px + env(safe-area-inset-top));
    grid-template-columns: 52px minmax(0, 1fr) 52px !important;
    align-items: end !important;
    padding: env(safe-area-inset-top) 8px 6px !important;
    color: var(--public-text);
    background: rgb(7 17 31 / 94%) !important;
    border-bottom: 1px solid var(--public-border-soft) !important;
    box-shadow: 0 8px 22px rgb(0 6 20 / 18%);
    backdrop-filter: blur(16px);
}

body.public-ui-theme .mian:not(.member-account) > .navbar :is(.navbar-left, .navbar-right) {
    display: grid !important;
    width: 44px;
    min-width: 44px !important;
    min-height: 44px !important;
    place-items: center;
    color: var(--public-accent-strong) !important;
}

body.public-ui-theme .mian:not(.member-account) > .navbar .navbar-left {
    grid-column: 1 !important;
    grid-row: 1 !important;
}

body.public-ui-theme .mian:not(.member-account) > .navbar .navbar-title {
    grid-column: 2 !important;
    grid-row: 1 !important;
}

body.public-ui-theme .mian:not(.member-account) > .navbar .navbar-right {
    grid-column: 3 !important;
    grid-row: 1 !important;
}

body.public-ui-theme .mian:not(.member-account) > .navbar :is(.navbar-left, .navbar-right) > * {
    display: grid !important;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 12px;
}

body.public-ui-theme .mian:not(.member-account) > .navbar :is(.navbar-left, .navbar-title, .navbar-right) {
    background: transparent !important;
    box-shadow: none !important;
}

body.public-ui-theme .mian:not(.member-account) > .navbar .navbar-title {
    display: flex !important;
    min-width: 0 !important;
    min-height: 44px !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    padding: 0 4px !important;
    color: var(--public-text) !important;
    font-size: clamp(16px, 4.4vw, 19px) !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.public-ui-theme .mian:not(.member-account) > .navbar :is(.navbar-back, .audio) {
    width: 22px !important;
    height: 22px !important;
    object-fit: contain;
}

body.public-ui-theme .mian:not(.member-account) > :is(.wallet, .promotion, .check-box, .profile, .forgot-box, .bank, .selectBox) {
    box-sizing: border-box;
    width: auto !important;
    margin: 16px !important;
    padding: 0 !important;
}

/* Tab promosi ikut alur dokumen agar tidak menutupi header sticky. */
body.public-ui-theme.public-route-promotion .mian:not(.member-account) > .promotion > .tab {
    position: sticky !important;
    top: calc(60px + env(safe-area-inset-top)) !important;
    z-index: calc(var(--theme-z-header, 100) - 1) !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 44px !important;
    height: 44px !important;
    left: auto !important;
    line-height: 44px !important;
    transform: none !important;
}

body.public-ui-theme.public-route-promotion .mian:not(.member-account) > .promotion {
    padding-top: 0 !important;
}

/* Kontrol utama tetap nyaman disentuh pada WebView berukuran 320-480 px. */
body.public-ui-theme.public-route-game :is(button, .van-button, [role="button"]),
body.public-ui-theme.public-route-promotion :is(button, .van-button, [role="button"]),
body.public-ui-theme.public-route-account :is(button, .van-button, [role="button"]) {
    min-height: 44px !important;
}

body.public-ui-theme.public-route-game :is(input:not([type="checkbox"]):not([type="radio"]), .van-field__control) {
    min-height: 44px !important;
    font-size: 16px !important;
}

body.public-ui-theme .mian:not(.member-account) :is(.wallet-box > .box, .promotion > .box, .check-box, .profile, .forgot-box, .bank > .box, .selectBox > .box, .mian > .info) {
    box-sizing: border-box;
    color: var(--public-text) !important;
    background: linear-gradient(145deg, rgb(23 29 37 / 96%), rgb(16 21 27 / 96%)) !important;
    border: 1px solid var(--public-border) !important;
    border-radius: var(--public-radius) !important;
    box-shadow: var(--public-shadow);
}

body.public-ui-theme .mian:not(.member-account) :is(.wallet-box > .box, .promotion > .box, .check-box, .profile, .forgot-box, .bank > .box, .selectBox > .box) {
    padding: 16px !important;
}

body.public-ui-theme .mian:not(.member-account) :is(.wallet-user, .check-header, .promotion .tit, .bank .lab, .profile .lab, .mian-from .lab) {
    color: var(--public-text) !important;
}

body.public-ui-theme .mian:not(.member-account) .wallet-user {
    margin: 16px 16px 0 !important;
    padding: 18px 16px !important;
    background: linear-gradient(135deg, #102d51, #0b1c32) !important;
    border: 1px solid var(--public-border) !important;
    border-radius: var(--public-radius) !important;
}

body.public-ui-theme .mian:not(.member-account) .wallet-user :is(.title, p, .name) {
    color: var(--public-text) !important;
}

body.public-ui-theme .mian:not(.member-account) :is(.balance, .info, .mian-from .item, .requiredBox .box, .bank .item, .profile .item, .conBox .list .item) {
    color: var(--public-text) !important;
    background: rgb(5 18 33 / 62%) !important;
    border-color: var(--public-border-soft) !important;
}

body.public-ui-theme .mian:not(.member-account) .balance {
    padding: 16px !important;
    border: 1px solid var(--public-border-soft) !important;
    border-radius: var(--public-radius-sm) !important;
}

body.public-ui-theme .mian:not(.member-account) .balance .money {
    color: var(--public-accent-strong) !important;
    font-size: clamp(25px, 7vw, 34px) !important;
    font-weight: 850 !important;
    line-height: 1.15 !important;
}

body.public-ui-theme .mian:not(.member-account) .info {
    border: 1px solid var(--public-border-soft) !important;
    border-radius: var(--public-radius-sm) !important;
}

body.public-ui-theme .mian:not(.member-account) .info .item {
    min-width: 0;
    padding: 12px 8px !important;
    color: var(--public-text-muted) !important;
    font-size: 12px !important;
}

body.public-ui-theme .mian:not(.member-account) .info .item > :last-child {
    margin-top: 4px;
    color: var(--public-text) !important;
    font-size: 14px !important;
    font-weight: 750 !important;
    font-variant-numeric: tabular-nums;
}

body.public-ui-theme .mian:not(.member-account) .mian-from .item {
    box-sizing: border-box;
    min-height: 54px !important;
    margin-bottom: 12px !important;
    padding-inline: 14px !important;
    border: 1px solid var(--public-border-soft) !important;
    border-radius: var(--public-radius-sm) !important;
}

body.public-ui-theme .mian:not(.member-account) .mian-from .item:focus-within {
    border-color: var(--public-blue) !important;
    box-shadow: 0 0 0 3px rgb(61 140 255 / 14%) !important;
}

body.public-ui-theme .mian:not(.member-account) :is(.mian-from, .requiredBox, .bank, .profile) :is(input:not([type="hidden"]), textarea, select) {
    min-width: 0 !important;
    min-height: 48px !important;
    color: var(--public-text) !important;
    background: transparent !important;
    font-size: 16px !important;
}

body.public-ui-theme .mian:not(.member-account) :is(.mian-btn .gradient, .mian-btn button, .bank-btn .btn, .withdrawal-btn .btn, .check-header .txt) {
    min-height: 48px !important;
    color: #18200e !important;
    background: var(--public-accent) !important;
    border: 1px solid var(--public-accent-strong) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    font-size: 16px !important;
    font-weight: 800 !important;
}

body.public-ui-theme .mian:not(.member-account) .check-header .txt {
    display: inline-flex !important;
    min-width: 128px;
    align-items: center;
    justify-content: center;
    margin: 5px !important;
    padding: 0 12px !important;
}

body.public-ui-theme .mian:not(.member-account) .check-box > .list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 16px !important;
}

body.public-ui-theme .mian:not(.member-account) .check-box > .list .item {
    min-width: 0 !important;
    min-height: 154px !important;
    margin: 0 !important;
    padding: 12px 8px !important;
    color: var(--public-text) !important;
    background: rgb(5 18 33 / 58%) !important;
    border: 1px solid var(--public-border-soft) !important;
    border-radius: var(--public-radius-sm) !important;
}

body.public-ui-theme .mian:not(.member-account) .check-box > .list .item .img {
    max-width: 64px !important;
    max-height: 64px !important;
    object-fit: contain;
}

body.public-ui-theme .mian:not(.member-account) :is(.promotion .table, .mian > .table, .card, .record-card) {
    overflow-x: auto;
    margin: 16px !important;
    color: var(--public-text) !important;
    background: linear-gradient(145deg, rgb(23 29 37 / 96%), rgb(16 21 27 / 96%)) !important;
    border: 1px solid var(--public-border) !important;
    border-radius: var(--public-radius) !important;
    box-shadow: var(--public-shadow);
    -webkit-overflow-scrolling: touch;
}

body.public-ui-theme .mian:not(.member-account) :is(.promotion .table, .mian > .table) :is(.hd, .bd) {
    min-width: 320px;
}

body.public-ui-theme .mian:not(.member-account) :is(.promotion .table, .mian > .table) .hd {
    color: var(--public-accent-strong) !important;
    background: rgb(4 15 29 / 66%) !important;
    border-bottom: 1px solid var(--public-border-soft) !important;
}

body.public-ui-theme .mian:not(.member-account) :is(.promotion .table, .mian > .table) .bd {
    color: var(--public-text) !important;
    border-bottom: 1px solid rgb(148 198 255 / 10%) !important;
}

body.public-ui-theme .user-navigation .user-tabbar {
    background: rgb(8 25 44 / 96%) !important;
    border-top-color: rgb(148 198 255 / 18%) !important;
    box-shadow: 0 -8px 28px rgb(0 6 20 / 46%) !important;
    backdrop-filter: blur(16px);
}

body.public-ui-theme .user-navigation .user-tabbar__item {
    color: #93a9c4 !important;
    font-size: 12px !important;
    font-weight: 650;
}

body.public-ui-theme .user-navigation .user-tabbar__item.active {
    color: var(--public-accent-strong) !important;
}

body.public-ui-theme .user-navigation .user-tabbar__item--primary .user-tabbar__icon {
    color: #17200e !important;
    background: var(--public-accent) !important;
    border-color: #08192c !important;
}

body.public-ui-theme.public-page--home .public-home #app,
body.public-ui-theme.public-page--home #app {
    min-height: 100svh;
    background: #07111f !important;
}

body.public-ui-theme.public-page--home.public-home #app > .content,
body.public-ui-theme.public-page--home .public-home .content,
body.public-ui-theme.public-page--home .public-home #app > .content {
    box-sizing: border-box;
    gap: 14px !important;
    padding: 0 12px calc(104px + env(safe-area-inset-bottom)) !important;
    background: var(--public-canvas) !important;
}

body.public-ui-theme.public-page--home .public-home .navbar-fixed {
    width: min(100%, var(--theme-shell-max, 480px)) !important;
    background: rgb(7 17 31 / 95%) !important;
    border-bottom-color: var(--public-border-soft) !important;
}

body.public-ui-theme.public-page--home .public-home .home-hero {
    margin-top: 12px !important;
    overflow: hidden;
    border: 1px solid var(--public-border) !important;
    border-radius: var(--public-radius) !important;
    box-shadow: var(--public-shadow);
}

body.public-ui-theme .public-home__empty-lobby {
    display: grid;
    gap: 12px;
    margin: 6px 0 2px;
    padding: 22px 18px;
    text-align: center;
    background: linear-gradient(145deg, #14365d, #0b1e35) !important;
    border: 1px solid var(--public-border) !important;
    border-radius: var(--public-radius) !important;
    box-shadow: var(--public-shadow);
}

body.public-ui-theme .public-home__empty-lobby-icon {
    display: grid;
    width: 52px;
    height: 52px;
    margin: 0 auto 2px;
    place-items: center;
    color: #18200e;
    background: var(--public-accent);
    border-radius: 16px;
    font-size: 22px;
}

body.public-ui-theme .public-home__empty-lobby h1 {
    margin: 0;
    color: var(--public-text);
    font-size: 20px;
    line-height: 1.25;
}

body.public-ui-theme .public-home__empty-lobby p {
    margin: 0;
    color: var(--public-text-muted);
    font-size: 14px;
    line-height: 1.5;
}

body.public-ui-theme .public-home__empty-lobby-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 4px;
}

body.public-ui-theme .public-home__empty-lobby-actions a {
    display: inline-flex;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
}

body.public-ui-theme .public-home__empty-lobby-primary {
    color: #18200e !important;
    background: var(--public-accent) !important;
    border: 1px solid var(--public-accent-strong);
}

body.public-ui-theme .public-home__empty-lobby-secondary {
    color: var(--public-text) !important;
    background: rgb(6 20 37 / 52%) !important;
    border: 1px solid var(--public-border);
}

/* Pada katalog kosong, CTA sudah memuat arah tindakan sehingga FAB tidak boleh menutupi teksnya. */
body.public-home--empty-lobby .user-navigation .user-support-fab {
    display: none !important;
}

body.public-ui-theme :is(.provider-section, .game-section) {
    box-sizing: border-box !important;
    min-height: auto !important;
    padding: 16px 12px calc(92px + env(safe-area-inset-bottom)) !important;
    background: #07111f !important;
}

body.public-ui-theme :is(.provider-card, .game-card) {
    background: linear-gradient(145deg, #102a48, #0a1b30) !important;
    border: 1px solid var(--public-border-soft) !important;
    border-radius: 14px !important;
    box-shadow: none !important;
}

body.public-ui-theme :is(.provider-card:hover, .game-card:hover) {
    border-color: var(--public-blue) !important;
    box-shadow: 0 10px 24px rgb(0 6 20 / 38%) !important;
}

body.public-ui-theme :is(.provider-grid, .game-grid) {
    gap: 10px !important;
}

body.public-ui-theme :is(.provider-name, .game-card-name) {
    color: var(--public-text) !important;
}

body.public-ui-theme :is(.provider-count, .game-count, .game-card-info) {
    color: var(--public-text-muted) !important;
}

body.public-ui-theme.public-page--kefumenu .customer-container {
    min-height: 100svh;
    background: #07111f !important;
}

body.public-ui-theme.public-page--kefumenu .customer-container-header-belly {
    overflow: hidden;
    border-bottom: 1px solid var(--public-border-soft);
}

body.public-ui-theme.public-page--kefumenu .customer-container-header-belly img {
    display: block;
    width: 100%;
    max-height: 180px;
    object-fit: cover;
}

body.public-ui-theme.public-page--kefumenu .customer-container .content {
    display: grid;
    gap: 12px;
    padding: 16px !important;
    background: #07111f !important;
}

body.public-ui-theme.public-page--kefumenu .customer-container .content-item {
    min-height: 64px !important;
    margin: 0 !important;
    color: var(--public-text) !important;
    background: linear-gradient(145deg, #102a48, #0d213a) !important;
    border: 1px solid var(--public-border) !important;
    border-radius: var(--public-radius-sm) !important;
}

body.public-ui-theme .tutorial-page__shell .tutorial-page__content {
    box-sizing: border-box;
    margin: 16px !important;
    padding: 20px !important;
    color: var(--public-text) !important;
    background: linear-gradient(145deg, rgb(19 47 81 / 96%), rgb(10 28 49 / 96%)) !important;
    border: 1px solid var(--public-border) !important;
    border-radius: var(--public-radius) !important;
    box-shadow: var(--public-shadow);
    font-family: var(--font-family) !important;
    font-size: 15px !important;
    line-height: 1.65 !important;
}

body.public-ui-theme .tutorial-page__content :is(p, span, b) {
    color: inherit !important;
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
}

body.public-ui-theme .tutorial-page__content p {
    margin: 0 0 14px !important;
    overflow-wrap: anywhere;
}

body.public-ui-theme .tutorial-page__content img {
    display: block;
    width: 100% !important;
    height: auto !important;
    margin: 16px 0 !important;
    border: 1px solid var(--public-border-soft);
    border-radius: 12px;
}

/*
 * Lapisan visual final untuk refresh app mobile publik. Selector di bagian ini
 * sengaja mengikat ke pola komponen yang sudah ada agar route, query, dan
 * kontrak integrasi tidak ikut berubah.
 */
html.public-ui-root,
body.public-ui-theme {
    width: 100%;
    min-width: 320px;
}

body.public-ui-theme::before {
    position: fixed;
    inset: 0;
    z-index: -1;
    content: "";
    background:
        radial-gradient(circle at 18% -8%, rgb(245 196 81 / 15%), transparent 220px),
        radial-gradient(circle at 96% 8%, rgb(24 223 255 / 12%), transparent 260px),
        linear-gradient(180deg, #06101d 0%, #08182a 48%, #06101d 100%);
}

body.public-ui-theme :is(#app, .public-ui-shell, .slots-shell, .main-content, .page-content, .mian:not(.member-account), .customer-container) {
    box-sizing: border-box;
    width: 100% !important;
    max-width: var(--theme-shell-max, 480px) !important;
    margin-inline: auto !important;
}

body.public-ui-theme :is(.content, .slots-main, .main-content, .page-content) {
    scrollbar-width: none;
}

body.public-ui-theme :is(.content, .slots-main, .main-content, .page-content)::-webkit-scrollbar {
    display: none;
}

body.public-ui-theme.public-page--home .public-home {
    background: transparent !important;
}

body.public-ui-theme.public-page--home #app {
    overflow: hidden clip;
    border-inline: 1px solid rgb(148 198 255 / 8%);
}

body.public-ui-theme.public-page--home .content {
    display: flex !important;
    min-height: 100svh;
    flex-direction: column;
    row-gap: 12px !important;
}

body.public-ui-theme.public-page--home .navbar {
    display: block !important;
    position: static !important;
    transform: none !important;
    width: 100% !important;
    min-height: calc(60px + env(safe-area-inset-top));
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body.public-ui-theme.public-page--home :is(.navbar-fixed, .navbar__container, .navbar__content) {
    background: rgb(6 16 29 / 95%) !important;
    border-color: var(--public-border-soft) !important;
}

body.public-ui-theme.public-page--home :is(.navbar-fixed, .navbar__container) {
    box-shadow: 0 12px 32px rgb(0 6 20 / 24%) !important;
    backdrop-filter: blur(18px);
}

/* Navbar Download / Guest Button - Compact Pill Style for public-ui-theme */
body.public-ui-theme.public-page--home .navbar-fixed :is(.btn-download-app, .home-navbar-guest-action) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    min-width: 68px !important;
    min-height: 36px !important;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 700;
    color: #201d15;
    background: linear-gradient(135deg, #F4C14F 0%, #D9AC4F 100%);
    border: none;
    border-radius: 18px;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(244, 193, 79, 0.35);
}

body.public-ui-theme.public-page--home .navbar-fixed :is(.btn-download-app, .home-navbar-guest-action):active {
    transform: scale(0.96);
    box-shadow: 0 1px 4px rgba(244, 193, 79, 0.25);
}

body.public-ui-theme.public-page--home .navbar-fixed :is(.btn-download-app, .home-navbar-guest-action) svg {
    flex-shrink: 0;
}

body.public-ui-theme.public-page--home .navbar-fixed :is(.btn-download-app, .home-navbar-guest-action):hover {
    background: linear-gradient(135deg, #F7CA5C 0%, #E5B654 100%);
    box-shadow: 0 4px 12px rgba(244, 193, 79, 0.45);
}

body.public-ui-theme.public-page--home .navbar-fixed :is(a, button, .btn, [onclick]) {
    min-width: 44px !important;
    min-height: 44px !important;
}

body.public-ui-theme.public-page--home .home-hero {
    position: relative;
    margin: 12px 12px 0 !important;
    background: var(--public-surface-raised) !important;
}

body.public-ui-theme.public-page--home .home-hero__slides {
    aspect-ratio: 16 / 7.8 !important;
    min-height: 142px;
    border-radius: var(--public-radius) !important;
}

body.public-ui-theme.public-page--home .home-hero .mySlides img {
    display: block;
    object-fit: cover;
}

body.public-ui-theme.public-page--home .noticeBar__container {
    min-height: 48px;
    margin: 0 12px !important;
    color: var(--public-text);
    background: rgb(14 35 60 / 92%) !important;
    border: 1px solid var(--public-border-soft) !important;
    border-left: 3px solid var(--public-accent) !important;
    border-radius: 14px !important;
}

body.public-ui-theme.public-page--home .noticeBar__container svg {
    flex: 0 0 28px;
    width: 28px !important;
    height: 28px !important;
}

body.public-ui-theme.public-page--home .noticeBar__message {
    color: var(--public-text-muted) !important;
    font-size: 12px !important;
}

body.public-ui-theme.public-page--home .noticeBar__action {
    min-width: 64px !important;
    min-height: 44px !important;
    box-sizing: border-box;
    color: #18200e !important;
    background: var(--public-accent) !important;
    border-radius: 11px !important;
    font-weight: 800;
}

body.public-ui-theme.public-page--home .neon-grid {
    display: flex !important;
    gap: 10px !important;
    margin: 2px 0 0 !important;
    padding: 0 12px 4px !important;
    overflow-x: auto;
    scroll-padding-inline: 12px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

body.public-ui-theme.public-page--home .neon-grid::-webkit-scrollbar {
    display: none;
}

body.public-ui-theme.public-page--home .neon-card {
    position: relative;
    flex: 0 0 76px !important;
    width: 76px !important;
    min-width: 76px !important;
    min-height: 94px !important;
    padding: 10px 8px !important;
    color: var(--public-text-muted) !important;
    background: rgb(14 35 60 / 78%) !important;
    border: 1px solid var(--public-border-soft) !important;
    border-radius: 16px !important;
    box-shadow: none !important;
}

body.public-ui-theme.public-page--home .neon-card.active {
    color: var(--public-accent-strong) !important;
    background: linear-gradient(180deg, rgb(245 196 81 / 16%), rgb(14 35 60 / 90%)) !important;
    border-color: rgb(245 196 81 / 58%) !important;
    box-shadow: 0 10px 28px rgb(245 196 81 / 10%) !important;
}

body.public-ui-theme.public-page--home .neon-card__icon {
    width: 46px !important;
    height: 46px !important;
    background: rgb(5 18 33 / 68%) !important;
    border: 1px solid rgb(148 198 255 / 12%);
    border-radius: 14px !important;
}

body.public-ui-theme.public-page--home .neon-card__label {
    width: 100%;
    overflow: hidden;
    color: inherit !important;
    font-size: 9.5px !important;
    font-weight: 780 !important;
    line-height: 1.15;
    text-overflow: clip;
    letter-spacing: 0;
}

body.public-ui-theme.public-page--home .neon-card__badge {
    top: 5px !important;
    right: 5px !important;
    display: grid;
    width: 19px;
    height: 19px;
    place-items: center;
    background: rgb(5 18 33 / 82%);
    border: 1px solid rgb(245 196 81 / 34%);
    border-radius: 999px;
    font-size: 11px !important;
}

body.public-ui-theme.public-page--home .nexus-panel-content {
    padding: 0 12px 4px !important;
}

body.public-ui-theme.public-page--home .nexus-category-panel {
    margin: 0 !important;
}


body.public-ui-theme :is(.slots-page, .slots-shell) {
    background:
        radial-gradient(circle at 90% 2%, rgb(24 223 255 / 10%), transparent 240px),
        #07111f !important;
}

body.public-ui-theme .slots-shell {
    border-inline: 1px solid rgb(148 198 255 / 8%);
}

body.public-ui-theme :is(.slots-header, .app-header) {
    box-shadow: 0 10px 28px rgb(0 6 20 / 24%) !important;
}

body.public-ui-theme :is(.slots-back, .back-btn, .slots-search__clear, .provider-chip, .filter-chip, .load-more-btn, .game-card, .provider-card) {
    min-width: 44px !important;
    min-height: 44px !important;
}

body.public-ui-theme .slots-heading,
body.public-ui-theme .header-title {
    color: var(--public-text) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

body.public-ui-theme .slots-summary {
    margin-bottom: 14px !important;
}

body.public-ui-theme .slots-summary__title {
    color: var(--public-text) !important;
    font-size: 16px !important;
}

body.public-ui-theme .provider-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body.public-ui-theme .provider-card {
    min-height: 128px !important;
    padding: 12px 8px !important;
}

body.public-ui-theme .provider-card__media {
    width: 62px !important;
    height: 62px !important;
    background: rgb(5 18 33 / 62%) !important;
    border-color: rgb(148 198 255 / 12%) !important;
    border-radius: 16px !important;
}

body.public-ui-theme .provider-card__name {
    color: var(--public-text) !important;
    font-size: 12px !important;
    letter-spacing: 0 !important;
}

body.public-ui-theme .provider-card__count {
    color: var(--public-text-muted) !important;
}

body.public-ui-theme .section-providers {
    background: linear-gradient(180deg, rgb(7 17 31 / 98%) 0%, rgb(7 17 31 / 90%) 100%) !important;
    border-bottom: 1px solid var(--public-border-soft);
    backdrop-filter: blur(16px);
}

body.public-ui-theme .providers-scroll {
    scroll-padding-inline: 12px;
}

body.public-ui-theme .provider-chip {
    color: var(--public-text-muted) !important;
    background: rgb(23 29 37 / 92%) !important;
    border-color: var(--public-border-soft) !important;
    border-radius: 999px !important;
}

body.public-ui-theme .provider-chip.active,
body.public-ui-theme .filter-chip.active {
    color: #171107 !important;
    background: var(--gradient-gold, linear-gradient(180deg, #FFF2B8, #F5C75C)) !important;
    border-color: var(--public-accent-strong) !important;
    box-shadow: 0 8px 20px rgb(245 199 92 / 18%) !important;
}

body.public-ui-theme .filter-chip {
    flex: 1 1 44px;
    justify-content: center;
    min-width: 44px !important;
    color: var(--public-text-muted) !important;
    background: rgb(23 29 37 / 92%) !important;
    border-color: var(--public-border-soft) !important;
}

body.public-ui-theme .game-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 9px !important;
    padding-inline: 10px !important;
}

body.public-ui-theme .game-card {
    aspect-ratio: 0.74 !important;
    overflow: hidden;
    border: 1px solid var(--public-border-soft) !important;
    border-radius: 12px !important;
    background: #171D25 !important;
    box-shadow: 0 8px 20px rgb(0 0 0 / 18%);
}

body.public-ui-theme .game-name {
    color: var(--public-text) !important;
    font-size: 10.5px !important;
    font-weight: 760 !important;
    letter-spacing: 0;
}

body.public-ui-theme .badge-info {
    padding: 18px 7px 7px !important;
    background: linear-gradient(180deg, transparent, rgb(7 8 7 / 78%));
}

body.public-ui-theme .game-card-play {
    background: var(--gradient-gold, linear-gradient(180deg, #FFF2B8, #F5C75C)) !important;
    box-shadow: 0 8px 22px rgb(245 199 92 / 26%) !important;
}

body.public-ui-theme.public-route-game .main-content,
body.public-ui-theme.public-route-game .game-section,
body.public-ui-theme.public-route-game .provider-section {
    box-sizing: border-box !important;
    width: min(100%, var(--theme-shell-max, 480px)) !important;
    max-width: var(--theme-shell-max, 480px) !important;
    margin-inline: auto !important;
    overflow-x: clip !important;
}

body.public-ui-theme.public-route-game .provider-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

@media (max-width: 340px) {
    body.public-ui-theme.public-route-game .game-grid,
    body.public-ui-theme.public-route-game .provider-grid {
        gap: 8px !important;
    }

    body.public-ui-theme.public-route-game .provider-name,
    body.public-ui-theme.public-route-game .game-name {
        font-size: 10px !important;
    }
}

body.public-ui-theme .auth-page {
    background: linear-gradient(180deg, #070807 0%, var(--public-canvas) 48%, #151109 100%) !important;
}

body.public-ui-theme .auth-page__content {
    margin-top: clamp(24px, 7svh, 56px) !important;
}

body.public-ui-theme :is(.auth-page--login .auth__form, .auth-page--forgot .auth__form, .auth-page__mark, .auth-page__icon-button, .auth__input-group) {
    background: rgb(23 29 37 / 94%) !important;
    border-color: var(--public-border) !important;
}

body.public-ui-theme .auth-page__mark {
    color: var(--public-accent-strong) !important;
    box-shadow: 0 14px 28px rgb(0 6 20 / 24%);
}

body.public-ui-theme .auth-page h1 {
    font-size: clamp(30px, 8vw, 38px) !important;
}

body.public-ui-theme .auth-page__intro,
body.public-ui-theme .auth__field-help,
body.public-ui-theme .auth__account-link {
    color: var(--public-text-muted) !important;
}

body.public-ui-theme .auth__submit {
    min-height: 52px !important;
    color: #171107 !important;
    background: var(--gradient-gold, linear-gradient(180deg, #FFF2B8, #F5C75C)) !important;
    border-color: var(--public-accent-strong) !important;
    border-radius: 13px !important;
    font-size: 16px !important;
    font-weight: 850 !important;
}

body.public-ui-theme.public-route-wallet :is(.wallet-dashboard, .wallet-page, .withdraw-page, .recharge-page, .record-page),
body.public-ui-theme.public-route-promotion :is(.promotion-page, .promotion-detail, .team-page),
body.public-ui-theme.public-route-account :is(.member-page, .profile-page, .redenvelope-page) {
    background: transparent !important;
}

/* Elemen bermargin di home tidak boleh memakai width: 100%, karena hasilnya
   melewati shell 320-480px dan tampak seperti banner/notice terpotong. */
body.public-ui-theme.public-page--home :is(.home-hero, .noticeBar__container) {
    box-sizing: border-box;
    width: auto !important;
    max-width: none !important;
}

body.public-ui-theme.public-page--home .home-hero :is(.home-hero__slides, .mySlides, a, img) {
    max-width: 100%;
}

body.public-ui-theme.public-page--home .noticeBar__container-body {
    min-width: 0;
    overflow: hidden;
}

body.public-ui-theme :is(.user-navigation .user-support-fab, .customer-service-float),
body.public-ui-theme.public-page--kefumenu #customerId.customer {
    display: none !important;
}

@media (max-width: 340px) {
    body.public-ui-theme .mian:not(.member-account) > :is(.wallet, .promotion, .check-box, .profile, .forgot-box, .bank, .selectBox),
    body.public-ui-theme .mian:not(.member-account) :is(.promotion .table, .mian > .table, .card, .record-card),
    body.public-ui-theme .tutorial-page__shell .tutorial-page__content {
        margin-inline: 12px !important;
    }

    body.public-ui-theme .public-home__empty-lobby {
        gap: 6px;
        padding: 12px 14px;
    }

    body.public-ui-theme .public-home__empty-lobby-icon {
        width: 48px;
        height: 48px;
    }

    body.public-ui-theme .public-home__empty-lobby h1 {
        font-size: 18px;
    }

    body.public-ui-theme .public-home__empty-lobby-actions {
        gap: 8px;
        margin-top: 0;
    }

    body.public-ui-theme.public-page--home .home-hero__slides {
        min-height: 124px;
    }

    body.public-ui-theme.public-page--home .neon-card {
        flex-basis: 70px !important;
        width: 70px !important;
        min-width: 70px !important;
        min-height: 90px !important;
    }

    body.public-ui-theme.public-page--home .neon-card__icon {
        width: 42px !important;
        height: 42px !important;
    }

    body.public-ui-theme .game-grid {
        gap: 8px !important;
    }

    body.public-ui-theme .filter-chip {
        padding-inline: 8px !important;
        font-size: 12px !important;
    }
}

@media (min-width: 390px) {
    body.public-ui-theme .provider-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

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

/* ============================================
   NATIVE SPLASH SCREEN OVERRIDES
   Override gaya public-app-loading bawaan
   ============================================ */
.public-app-loading__mark {
    display: block !important;
    width: 160px !important;
    height: 160px !important;
    margin: 0 auto !important;
    background: url('/images/logo-brand-rsnvip9-header.png') no-repeat center !important;
    background-size: contain !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    animation: native-splash-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
    filter: drop-shadow(0 4px 12px rgba(245, 196, 81, 0.25)) !important;
}

.public-app-loading__mark::before {
    display: none !important;
}

.public-app-loading__rings,
.public-app-loading__dots {
    display: none !important;
}

@keyframes native-splash-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(0.96);
        opacity: 0.8;
    }
}

.public-app-loading__progress-container {
    width: 140px !important;
    height: 4px !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-radius: 4px !important;
    margin-top: 24px !important;
    overflow: hidden !important;
}

.public-app-loading__progress-bar {
    height: 100% !important;
    width: 0% !important;
    background: linear-gradient(90deg, #F4C14F, #FFE59A) !important;
    border-radius: 4px !important;
    animation: native-splash-progress 1s ease-out forwards !important;
}

@keyframes native-splash-progress {
    0% { width: 0%; }
    20% { width: 35%; }
    60% { width: 75%; }
    100% { width: 100%; }
}

/* ============================================
   SPLASH SCREEN (CONTOH GAMBAR)
   ============================================ */
.public-app-loading {
    background: #0B0D10 !important;
    padding: 0 !important;
}
.public-app-loading__bg {
    position: absolute;
    inset: 0;
    /* WebP (193 KB) dipakai di Android 4.0+; PNG optimized (563 KB) sebagai fallback */
    background: url('/images/splash-bg.webp') no-repeat center;
    background-image: image-set(
        url('/images/splash-bg.webp') type('image/webp'),
        url('/images/splash-bg.png') type('image/png')
    );
    background-size: cover;
    z-index: 0;
}
.public-app-loading__content {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: center !important;
    width: 100% !important;
    height: 100% !important;
    padding: max(24px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(32px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)) !important;
    z-index: 1 !important;
    box-sizing: border-box !important;
}
.public-app-loading__bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%;
}
.public-app-loading .public-app-loading__status {
    display: block !important;
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6) !important;
    margin: 0 !important;
}
.public-app-loading__progress-text {
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}
.public-app-loading__progress-container {
    width: 240px !important;
    height: 6px !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 6px !important;
    margin-top: 4px !important;
    margin-bottom: 8px !important;
    overflow: hidden !important;
}
.public-app-loading__progress-bar {
    height: 100% !important;
    width: 0% !important;
    min-width: 4px !important;
    background: linear-gradient(90deg, #F4C14F, #FFE59A) !important;
    border-radius: 4px !important;
    animation: none !important;
    transition: width 0.3s ease;
}
.public-app-loading .public-app-loading__warning {
    position: static !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
    letter-spacing: 0 !important;
}
.public-app-loading__version {
    position: absolute;
    bottom: 8px;
    right: 12px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 10px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

.public-app-loading[hidden],
.public-app-loading.is-hidden {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.spa-route-loader {
    position: fixed;
    right: max(var(--space-3, 12px), calc((100% - var(--theme-shell-max, 480px)) / 2 + var(--space-3, 12px)));
    bottom: calc(var(--user-tabbar-height, 68px) + env(safe-area-inset-bottom) + var(--space-4, 16px));
    left: max(var(--space-3, 12px), calc((100% - var(--theme-shell-max, 480px)) / 2 + var(--space-3, 12px)));
    z-index: var(--theme-z-toast, 3000);
    display: grid;
    pointer-events: none;
}

.spa-route-loader[hidden] {
    display: none !important;
}

.spa-route-loader__sheet {
    display: grid;
    width: 100%;
    max-width: 420px;
    min-height: 58px;
    margin-inline: auto;
    padding: var(--space-3, 12px);
    gap: var(--space-2, 8px);
    background: color-mix(in srgb, var(--surface-card-raised, var(--public-surface)) 92%, transparent);
    border: 1px solid var(--border-subtle, var(--public-border-soft));
    border-radius: var(--radius-card, var(--public-radius));
    box-shadow: var(--shadow-raised, var(--public-shadow));
    backdrop-filter: blur(14px);
}

.spa-route-loader__sheet span {
    display: block;
    height: var(--space-3, 12px);
    background: linear-gradient(
        90deg,
        var(--surface-soft, var(--public-surface-soft)),
        color-mix(in srgb, var(--primary, var(--public-accent)) 28%, var(--surface-soft, var(--public-surface-soft))),
        var(--surface-soft, var(--public-surface-soft))
    );
    background-size: 220% 100%;
    border-radius: var(--radius-pill, 999px);
    animation: spa-route-shimmer var(--duration-slow, 350ms) var(--ease-out, ease-out) infinite alternate;
}

.spa-route-loader__sheet span:nth-child(1) {
    width: 76%;
}

.spa-route-loader__sheet span:nth-child(3) {
    width: 58%;
}

body.spa-route-loading [data-spa-main] {
    opacity: .72;
    transform: translateY(var(--space-1, 4px));
    transition:
        opacity var(--duration-fast, 150ms) var(--ease-out, ease-out),
        transform var(--duration-fast, 150ms) var(--ease-out, ease-out);
}

@keyframes spa-route-shimmer {
    from {
        background-position: 100% 0;
    }

    to {
        background-position: 0 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .spa-route-loader__sheet span,
    body.spa-route-loading [data-spa-main] {
        animation: none;
        transition: none;
        transform: none;
    }
}