:root {
    --h8-theme-bg: #f7f9fc;
    --h8-theme-page: #eef2f7;
    --h8-theme-surface: #ffffff;
    --h8-theme-surface-strong: #f4f7fb;
    --h8-theme-border: #d9e2ee;
    --h8-theme-border-soft: #e8edf4;
    --h8-theme-text: #142236;
    --h8-theme-muted: #66758a;
    --h8-theme-red: #d72f3b;
    --h8-theme-red-strong: #b51b2b;
    --h8-theme-control: #f8fafc;
    --h8-theme-focus: #59c5df;
    --h8-theme-shadow: 0 12px 34px rgba(20, 34, 54, 0.09);
}

html[data-h8-theme="dark"] {
    --h8-theme-bg: #07111f;
    --h8-theme-page: #081423;
    --h8-theme-surface: #0c1829;
    --h8-theme-surface-strong: #101e31;
    --h8-theme-border: #2a3c54;
    --h8-theme-border-soft: #1c2c41;
    --h8-theme-text: #f7f9fc;
    --h8-theme-muted: #91a0b5;
    --h8-theme-red: #ef3340;
    --h8-theme-red-strong: #b51b2b;
    --h8-theme-control: #102034;
    --h8-theme-focus: #59c5df;
    --h8-theme-shadow: 0 18px 48px rgba(0, 0, 0, 0.26);
}

html[data-h8-theme] {
    background: var(--h8-theme-bg);
}

html[data-h8-theme] body {
    color: var(--h8-theme-text);
    background-color: var(--h8-theme-page);
    transition: color 160ms ease, background-color 160ms ease;
}

