/* Online legacy-template adapter. Theme tokens live in urcaea-ui.css. */
.app-body-online {
  font-family: var(--font) !important;
  color: var(--app-text) !important;
  background: var(--app-bg) !important;
}

.app-body-online :where(
  .login-page-container,
  .changeinfo-page-container,
  .faq-page-wrapper,
  .chart-container,
  .banner-container,
  .store-container,
  .userptt-container,
  .char-container,
  .leaderboard-container,
  .song-table-container,
  .unlock-progress-container,
  .redeem-container,
  .batch-rating-container
) {
  color: var(--app-text) !important;
  background: transparent !important;
  font-family: var(--font) !important;
}

.app-body-online :where(
  .section-card,
  .login-card,
  .changeinfo-form-card,
  .faq-list-container,
  .faq-item,
  .rating-section,
  .chart-item,
  .banner-card,
  .current-banner,
  .banner-item,
  .monthly-banner-section,
  .monthly-banner-item,
  .redeem-banner-card,
  .store-card,
  .form-card,
  .table-section,
  .song-card,
  .course-list,
  .course-btn,
  .char-basic,
  .char-skill,
  .skill-item,
  .userptt-main-card,
  .userptt-background-selection,
  .userptt-background-item,
  .userptt-b30-container,
  .userptt-b30-item,
  .announcement-item,
  .sign-section,
  .user-assets,
  .resource-item,
  .asset-item,
  .summary-item,
  .condition-container,
  .sub-condition-container,
  .result-modal,
  .guarantee-panel,
  .friend-card,
  .data-card,
  .rank-card,
  .info-card,
  .boost-ticket-card,
  .inventory-core-card,
  .subscription-plan-card,
  .subscription-benefit-grid,
  .subscription-quota-list,
  .subscription-rule-list,
  .song-panel,
  .rating-panel,
  .song-section-panel,
  .uno-table,
  .uno-player-panel,
  .uno-log-panel,
  .uno-multi-log-panel,
  .uno-room-card,
  .uno-multi-section,
  .uno-color-dialog-panel,
  .chat-container,
  .panel,
  .card
) {
  color: var(--app-text) !important;
  background: var(--app-surface) !important;
  border: 1px solid var(--app-line) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--app-shadow-sm) !important;
  transform: none !important;
}

.app-body-online :where(
  .section-card,
  .login-card,
  .changeinfo-form-card,
  .faq-list-container,
  .rating-section,
  .table-section,
  .store-card,
  .userptt-main-card,
  .unlock-progress-container
) {
  padding: clamp(16px, 2.6vw, 26px) !important;
}

.app-body-online :where(
  h1,
  h2,
  h3,
  h4,
  .page-title,
  .section-title,
  .login-title,
  .changeinfo-title,
  .faq-title,
  .userptt-title,
  .board-title,
  .group-title,
  .banner-section-title,
  .monthly-banner-title,
  .char-group-title,
  .rating-title,
  .song-title,
  .course-title
) {
  color: var(--app-text) !important;
  font-family: var(--font) !important;
  text-shadow: none !important;
  border-color: var(--app-line) !important;
}

.app-body-online :where(
  button,
  input[type="submit"],
  input[type="button"],
  .submit-btn,
  .btn,
  .button,
  .back-btn,
  .action-btn,
  .tab-button,
  .faq-question-btn,
  .search-btn,
  .login-submit-btn,
  .changeinfo-submit-btn,
  .userptt-function-btn,
  .userptt-download-btn,
  .monthly-buy-btn,
  .reset-banner-btn,
  .single-draw-btn,
  .ten-draw-btn,
  .again-btn,
  .makeup-btn,
  .debug-btn,
  .draw-btn,
  .store-buy-btn,
  .character-buy-btn,
  .memoir-buy-btn,
  .subscription-buy-btn,
  .boost-use-btn,
  .song-filter-btn,
  .uno-action-btn,
  .uno-primary-btn,
  .uno-secondary-btn,
  .uno-pass-btn,
  .uno-topbar-btn,
  .uno-tutorial-btn,
  .draw-btns button,
  .modal-btn-group button
) {
  min-height: 38px !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
  font-family: var(--font) !important;
  text-shadow: none !important;
  transform: none !important;
}

.app-body-online .home-filters .filter-chip {
  min-height: 38px !important;
  padding: 8px 13px !important;
}

