/* Portal theme system
   `purple` is the product default. `light` is an explicit per-device choice. */

:root[data-theme="purple"] {
  color-scheme: dark;
  --theme-page: #09050f;
  --theme-surface: #181020;
  --theme-surface-raised: #21142a;
  --theme-surface-soft: #2a1735;
  --theme-text: #f8f3fa;
  --theme-muted: #b9aabd;
  --theme-border: rgba(202, 145, 226, .22);
  --theme-accent: #8534da;
  --theme-accent-strong: #a53de4;
  --theme-focus: #d281f2;
  --theme-header: rgba(12, 6, 17, .94);
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f0f6;
  --header: #ffffff;
  --panel: #ffffff;
  --panel-strong: #f8f3fa;
  --purple: #6f2dbd;
  --purple-light: #8538c8;
  --purple-hot: #922ecb;
  --yellow: #a76b00;
  --text: #241a28;
  --muted: #6f6274;
  --line: rgba(111, 45, 189, .16);
  --green: #18734a;
  --danger: #c52947;
  --theme-page: #f4f0f6;
  --theme-surface: #ffffff;
  --theme-surface-raised: #ffffff;
  --theme-surface-soft: #f7f1f9;
  --theme-text: #241a28;
  --theme-muted: #716475;
  --theme-border: rgba(111, 45, 189, .16);
  --theme-accent: #6f2dbd;
  --theme-accent-strong: #8538c8;
  --theme-focus: #6f2dbd;
  --theme-header: rgba(255, 255, 255, .94);
}

:root[data-theme] body,
:root[data-theme] button,
:root[data-theme] input,
:root[data-theme] textarea {
  accent-color: var(--theme-accent);
}

:root[data-theme] ::selection {
  color: #fff;
  background: var(--theme-accent);
}

:root[data-theme] :where(button, a, input, textarea, summary):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--theme-focus) 46%, transparent);
  outline-offset: 2px;
}

/* Compact selector used in Profile. */
.portalThemePicker {
  display: grid;
  gap: 7px;
  border-top: 1px solid var(--theme-border);
  margin-top: 1px;
  padding-top: 8px;
}

.portalThemePicker > span {
  color: var(--theme-muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.portalThemeChoices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.portalAccountMenu .portalThemeChoices [data-portal-theme],
.portalThemeChoices [data-portal-theme] {
  min-width: 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--theme-border);
  border-radius: 9px;
  padding: 7px 8px;
  color: var(--theme-muted);
  background: var(--theme-surface-soft);
  text-align: center;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.15;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.portalThemeChoices [data-portal-theme]::before {
  content: "";
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 50%;
  background: #160b1d;
  box-shadow: inset 0 0 0 3px #3f1d50;
}

.portalThemeChoices [data-portal-theme="light"]::before {
  border-color: rgba(52, 30, 60, .22);
  background: #fff;
  box-shadow: inset 0 0 0 3px #eee6f1;
}

.portalAccountMenu .portalThemeChoices [data-portal-theme][aria-pressed="true"],
.portalThemeChoices [data-portal-theme][aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--theme-accent) 48%, transparent);
  color: var(--theme-text);
  background: color-mix(in srgb, var(--theme-accent) 11%, var(--theme-surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--theme-accent) 12%, transparent);
}

/* Dark support follows the portal instead of jumping to a white surface. */
:root[data-theme="purple"] .supportDrawer {
  border-color: var(--theme-border);
  color: var(--theme-text);
  background: var(--theme-surface);
  box-shadow: -24px 0 70px rgba(0, 0, 0, .55);
}

:root[data-theme="purple"] .supportDrawer > header {
  border-color: var(--theme-border);
  background: #130a19;
}

:root[data-theme="purple"] .supportDrawer header strong,
:root[data-theme="purple"] .chatWelcome h2,
:root[data-theme="purple"] .chatWelcome label {
  color: var(--theme-text);
}

:root[data-theme="purple"] .supportDrawer header small,
:root[data-theme="purple"] .chatWelcome > p,
:root[data-theme="purple"] .typingNotice {
  color: var(--theme-muted);
}

:root[data-theme="purple"] .supportHeaderActions > button,
:root[data-theme="purple"] .supportAttachmentPreview > button {
  color: #d8c9dd;
  background: #291934;
}

:root[data-theme="purple"] .chatWelcome input,
:root[data-theme="purple"] .chatComposer textarea {
  border-color: var(--theme-border);
  color: var(--theme-text);
  background: #0d0711;
}