.h8-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Shared, compact RWD header */
html[data-h8-theme] body > .h8-mobile-header,
html[data-h8-theme] .h8-mobile-header {
    height: var(--h8-mobile-header-height) !important;
    color: var(--h8-theme-text);
    background: color-mix(in srgb, var(--h8-theme-bg) 96%, transparent) !important;
    border-color: var(--h8-theme-border-soft) !important;
    border-radius: 0 !important;
    box-shadow: 0 8px 28px rgba(5, 13, 25, 0.16) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

html[data-h8-theme="light"] body > .h8-mobile-header,
html[data-h8-theme="light"] .h8-mobile-header {
    background: rgba(255, 255, 255, 0.96) !important;
}

html[data-h8-theme] .h8-mobile-header-inner {
    box-sizing: border-box;
    width: 100%;
    max-width: 1120px !important;
    height: var(--h8-mobile-header-height) !important;
    min-height: var(--h8-mobile-header-height) !important;
    gap: 7px !important;
    padding: 8px 20px !important;
    overflow: visible;
}

html[data-h8-theme].dist-rwd-active .h8-mobile-header-inner {
    max-width: 1440px !important;
}

html[data-h8-theme] .buy-app .h8-mobile-header-inner {
    max-width: 1180px !important;
}

html[data-h8-theme] .preview-app .h8-mobile-header-inner {
    max-width: 960px !important;
}

html[data-h8-theme] .h8-mobile-brand {
    box-sizing: border-box;
    flex: 0 0 126px !important;
    width: 126px !important;
    max-width: 126px !important;
    height: 42px;
    padding: 4px 7px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid color-mix(in srgb, var(--h8-theme-border) 70%, #ffffff);
    border-radius: 7px;
}

html[data-h8-theme] .h8-mobile-brand img {
    display: block;
    width: 100% !important;
    height: 100%;
    object-fit: contain;
}

html[data-h8-theme] .h8-mobile-brand .h8-brand-logo-dark {
    display: none !important;
}

html[data-h8-theme="dark"] .h8-mobile-brand {
    padding: 0;
    background: #07111f;
    border-color: color-mix(in srgb, var(--h8-theme-border) 78%, var(--h8-theme-red));
    box-shadow: none;
}

html[data-h8-theme="dark"] .h8-mobile-brand .h8-brand-logo-light {
    display: none !important;
}

html[data-h8-theme="dark"] .h8-mobile-brand .h8-brand-logo-dark {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    object-position: center;
    filter: none;
}

html[data-h8-theme] .h8-language-form {
    flex: 0 0 104px;
    width: 104px;
}

html[data-h8-theme] .h8-language-select,
html[data-h8-theme] .h8-legacy-link,
html[data-h8-theme] .h8-theme-toggle,
html[data-h8-theme] .h8-watchlist-quick-button,
html[data-h8-theme] .h8-member-chip,
html[data-h8-theme] .h8-header-actions a,
html[data-h8-theme] .h8-header-actions button {
    box-sizing: border-box;
    min-height: 38px;
    color: var(--h8-theme-text);
    background: var(--h8-theme-control);
    border: 1px solid var(--h8-theme-border);
    border-radius: 9px;
    font-family: Arial, "Microsoft JhengHei", sans-serif;
    box-shadow: none;
}

html[data-h8-theme] .h8-language-select {
    height: 38px;
    padding: 6px 23px 6px 9px;
    color: var(--h8-theme-text);
    font-size: 12px;
}

html[data-h8-theme] .h8-legacy-link {
    min-width: 68px;
    padding: 7px 10px;
    color: var(--h8-theme-text);
    font-size: 12px;
}

.h8-theme-toggle {
    position: relative;
    display: inline-grid;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    place-items: center;
    padding: 8px;
    cursor: pointer;
    transition: color 150ms ease, background 150ms ease, border-color 150ms ease, transform 150ms ease;
}

.h8-theme-toggle:hover,
.h8-theme-toggle:focus-visible,
html[data-h8-theme] .h8-watchlist-quick-button:hover,
html[data-h8-theme] .h8-watchlist-quick-button:focus-visible {
    color: var(--h8-theme-red);
    background: color-mix(in srgb, var(--h8-theme-control) 86%, var(--h8-theme-red));
    border-color: var(--h8-theme-red);
    outline: none;
}

.h8-theme-toggle:focus-visible,
html[data-h8-theme] .h8-watchlist-quick-button:focus-visible,
html[data-h8-theme] .h8-language-select:focus-visible,
html[data-h8-theme] .h8-legacy-link:focus-visible,
html[data-h8-theme] .h8-header-actions a:focus-visible,
html[data-h8-theme] .h8-header-actions button:focus-visible {
    outline: 2px solid var(--h8-theme-focus);
    outline-offset: 2px;
}

.h8-theme-toggle:active {
    transform: translateY(1px);
}

.h8-theme-icon {
    display: none;
    width: 20px;
    height: 20px;
}

.h8-theme-icon svg {
    width: 100%;
    height: 100%;
}

html[data-h8-theme="light"] .h8-theme-icon-moon,
html[data-h8-theme="dark"] .h8-theme-icon-sun {
    display: inline-flex;
}

html[data-h8-theme] .h8-watchlist-quick-button {
    width: 38px;
    min-width: 38px;
    height: 38px;
    padding: 8px;
    color: var(--h8-theme-text);
}

html[data-h8-theme] .h8-watchlist-count {
    border-color: var(--h8-theme-bg);
}

html[data-h8-theme] .h8-header-actions {
    width: 92px;
    flex: 0 0 92px;
    margin-left: 0;
}

html[data-h8-theme] .h8-header-actions a,
html[data-h8-theme] .h8-header-actions button {
    min-height: 38px;
    padding: 7px 10px;
    color: var(--h8-theme-text);
    background: color-mix(in srgb, var(--h8-theme-control) 88%, var(--h8-theme-red));
    border-color: color-mix(in srgb, var(--h8-theme-border) 62%, var(--h8-theme-red));
    font-size: 12px;
}

html[data-h8-theme] .h8-member-chip {
    flex: 0 1 220px !important;
    width: auto;
    max-width: 260px;
    min-height: 38px;
    margin-left: 0;
}

html[data-h8-theme] .h8-member-chip-text span {
    color: var(--h8-theme-text);
}

html[data-h8-theme] .h8-member-caret {
    background: var(--h8-theme-surface);
    border-color: var(--h8-theme-border);
}

html[data-h8-theme] .h8-member-caret::before {
    border-color: var(--h8-theme-muted);
}

html[data-h8-theme] .h8-member-card {
    color: var(--h8-theme-text);
    background: var(--h8-theme-surface-strong);
    border-color: var(--h8-theme-border);
    box-shadow: var(--h8-theme-shadow);
}

html[data-h8-theme] .h8-member-profile,
html[data-h8-theme] .h8-member-balance div {
    border-color: var(--h8-theme-border);
}

html[data-h8-theme] .h8-member-profile strong {
    color: var(--h8-theme-text);
}

html[data-h8-theme] .h8-member-profile small,
html[data-h8-theme] .h8-member-balance span {
    color: var(--h8-theme-muted);
}

/* Shared watchlist follows the selected theme on every RWD route. */
html[data-h8-theme] .h8-watchlist-overlay {
    color: var(--h8-theme-text);
}

html[data-h8-theme] .h8-watchlist-sheet {
    background: var(--h8-theme-surface-strong);
    border-color: var(--h8-theme-border);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.4);
}

html[data-h8-theme] .h8-watchlist-sheet-header {
    border-color: var(--h8-theme-border-soft);
}

html[data-h8-theme] .h8-watchlist-sheet-header h2,
html[data-h8-theme] .h8-watchlist-empty strong {
    color: var(--h8-theme-text);
}

html[data-h8-theme] .h8-watchlist-sheet-header p,
html[data-h8-theme] .h8-watchlist-row-body small,
html[data-h8-theme] .h8-watchlist-empty {
    color: var(--h8-theme-muted);
}

html[data-h8-theme] .h8-watchlist-close {
    color: var(--h8-theme-muted);
    background: var(--h8-theme-control);
    border-color: var(--h8-theme-border);
}

html[data-h8-theme] .h8-watchlist-row {
    color: var(--h8-theme-text);
}

html[data-h8-theme] .h8-watchlist-row:hover,
html[data-h8-theme] .h8-watchlist-row:focus-visible {
    color: var(--h8-theme-text);
    background: var(--h8-theme-control);
    border-color: var(--h8-theme-border);
}

html[data-h8-theme="light"] .h8-watchlist-backdrop {
    background: rgba(20, 34, 54, 0.42);
}

html[data-h8-theme="light"] .h8-watchlist-row.is-current {
    color: #ffffff;
}

/* Dark mode foundation shared by every page that includes the RWD header. */
html[data-h8-theme="dark"] body,
html[data-h8-theme="dark"] body.preview-page,
html[data-h8-theme="dark"] body.buy-page,
html[data-h8-theme="dark"] body.member-page,
html[data-h8-theme="dark"] body.payment-page {
    background:
        radial-gradient(circle at 16% 0%, rgba(23, 74, 123, 0.18), transparent 31rem),
        linear-gradient(180deg, #081423 0%, var(--h8-theme-bg) 100%) !important;
    color: var(--h8-theme-text) !important;
}

html[data-h8-theme="dark"] :is(
    .preview-app,
    .buy-app,
    .buy-list-page,
    .buy-list-shell,
    .result-rwd-page,
    .result-mobile-shell,
    .lotto-master-page,
    .member-edit-page,
    .h8-legacy-page,
    .member-tool-page,
    .payment-page,
    .collect-page
) {
    color: var(--h8-theme-text);
    background-color: transparent !important;
}

html[data-h8-theme="dark"] :is(
    .home-cover-carousel,
    .announcement,
    .home-promo-banner,
    .bingo-panel,
    .draw-panel,
    .lottery-panel,
    .ad-section,
    .service-panel,
    .auth-panel,
    .video-panel,
    .contact-panel,
    .prize-marquee,
    .lottery-card,
    .draw-card,
    .service-card,
    .shortcut-card,
    .contact-card,
    .account-summary,
    .auth-card,
    .balance-card,
    .game-panel,
    .side-panel,
    .draw-result-panel,
    .desktop-checkout-panel,
    .order-drawer-panel,
    .drawer-status-card,
    .frame-wrap,
    .buy-list-hero,
    .history-card,
    .history-filter,
    .history-summary,
    .empty-state,
    .result-mobile-card,
    .master-card,
    .master-info-row,
    .master-number-card,
    .master-selected-card,
    .master-loading,
    .profile-summary,
    .member-tools,
    .form-card,
    .notice,
    .upload-card,
    .avatar-panel,
    .h8-legacy-page-head,
    .h8-legacy-card,
    .h8-record-search,
    .h8-record-summary,
    .h8-record-card,
    .h8-record-empty,
    .h8-faq-card,
    .tool-heading,
    .tool-card,
    .tool-search,
    .tool-summary,
    .tool-message,
    .tool-copy-card,
    .withdrawal-notes-card,
    .collect-combo-panel,
    .collect-combo-option,
    .balance-panel,
    .balance-panel > div,
    .quick-pay,
    .payment-options,
    .method-block,
    .quick-card,
    .method-link-card,
    .amount-card
) {
    color: var(--h8-theme-text) !important;
    background-color: var(--h8-theme-surface) !important;
    border-color: var(--h8-theme-border) !important;
    box-shadow: var(--h8-theme-shadow);
}

/* The auth modal uses an overlay, a dialog and form cards; theme each layer separately. */
html[data-h8-theme="dark"] .auth-panel {
    background: rgba(2, 8, 18, 0.82) !important;
    box-shadow: none !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

html[data-h8-theme="dark"] .auth-dialog {
    color: var(--h8-theme-text);
    background: var(--h8-theme-surface-strong);
    border-color: var(--h8-theme-border);
    box-shadow: 0 24px 72px rgba(0, 0, 0, 0.46);
}

html[data-h8-theme="dark"] .auth-dialog .section-title {
    border-color: var(--h8-theme-border-soft);
}

html[data-h8-theme="dark"] .auth-dialog .modal-close {
    color: var(--h8-theme-text);
    background: var(--h8-theme-control);
    border-color: var(--h8-theme-border);
}

html[data-h8-theme="dark"] .auth-tabs button {
    color: var(--h8-theme-text);
    background: var(--h8-theme-control);
    border-color: var(--h8-theme-border);
}

html[data-h8-theme="dark"] .auth-card {
    color: var(--h8-theme-text) !important;
    background: var(--h8-theme-surface) !important;
    border-color: var(--h8-theme-border) !important;
    box-shadow: none;
}

html[data-h8-theme="dark"] .auth-card :is(label, label > span, .check-row, .check-row span, .radio-row, .radio-row span) {
    color: var(--h8-theme-muted) !important;
}

html[data-h8-theme="dark"] .auth-card :is(input:not([type="checkbox"]):not([type="radio"]), select) {
    color: var(--h8-theme-text) !important;
    background: var(--h8-theme-control) !important;
    border-color: var(--h8-theme-border) !important;
}

html[data-h8-theme="dark"] .auth-card :is(input, select):focus {
    border-color: var(--h8-theme-focus) !important;
    outline: 2px solid color-mix(in srgb, var(--h8-theme-focus) 35%, transparent);
    outline-offset: 1px;
}

html[data-h8-theme="dark"] .auth-card input[type="checkbox"],
html[data-h8-theme="dark"] .auth-card input[type="radio"] {
    accent-color: var(--h8-theme-red);
}

html[data-h8-theme="dark"] .auth-card .captcha-refresh-btn {
    color: var(--h8-theme-text);
    background: var(--h8-theme-control);
    border-color: var(--h8-theme-border);
}

/* Member profile tools and fields retain a dark surface instead of light-only cards. */
html[data-h8-theme="dark"] .member-tool-grid a {
    color: var(--h8-theme-text) !important;
    background: var(--h8-theme-control) !important;
    border-color: var(--h8-theme-border) !important;
}

html[data-h8-theme="dark"] .member-edit-page :is(
    .field strong,
    .segmented label,
    .verify-message,
    .avatar-preview,
    .avatar-preview button,
    .bottom-actions a
) {
    color: var(--h8-theme-text) !important;
    background: var(--h8-theme-control) !important;
    border-color: var(--h8-theme-border) !important;
}

html[data-h8-theme="dark"] .member-edit-page :is(.profile-summary span, .section-title span, .field > span) {
    color: var(--h8-theme-muted) !important;
}

html[data-h8-theme="dark"] .member-edit-page .lock-state.is-locked {
    color: var(--h8-theme-muted) !important;
    background: var(--h8-theme-control) !important;
    border-color: var(--h8-theme-border) !important;
}

/* Payment channels keep brand marks on white plates while their cards follow dark mode. */
html[data-h8-theme="dark"] .payment-page .notice {
    background: #182131 !important;
    border-color: #8a6534 !important;
}

html[data-h8-theme="dark"] .payment-page .notice-list li {
    color: #f3d39c !important;
    background: #211d19 !important;
    border-color: #73542f !important;
}

html[data-h8-theme="dark"] .payment-page .method-heading {
    color: var(--h8-theme-text) !important;
    background: var(--h8-theme-surface-strong) !important;
    border-bottom-color: var(--h8-theme-border) !important;
}

html[data-h8-theme="dark"] .payment-page .method-heading.is-limited {
    background:
        linear-gradient(135deg, rgba(181, 27, 43, 0.16), rgba(12, 24, 41, 0.96)),
        var(--h8-theme-surface-strong) !important;
}

html[data-h8-theme="dark"] .payment-page .method-heading :is(h2, h3, strong) {
    color: var(--h8-theme-text) !important;
}

html[data-h8-theme="dark"] .payment-page .method-heading > span:not(.limited-label) {
    color: var(--h8-theme-muted) !important;
}

html[data-h8-theme="dark"] .payment-page .method-logo-row img,
html[data-h8-theme="dark"] .payment-page .pay-logos img {
    padding: 3px;
    background: #ffffff !important;
}

html[data-h8-theme="dark"] .payment-page .amount-grid {
    background: var(--h8-theme-surface) !important;
    border-color: var(--h8-theme-border) !important;
}

html[data-h8-theme="dark"] .payment-page .amount-card span {
    color: var(--h8-theme-muted) !important;
}

html[data-h8-theme="dark"] .payment-bottom-bar > div {
    color: var(--h8-theme-text);
    background: var(--h8-theme-control);
    border-color: var(--h8-theme-border);
}

html[data-h8-theme="dark"] .payment-bottom-bar strong span {
    color: var(--h8-theme-muted);
}

html[data-h8-theme="dark"] .payment-bottom-bar button:disabled {
    color: var(--h8-theme-muted);
    background: #1b2a3f;
    border: 1px solid var(--h8-theme-border);
}

/* Online purchase outer shell and game switcher. */
html[data-h8-theme="dark"] .buy-app,
html[data-h8-theme="dark"] .buy-main {
    background: transparent !important;
}

html[data-h8-theme="dark"] .game-tab {
    color: var(--h8-theme-text);
    background: var(--h8-theme-control);
    border-color: var(--h8-theme-border);
    box-shadow: none;
}

html[data-h8-theme="dark"] .game-tab.is-active {
    color: #ffffff;
    background: var(--h8-theme-red-strong);
    border-color: var(--h8-theme-red);
}

html[data-h8-theme="dark"] .game-tab-logo {
    background: #ffffff;
    border-color: #dbe3ef;
}

html[data-h8-theme="dark"] .panel-head,
html[data-h8-theme="dark"] .desktop-checkout-meta,
html[data-h8-theme="dark"] .mobile-checkout-meta {
    border-color: var(--h8-theme-border) !important;
}

html[data-h8-theme="dark"] :is(.desktop-checkout-meta, .mobile-checkout-meta) {
    color: var(--h8-theme-text);
    background: var(--h8-theme-control);
}

html[data-h8-theme="dark"] :is(.desktop-checkout-meta, .mobile-checkout-meta) span {
    color: var(--h8-theme-muted);
}

html[data-h8-theme="dark"] :is(.desktop-agree, .mobile-agree) {
    color: var(--h8-theme-text);
}

html[data-h8-theme="dark"] :is(.desktop-agree, .mobile-agree) small {
    color: #f3c985;
}

html[data-h8-theme="dark"] :is(.desktop-submit, .mobile-submit):disabled {
    color: var(--h8-theme-muted);
    background: #1b2a3f;
    border: 1px solid var(--h8-theme-border);
}

html[data-h8-theme="dark"] .changeover-hint {
    color: #f3c985 !important;
    border-color: #8a6534 !important;
}

html[data-h8-theme="dark"] .buy-page :is(.balance-card, .drawer-empty) {
    color: var(--h8-theme-text);
    background: var(--h8-theme-control);
    border-color: var(--h8-theme-border);
}

html[data-h8-theme="dark"] :is(#gameiframe, .frame-loading) {
    color: var(--h8-theme-muted);
    background: var(--h8-theme-surface) !important;
}

html[data-h8-theme="dark"] :is(
    .site-header,
    .buy-header,
    .member-header,
    .payment-header,
    .buy-topbar,
    .game-tabs,
    .payment-bottom-bar,
    .master-bottom-bar,
    .mobile-checkout-bar
) {
    color: var(--h8-theme-text) !important;
    background: var(--h8-theme-surface-strong) !important;
    border-color: var(--h8-theme-border) !important;
}

html[data-h8-theme="dark"] :is(
    h1,
    h2,
    h3,
    .section-title,
    .section-title h2,
    .buy-title,
    .buy-title strong,
    .panel-head h2,
    .tool-heading b,
    .profile-summary h1,
    .master-title,
    .h8-legacy-page-head strong,
    .history-card-head strong,
    .history-grid dd,
    .tool-card-head strong,
    .tool-fields dd,
    .payment-page strong
) {
    color: var(--h8-theme-text) !important;
}

html[data-h8-theme="dark"] :is(
    p,
    small,
    .section-title p,
    .buy-title span,
    .panel-head span,
    .master-subtitle,
    .master-note,
    .profile-summary p,
    .tool-label,
    .tool-fields dt,
    .history-grid dt,
    .h8-legacy-page-head span,
    .notice-list,
    .payment-options .section-title p
) {
    color: var(--h8-theme-muted) !important;
}

html[data-h8-theme="dark"] :is(
    .tool-field input,
    .tool-field select,
    .tool-field textarea,
    .h8-legacy-content input,
    .h8-legacy-content select,
    .h8-legacy-content textarea,
    .member-edit-page input,
    .member-edit-page select,
    .member-edit-page textarea,
    .payment-page input,
    .payment-page select,
    .master-field input,
    .master-field select,
    .history-filter input,
    .history-filter select,
    .collect-combo-toggle,
    .collect-combo-search
) {
    color: var(--h8-theme-text) !important;
    background: var(--h8-theme-control) !important;
    border-color: var(--h8-theme-border) !important;
}

html[data-h8-theme="dark"] :is(
    .tool-field input,
    .tool-field select,
    .tool-field textarea,
    .h8-legacy-content input,
    .h8-legacy-content select,
    .h8-legacy-content textarea,
    .member-edit-page input,
    .member-edit-page select,
    .member-edit-page textarea,
    .payment-page input,
    .payment-page select,
    .master-field input,
    .master-field select,
    .history-filter input,
    .history-filter select
):focus {
    border-color: var(--h8-theme-focus) !important;
    outline: 2px solid color-mix(in srgb, var(--h8-theme-focus) 35%, transparent);
    outline-offset: 1px;
}

html[data-h8-theme="dark"] :is(
    .h8-legacy-content table,
    .h8-legacy-content td,
    .h8-legacy-content th,
    .order-drawer-content table,
    .order-drawer-content td
) {
    color: var(--h8-theme-text) !important;
    background: var(--h8-theme-surface) !important;
    border-color: var(--h8-theme-border) !important;
}

html[data-h8-theme="dark"] :is(
    .back-link,
    .tool-back,
    .h8-legacy-back,
    .master-btn-secondary,
    .tool-secondary,
    .panel-actions button,
    .draw-result-head button,
    .drawer-head button
) {
    color: var(--h8-theme-text) !important;
    background: var(--h8-theme-control) !important;
    border-color: var(--h8-theme-border) !important;
}

html[data-h8-theme="dark"] :is(
    .shortcut-card,
    .home-promo-banner,
    .home-cover-carousel,
    .ad-section
) img {
    filter: none !important;
}

html[data-h8-theme="dark"] .h8-mobile-footer,
html[data-h8-theme="dark"] .site-footer {
    color: var(--h8-theme-muted);
}

/* Legacy lottery result tables stay readable inside the dark RWD shell. */
html[data-h8-theme="dark"].result-rwd-active .result-rwd-page {
    background: transparent !important;
}

html[data-h8-theme="dark"].result-rwd-active .result-rwd-back {
    color: var(--h8-theme-text);
    background: var(--h8-theme-control);
    border-color: var(--h8-theme-border);
}

html[data-h8-theme="dark"].result-rwd-active .result-rwd-title {
    color: var(--h8-theme-text);
}

html[data-h8-theme="dark"].result-rwd-active #PageContent,
html[data-h8-theme="dark"].result-rwd-active #BingoContent {
    color: var(--h8-theme-text) !important;
    background: var(--h8-theme-surface) !important;
    border-color: var(--h8-theme-border) !important;
}

html[data-h8-theme="dark"].result-rwd-active #PageContent table,
html[data-h8-theme="dark"].result-rwd-active #BingoContent table {
    color: var(--h8-theme-text) !important;
    background-color: var(--h8-theme-surface) !important;
    border-color: var(--h8-theme-border) !important;
}

html[data-h8-theme="dark"].result-rwd-active #PageContent td:not(.BingoLB),
html[data-h8-theme="dark"].result-rwd-active #BingoContent td:not(.BingoLB) {
    color: var(--h8-theme-text) !important;
    background-color: var(--h8-theme-surface-strong) !important;
    border-color: var(--h8-theme-border) !important;
}