.app-body-online :where(input, select, textarea, .login-input, .changeinfo-input, .search-input, .redeem-input) {
  color: var(--app-text) !important;
  background: var(--app-surface) !important;
  border: 1px solid var(--app-line-strong) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
  font-family: var(--font) !important;
}

.app-body-online :where(input, select, textarea, .login-input, .changeinfo-input, .search-input, .redeem-input):focus {
  border-color: var(--app-primary) !important;
  outline: 2px solid color-mix(in srgb, var(--app-primary) 28%, transparent) !important;
}

.app-body-online :where(label, .login-label, .changeinfo-label, .resource-label, .asset-label, .current-info, .hint, .tip-content, .faq-answer-text, .announcement-content, .empty-tip, .no-data) {
  color: var(--app-muted) !important;
  font-family: var(--font) !important;
}

.app-body-online :where(.card-tag, .rating-tag, .rank-badge, .boost-ticket-chip, .lottery-result-chip, .memoir-pack-tag, .price-discount-badge, .product-status, .subscription-product-status, .subscription-status-pill, .uno-status-chip, .multi-slot-tag, .multi-slot-status) {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  color: var(--app-primary) !important;
  background: var(--app-primary-soft) !important;
  border: 1px solid color-mix(in srgb, var(--app-primary) 38%, var(--app-line)) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}

.app-body-online :where(.highlight, .rating-value, .b30-rating, .course-ptt, .resource-value, .asset-value, .result-value, .userptt-value, .points-cost, .owned, .success, .completed, .passed) {
  color: var(--app-primary) !important;
}

.app-body-online :where(.error, .flash-error, .code-error, .unowned-banner, .status-unowned, .unplayed) {
  color: var(--app-danger) !important;
}

.app-body-online :where(.flash, .flash-message, .app-flash, .alert, .message, .changeinfo-hint-box, .login-form-footer, .register-tip, .redeem-status) {
  color: var(--app-text) !important;
  background: var(--app-primary-soft) !important;
  border: 1px solid var(--app-line) !important;
  border-left: 3px solid var(--app-primary) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
}

.app-body-online :where(table, .leaderboard-table, .rank-table, .song-table, .char-level-table) {
  width: 100% !important;
  color: var(--app-text) !important;
  background: var(--app-surface) !important;
  border: 1px solid var(--app-line) !important;
  border-collapse: collapse !important;
  border-radius: var(--radius) !important;
  overflow: hidden !important;
  font-family: var(--font) !important;
}

.app-body-online :where(th) {
  color: var(--app-muted) !important;
  background: var(--app-surface-soft) !important;
  border-bottom: 1px solid var(--app-line) !important;
}

.app-body-online :where(td) {
  color: var(--app-text) !important;
  border-bottom: 1px solid var(--app-line) !important;
}

.app-body-online :where(tr:hover td, .table-row:hover td) {
  background: var(--app-primary-soft) !important;
}

.app-body-online :where(.home-hero, .home-toolbar, .payment-confirm-dialog) {
  color: var(--app-text) !important;
  background: var(--app-surface) !important;
  border: 1px solid var(--app-line) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--app-shadow-sm) !important;
}

.app-body-online :where(.home-card) {
  color: var(--app-text) !important;
  background: var(--app-surface) !important;
  border: 1px solid var(--app-line) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--app-shadow-sm) !important;
  text-decoration: none !important;
}

.app-body-online :where(.home-card:hover, .course-btn:hover, .course-btn.active) {
  color: var(--app-primary) !important;
  background: var(--app-primary-soft) !important;
  border-color: var(--app-primary) !important;
}

.app-body-online :where(.modal, .payment-confirm-modal) {
  background: rgba(15, 23, 42, 0.42) !important;
  backdrop-filter: blur(8px);
}

.app-body-online :where(.banner-item-img, .char-card-icon, .char-icon-container img, .song-card img) {
  border-radius: var(--radius) !important;
  border: 1px solid var(--app-line) !important;
  background: var(--app-surface-soft) !important;
}

.app-body-online :where(.progress-bar, .progress-track, .horizon-progress-section, .vertical-progress, .guarantee-progress, .welcome-progress) {
  background: var(--app-surface-soft) !important;
  border-color: var(--app-line) !important;
}

.app-body-online :where(.progress-fill, .progress-value, .progress-current) {
  background: var(--app-primary) !important;
}