:root[data-theme="purple"] .chatConversation {
  background: linear-gradient(180deg, #130b18, #0d0711);
}

:root[data-theme="purple"] .message {
  border-color: var(--theme-border);
  color: #eee6f1;
  background: #24162d;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .16);
}

:root[data-theme="purple"] .message strong { color: #d8a6ed; }
:root[data-theme="purple"] .message footer { color: #a99aaf; }
:root[data-theme="purple"] .message.system { color: var(--theme-muted); background: transparent; }

:root[data-theme="purple"] .chatComposer,
:root[data-theme="purple"] .supportAttachmentPreview {
  border-color: var(--theme-border);
  color: var(--theme-text);
  background: #130a19;
}

:root[data-theme="purple"] .supportAttachmentPreview small { color: var(--theme-muted); }

:root[data-theme="purple"] .chatComposer .composerTool {
  border-color: var(--theme-border);
  color: #d8c8df;
  background: #291934;
}

:root[data-theme="purple"] .chatComposer .composerTool:hover,
:root[data-theme="purple"] .chatComposer .composerTool[aria-expanded="true"] {
  border-color: #9953bc;
  color: #efc7ff;
  background: #352040;
}

:root[data-theme="purple"] .supportEmojiPicker,
:root[data-theme="purple"] .supportAttachmentMenu {
  border-color: var(--theme-border);
  color: var(--theme-text);
  background: #211429;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .38);
}

:root[data-theme="purple"] .supportEmojiPicker > strong,
:root[data-theme="purple"] .supportAttachmentMenu > strong { color: #c7b5ce; }
:root[data-theme="purple"] .supportEmojiRecent { border-color: var(--theme-border); }
:root[data-theme="purple"] .supportEmojiPicker button:hover { background: #382144; }

:root[data-theme="purple"] .supportAttachmentMenu > button {
  border-color: var(--theme-border);
  color: var(--theme-text);
  background: #2b1a35;
}

:root[data-theme="purple"] .supportAttachmentMenu > button:hover {
  border-color: #9250ad;
  background: #382144;
}

:root[data-theme="purple"] .supportAttachmentMenu > button small { color: #b4a5b9; }

/* Light theme — shell, header and navigation. */
:root[data-theme="light"] body {
  color: var(--theme-text);
  background:
    radial-gradient(circle at 50% -170px, rgba(111, 45, 189, .11), transparent 410px),
    linear-gradient(180deg, #faf8fb 0, #f4f0f6 62%, #eee8f1 100%);
}

:root[data-theme="light"] .platformHeader {
  border-bottom-color: rgba(111, 45, 189, .14);
  background: var(--theme-header);
  box-shadow: 0 5px 24px rgba(45, 25, 52, .06);
}

:root[data-theme="light"] .desktopNav a,
:root[data-theme="light"] .desktopNav button { color: #716475; }

:root[data-theme="light"] .desktopNav a:hover,
:root[data-theme="light"] .desktopNav button:hover,
:root[data-theme="light"] .desktopNav .active { color: #4f1f70; }

:root[data-theme="light"] .installButton {
  border-color: rgba(111, 45, 189, .25);
  color: #5f4d68;
  background: #fff;
}

:root[data-theme="light"] .accessButton {
  border-color: #6f2dbd;
  color: #fff;
  background: linear-gradient(100deg, #6430b2, #8f3aca);
}

:root[data-theme="light"] .portalAccount > button {
  border-color: rgba(111, 45, 189, .18);
  color: #332638;
  background: #fff;
  box-shadow: 0 5px 16px rgba(46, 28, 54, .07);
}

:root[data-theme="light"] .portalAccount > button i { color: #786a7d; }
:root[data-theme="light"] .portalAccount > button em { color: #8e5900; }

:root[data-theme="light"] .portalNotificationToggle {
  border-color: rgba(111, 45, 189, .18);
  color: #4e3b57;
  background: #fff;
  box-shadow: 0 5px 16px rgba(46, 28, 54, .07);
}

:root[data-theme="light"] .portalNotificationToggle:hover,
:root[data-theme="light"] .portalNotificationToggle[aria-expanded="true"] {
  border-color: rgba(111, 45, 189, .45);
  color: #6f2dbd;
  background: #f4eaf8;
}

:root[data-theme="light"] .portalNotificationToggle > span,
:root[data-theme="light"] .supportUnreadBadge { border-color: #fff; }

:root[data-theme="light"] .mobileNav {
  border-top-color: rgba(111, 45, 189, .15);
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 -7px 24px rgba(48, 28, 55, .08);
}

:root[data-theme="light"] .mobileNav a,
:root[data-theme="light"] .mobileNav button { color: #746879; }
:root[data-theme="light"] .mobileNav .active { color: #55237c; }
:root[data-theme="light"] .mobileNav [data-open-support].hasSupportUnread { color: #4d1e71; }

:root[data-theme="light"] .siteFooter {
  border-color: rgba(111, 45, 189, .13);
  background: #eee8f1;
}

:root[data-theme="light"] .siteFooter p { color: #6d6172; }

/* Light theme — home and promotional surfaces. */
:root[data-theme="light"] .heroPlatform {
  border-color: rgba(111, 45, 189, .18);
  background:
    linear-gradient(100deg, rgba(255,255,255,.98) 4%, rgba(250,246,252,.94) 52%, rgba(236,220,246,.68) 100%),
    repeating-linear-gradient(120deg, transparent 0 42px, rgba(111,45,189,.035) 43px 44px),
    #fff;
  box-shadow: inset 0 -3px 0 rgba(183, 123, 0, .58), 0 20px 48px rgba(47, 27, 55, .1);
}

:root[data-theme="light"] .heroPlatform::before { color: rgba(111, 45, 189, .08); text-shadow: none; }
:root[data-theme="light"] .heroGlowOne { background: rgba(111, 45, 189, .14); }
:root[data-theme="light"] .heroGlowTwo { background: rgba(220, 159, 34, .1); }
:root[data-theme="light"] .eyebrow { color: #715d79; }
:root[data-theme="light"] .heroPlatform p { color: #625668; }

:root[data-theme="light"] .heroBalance,
:root[data-theme="light"] .homePendingRequest,
:root[data-theme="light"] .homeBonusOffer {
  color: #2b1f30;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 8px 24px rgba(50, 28, 58, .07);
}

:root[data-theme="light"] .heroBalance span,
:root[data-theme="light"] .heroBalance small,
:root[data-theme="light"] .homePendingRequest small,
:root[data-theme="light"] .homeBonusOffer small { color: #706374; }
:root[data-theme="light"] .heroBalance strong { color: #25192a; }
:root[data-theme="light"] .homePendingRequest b,
:root[data-theme="light"] .homeBonusOffer b { color: #652c87; }

:root[data-theme="light"] .notificationOnboarding {
  border-color: rgba(24, 115, 74, .24);
  background: linear-gradient(105deg, #eef9f3, #faf6fc);
  box-shadow: 0 8px 24px rgba(42, 71, 55, .06);
}

:root[data-theme="light"] .notificationOnboarding strong { color: #25332b; }
:root[data-theme="light"] .notificationOnboarding p { color: #5e6c63; }
:root[data-theme="light"] .notificationOnboarding small { color: #196c48; }
:root[data-theme="light"] .notificationOnboarding[data-permission="denied"] {
  border-color: rgba(197, 41, 71, .25);
  background: #fff1f3;
}
:root[data-theme="light"] .notificationOnboarding[data-permission="denied"] small { color: #b5213d; }

:root[data-theme="light"] .quickCard,
:root[data-theme="light"] .announcement {
  border-color: rgba(111, 45, 189, .14);
  color: #2b2030;
  background: linear-gradient(115deg, #fff, #f7f1fa);
  box-shadow: 0 8px 24px rgba(50, 28, 58, .06);
}

:root[data-theme="light"] .quickCard:hover {
  border-color: rgba(111, 45, 189, .4);
  background: linear-gradient(115deg, #fff, #f1e5f7);
}
:root[data-theme="light"] .quickCard small,
:root[data-theme="light"] .announcement p { color: #6f6274; }
:root[data-theme="light"] .quickCard > b { color: #fff; background: #6f2dbd; }
:root[data-theme="light"] .supportStrip { border-color: rgba(111, 45, 189, .14); }
:root[data-theme="light"] .liveBadge { color: #5e5263; }
:root[data-theme="light"] .supportStrip button { color: #4b3556; }

/* Light palette for Interfaz Híbrido Tokyo. Casino and featured artwork stay dark
   so promotional imagery keeps its intended contrast. */
:root[data-theme="light"] {
  --hybrid-bg: #f4f0f6;
  --hybrid-surface: #ffffff;
  --hybrid-surface-2: #f8f3fa;
  --hybrid-surface-3: #eee4f3;
  --hybrid-line: rgba(111, 45, 189, .15);
  --hybrid-line-strong: rgba(111, 45, 189, .27);
  --hybrid-text: #281d2d;
  --hybrid-muted: #6d6072;
  --hybrid-muted-2: #7c6e81;
  --hybrid-primary: #6f2dbd;
  --hybrid-primary-2: #913bca;
  --hybrid-accent: #986000;
  --hybrid-success: #18734a;
  --hybrid-shadow: 0 16px 42px rgba(45, 25, 52, .1);
}

:root[data-theme="light"] .hybridWelcome .eyebrow { color: #754091; }

:root[data-theme="light"] .heroBalance,
:root[data-theme="light"] .hybridRequestSection,
:root[data-theme="light"] .hybridShowcase,
:root[data-theme="light"] .hybridSupportCard {
  border-color: var(--hybrid-line);
  color: var(--hybrid-text);
  box-shadow: var(--hybrid-shadow);
}

:root[data-theme="light"] .heroBalance {
  background:
    radial-gradient(circle at 102% -8%, rgba(111, 45, 189, .12), transparent 43%),
    linear-gradient(145deg, #ffffff, #f5eef8);
}

:root[data-theme="light"] .heroBalance::after {
  border-color: rgba(111, 45, 189, .08);
}

:root[data-theme="light"] .hybridActionButton.secondary {
  border-color: rgba(111, 45, 189, .17);
  color: #4c3558;
  background: #f1e7f5;
}

:root[data-theme="light"] .hybridRequestSection,
:root[data-theme="light"] .hybridShowcase,
:root[data-theme="light"] .hybridSupportCard { background: #fff; }

:root[data-theme="light"] .hybridRequestEmpty {
  border-color: rgba(111, 45, 189, .12);
  background: #f8f3fa;
}

:root[data-theme="light"] .hybridRequestEmptyIcon {
  color: #18734a;
  background: #eaf7f0;
}

:root[data-theme="light"] .hybridRequestSection .homePendingRequest {
  border-color: rgba(157, 101, 0, .22);
  background: linear-gradient(120deg, #fff9eb, #fff);
}

:root[data-theme="light"] .hybridCasinoCard,
:root[data-theme="light"] .hybridFeatureCard {
  color-scheme: dark;
}

:root[data-theme="light"] .heroPlatform .hybridCasinoCopy p {
  color: rgba(255, 255, 255, .82);
}

:root[data-theme="light"] .hybridShowcase {
  box-shadow: 0 12px 34px rgba(45, 25, 52, .08);
}

:root[data-theme="light"] .hybridRailHint i { background: rgba(111, 45, 189, .23); }
:root[data-theme="light"] .hybridRailHint i.active { background: #8538c8; }

:root[data-theme="light"] .hybridSupportCard:hover {
  border-color: rgba(111, 45, 189, .34);
  background: #faf6fb;
}

/* Light theme — profile and in-app notifications. */
:root[data-theme="light"] .portalAccountMenu,
:root[data-theme="light"] .portalNotificationPanel {
  border-color: rgba(111, 45, 189, .16);
  color: #281d2d;
  background: #fff;
  box-shadow: 0 22px 60px rgba(39, 22, 46, .18);
}

:root[data-theme="light"] .portalAccountMenu > small,
:root[data-theme="light"] .portalAccountMenu small { color: #716475; }
:root[data-theme="light"] .portalAccountMenu > button {
  color: #403246;
  background: #f7f2f8;
}
:root[data-theme="light"] .portalAccountMenu > button:hover { background: #eee2f3; }
:root[data-theme="light"] .portalAccountMenu button.danger { color: #b82341; background: #fff1f3; }

:root[data-theme="light"] .accountBalance {
  border-color: rgba(167, 107, 0, .2);
  background: #fffaf0;
}
:root[data-theme="light"] .accountBalance > div span,
:root[data-theme="light"] .accountBalance > small,
:root[data-theme="light"] .accountBalance > time { color: #746679; }
:root[data-theme="light"] .accountBalance > strong { color: #241a28; }
:root[data-theme="light"] .portalAccountMenu .accountBalance button {
  border-color: rgba(154, 99, 0, .22);
  color: #845400;
  background: #fff3d8;
}

:root[data-theme="light"] .portalNotificationPanel > header {
  border-bottom-color: rgba(111, 45, 189, .12);
  background: linear-gradient(135deg, rgba(111, 45, 189, .08), transparent);
}
:root[data-theme="light"] .portalNotificationPanel > header small { color: #7735a1; }
:root[data-theme="light"] .portalNotificationPanel > header button { color: #66347d; }
:root[data-theme="light"] .portalNotificationPanel > header #markAllPortalNotificationsRead {
  border-color: rgba(111, 45, 189, .24);
  color: #5c2a77;
  background: #f3e9f7;
}
:root[data-theme="light"] .portalNotificationPanel > header .closePortalNotifications {
  border-color: rgba(111, 45, 189, .14);
  color: #57445f;
  background: #f6f0f8;
}
:root[data-theme="light"] .portalNotificationItem {
  border-bottom-color: rgba(111, 45, 189, .09);
  color: #2b2030;
}
:root[data-theme="light"] .portalNotificationItem.unread { background: #f7eefb; }
:root[data-theme="light"] .portalNotificationItem:hover { background: #f3edf5; }
:root[data-theme="light"] .portalNotificationItemIcon {
  border-color: rgba(111, 45, 189, .2);
  color: #74349b;
  background: #f1e5f5;
}
:root[data-theme="light"] .portalNotificationItemCopy strong,
:root[data-theme="light"] .portalNotificationItem.read .portalNotificationItemCopy strong { color: #302334; }
:root[data-theme="light"] .portalNotificationItemCopy p { color: #675b6c; }
:root[data-theme="light"] .portalNotificationItemCopy time { color: #817486; }
:root[data-theme="light"] .portalNotificationEmpty { color: #746878; }
:root[data-theme="light"] .portalNotificationEmpty strong { color: #312537; }
:root[data-theme="light"] .portalNotificationPanel > footer { color: #786c7c; background: #f8f4f9; }

/* Light theme — authentication and simple dialogs. */
:root[data-theme="light"] .portalAuthDialog,
:root[data-theme="light"] .simplePortalDialog {
  border-color: rgba(111, 45, 189, .2);
  color: #281d2d;
  background: #fff;
  box-shadow: 0 28px 90px rgba(35, 19, 41, .24);
}

:root[data-theme="light"] .portalAuthDialog::backdrop,
:root[data-theme="light"] .simplePortalDialog::backdrop,
:root[data-theme="light"] .transactionDialog::backdrop { background: rgba(35, 25, 39, .48); }

:root[data-theme="light"] .portalAuthCard {
  background:
    radial-gradient(circle at 100% 0, rgba(111, 45, 189, .09), transparent 240px),
    linear-gradient(155deg, #fff, #f8f3fa 72%);
}
:root[data-theme="light"] .authBrand { border-bottom-color: rgba(111, 45, 189, .12); }
:root[data-theme="light"] .authBrand small,
:root[data-theme="light"] .authHeading > span { color: #713394; }
:root[data-theme="light"] .authHeading p,
:root[data-theme="light"] .recoveryProgress p,
:root[data-theme="light"] .signupCodeHint { color: #6e6173; }
:root[data-theme="light"] .portalAuthCard > label,
:root[data-theme="light"] .signupFields > label { color: #4d3e53; }
:root[data-theme="light"] .portalAuthCard input {
  border-color: rgba(111, 45, 189, .2);
  color: #281d2d;
  background: #fff;
  box-shadow: inset 0 1px 2px rgba(44, 25, 51, .035);
}
:root[data-theme="light"] .portalAuthCard input::placeholder { color: #988c9d; }
:root[data-theme="light"] .profileIdentity,
:root[data-theme="light"] .profilePhone {
  border-color: rgba(111, 45, 189, .16);
  color: #2e2233;
  background: #f8f3fa;
}
:root[data-theme="light"] .profileIdentity > span,
:root[data-theme="light"] .profilePhone > div > span:first-child,
:root[data-theme="light"] .profileFields > label { color: #514356; }
:root[data-theme="light"] .profileFields > label small,
:root[data-theme="light"] .profilePhone > p { color: #76697b; }
:root[data-theme="light"] .profilePhoneStatus { color: #5f5164; background: #ebe3ee; }
:root[data-theme="light"] .profilePhoneStatus[data-status="verified"] { color: #17613f; background: #e5f6ec; }
:root[data-theme="light"] .profilePhoneStatus[data-status="verification_pending"] { color: #76520b; background: #fff2d2; }
:root[data-theme="light"] .profilePhone > button { color: #713394; }
:root[data-theme="light"] .profilePhone > button:hover,
:root[data-theme="light"] .profilePhone > button:focus-visible { color: #4e1f68; }
:root[data-theme="light"] .profileSavedNote { color: #17623f; }
:root[data-theme="light"] .passwordField button {
  color: #653478;
  background: #f2e8f6;
}
:root[data-theme="light"] .authSecondary,
:root[data-theme="light"] .authSupportActions button {
  border-color: rgba(111, 45, 189, .16);
  color: #593669;
  background: #f6eff8;
}
:root[data-theme="light"] .authSupportActions #openGuestSupport {
  border-color: rgba(24, 115, 74, .24);
  color: #17623f;
  background: #eff9f3;
}
:root[data-theme="light"] .authHelp { color: #756878; }
:root[data-theme="light"] .authClose,
:root[data-theme="light"] .dialogClose { color: #5e5063; background: #f1eaf3; }
:root[data-theme="light"] .recoveryProgress {
  border-color: rgba(111, 45, 189, .18);
  background: #f7effa;
}

:root[data-theme="light"] .simplePortalDialog {
  background: linear-gradient(155deg, #fff, #f8f3fa);
}
:root[data-theme="light"] .simplePortalDialog p,
:root[data-theme="light"] .simplePortalDialog > small { color: #6d6072; }
:root[data-theme="light"] .simplePortalDialog ol { color: #3b2e41; }
:root[data-theme="light"] .installGuideSteps > span {
  border-color: rgba(111, 45, 189, .17);
  color: #382a3e;
  background: #f7f0fa;
}
:root[data-theme="light"] .dialogSecondary {
  border-color: rgba(111, 45, 189, .2);
  color: #4b3a52;
  background: #f3ecf5;
}

/* Light theme — deposits, withdrawals and histories. */
:root[data-theme="light"] .transactionDialog {
  border-color: rgba(111, 45, 189, .2);
  color: #2a1f2f;
  background: #fbf9fc;
  box-shadow: 0 30px 90px rgba(35, 19, 41, .25);
}
:root[data-theme="light"] .transactionDialog header {
  border-bottom-color: rgba(111, 45, 189, .14);
  background: linear-gradient(100deg, #f1e7f6, #faf7fb);
}
:root[data-theme="light"] .transactionDialog header button { color: #5e4e64; }
:root[data-theme="light"] #transactionSubtitle { color: #6e6273; }
:root[data-theme="light"] .transactionBody { scrollbar-color: rgba(111,45,189,.48) rgba(111,45,189,.05); }
:root[data-theme="light"] .transactionBody::-webkit-scrollbar-track { background: rgba(111,45,189,.05); }
:root[data-theme="light"] .transactionBody::-webkit-scrollbar-thumb {
  border-color: #f7f2f9;
  background: rgba(111,45,189,.48);
}
:root[data-theme="light"] .transactionBody label,
:root[data-theme="light"] .transactionStepLine { color: #46384c; }
:root[data-theme="light"] .transactionBody label small,
:root[data-theme="light"] .fieldHelp { color: #716475; }
:root[data-theme="light"] .transactionBody input,
:root[data-theme="light"] .transactionBody textarea,
:root[data-theme="light"] .moneyInput {
  border-color: rgba(111, 45, 189, .2);
  color: #271c2c;
  background: #fff;
}
:root[data-theme="light"] .transactionBody input::placeholder,
:root[data-theme="light"] .transactionBody textarea::placeholder { color: #978a9b; }
:root[data-theme="light"] .moneyInput span { color: #8b5900; background: #f2e8f6; }

:root[data-theme="light"] .depositAccountCard {
  border-color: rgba(111, 45, 189, .18);
  background: linear-gradient(145deg, #fff, #f4ecf8);
  box-shadow: inset 0 1px 0 #fff, 0 8px 22px rgba(48, 26, 56, .06);
}
:root[data-theme="light"] .depositAccountHeader > small,
:root[data-theme="light"] .depositAccountCard > small { color: #6e5e75; }
:root[data-theme="light"] .depositAccountFreshness { color: #19714a; }
:root[data-theme="light"] .depositAccountCard > strong,
:root[data-theme="light"] .depositAccountHolder strong { color: #2d2032; }
:root[data-theme="light"] .depositAccountHolder {
  border-color: rgba(111, 45, 189, .14);
  background: rgba(255, 255, 255, .72);
}
:root[data-theme="light"] .depositAccountHolder small { color: #706273; }
:root[data-theme="light"] .depositAccountCard button {
  border-color: rgba(111, 45, 189, .16);
  color: #2e2233;
  background: #fff;
}
:root[data-theme="light"] .depositAccountCard button em { color: #6e2e92; }
:root[data-theme="light"] .depositExactHint {
  border-color: rgba(111, 45, 189, .13);
  border-left-color: rgba(111, 45, 189, .46);
  color: #65586a !important;
  background: #faf6fb;
}
:root[data-theme="light"] .depositExactHint strong { color: #332638; }

:root[data-theme="light"] .withdrawalBalanceCard {
  border-color: rgba(111, 45, 189, .17);
  background: linear-gradient(145deg, #fff, #f4edf7);
}
:root[data-theme="light"] .withdrawalBalanceCard span,
:root[data-theme="light"] .withdrawalBalanceCard small { color: #6d6072; }
:root[data-theme="light"] .withdrawalBalanceCard strong,
:root[data-theme="light"] .withdrawalBalanceValue > strong { color: #2d2132; }

:root[data-theme="light"] .recentSenderSection,
:root[data-theme="light"] .recentWithdrawalSection {
  border-color: rgba(111, 45, 189, .16);
  background: #f8f3fa;
}
:root[data-theme="light"] .recentSenderSection summary,
:root[data-theme="light"] .recentWithdrawalSection summary { color: #46384c; }
:root[data-theme="light"] .recentSenderSuggestions,
:root[data-theme="light"] .recentWithdrawalSuggestions { border-color: rgba(111, 45, 189, .12); }
:root[data-theme="light"] .recentSenderSuggestions button,
:root[data-theme="light"] .recentWithdrawalSuggestions button {
  border-color: rgba(111, 45, 189, .1);
  color: #342839;
  background: #fff;
}
:root[data-theme="light"] .recentSenderSuggestions button:hover,
:root[data-theme="light"] .recentWithdrawalSuggestions button:hover { background: #f3eaf7; }
:root[data-theme="light"] .recentWithdrawalSuggestions small { color: #716475; }

:root[data-theme="light"] .transactionStepTitle > span,
:root[data-theme="light"] .transactionStepLine > span {
  border-color: rgba(111, 45, 189, .25);
  color: #653183;
  background: #f1e4f6;
}
:root[data-theme="light"] .transactionStepTitle > small { color: #685a6e; }
:root[data-theme="light"] .transactionActionBar {
  border-top-color: rgba(111, 45, 189, .15);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,244,250,.99));
  box-shadow: 0 -8px 22px rgba(45, 24, 52, .08);
}

:root[data-theme="light"] .transactionBootstrap {
  border-color: rgba(111, 45, 189, .16);
  background: #f7f1f9;
}
:root[data-theme="light"] .transactionBootstrap strong { color: #302335; }
:root[data-theme="light"] .transactionBootstrap p { color: #6a5d6f; }

:root[data-theme="light"] .activeRequestSection,
:root[data-theme="light"] .activeRequestSection[data-type="deposit"] {
  background: linear-gradient(145deg, rgba(255, 170, 61, .13), #fff9f0);
}
:root[data-theme="light"] .activeRequestSection[data-type="withdrawal"] {
  background: linear-gradient(145deg, rgba(74, 158, 230, .12), #f4f9ff);
}
:root[data-theme="light"] .requestSectionHeading small,
:root[data-theme="light"] .requestItem .requestMain small,
:root[data-theme="light"] .requestItem time,
:root[data-theme="light"] .requestItem.compact time { color: #6e6173; }
:root[data-theme="light"] .requestItem time b,
:root[data-theme="light"] .requestItem.compact time b { color: #423448; }
:root[data-theme="light"] .activeRequestGuidance { border-color: rgba(64, 39, 70, .1); }
:root[data-theme="light"] .activeRequestGuidance p { color: #493a4f; }
:root[data-theme="light"] .activeRequestGuidance button {
  border-color: rgba(111, 45, 189, .2);
  color: #553268;
  background: rgba(255,255,255,.8);
}

:root[data-theme="light"] .requestHistory { border-color: rgba(111, 45, 189, .14); }
:root[data-theme="light"] .requestHistory > div:first-child span,
:root[data-theme="light"] .requestHistory > div:first-child button { color: #66556e; }
:root[data-theme="light"] .requestList > p { color: #746778; }
:root[data-theme="light"] .requestItem,
:root[data-theme="light"] .activeRequestList .requestItem,
:root[data-theme="light"] .recentRequestResultList .requestItem {
  color: #2b2030;
  background: linear-gradient(145deg, var(--request-surface), rgba(255, 255, 255, .92));
}
:root[data-theme="light"] .requestMain strong { color: #2b2030; }
:root[data-theme="light"] .requestType { color: #522a68; background: #eee2f3; }
:root[data-theme="light"] .requestItem footer button {
  border-color: rgba(111, 45, 189, .16);
  color: #493553;
  background: #fff;
}
:root[data-theme="light"] .recentRequestResultSection {
  background: linear-gradient(145deg, rgba(45, 154, 99, .1), #f5fbf7);
}
:root[data-theme="light"] .recentRequestResultSection[data-status="rejected"] {
  background: linear-gradient(145deg, rgba(177, 46, 68, .09), #fff5f6);
}
:root[data-theme="light"] .recentRequestResultSection[data-status="cancelled"] { background: #f7f3f8; }

/* Light theme — support stays intentionally bright and readable. */
:root[data-theme="light"] .supportDrawer {
  border-color: rgba(111, 45, 189, .15);
  box-shadow: -24px 0 70px rgba(38, 22, 44, .2);
}
:root[data-theme="light"] .chatBackdrop { background: rgba(38, 27, 42, .38); }
:root[data-theme="light"] .supportLauncher {
  border-color: rgba(255,255,255,.9);
  box-shadow: 0 16px 34px rgba(76, 29, 109, .28);
}

/* Toasts remain unmistakable in both themes. */
:root[data-theme="light"] .portalToast {
  border-color: rgba(111, 45, 189, .22);
  color: #302335;
  background: #fff;
  box-shadow: 0 12px 40px rgba(36, 19, 42, .2);
}
:root[data-theme="light"] .portalToast > button {
  border-color: rgba(111,45,189,.18);
  background: #f3ecf5;
}
:root[data-theme="light"] .portalToast[data-tone="success"] {
  border-color: rgba(24, 115, 74, .28);
  color: #164a33;
  background: #edf9f2;
}
:root[data-theme="light"] .portalToast[data-tone="danger"] {
  border-color: rgba(197, 41, 71, .28);
  color: #8e1d33;
  background: #fff0f2;
}

/* The embedded games area intentionally keeps its native dark chrome. */
:root[data-theme="light"] .gameOverlay,
:root[data-theme="light"] .gameOverlay > header,
:root[data-theme="light"] .gameViewport,
:root[data-theme="light"] .gameLoading,
:root[data-theme="light"] .gameUnavailable { color-scheme: dark; }

@media (prefers-reduced-motion: no-preference) {
  :root[data-theme] body,
  :root[data-theme] .platformHeader,
  :root[data-theme] .mobileNav,
  :root[data-theme] .portalAccountMenu,
  :root[data-theme] .portalNotificationPanel {
    transition: color .18s ease, background-color .18s ease, border-color .18s ease;
  }
}

/* Keep this last: both legacy palettes style `.heroBalance span` directly. */
:root[data-theme] .heroBalance .hybridActionButton span {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: normal;
}

/* Portal v74: la vista de movimientos y el aviso compacto respetan ambos temas. */
:root[data-theme="light"] .movementsDialog {
  border-color: rgba(111, 45, 189, .2);
  color: #2b2030;
  background: #f8f3fa;
  box-shadow: 0 24px 72px rgba(50, 28, 58, .2);
}
:root[data-theme="light"] .movementsSurface > header {
  border-color: rgba(111, 45, 189, .14);
  background: linear-gradient(105deg, #fff, #f1e7f5);
}
:root[data-theme="light"] .movementsSurface > header h2 { color: #2b2030; }
:root[data-theme="light"] .movementsSurface > header p { color: #67586d; }
:root[data-theme="light"] .movementsSurface > header > button {
  color: #5e4e64;
  background: rgba(111, 45, 189, .07);
}
:root[data-theme="light"] .movementsFilters {
  border-color: rgba(111, 45, 189, .13);
  background: rgba(111, 45, 189, .045);
}
:root[data-theme="light"] .movementsFilters button { color: #6f6075; }
:root[data-theme="light"] .movementsFilters button.active,
:root[data-theme="light"] .movementsFilters button[aria-pressed="true"] { color: #fff; }
:root[data-theme="light"] .movementsToolbar > span { color: #746778; }
:root[data-theme="light"] .movementsToolbar > button {
  border-color: rgba(111, 45, 189, .18);
  color: #553268;
  background: #fff;
}
:root[data-theme="light"] .movementsList > p {
  border-color: rgba(111, 45, 189, .18);
  color: #746778;
}

:root[data-theme="light"] .heroContent > .notificationOnboarding,
:root[data-theme="light"] .heroContent > .notificationOnboarding[data-permission="denied"] {
  border: 0;
  border-top: 1px solid var(--hybrid-line);
  background: transparent;
  box-shadow: none;
}
:root[data-theme="light"] .heroContent > .notificationOnboarding strong { color: var(--hybrid-text); }
:root[data-theme="light"] .heroContent > .notificationOnboarding p { color: var(--hybrid-muted); }
:root[data-theme="light"] .heroContent > .notificationOnboarding button {
  border-color: rgba(111, 45, 189, .24);
  color: #fff;
  background: #6f2dbd;
}

/* Portal v74: acabado Hibrido Tokyo. El oscuro usa negro real como lienzo y
   el claro conserva exactamente la misma jerarquia, sin cajas de mas. */
:root[data-theme="purple"] {
  --theme-page: #050208;
  --theme-surface: #150b1c;
  --theme-surface-raised: #1c1025;
  --theme-surface-soft: #261430;
  --theme-border: rgba(198, 116, 235, .24);
  --theme-header: rgba(7, 2, 11, .965);
  --hybrid-bg: #050208;
  --hybrid-surface: #150b1c;
  --hybrid-surface-2: #20112a;
  --hybrid-surface-3: #2a1637;
  --hybrid-line: rgba(194, 111, 235, .24);
  --hybrid-line-strong: rgba(194, 111, 235, .48);
  --hybrid-shadow: 0 15px 38px rgba(0, 0, 0, .34);
}

:root[data-theme="purple"] body {
  background:
    radial-gradient(circle at 90% -4%, rgba(126, 42, 179, .15), transparent 31%),
    #050208;
}

:root[data-theme="purple"] .platformHeader {
  border-bottom-color: rgba(194, 111, 235, .22);
  background: var(--theme-header);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .26);
}

:root[data-theme="purple"] .mobileNav {
  border-top-color: rgba(194, 111, 235, .22);
  background: rgba(11, 4, 15, .975);
  box-shadow: 0 -9px 28px rgba(0, 0, 0, .34);
}

:root[data-theme="purple"] .hybridSupportCard,
:root[data-theme="purple"] .heroContent > .appInstallBanner {
  border-color: var(--hybrid-line);
  background: var(--hybrid-surface);
}

:root[data-theme="light"] body {
  background:
    radial-gradient(circle at 92% -3%, rgba(111, 45, 189, .09), transparent 32%),
    #f4f1f6;
}

:root[data-theme="light"] .hybridRequestSection,
:root[data-theme="light"] .hybridShowcase {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

:root[data-theme="light"] .heroBalance,
:root[data-theme="light"] .hybridSupportCard,
:root[data-theme="light"] .heroContent > .appInstallBanner {
  border-color: rgba(111, 45, 189, .18);
  background-color: #fff;
  box-shadow: 0 12px 32px rgba(45, 25, 52, .09);
}

:root[data-theme="light"] .hybridRequestSection .homePendingRequest {
  border-color: rgba(157, 101, 0, .25);
  background: linear-gradient(120deg, #fff9ea, #fff);
  box-shadow: 0 10px 26px rgba(78, 52, 13, .07);
}

:root[data-theme="light"] .hybridRequestEmpty {
  border-color: rgba(111, 45, 189, .13);
  background: #fff;
  box-shadow: 0 10px 26px rgba(45, 25, 52, .07);
}

:root[data-theme="light"] .heroContent > .appInstallBanner strong { color: var(--hybrid-text); }
:root[data-theme="light"] .heroContent > .appInstallBanner p { color: var(--hybrid-muted); }
:root[data-theme="light"] .heroContent > .appInstallBanner > button:not(.dismissInstallPortal) {
  color: #fff;
  background: linear-gradient(100deg, #6630b4, #8d37c8);
}

:root[data-theme="light"] .signupStepLabel strong { color: #302336; }
:root[data-theme="light"] .signupStepLabel small { color: #6f6274; }
:root[data-theme="light"] .signupStepLabel > b {
  border-color: rgba(111, 45, 189, .18);
  color: #fff;
  background: linear-gradient(145deg, #6630b4, #8d37c8);
}
:root[data-theme="light"] #signupPreviewNotice {
  border-color: rgba(157, 101, 0, .2);
  color: #6d4b08;
  background: #fff8e8;
}