html[data-h8-theme="dark"].result-rwd-active #PageContent td[background],
html[data-h8-theme="dark"].result-rwd-active #BingoContent td[background] {
    background-image: none !important;
}

html[data-h8-theme="dark"].result-rwd-active #PageContent td[bgcolor="#B05800"],
html[data-h8-theme="dark"].result-rwd-active #BingoContent td[bgcolor="#B05800"],
html[data-h8-theme="dark"].result-rwd-active #PageContent td[background*="wrap_shadow"],
html[data-h8-theme="dark"].result-rwd-active #BingoContent td[background*="wrap_shadow"] {
    background-color: #7f2630 !important;
}

html[data-h8-theme="dark"].result-rwd-active #PageContent td[bgcolor="#FEE7BC"],
html[data-h8-theme="dark"].result-rwd-active #BingoContent td[bgcolor="#FEE7BC"] {
    background-color: #1a2b40 !important;
}

html[data-h8-theme="dark"].result-rwd-active #PageContent :is(font, .STYLE1, .STYLE2, .BPeriod),
html[data-h8-theme="dark"].result-rwd-active #BingoContent :is(font, .STYLE1, .STYLE2, .BPeriod) {
    color: var(--h8-theme-text) !important;
}

html[data-h8-theme="dark"].result-rwd-active #PageContent a,
html[data-h8-theme="dark"].result-rwd-active #BingoContent a {
    color: #7bd5ea !important;
}