/* Targeted cleanup for older inline-styled online pages. */
.app-body-online :where(
  .faq-page-wrapper,
  .faq-page-container,
  .changeinfo-page-container,
  .userptt-page-container,
  .transfer-page-container,
  .song-table-container,
  .unlock-progress-container
) {
  color: var(--app-text) !important;
  background: transparent !important;
}

.app-body-online :where(
  .faq-list-container,
  .faq-item,
  .friend-cards,
  .friend-card,
  .userptt-b30-container,
  .userptt-b30-item,
  .b30-item,
  .song-panel,
  .song-section-panel,
  .song-search,
  .song-filter-panel,
  .unlock-progress-card,
  .progress-section,
  .horizon-progress-section,
  .world-progress-panel
) {
  color: var(--app-text) !important;
  background: var(--app-surface) !important;
  border: 1px solid var(--app-line) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--app-shadow-sm) !important;
  text-shadow: none !important;
}

.app-body-online :where(.friend-cards, .song-filter-panel) {
  background: var(--app-surface-soft) !important;
}

.app-body-online :where(.friend-card:hover, .friend-card.selected) {
  color: var(--app-primary) !important;
  background: var(--app-primary-soft) !important;
  border-color: var(--app-primary) !important;
  box-shadow: none !important;
  transform: none !important;
}

.app-body-online :where(
  .friend-selection-label,
  .friend-card .user-name,
  .b30-song,
  .b30-score,
  .b30-rating,
  .detail-exact,
  .detail-near,
  .faq-question-text,
  .song-count,
  .song-table td,
  .song-table th,
  .unlock-progress-title,
  .progress-label,
  .progress-count
) {
  color: var(--app-text) !important;
  text-shadow: none !important;
}

.app-body-online :where(.b30-song, .b30-rating, .detail-exact, .detail-near, .song-count, .progress-current) {
  color: var(--app-primary) !important;
}

.app-body-online :where(
  .no-friends,
  .score-detail,
  .faq-answer-text,
  .song-meta,
  .song-detail,
  .song-artist,
  .song-empty,
  .unlock-progress-desc
) {
  color: var(--app-muted) !important;
}

.app-body-online :where(.char-icon, .friend-card .char-icon, .song-jacket, .song-cover) {
  background: var(--app-surface-soft) !important;
  border: 1px solid var(--app-line) !important;
  border-radius: var(--radius) !important;
}

.app-body-online :where(.faq-divider-line, .song-header, .song-header::after) {
  border-color: var(--app-line) !important;
  background: var(--app-line) !important;
  box-shadow: none !important;
}

