html[data-theme="dark"],
body[data-theme="dark"] {
    color-scheme: dark !important;
    --background-color: #0b0b0d;
    --bg-primary: #0b0b0d;
    --bg-secondary: #151517;
    --body-bg: #0b0b0d;
    --panel-bg: #151517;
    --surface-color: #18181b;
    --surface-background-color: #18181b;
    --surface-rgb: 24, 24, 27;
    --card-bg: #18181b;
    --modal-bg: #151517;
    --modal-overlay-bg: rgba(0, 0, 0, 0.72);
    --input-bg: #202024;
    --input-background-color: #202024;
    --hover-bg: #252529;
    --text-color: #f5f5f7;
    --text-primary: #f5f5f7;
    --text-secondary: #98989d;
    --border-color: rgba(255, 255, 255, 0.12);
    --input-border: rgba(255, 255, 255, 0.14);
    --dark-canvas: #0b0b0d;
    --dark-surface: #18181b;
    --dark-surface-raised: #252529;
    --dark-text: #f5f5f7;
    --dark-muted: #98989d;
    --dark-border: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"],
html[data-theme="dark"] body,
html[data-theme="dark"] body[class] {
    background: var(--dark-canvas) !important;
    color: var(--dark-text) !important;
}

html[data-theme="dark"] body::before {
    opacity: 0 !important;
}

html[data-theme="dark"] #mobile-app-header,
html[data-theme="dark"] #bottom-nav,
html[data-theme="dark"] .mobile-blocspace-tab-rail {
    background: var(--dark-canvas) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
}

html[data-theme="dark"] .mobile-app-header__more-menu {
    --mobile-more-menu-bg: rgba(28, 28, 30, 0.96);
    --mobile-more-menu-text: #f5f5f7;
    --mobile-more-menu-muted: #98989d;
    --mobile-more-menu-icon-bg: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .mobile-app-header__more-item {
    box-shadow: none !important;
}

html[data-theme="dark"] .mobile-app-header__more-item.is-active {
    background: var(--dark-surface-raised) !important;
    color: var(--dark-text) !important;
    -webkit-text-fill-color: var(--dark-text) !important;
}

html[data-theme="dark"] .mobile-app-header__more-item.is-active i {
    color: var(--dark-text) !important;
    -webkit-text-fill-color: var(--dark-text) !important;
}

html[data-theme="dark"] #arena-grid,
html[data-theme="dark"] #bytes-main-area,
html[data-theme="dark"] #virtual-main-area,
html[data-theme="dark"] #market-main-area,
html[data-theme="dark"] #shop-main-area,
html[data-theme="dark"] #booking-main-area,
html[data-theme="dark"] #stream-main-area,
html[data-theme="dark"] #ai-main-area,
html[data-theme="dark"] #apps-main-area,
html[data-theme="dark"] .community-main-area,
html[data-theme="dark"] .mobile-blocspace-shell,
html[data-theme="dark"] .mobile-blocspace-tab-panel {
    background-color: var(--dark-canvas) !important;
    color: var(--dark-text) !important;
}

html[data-theme="dark"] #mobile-import-library,
html[data-theme="dark"] #mobile-import-library .mobile-import-library__body,
html[data-theme="dark"] #mobile-import-library .mobile-import-library__list {
    background: var(--dark-canvas) !important;
    background-color: var(--dark-canvas) !important;
    color: var(--dark-text) !important;
}

html[data-theme="dark"] #mobile-import-library .mobile-import-library__source,
html[data-theme="dark"] #mobile-import-library .mobile-import-library__search,
html[data-theme="dark"] #mobile-import-library .mobile-import-library__search.is-timeline-search,
html[data-theme="dark"] #mobile-import-library .mobile-import-library__search-action {
    background: var(--dark-surface) !important;
    background-color: var(--dark-surface) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
}

html[data-theme="dark"] #mobile-import-library .mobile-import-library__source-row {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
}