html[data-h8-theme="dark"].result-rwd-active #RefreshTimer input,
html[data-h8-theme="dark"].result-rwd-active #PageContent input[type="button"] {
    color: var(--h8-theme-text);
    background: var(--h8-theme-control);
    border: 1px solid var(--h8-theme-border);
    border-radius: 7px;
}

html[data-h8-theme="dark"].result-rwd-active .result-mobile-card {
    color: var(--h8-theme-text) !important;
    background: var(--h8-theme-surface) !important;
    border-color: var(--h8-theme-border) !important;
}

html[data-h8-theme="dark"].result-rwd-active .result-mobile-date {
    color: var(--h8-theme-muted);
}

@media (min-width: 900px) {
    html[data-h8-theme] .h8-watchlist-quick-button {
        width: auto;
        min-width: 44px;
        padding-right: 11px;
        padding-left: 11px;
    }
}

@media (max-width: 600px) {
    html[data-h8-theme] .h8-mobile-header-inner,
    html[data-h8-theme].dist-rwd-active .h8-mobile-header-inner {
        max-width: 100% !important;
        gap: 4px !important;
        padding: 7px 6px !important;
    }

    html[data-h8-theme] .h8-mobile-brand {
        flex-basis: 76px !important;
        width: 76px !important;
        max-width: 21vw !important;
        height: 34px;
        padding: 2px 3px;
        border-radius: 6px;
    }

    html[data-h8-theme] .h8-language-form,
    html[data-h8-theme] .preview-app .h8-language-form {
        --h8-compact-language-max-width: 3em;
        flex: 0 1 58px;
        width: 58px;
        min-width: 48px;
    }

    html[data-h8-theme] .h8-language-current,
    html[data-h8-theme] .preview-app .h8-language-current {
        position: absolute;
        inset: 0 16px 0 6px;
        z-index: 2;
        display: flex;
        align-items: center;
        color: var(--h8-theme-text);
        font-size: 10px;
        font-weight: 900;
        line-height: 1;
        pointer-events: none;
    }

    html[data-h8-theme] .h8-language-select,
    html[data-h8-theme] .preview-app .h8-language-select {
        height: 34px;
        padding: 5px 14px 5px 5px;
        color: transparent;
        font-size: 10px;
        -webkit-text-fill-color: transparent;
    }

    html[data-h8-theme] .h8-language-select option,
    html[data-h8-theme] .preview-app .h8-language-select option {
        color: var(--h8-theme-text);
        background: var(--h8-theme-surface);
        -webkit-text-fill-color: var(--h8-theme-text);
    }

    html[data-h8-theme] .h8-legacy-link {
        min-width: 0;
        min-height: 34px;
        padding: 6px 7px;
        font-size: 10px;
    }

    html[data-h8-theme] .h8-theme-toggle,
    html[data-h8-theme] .h8-watchlist-quick-button {
        width: 34px;
        min-width: 34px;
        height: 34px;
        min-height: 34px;
        flex-basis: 34px;
        padding: 7px;
        border-radius: 8px;
    }

    html[data-h8-theme] .h8-header-actions {
        width: 68px;
        flex: 0 1 68px;
    }

    html[data-h8-theme] .h8-header-actions a,
    html[data-h8-theme] .h8-header-actions button {
        min-height: 34px;
        padding: 5px 4px;
        font-size: 10px;
    }

    html[data-h8-theme] .h8-member-chip {
        flex: 1 1 68px !important;
        min-height: 34px;
        max-width: 108px;
        padding: 3px 5px;
    }

    html[data-h8-theme] .h8-member-chip-text span {
        font-size: 10px;
    }

    html[data-h8-theme] .h8-member-chip-text strong {
        font-size: 11px;
    }
}