.app-body-online .song-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.app-body-online .song-guide-link {
  padding: 6px 12px;
  border: 1px solid var(--app-primary);
  border-radius: 999px;
  color: var(--app-primary) !important;
  background: var(--app-primary-soft);
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.app-body-online :where(.song-search input, .song-search-clear) {
  color: var(--app-text) !important;
  background: var(--app-surface) !important;
  border-color: var(--app-line-strong) !important;
}

.app-body-online :where(.song-filter-btn, .difficulty-chip, .world-chip) {
  color: var(--app-muted) !important;
  background: var(--app-surface-soft) !important;
  border: 1px solid var(--app-line) !important;
  border-radius: var(--radius) !important;
}

.app-body-online :where(.song-filter-btn:hover, .song-filter-btn.active, .difficulty-chip.active, .world-chip.active) {
  color: var(--app-primary) !important;
  background: var(--app-primary-soft) !important;
  border-color: var(--app-primary) !important;
}

/* Complete day/night normalization for legacy Online modules. */
.app-body-online :where(
  .user-resource,
  .redeem-section,
  .redeem-controls,
  .redeem-banner-img-container,
  .result-content,
  .result-summary,
  .faq-answer-content,
  .userptt-info-item,
  .userptt-value-display,
  .userptt-generate-result,
  .userptt-b30-header,
  .b30-item,
  .empty-records,
  .empty-state,
  .empty-list,
  .tab-content,
  .rating-summary,
  .last-play-info,
  .external-link-dialog
) {
  color: var(--app-text) !important;
  background: var(--app-surface) !important;
  border-color: var(--app-line) !important;
  box-shadow: var(--app-shadow-sm) !important;
  text-shadow: none !important;
}

.app-body-online :where(
  .friend-cards,
  .result-summary,
  .last-play-info,
  .empty-records,
  .empty-state,
  .empty-list,
  .redeem-banner-img-container
) {
  background: var(--app-surface-soft) !important;
}

.app-body-online :where(
  .current-banner p,
  .summary-item,
  .chart-name,
  .records-title,
  .faq-answer-text,
  .faq-answer-text strong,
  .userptt-info-item,
  .userptt-background-name,
  .userptt-b30-song,
  .userptt-b30-score,
  .group-title,
  .rank-default,
  .condition-text,
  .condition-checkbox,
  .song-title,
  .course-btn:hover:not(.active)
) {
  color: var(--app-text) !important;
  text-shadow: none !important;
}

.app-body-online :where(
  .empty-banner-state,
  .empty-banner-state p,
  .song-name,
  .getway,
  .redeem-target,
  .redeem-label,
  .monthly-banner-name,
  .loading,
  .result-tip,
  .userptt-value-label,
  .userptt-background-header,
  .userptt-result-tip,
  .userptt-b30-header,
  .userptt-detail-miss,
  .no-course,
  .last-num,
  .connector,
  .checkbox-unchecked,
  .sub-condition,
  .extradimensional-progress,
  .unlock-description,
  .horizon-label,
  .number-default,
  .text-unknown,
  .selected-hint
) {
  color: var(--app-muted) !important;
  text-shadow: none !important;
}

.app-body-online :where(
  .login-submit-btn,
  .changeinfo-submit-btn,
  .search-btn,
  .submit-btn,
  .btn,
  .userptt-function-btn,
  .userptt-download-btn,
  .monthly-buy-btn,
  .again-btn,
  .store-buy-btn,
  .character-buy-btn,
  .memoir-buy-btn,
  .subscription-buy-btn,
  .boost-use-btn,
  .external-link-actions [data-open]
) {
  color: var(--app-on-primary) !important;
  background: var(--app-primary) !important;
  border-color: var(--app-primary) !important;
  text-shadow: none !important;
}

.app-body-online :where(
  .login-submit-btn,
  .changeinfo-submit-btn,
  .search-btn,
  .submit-btn,
  .btn,
  .userptt-function-btn,
  .userptt-download-btn,
  .monthly-buy-btn,
  .again-btn,
  .store-buy-btn,
  .character-buy-btn,
  .memoir-buy-btn,
  .subscription-buy-btn,
  .boost-use-btn,
  .external-link-actions [data-open]
):hover:not(:disabled) {
  color: var(--app-on-primary) !important;
  background: var(--app-primary-hover) !important;
  border-color: var(--app-primary-hover) !important;
  box-shadow: none !important;
}

.app-body-online :where(
  .reset-banner-btn,
  .faq-question-btn,
  .course-btn,
  .modal-btn,
  .external-link-actions [data-close],
  .song-search-clear
) {
  color: var(--app-text) !important;
  background: var(--app-surface-soft) !important;
  border: 1px solid var(--app-line) !important;
  text-shadow: none !important;
}

.app-body-online :where(
  .reset-banner-btn,
  .faq-question-btn,
  .course-btn,
  .modal-btn,
  .external-link-actions [data-close],
  .song-search-clear
):hover:not(:disabled),
.app-body-online :where(.faq-question-btn.active, .course-btn.active) {
  color: var(--app-primary) !important;
  background: var(--app-primary-soft) !important;
  border-color: var(--app-primary) !important;
  box-shadow: none !important;
}

.app-body-online :where(.close-btn) {
  color: var(--app-danger) !important;
  background: color-mix(in srgb, var(--app-danger) 12%, var(--app-surface)) !important;
  border-color: color-mix(in srgb, var(--app-danger) 42%, var(--app-line)) !important;
}

.app-body-online :where(.modal, .payment-confirm-modal, .external-link-modal, .uno-overlay) {
  background: var(--app-overlay) !important;
}

.app-body-online :where(.faq-answer-text code) {
  color: var(--app-primary) !important;
  background: var(--app-primary-soft) !important;
  border-color: var(--app-line) !important;
}

.app-body-online :where(.feedback.success, .flash-success, .redeem-status.success) {
  color: var(--app-success) !important;
  background: color-mix(in srgb, var(--app-success) 12%, var(--app-surface)) !important;
  border-color: color-mix(in srgb, var(--app-success) 36%, var(--app-line)) !important;
}

.app-body-online :where(.feedback.error, .flash-error, .code-error) {
  color: var(--app-danger) !important;
  background: color-mix(in srgb, var(--app-danger) 11%, var(--app-surface)) !important;
  border-color: color-mix(in srgb, var(--app-danger) 36%, var(--app-line)) !important;
}

/* UNO keeps card colors, while all surrounding chrome follows the site theme. */
.app-body-online :where(
  .uno-topbar,
  .uno-table,
  .uno-player-panel,
  .uno-rival-slot,
  .uno-status-chip,
  .uno-status-line,
  .uno-log-drawer,
  .uno-log-entry,
  .uno-room-select,
  .uno-room-card,
  .uno-balance,
  .uno-room-banner,
  .uno-house-rules,
  .uno-room-rules,
  .uno-multi-section,
  .uno-multi-divider span,
  .uno-multi-input,
  .multi-slot,
  .uno-overlay-card,
  .uno-color-dialog-panel,
  .uno-tutorial-hint
) {
  color: var(--app-text) !important;
  background: var(--app-surface) !important;
  border-color: var(--app-line) !important;
  box-shadow: var(--app-shadow-sm) !important;
}

.app-body-online :where(
  .uno-rival-slot,
  .uno-status-chip,
  .uno-status-line,
  .uno-log-drawer,
  .uno-log-entry,
  .uno-balance,
  .uno-room-banner,
  .uno-house-rules,
  .uno-room-rules,
  .uno-multi-divider span,
  .multi-slot
) {
  background: var(--app-surface-soft) !important;
  box-shadow: none !important;
}

.app-body-online :where(
  .uno-title,
  .uno-rival-name,
  .uno-player-meta strong,
  .uno-rival-count strong,
  .uno-status-chip strong,
  .uno-room-heading,
  .uno-room-card h3,
  .uno-room-banner span:first-child,
  .multi-slot-name,
  .uno-overlay-card h2,
  .uno-overlay-card p
) {
  color: var(--app-text) !important;
}

.app-body-online :where(
  .uno-kicker,
  .uno-panel-kicker,
  .uno-rival-state,
  .uno-hand-count,
  .uno-active-rules,
  .uno-rival-count span,
  .uno-log-drawer summary,
  .uno-room-subtitle,
  .uno-room-fee,
  .uno-room-desc,
  .uno-result-ticket,
  .uno-hr-heading,
  .uno-rule-toggle,
  .multi-slot-status,
  .uno-log-panel .uno-log-entry,
  .uno-multi-log-panel .uno-log-entry
) {
  color: var(--app-muted) !important;
}

.app-body-online :where(
  .uno-topbar-btn,
  .uno-secondary-btn,
  .uno-color-cancel,
  .uno-tutorial-btn
) {
  color: var(--app-text) !important;
  background: var(--app-surface-soft) !important;
  border-color: var(--app-line) !important;
}

.app-body-online :where(
  .uno-topbar-btn,
  .uno-secondary-btn,
  .uno-color-cancel,
  .uno-tutorial-btn
):hover:not(:disabled) {
  color: var(--app-primary) !important;
  background: var(--app-primary-soft) !important;
  border-color: var(--app-primary) !important;
}

/* Rebirth default console theme; achievement visual modes remain untouched. */
body.app-body-online:not([class*="rebirth-visual-"]) :where(
  .rebirth-card,
  .rebirth-topbar-stage,
  .rebirth-command-meta,
  .rebirth-summary-item,
  .rebirth-stage-step,
  .rebirth-panel,
  .rebirth-messages,
  .rebirth-talent-item,
  .rebirth-stat-row,
  .rebirth-selected-card,
  .rebirth-page-nav,
  .rebirth-dock-status-item,
  .rebirth-codex-overview-card,
  .rebirth-codex-group,
  .rebirth-codex-entry,
  .rebirth-codex-overview-tip,
  .rebirth-codex-chip,
  .rebirth-codex-insight-state,
  .rebirth-empty,
  .rebirth-loading
) {
  color: var(--app-text) !important;
  background: var(--app-surface) !important;
  border-color: var(--app-line) !important;
  box-shadow: var(--app-shadow-sm) !important;
}

body.app-body-online:not([class*="rebirth-visual-"]) :where(
  .rebirth-panel,
  .rebirth-messages,
  .rebirth-page-nav,
  .rebirth-dock-status-item,
  .rebirth-stat-row,
  .rebirth-selected-card,
  .rebirth-codex-overview-tip,
  .rebirth-codex-chip,
  .rebirth-codex-insight-state,
  .rebirth-empty,
  .rebirth-loading
) {
  background: var(--app-surface-soft) !important;
  box-shadow: none !important;
}

body.app-body-online:not([class*="rebirth-visual-"]) :where(
  .rebirth-topbar-stage span,
  .rebirth-command-label,
  .rebirth-summary-item span,
  .rebirth-stat-meta span,
  .rebirth-route-status-detail,
  .rebirth-route-status-legend,
  .rebirth-route-progress span,
  .rebirth-route-branch-detail,
  .rebirth-dock-status-item span,
  .rebirth-talent-desc,
  .rebirth-selected-card span,
  .rebirth-synergy-desc,
  .rebirth-synergy-component span,
  .rebirth-codex-state,
  .rebirth-codex-entry-meta,
  .rebirth-codex-hint,
  .rebirth-codex-desc,
  .rebirth-codex-insight-head,
  .rebirth-codex-insight-text
) {
  color: var(--app-muted) !important;
  text-shadow: none !important;
}

body.app-body-online:not([class*="rebirth-visual-"]) :where(
  .rebirth-page-link,
  .rebirth-secondary,
  .rebirth-codex-grid button
) {
  color: var(--app-text) !important;
  background: var(--app-surface-soft) !important;
  border-color: var(--app-line) !important;
}

body.app-body-online:not([class*="rebirth-visual-"]) :where(
  .rebirth-page-link:hover,
  .rebirth-secondary:hover,
  .rebirth-codex-grid button:hover
) {
  color: var(--app-primary) !important;
  background: var(--app-primary-soft) !important;
  border-color: var(--app-primary) !important;
}

body.app-body-online:not([class*="rebirth-visual-"]) :where(
  .rebirth-page-link.is-active,
  .rebirth-primary
) {
  color: var(--app-on-primary) !important;
  background: var(--app-primary) !important;
  border-color: var(--app-primary) !important;
}

body.app-body-online:not([class*="rebirth-visual-"]) :where(
  .rebirth-cheat-input,
  .rebirth-stat-row input[type="number"]
) {
  color: var(--app-text) !important;
  background: var(--app-surface) !important;
  border-color: var(--app-line-strong) !important;
}

body.app-body-online:not([class*="rebirth-visual-"]) :where(
  .rebirth-route-status,
  .rebirth-route-state-item
) {
  color: var(--app-text) !important;
  background: color-mix(in srgb, var(--app-primary) 9%, var(--app-surface)) !important;
  border-color: color-mix(in srgb, var(--app-primary) 28%, var(--app-line)) !important;
}

body.app-body-online:not([class*="rebirth-visual-"]) :where(
  .rebirth-route-status-head strong,
  .rebirth-route-state-item strong,
  .rebirth-route-progress strong,
  .rebirth-route-branch-head,
  .rebirth-route-branch-head strong,
  .rebirth-codex-insight-head strong
) {
  color: var(--app-text) !important;
}

body.app-body-online:not([class*="rebirth-visual-"]) .rebirth-message-card.is-white {
  color: var(--app-text) !important;
  background: var(--app-surface) !important;
  border-color: var(--app-line) !important;
}

body.app-body-online:not([class*="rebirth-visual-"]) .rebirth-message-card.is-green {
  color: var(--app-success) !important;
  background: color-mix(in srgb, var(--app-success) 11%, var(--app-surface)) !important;
}

body.app-body-online:not([class*="rebirth-visual-"]) :where(.rebirth-message-card.is-blue, .rebirth-message-card.is-purple) {
  color: var(--app-primary) !important;
  background: color-mix(in srgb, var(--app-primary) 11%, var(--app-surface)) !important;
}

body.app-body-online:not([class*="rebirth-visual-"]) .rebirth-message-card.is-red {
  color: var(--app-danger) !important;
  background: color-mix(in srgb, var(--app-danger) 11%, var(--app-surface)) !important;
}

body.app-body-online:not([class*="rebirth-visual-"]) .rebirth-message-card.is-gold {
  color: var(--app-warning) !important;
  background: color-mix(in srgb, var(--app-warning) 12%, var(--app-surface)) !important;
}