html[data-theme="dark"] #mobile-import-library .mobile-import-library__source.is-active {
    background: color-mix(in srgb, var(--primary-color) 14%, var(--dark-surface)) !important;
    border-color: color-mix(in srgb, var(--primary-color) 40%, var(--dark-border)) !important;
}

html[data-theme="dark"] #mobile-import-library .mobile-import-library__search.is-timeline-search::before,
html[data-theme="dark"] #mobile-import-library .mobile-import-library__source span:not(.mobile-import-library__platform-badge) {
    color: var(--dark-text) !important;
    -webkit-text-fill-color: var(--dark-text) !important;
}

html[data-theme="dark"] :where(
    .bloc-card,
    .fresh-feed-card,
    .mobile-blocspace-card,
    .mobile-blocspace-overview-card,
    .mobile-blocspace-metric,
    .booking-card,
    .booking-service-card,
    .shop-product-card,
    .stream-card,
    .settingsGroup
) {
    background-color: var(--dark-surface) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
}

html[data-theme="dark"] :where(
    input:not([type="color"]):not([type="range"]):not([type="checkbox"]):not([type="radio"]),
    textarea,
    select
) {
    color-scheme: dark !important;
    background-color: var(--dark-surface) !important;
    color: var(--dark-text) !important;
    -webkit-text-fill-color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
    caret-color: var(--dark-text) !important;
}

html[data-theme="dark"] :where(input, textarea)::placeholder {
    color: var(--dark-muted) !important;
    -webkit-text-fill-color: var(--dark-muted) !important;
    opacity: 1 !important;
}

html[data-theme="dark"] :where(
    #mobile-settings-modal,
    #quick-login-modal .qlm-container,
    #mobile-header-activity-modal,
    #tab-menu-modal,
    .mobile-sheet,
    .action-sheet,
    .drawer-panel,
    [role="dialog"]
) {
    color-scheme: dark !important;
    background-color: var(--dark-surface) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
}

html[data-theme="dark"] :where(
    .settingsHint,
    .settingsSub,
    .mobile-blocspace-subtitle,
    .mobile-blocspace-meta,
    .muted,
    small
) {
    color: var(--dark-muted) !important;
    -webkit-text-fill-color: var(--dark-muted) !important;
}

html[data-theme="dark"] :where(.skeleton, [class*="skeleton"], [class*="loading-placeholder"]) {
    background-color: var(--dark-surface-raised) !important;
}

html[data-theme="dark"] body.community-active #arena-grid {
    background: var(--dark-canvas) !important;
    background-color: var(--dark-canvas) !important;
}

html[data-theme="dark"] body.community-active #arena-grid .mobile-community-card {
    background: var(--dark-surface) !important;
    background-color: var(--dark-surface) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
    box-shadow: none !important;
}

html[data-theme="dark"] body.community-active #arena-grid .mobile-community-message {
    background: var(--dark-surface-raised) !important;
    background-color: var(--dark-surface-raised) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
}

html[data-theme="dark"] body.community-active #arena-grid .mobile-community-card .mobile-community-message p,
html[data-theme="dark"] body.community-active #arena-grid .mobile-community-card.mobile-community-card p {
    color: var(--dark-text) !important;
    -webkit-text-fill-color: var(--dark-text) !important;
}

html[data-theme="dark"] body.community-active #arena-grid .mobile-community-rebyte-meta,
html[data-theme="dark"] body.community-active #arena-grid .mobile-community-card-meta-wrap,
html[data-theme="dark"] body.community-active #arena-grid .mobile-community-room-source,
html[data-theme="dark"] body.community-active #arena-grid .mobile-community-room-source *,
html[data-theme="dark"] body.community-active #arena-grid .mobile-community-meta-row {
    color: var(--dark-muted) !important;
    -webkit-text-fill-color: var(--dark-muted) !important;
    border-color: var(--dark-border) !important;
}

html[data-theme="dark"] body.community-active #arena-grid .profile-avatar,
html[data-theme="dark"] body.community-active #arena-grid .community-feed-action {
    background: var(--dark-surface-raised) !important;
    background-color: var(--dark-surface-raised) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
}