@media (min-width: 720px) {
    html[data-h8-theme] .payment-page .h8-mobile-header-inner,
    html[data-h8-theme] .member-edit-page .h8-mobile-header-inner,
    html[data-h8-theme] .collect-page .h8-mobile-header-inner,
    html[data-h8-theme] .member-tool-page .h8-mobile-header-inner,
    html[data-h8-theme] .h8-legacy-page .h8-mobile-header-inner {
        max-width: 920px !important;
    }
}

@media (max-width: 350px) {
    html[data-h8-theme] .h8-mobile-brand {
        flex-basis: 62px !important;
        width: 62px !important;
    }

    html[data-h8-theme] .h8-language-form,
    html[data-h8-theme] .preview-app .h8-language-form {
        flex-basis: 50px;
        width: 50px;
        min-width: 44px;
    }

    html[data-h8-theme] .h8-legacy-link {
        max-width: 49px;
        padding-right: 4px;
        padding-left: 4px;
        overflow: hidden;
        font-size: 9px;
    }

    html[data-h8-theme] .h8-header-actions {
        width: 60px;
        flex-basis: 60px;
    }

    html[data-h8-theme] .h8-theme-toggle,
    html[data-h8-theme] .h8-watchlist-quick-button {
        width: 32px;
        min-width: 32px;
        flex-basis: 32px;
        padding: 6px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html[data-h8-theme] body,
    .h8-theme-toggle {
        transition: none !important;
    }
}