/* VynexAI client color system. This file intentionally loads after the
   legacy page styles so every client screen shares one blue palette. */
:root,
:root[data-webai-theme="light"] {
    color-scheme: light;
    --vx-bg: #edf5ff;
    --vx-bg-deep: #dcecff;
    --vx-surface: rgba(255, 255, 255, 0.88);
    --vx-surface-solid: #ffffff;
    --vx-surface-soft: #f3f8ff;
    --vx-surface-muted: #e7f1ff;
    --vx-border: rgba(37, 99, 235, 0.18);
    --vx-border-strong: rgba(37, 99, 235, 0.42);
    --vx-text: #102a4c;
    --vx-muted: #60758f;
    --vx-dim: #7b8ea5;
    --vx-primary: #1b6ce1;
    --vx-primary-hover: #1d4ed8;
    --vx-primary-soft: #dbeafe;
    --vx-primary-faint: rgba(37, 99, 235, 0.09);
    --vx-cyan: #0891b2;
    --vx-shadow: 0 18px 48px rgba(30, 64, 175, 0.12);
    --vx-shadow-soft: 0 10px 28px rgba(30, 64, 175, 0.08);
    --webai-bg: var(--vx-bg);
    --webai-panel: var(--vx-surface);
    --webai-panel-soft: var(--vx-surface-soft);
    --webai-border: var(--vx-border);
    --webai-border-strong: var(--vx-primary);
    --webai-text: var(--vx-text);
    --webai-muted: var(--vx-muted);
    --webai-dim: var(--vx-dim);
    --webai-accent: var(--vx-primary);
    --webai-accent-soft: var(--vx-primary-soft);
    --webai-shadow: var(--vx-shadow);
}

:root[data-webai-theme="dark"] {
    color-scheme: dark;
    --vx-bg: #061426;
    --vx-bg-deep: #030c19;
    --vx-surface: rgba(10, 29, 52, 0.9);
    --vx-surface-solid: #0b203a;
    --vx-surface-soft: #0e2949;
    --vx-surface-muted: #123354;
    --vx-border: rgba(96, 165, 250, 0.22);
    --vx-border-strong: rgba(96, 165, 250, 0.54);
    --vx-text: #eaf4ff;
    --vx-muted: #9db2ca;
    --vx-dim: #7890aa;
    --vx-primary: #1b6ce1;
    --vx-primary-hover: #93c5fd;
    --vx-primary-soft: rgba(37, 99, 235, 0.2);
    --vx-primary-faint: rgba(59, 130, 246, 0.12);
    --vx-cyan: #38bdf8;
    --vx-shadow: 0 22px 58px rgba(0, 8, 24, 0.38);
    --vx-shadow-soft: 0 12px 30px rgba(0, 8, 24, 0.28);
    --webai-bg: var(--vx-bg);
    --webai-panel: var(--vx-surface);
    --webai-panel-soft: var(--vx-surface-soft);
    --webai-border: var(--vx-border);
    --webai-border-strong: var(--vx-primary);
    --webai-text: var(--vx-text);
    --webai-muted: var(--vx-muted);
    --webai-dim: var(--vx-dim);
    --webai-accent: var(--vx-primary);
    --webai-accent-soft: var(--vx-primary-soft);
    --webai-shadow: var(--vx-shadow);
}

html,
body {
    background: var(--vx-bg);
    color: var(--vx-text);
}

main[data-webai-page-root] {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

@media (min-width: 576px) and (max-width: 980px) {
    .webai-zalo-float {
        right: 18px !important;
        bottom: calc(92px + env(safe-area-inset-bottom)) !important;
        width: 56px !important;
    }
}

body,
.webai-shell,
.webai-main,
.webai-page,
.webai-aave-header__nav,
.motion-models,
.motion-settings,
.motion-inputs,
.motion-preview,
.my-videos-card,
.credit-package-card,
.affiliate-kpi,
.affiliate-panel,
.webai-profile-modal__dialog {
    transition:
        color 220ms ease,
        background-color 220ms ease,
        border-color 220ms ease,
        box-shadow 220ms ease;
}

.webai-shell {
    background:
        radial-gradient(
            circle at 88% 0,
            rgba(14, 165, 233, 0.25),
            transparent 30rem
        ),
        radial-gradient(
            circle at 4% 8%,
            rgba(37, 99, 235, 0.3),
            transparent 34rem
        ),
        linear-gradient(150deg, var(--vx-bg-deep), var(--vx-bg));
}

:root[data-webai-theme="dark"] .webai-shell {
    background:
        radial-gradient(
            circle at 86% 0,
            rgba(14, 165, 233, 0.18),
            transparent 30rem
        ),
        radial-gradient(
            circle at 3% 10%,
            rgba(37, 99, 235, 0.26),
            transparent 34rem
        ),
        linear-gradient(155deg, #030b18 0%, #06162a 48%, #071b32 100%);
}

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

/* Header and persistent light/dark control. */
.webai-aave-header {
    --webai-aave-primary: var(--vx-primary);
}

.webai-aave-header__nav {
    --webai-aave-bg: rgba(255, 255, 255, 0.84);
    --webai-aave-border: var(--vx-border);
    --webai-aave-fg: var(--vx-muted);
    background: var(--webai-aave-bg);
    border-color: var(--webai-aave-border);
    box-shadow: var(--vx-shadow-soft);
    backdrop-filter: blur(18px) saturate(145%);
}

.webai-aave-header__brand,
.webai-aave-header__profile-name {
    color: var(--vx-text);
}

.webai-aave-header__nav-item:hover {
    color: var(--vx-text);
}

.webai-aave-header__nav-item:not(.webai-aave-header__nav-item--highlight)
    .webai-aave-header__icon-primary {
    color: var(--vx-muted);
}

.webai-aave-header__nav-item:not(.webai-aave-header__nav-item--highlight)
    .webai-aave-header__icon-secondary {
    color: var(--vx-dim);
}

.webai-aave-header__balance,
.webai-aave-header__profile,
.webai-aave-header__login {
    border-color: var(--vx-border);
    color: var(--vx-text);
    background: var(--vx-surface);
    box-shadow: var(--vx-shadow-soft);
}

.webai-aave-header__balance i,
.webai-aave-header__login {
    color: var(--vx-primary);
}

.webai-aave-header__profile:hover,
.webai-aave-header__login:hover {
    border-color: var(--vx-primary);
    color: var(--vx-primary);
    background: var(--vx-surface-solid);
}

:root[data-webai-theme="dark"] .webai-aave-header__nav {
    --webai-aave-bg: rgba(7, 24, 43, 0.82);
    --webai-aave-fg: #9eb3ca;
}

:root[data-webai-theme="dark"] .webai-aave-header__nav-item--highlight {
    color: #f5faff;
}

:root[data-webai-theme="dark"] .webai-aave-header__lens {
    border-color: rgba(191, 219, 254, 0.45);
    background: rgba(59, 130, 246, 0.08);
    box-shadow:
        0 4px 12px rgba(0, 7, 20, 0.35),
        0 12px 28px rgba(0, 7, 20, 0.2),
        inset 0 1px 1px rgba(219, 234, 254, 0.38),
        inset 0 -1px 1px rgba(0, 14, 36, 0.4);
}

.webai-theme-toggle {
    position: relative;
    flex: 0 0 auto;
    width: 62px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--vx-border-strong);
    border-radius: 999px;
    color: var(--vx-muted);
    background: var(--vx-surface);
    box-shadow: var(--vx-shadow-soft);
    cursor: pointer;
    isolation: isolate;
}

.webai-theme-toggle__track {
    position: absolute;
    inset: 0;
    display: block;
    border-radius: inherit;
}

.webai-theme-toggle__thumb {
    position: absolute;
    z-index: -1;
    top: 3px;
    left: 3px;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 50%;
    background:
        radial-gradient(
            circle at 32% 20%,
            rgba(255, 255, 255, 0.95),
            transparent 45%
        ),
        rgba(255, 255, 255, 0.58);
    box-shadow:
        0 4px 10px rgba(30, 64, 175, 0.2),
        inset 0 -1px 2px rgba(37, 99, 235, 0.16);
    backdrop-filter: blur(8px);
    transition: transform 360ms cubic-bezier(0.2, 1.35, 0.35, 1);
}

.webai-theme-toggle__icon {
    position: absolute;
    top: 9px;
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition:
        color 220ms ease,
        opacity 220ms ease,
        transform 360ms cubic-bezier(0.2, 1.35, 0.35, 1);
}

.webai-theme-toggle__icon--sun {
    left: 9px;
    color: #2563eb;
}

.webai-theme-toggle__icon--moon {
    right: 9px;
    color: #6b7f98;
}

.webai-theme-toggle[aria-pressed="true"] .webai-theme-toggle__thumb {
    transform: translateX(27px);
}

.webai-theme-toggle[aria-pressed="true"] .webai-theme-toggle__icon--sun {
    color: #6d829b;
    transform: rotate(-18deg) scale(0.88);
}

.webai-theme-toggle[aria-pressed="true"] .webai-theme-toggle__icon--moon {
    color: #bfdbfe;
    transform: rotate(8deg) scale(1.04);
}

.webai-theme-toggle:hover {
    border-color: var(--vx-primary);
}

.webai-theme-toggle:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 3px var(--vx-primary-faint),
        var(--vx-shadow-soft);
}

:root[data-webai-theme="dark"] .webai-theme-toggle {
    background: rgba(8, 27, 48, 0.86);
}

:root[data-webai-theme="dark"] .webai-theme-toggle__thumb {
    border-color: rgba(147, 197, 253, 0.55);
    background:
        radial-gradient(
            circle at 35% 20%,
            rgba(191, 219, 254, 0.45),
            transparent 48%
        ),
        rgba(37, 99, 235, 0.3);
    box-shadow:
        0 5px 14px rgba(0, 5, 18, 0.42),
        inset 0 1px 1px rgba(219, 234, 254, 0.3);
}

/* Shared client surfaces and controls. */
.webai-main:not(.webai-main--lab),
.webai-page,
.webai-template-card,
.service-plan,
.affiliate-placeholder__box,
.webai-auth-copy,
.webai-auth-form .auth-card {
    border-color: var(--vx-border);
    color: var(--vx-text);
    background: var(--vx-surface);
    box-shadow: var(--vx-shadow-soft);
}

.webai-main--home,
.webai-main--lab {
    background: transparent;
    box-shadow: none;
}

.webai-title,
.webai-section-title,
.webai-hero-copy h1,
.webai-quick-start-heading h2,
.webai-home-stat strong,
.webai-template-card__body strong,
.service-plans__header h1 small,
.service-plan h2,
.service-plan__price,
.webai-auth-copy h1,
.webai-auth-form .auth-card__header-title {
    color: var(--vx-text);
    text-shadow: none;
}

.webai-subtitle,
.webai-hero-copy p,
.webai-home-stat span,
.webai-template-card__body p,
.service-plans__header > p,
.service-plan header p,
.service-plan li span,
.service-plan footer,
.webai-auth-copy p,
.webai-auth-form .auth-card__header-description,
.webai-auth-form .form-label,
.webai-auth-form .form-check-label {
    color: var(--vx-muted);
}

.webai-primary-btn,
.webai-buy-button,
.motion-create,
.service-plan.is-featured .service-plan__button,
.webai-event-modal__action,
.affiliate-code-form button {
    border-color: var(--vx-primary);
    color: #fff;
    background: linear-gradient(135deg, #2563eb, #0284c7);
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.2);
}

.webai-primary-btn:hover,
.webai-buy-button:hover,
.motion-create:hover,
.service-plan__button:hover,
.webai-event-modal__action:hover,
.affiliate-code-form button:hover {
    background: linear-gradient(135deg, #1d4ed8, #0369a1);
}

.webai-secondary-btn,
.service-plan__button,
.webai-pill,
.webai-select,
.webai-cost,
.webai-send,
.webai-filter-toggle,
.webai-media-field,
.webai-media-pick,
.webai-media-clear {
    border-color: var(--vx-border-strong);
    color: var(--vx-text);
    background-color: var(--vx-surface-solid);
    box-shadow: var(--vx-shadow-soft);
}

.webai-send,
.webai-media-pick,
.webai-media-clear,
.webai-filter-toggle,
.webai-model-picker__trigger span {
    color: var(--vx-primary);
}

.webai-model-picker__trigger,
.webai-model-picker__menu,
.motion-custom-select__trigger,
.motion-custom-select__menu,
.motion-upload,
.motion-table__header,
.webai-auth-form .form-control,
.webai-auth-form .form-select,
.affiliate-code-form {
    border-color: var(--vx-border);
    color: var(--vx-text);
    background: var(--vx-surface-solid);
}

.webai-model-picker__group button,
.motion-custom-select__menu button,
.webai-model-picker__trigger strong {
    color: var(--vx-text);
}

.webai-model-picker__group button:hover,
.webai-model-picker__group button:focus-visible,
.webai-model-picker__group button.is-selected,
.motion-custom-select__menu button:hover,
.motion-custom-select__menu button[aria-selected="true"] {
    color: var(--vx-primary);
    background: var(--vx-primary-soft);
}

[data-webai-theme] .webai-status {
    border-color: var(--vx-border-strong);
    color: var(--vx-primary);
    background: var(--vx-primary-faint);
}

[data-webai-theme] .webai-status span,
[data-webai-theme] .webai-home-hero--video .webai-status span {
    background: var(--vx-primary);
    box-shadow: 0 0 16px rgba(37, 99, 235, 0.4);
}

.service-plans__motto {
    background-image: linear-gradient(105deg, #1d4ed8, #38bdf8 52%, #2563eb);
    text-shadow: 0 4px 16px rgba(37, 99, 235, 0.16);
}

.service-plan.is-featured {
    border-color: var(--vx-primary);
    box-shadow: 0 10px 28px rgba(37, 99, 235, 0.18);
}

.service-plan header i,
.service-plan__payment,
.service-plan__credit-receive {
    border-color: var(--vx-border);
    color: var(--vx-primary);
    background: var(--vx-primary-faint);
}

.service-plan__payment-icon,
.service-plan__credit-icon,
.service-plan__credit-copy strong {
    color: var(--vx-primary);
    background: var(--vx-primary-soft);
}

/* The home hero follows the selected color mode instead of forcing a dark card. */
:root[data-webai-theme="light"] .webai-home-hero--video {
    border-color: var(--vx-border);
    background:
        radial-gradient(
            circle at 79% 42%,
            rgba(14, 165, 233, 0.16),
            transparent 19rem
        ),
        radial-gradient(
            circle at 24% 0,
            rgba(37, 99, 235, 0.12),
            transparent 22rem
        ),
        rgba(255, 255, 255, 0.58);
    box-shadow: 0 18px 42px rgba(30, 64, 175, 0.1);
}

:root[data-webai-theme="light"] .webai-home-hero--video .webai-hero-copy h1 {
    color: var(--vx-text);
}

:root[data-webai-theme="light"] .webai-home-hero--video .webai-hero-copy p,
:root[data-webai-theme="light"] .webai-home-hero--video .webai-hero-features {
    color: var(--vx-muted);
}

:root[data-webai-theme="light"] .webai-home-hero--video .webai-secondary-btn {
    border-color: var(--vx-border-strong);
    color: var(--vx-primary);
    background: rgba(255, 255, 255, 0.72);
}

:root[data-webai-theme="light"]
    .webai-home-hero--video
    .webai-secondary-btn:hover {
    color: #fff;
    background: var(--vx-primary);
}

:root[data-webai-theme="light"] .webai-hero-visual__placeholder {
    border-color: var(--vx-border-strong);
    color: var(--vx-primary);
    background:
        radial-gradient(
            circle at 48% 46%,
            rgba(14, 165, 233, 0.2),
            transparent 30%
        ),
        linear-gradient(135deg, #eff6ff, #dbeafe);
    box-shadow: 0 16px 38px rgba(37, 99, 235, 0.14);
}

:root[data-webai-theme="dark"] .webai-home-hero--video {
    border-color: rgba(96, 165, 250, 0.36);
    background:
        radial-gradient(
            circle at 79% 42%,
            rgba(14, 165, 233, 0.24),
            transparent 19rem
        ),
        radial-gradient(
            circle at 24% 0,
            rgba(37, 99, 235, 0.2),
            transparent 22rem
        ),
        rgba(5, 17, 33, 0.82);
}

[data-webai-theme] .webai-home-hero--video .webai-primary-btn {
    border-color: #3b82f6;
    color: #fff;
    background: linear-gradient(135deg, #2563eb, #0284c7);
    box-shadow: 0 9px 22px rgba(37, 99, 235, 0.3);
}

[data-webai-theme] .webai-home-hero--video .webai-primary-btn:hover {
    border-color: #60a5fa;
    background: linear-gradient(135deg, #1d4ed8, #0369a1);
}

[data-webai-theme] .webai-home-hero--video .webai-secondary-btn:hover {
    border-color: rgba(96, 165, 250, 0.8);
    background: rgba(37, 99, 235, 0.18);
}

[data-webai-theme] .webai-hero-features span::first-letter,
[data-webai-theme] .webai-quick-start-heading a {
    color: #7dd3fc;
}

[data-webai-theme] .webai-hero-visual__placeholder {
    border-color: rgba(96, 165, 250, 0.45);
    color: #7dd3fc;
    background:
        radial-gradient(
            circle at 48% 46%,
            rgba(14, 165, 233, 0.34),
            transparent 30%
        ),
        linear-gradient(135deg, #111d3c, #0b3455);
    box-shadow: 0 0 38px rgba(37, 99, 235, 0.22);
}

/* Home content sits directly on the page backdrop, without extra surface panels. */
[data-webai-theme] .webai-main.webai-main--home,
[data-webai-theme] .webai-main--home .webai-quick-start,
[data-webai-theme] .webai-main--home .webai-home-stats {
    background: transparent;
    box-shadow: none;
}

[data-webai-theme] .webai-main--home .webai-quick-start,
[data-webai-theme] .webai-main--home .webai-home-stats {
    border-color: transparent;
}

[data-webai-theme] .webai-template-card {
    border-color: rgba(96, 165, 250, 0.3);
}

[data-webai-theme] .webai-template-card:hover {
    border-color: rgba(96, 165, 250, 0.72);
    box-shadow: 0 12px 25px rgba(37, 99, 235, 0.2);
}

[data-webai-theme] .webai-template-card > b {
    background: linear-gradient(135deg, #2563eb, #0284c7);
}

[data-webai-theme] .webai-home-stat i,
[data-webai-theme] .webai-home-stat:nth-child(2) i,
[data-webai-theme] .webai-home-stat:nth-child(3) i,
[data-webai-theme] .webai-home-stat:nth-child(4) i {
    color: #7dd3fc;
    background: rgba(37, 99, 235, 0.18);
}

/* Video Lab: blue surfaces in both color modes. */
[data-webai-theme] .webai-main--lab .motion-workspace {
    color: var(--vx-text);
}

[data-webai-theme] .webai-main--lab .motion-models,
[data-webai-theme] .webai-main--lab .motion-settings,
[data-webai-theme] .webai-main--lab .motion-inputs,
[data-webai-theme] .webai-main--lab .motion-preview {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}

[data-webai-theme] .webai-main--lab .motion-section-heading h2,
[data-webai-theme] .webai-main--lab .motion-card__heading h2,
[data-webai-theme] .webai-main--lab .motion-model,
[data-webai-theme] .webai-main--lab .motion-model footer strong,
[data-webai-theme] .webai-main--lab .motion-preview dd,
[data-webai-theme] .webai-main--lab .motion-preview__description dd {
    color: var(--vx-text);
}

[data-webai-theme] .webai-main--lab .motion-section-heading::after,
[data-webai-theme] .webai-main--lab .motion-model > p,
[data-webai-theme] .webai-main--lab .motion-model footer,
[data-webai-theme] .webai-main--lab .motion-note,
[data-webai-theme] .webai-main--lab .motion-tip,
[data-webai-theme] .webai-main--lab .motion-row-number,
[data-webai-theme] .webai-main--lab .motion-reference-preview figcaption,
[data-webai-theme] .webai-main--lab .motion-preview dt {
    color: var(--vx-muted);
}

[data-webai-theme] .webai-main--lab .motion-model {
    border-color: var(--vx-border);
    background: var(--vx-surface-soft);
}

[data-webai-theme] .webai-main--lab .motion-model.is-selected {
    border-color: var(--vx-primary);
    box-shadow: 0 0 0 2px var(--vx-primary-faint);
}

[data-webai-theme] .webai-main--lab .motion-model__tag,
[data-webai-theme] .webai-main--lab .motion-preview__promotion-badge {
    color: #fff;
    background: var(--vx-primary);
}

[data-webai-theme] .webai-main--lab .motion-model footer b,
[data-webai-theme] .webai-main--lab .motion-model > strong em,
[data-webai-theme] .webai-main--lab .motion-preview__cost > strong,
[data-webai-theme] .webai-main--lab .motion-create-bar strong,
[data-webai-theme] .webai-main--lab .motion-reference-preview__arrow {
    color: var(--vx-primary);
}

[data-webai-theme] .webai-main--lab .motion-model__promotion,
[data-webai-theme] .webai-main--lab .motion-preview__promotion,
[data-webai-theme] .webai-main--lab .motion-schedule__notice {
    border-color: var(--vx-border-strong);
    color: var(--vx-primary);
    background: var(--vx-primary-faint);
}

[data-webai-theme] .webai-main--lab .motion-model__promotion-details,
[data-webai-theme] .webai-main--lab .motion-preview__promotion strong {
    color: var(--vx-text);
}

[data-webai-theme] .webai-main--lab .motion-selects > label {
    border-color: var(--vx-border);
    color: var(--vx-muted);
}

[data-webai-theme] .webai-main--lab .motion-custom-select__trigger,
[data-webai-theme] .webai-main--lab .motion-video-size > span,
[data-webai-theme] .webai-main--lab .motion-custom-select__menu,
[data-webai-theme] .webai-main--lab .motion-table__header,
[data-webai-theme] .webai-main--lab .motion-upload {
    border-color: var(--vx-border);
    color: var(--vx-text);
    background: var(--vx-surface-solid);
}

[data-webai-theme] .webai-main--lab .motion-custom-select__menu button {
    color: var(--vx-text);
}

[data-webai-theme] .webai-main--lab .motion-custom-select__menu button:hover,
[data-webai-theme]
    .webai-main--lab
    .motion-custom-select__menu
    button[aria-selected="true"] {
    color: var(--vx-primary);
    background: var(--vx-primary-soft);
}

[data-webai-theme] .webai-main--lab .motion-card__heading button {
    border-color: var(--vx-border-strong);
    color: var(--vx-primary);
    background: var(--vx-primary-faint);
}

[data-webai-theme] .webai-main--lab .motion-table,
[data-webai-theme] .webai-main--lab .motion-table__row,
[data-webai-theme] .webai-main--lab .motion-preview dl,
[data-webai-theme] .webai-main--lab .motion-create-bar {
    border-color: var(--vx-border);
}

[data-webai-theme] .webai-main--lab .motion-preview dl {
    background: var(--vx-primary-faint);
}

[data-webai-theme] .webai-main--lab .motion-reference-preview__media {
    background: var(--vx-surface-muted);
}

[data-webai-theme] .webai-main--lab .motion-reference-preview__arrow {
    background: var(--vx-primary-faint);
}

[data-webai-theme] .webai-main--lab .motion-preview__cost small {
    color: var(--vx-primary);
}

[data-webai-theme] .webai-main--lab .motion-create {
    background: linear-gradient(135deg, #2563eb, #0284c7);
}

/* Video Lab: workflow layout, preserving the active VynexAI color theme. */
[data-webai-theme] .webai-main--lab .motion-workspace {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
    grid-template-rows: auto auto auto minmax(230px, 1fr);
    gap: 14px;
    min-height: calc(100vh - 106px);
    color: var(--vx-text);
}

[data-webai-theme] .webai-main--lab .motion-lab-header {
    grid-column: 1;
    grid-row: 1;
    padding: 4px 2px 0;
}

[data-webai-theme] .webai-main--lab .motion-lab-header h1 {
    margin: 0;
    color: var(--vx-text);
    font-size: 24px;
    line-height: 1.15;
}

[data-webai-theme] .webai-main--lab .motion-lab-header h1 span {
    display: inline-block;
    margin-left: 6px;
    padding: 3px 6px;
    border-radius: 6px;
    color: var(--vx-primary);
    background: var(--vx-primary-faint);
    font-size: 9px;
    vertical-align: middle;
}

[data-webai-theme] .webai-main--lab .motion-lab-header p {
    margin: 5px 0 0;
    color: var(--vx-muted);
    font-size: 12px;
}

[data-webai-theme] .webai-main--lab .motion-models,
[data-webai-theme] .webai-main--lab .motion-inputs,
[data-webai-theme] .webai-main--lab .motion-settings,
[data-webai-theme] .webai-main--lab .motion-preview {
    border: 1px solid var(--vx-border);
    border-radius: 14px;
    background: var(--vx-surface);
    box-shadow: var(--vx-shadow-soft);
    backdrop-filter: blur(10px);
}

[data-webai-theme] .webai-main--lab .motion-models {
    grid-column: 1;
    grid-row: 2;
    align-self: auto;
    height: auto;
    display: block;
    min-height: 0;
    padding: 16px;
    overflow: hidden;
}

[data-webai-theme] .webai-main--lab .motion-section-heading {
    margin: 0 0 10px;
}

[data-webai-theme] .webai-main--lab .motion-section-heading::after {
    display: none;
}

[data-webai-theme] .webai-main--lab .motion-section-heading h2,
[data-webai-theme] .webai-main--lab .motion-section-heading h2::before {
    font-size: 16px;
}

[data-webai-theme] .webai-main--lab .motion-section-heading h2 {
    color: var(--vx-text);
}

[data-webai-theme] .webai-main--lab .motion-section-heading h2::before {
    content: none;
}

[data-webai-theme] .webai-main--lab .motion-models__carousel {
    position: relative;
    height: auto;
}

[data-webai-theme] .webai-main--lab .motion-models__viewport {
    overflow: hidden;
}

[data-webai-theme] .webai-main--lab .motion-models__grid {
    flex-direction: row;
    gap: 12px;
    transition: transform .28s ease;
}

[data-webai-theme] .webai-main--lab .motion-models__arrow {
    position: absolute;
    z-index: 2;
    top: 50%;
    display: grid;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--vx-border-strong);
    border-radius: 50%;
    place-items: center;
    color: #fff;
    background: var(--vx-surface-solid);
    box-shadow: var(--vx-shadow-soft);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    transform: translateY(-50%);
}

[data-webai-theme] .webai-main--lab .motion-models__arrow--previous {
    left: -6px;
}

[data-webai-theme] .webai-main--lab .motion-models__arrow--next {
    right: -6px;
}

[data-webai-theme] .webai-main--lab .motion-models__arrow:disabled {
    opacity: .35;
    cursor: default;
}

[data-webai-theme] .webai-main--lab .motion-model {
    flex: 0 0 calc((100% - 12px) / 2);
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr) minmax(200px, auto);
    align-items: center;
    gap: 12px;
    min-height: 94px;
    padding: 12px;
    border-color: var(--vx-border);
    border-radius: 11px;
    background: var(--vx-surface-soft);
}

[data-webai-theme] .webai-main--lab .motion-model__image {
    grid-column: 1;
    grid-row: 1 / span 3;
    width: 76px;
    height: 60px;
    border-radius: 8px;
}

[data-webai-theme] .webai-main--lab .motion-model > strong {
    grid-column: 2;
    padding: 0;
    font-size: 14px;
}

[data-webai-theme] .webai-main--lab .motion-model > p {
    grid-column: 2;
    min-height: 0;
    margin: -5px 0 0;
    font-size: 10px;
    -webkit-line-clamp: 1;
}

[data-webai-theme] .webai-main--lab .motion-model footer {
    grid-column: 3;
    grid-row: 1 / span 3;
    display: grid;
    min-width: 200px;
    gap: 7px;
    padding: 2px 0 2px 16px;
    border: 0;
    border-left: 1px solid var(--vx-border);
    font-size: 10px;
}

[data-webai-theme] .webai-main--lab .motion-model__price {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}

[data-webai-theme] .webai-main--lab .motion-model__price b {
    font-size: 12px;
}

[data-webai-theme] .webai-main--lab .motion-workspace__columns {
    display: contents;
    margin: 0;
}

[data-webai-theme] .webai-main--lab .motion-inputs {
    grid-column: 1;
    grid-row: 3;
    padding: 18px 22px;
}

[data-webai-theme] .webai-main--lab .motion-settings {
    grid-column: 1;
    grid-row: 4;
    padding: 18px 22px;
}

[data-webai-theme] .webai-main--lab .motion-settings .motion-card__heading,
[data-webai-theme] .webai-main--lab .motion-inputs .motion-card__heading {
    margin-bottom: 12px;
}

[data-webai-theme] .webai-main--lab .motion-inputs__heading {
    display: flex;
    align-items: center;
    gap: 7px;
}

[data-webai-theme] .webai-main--lab .motion-inputs__warning {
    margin-left: auto;
    color: #ff6f7f;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.3;
    text-align: right;
}

[data-webai-theme] .webai-main--lab .motion-delete {
    display: grid;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--vx-border);
    border-radius: 8px;
    place-items: center;
    color: var(--vx-text-muted);
    background: transparent;
    cursor: pointer;
    transition: border-color .18s ease, color .18s ease, background .18s ease, transform .18s ease;
}

[data-webai-theme] .webai-main--lab .motion-delete svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

[data-webai-theme] .webai-main--lab .motion-delete:hover,
[data-webai-theme] .webai-main--lab .motion-delete:focus-visible {
    border-color: #ff6679;
    color: #ff7b8c;
    background: rgba(255, 88, 112, .12);
    outline: 0;
    transform: translateY(-1px);
}

[data-webai-theme] .webai-main--lab .motion-upload {
    position: relative;
    overflow: hidden;
}

[data-webai-theme] .webai-main--lab .motion-upload__progress {
    position: absolute;
    z-index: 4;
    right: 7px;
    bottom: 7px;
    left: 7px;
    height: 21px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 6px;
    color: #fff;
    background: rgba(5, 16, 39, .8);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}

[data-webai-theme] .webai-main--lab .motion-upload__progress i {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--motion-upload-progress);
    background: linear-gradient(90deg, var(--vx-primary), #24d4ff);
    transition: width .16s linear;
}

[data-webai-theme] .webai-main--lab .motion-upload__progress strong {
    position: relative;
    z-index: 1;
    display: grid;
    height: 100%;
    place-items: center;
    font-size: 10px;
    line-height: 1;
}

[data-webai-theme] .webai-main--lab .motion-selects {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
}

[data-webai-theme] .webai-main--lab .motion-selects > .motion-option-group {
    display: block;
    min-height: 0;
    padding: 10px 12px 11px;
    border: 1px solid var(--vx-border);
    border-radius: 11px;
    color: var(--vx-text-muted);
    background: var(--vx-primary-faint);
    font-size: 11px;
    font-weight: 700;
}

[data-webai-theme] .webai-main--lab .motion-option-group__select {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

[data-webai-theme] .webai-main--lab .motion-option-group__choices {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 6px;
    margin-top: 7px;
}

[data-webai-theme] .webai-main--lab .motion-option-group__choices button {
    min-height: 29px;
    padding: 5px 7px;
    border: 1px solid var(--vx-border);
    border-radius: 8px;
    color: var(--vx-text-muted);
    background: transparent;
    font: inherit;
    font-size: 10px;
    cursor: pointer;
}

[data-webai-theme] .webai-main--lab .motion-option-group__choices button:hover,
[data-webai-theme] .webai-main--lab .motion-option-group__choices button.is-selected {
    border-color: var(--vx-primary);
    color: #fff;
    background: var(--vx-primary);
    box-shadow: 0 4px 12px var(--vx-primary-glow);
}

[data-webai-theme] .webai-main--lab .motion-credit-value::after {
    display: inline-block;
    width: 1.05em;
    height: 1.05em;
    margin-left: .28em;
    vertical-align: -.16em;
    border: 1.5px solid #ffb11b;
    border-radius: 50%;
    background: var(--motion-coin-image, radial-gradient(circle at 35% 30%, #ffe789, #ed9d1d 58%, #a75508 100%));
    background-position: center;
    background-size: cover;
    box-shadow: 0 0 5px rgba(255, 171, 25, .9), 0 0 9px color-mix(in srgb, var(--vx-primary) 50%, transparent);
    content: '';
}

[data-webai-theme] .webai-main--lab .motion-credit-value--per-video::after {
    margin-right: .18em;
}

[data-webai-theme] .webai-main--lab .motion-preview {
    grid-column: 2;
    grid-row: 2 / span 2;
    display: flex;
    min-height: 0;
    flex-direction: column;
    padding: 20px;
}

[data-webai-theme] .webai-main--lab .motion-preview .motion-card__heading {
    margin-bottom: 8px;
}

[data-webai-theme] .webai-main--lab .motion-reference-preview,
[data-webai-theme] .webai-main--lab .motion-preview__description {
    display: none !important;
}

[data-webai-theme] .webai-main--lab .motion-preview dl {
    margin: 8px 0 14px;
    padding: 0;
    border: 0;
    background: transparent;
}

[data-webai-theme] .webai-main--lab .motion-preview dl div {
    padding: 9px 0;
    border-bottom: 1px solid var(--vx-border);
}

[data-webai-theme] .webai-main--lab .motion-preview .motion-order-summary__selection,
[data-webai-theme] .webai-main--lab .motion-preview .motion-order-summary__costs {
    margin: 5px 0;
}

[data-webai-theme] .webai-main--lab .motion-preview .motion-order-summary__costs {
    padding-top: 5px;
    border-top: 1px solid var(--vx-border);
}

[data-webai-theme] .webai-main--lab .motion-preview dl div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 27px;
    padding: 5px 0;
    font-size: 12px;
}

[data-webai-theme] .webai-main--lab .motion-preview dl dt {
    color: var(--vx-text-muted);
}

[data-webai-theme] .webai-main--lab .motion-preview dl dd {
    margin: 0;
    color: var(--vx-text);
    font-weight: 700;
    text-align: right;
}

[data-webai-theme] .webai-main--lab .motion-preview .motion-preview__cost-row {
    padding-top: 9px;
    border-bottom: 0;
}

[data-webai-theme] .webai-main--lab .motion-preview .motion-preview__cost {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    gap: 1px;
}

[data-webai-theme] .webai-main--lab .motion-preview .motion-preview__cost > strong {
    font-size: 15px;
}

[data-webai-theme] .webai-main--lab .motion-preview .motion-preview__promotion {
    margin: 8px 0 0;
    padding: 9px 10px;
    border-radius: 10px;
    background: var(--vx-primary-faint);
}

[data-webai-theme] .webai-main--lab .motion-preview .motion-preview__promotion-badge {
    display: inline-flex;
    margin-bottom: 3px;
    padding: 3px 6px;
    border-radius: 999px;
    font-size: 8px;
    text-transform: uppercase;
}

[data-webai-theme] .webai-main--lab .motion-preview .motion-preview__promotion strong,
[data-webai-theme] .webai-main--lab .motion-preview .motion-preview__promotion span:not(.motion-preview__promotion-badge) {
    display: block;
    font-size: 11px;
}

[data-webai-theme] .webai-main--lab .motion-create-bar {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--vx-border);
}

[data-webai-theme] .webai-main--lab .motion-create-bar__summary > p {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 700;
}

[data-webai-theme] .webai-main--lab .motion-create-bar__summary > p strong {
    font-size: 23px;
}

[data-webai-theme] .webai-main--lab .motion-create-bar__balance {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--vx-border);
    border-radius: 10px;
    background: var(--vx-primary-faint);
}

[data-webai-theme] .webai-main--lab .motion-create-bar__balance > span {
    font-size: 19px;
}

[data-webai-theme] .webai-main--lab .motion-create-bar__balance small {
    flex: 1;
    font-size: 10px;
    color: var(--vx-text-muted);
    line-height: 1.35;
}

[data-webai-theme] .webai-main--lab .motion-create-bar__balance b {
    color: var(--vx-text);
    font-size: 12px;
}

[data-webai-theme] .webai-main--lab .motion-create-bar__balance a {
    padding: 5px 8px;
    border: 1px solid var(--vx-border-strong);
    border-radius: 999px;
    color: var(--vx-primary);
    font-size: 10px;
    font-weight: 700;
    text-decoration: none;
}

[data-webai-theme] .webai-main--lab .motion-create-bar__notice {
    display: block;
    margin-top: 7px;
    color: var(--vx-text-muted);
    font-size: 9px;
    text-align: center;
}

@media (max-width: 980px) {
    [data-webai-theme] .webai-main--lab .motion-workspace {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto;
    }

    [data-webai-theme] .webai-main--lab .motion-lab-header,
    [data-webai-theme] .webai-main--lab .motion-models,
    [data-webai-theme] .webai-main--lab .motion-inputs,
    [data-webai-theme] .webai-main--lab .motion-settings,
    [data-webai-theme] .webai-main--lab .motion-preview {
        grid-column: 1;
        grid-row: auto;
    }

    [data-webai-theme] .webai-main--lab .motion-preview {
        min-height: 420px;
    }
}

@media (max-width: 640px) {
    [data-webai-theme] .webai-main--lab .motion-inputs__heading {
        flex-wrap: wrap;
    }

    [data-webai-theme] .webai-main--lab .motion-inputs__warning {
        flex-basis: 100%;
        margin-left: 0;
        text-align: left;
    }

    [data-webai-theme] .webai-main--lab .motion-model {
        flex-basis: 100%;
    }

    [data-webai-theme] .webai-main--lab .motion-model {
        grid-template-columns: 60px minmax(0, 1fr);
    }

    [data-webai-theme] .webai-main--lab .motion-model__image {
        width: 60px;
        height: 54px;
    }

    [data-webai-theme] .webai-main--lab .motion-model footer {
        display: none;
    }

    [data-webai-theme] .webai-main--lab .motion-selects {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px 0;
    }
}

/* Videos, packages and affiliate. */
[data-webai-theme] .webai-main--videos,
[data-webai-theme] .webai-main--credits,
[data-webai-theme] .webai-main--affiliate {
    border-color: var(--vx-border);
    background: var(--vx-surface);
}

[data-webai-theme] .my-videos-dashboard,
[data-webai-theme] .credit-packages,
[data-webai-theme] .affiliate-dashboard {
    color: var(--vx-text);
}

[data-webai-theme] .my-videos-card,
[data-webai-theme] .credit-package-card,
[data-webai-theme] .affiliate-kpi,
[data-webai-theme] .affiliate-panel,
[data-webai-theme] .affiliate-activity {
    border-color: var(--vx-border);
    color: var(--vx-text);
    background: var(--vx-surface-solid);
    box-shadow: var(--vx-shadow-soft);
}

[data-webai-theme] .affiliate-withdraw-card,
[data-webai-theme] .affiliate-withdraw-detail > article {
    border-color: var(--vx-border);
    color: var(--vx-text);
    background: transparent;
    box-shadow: none;
}

[data-webai-theme] .my-videos-dashboard h1,
[data-webai-theme] .my-videos-card__body > strong,
[data-webai-theme] .credit-packages__header h1,
[data-webai-theme] .credit-package-card h2,
[data-webai-theme] .credit-package-card__price,
[data-webai-theme] .credit-package-card__credits,
[data-webai-theme] .affiliate-hero h1,
[data-webai-theme] .affiliate-panel h2,
[data-webai-theme] .affiliate-kpi strong {
    color: var(--vx-text);
}

[data-webai-theme] .my-videos-dashboard h1 span {
    color: var(--vx-primary);
}

[data-webai-theme] .my-videos-dashboard p,
[data-webai-theme] .my-videos-dashboard__meta,
[data-webai-theme] .my-videos-card__model span,
[data-webai-theme] .my-videos-card__meta,
[data-webai-theme] .credit-packages__header p,
[data-webai-theme] .credit-packages__balance span,
[data-webai-theme] .credit-package-card__code,
[data-webai-theme] .credit-package-card li,
[data-webai-theme] .affiliate-hero p,
[data-webai-theme] .affiliate-kpi span,
[data-webai-theme] .affiliate-kpi small,
[data-webai-theme] .affiliate-panel__lead {
    color: var(--vx-muted);
}

[data-webai-theme] .my-videos-card__model span,
[data-webai-theme] .my-videos-card__meta,
[data-webai-theme] .credit-packages__balance,
[data-webai-theme] .affiliate-code-form {
    border-color: var(--vx-border);
    color: var(--vx-text);
    background: var(--vx-surface-soft);
}

[data-webai-theme] .my-videos-search input,
[data-webai-theme] .my-videos-filters button,
[data-webai-theme] .my-videos-pagination button {
    border-color: var(--vx-border);
    color: var(--vx-muted);
    background: var(--vx-surface-soft);
}

[data-webai-theme] .my-videos-search input {
    color: var(--vx-text);
}

[data-webai-theme] .my-videos-search input:focus,
[data-webai-theme] .my-videos-filters button:hover {
    border-color: var(--vx-primary);
    color: var(--vx-primary);
    box-shadow: 0 0 0 3px var(--vx-primary-faint);
}

[data-webai-theme] .my-videos-filters button.is-active {
    border-color: var(--vx-primary);
    color: #fff;
    background: linear-gradient(135deg, #2563eb, #0284c7);
}

[data-webai-theme] .my-videos-retention-notice {
    min-width: 0;
    align-self: center;
    overflow: hidden;
    padding: 9px 0;
    color: #ff6b6b;
    font-size: 14px;
    font-weight: 750;
    line-height: 1.35;
    white-space: nowrap;
}

[data-webai-theme] .my-videos-retention-notice span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-left: 100%;
    animation: webai-retention-notice-scroll 17s linear infinite;
}

[data-webai-theme] .my-videos-retention-notice svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

@keyframes webai-retention-notice-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}

@media (max-width: 760px) {
    [data-webai-theme] .my-videos-retention-notice {
        grid-column: 1;
        font-size: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-webai-theme] .my-videos-retention-notice span {
        padding-left: 0;
        animation: none;
    }
}

[data-webai-theme] .my-videos-card__status {
    color: #93c5fd;
    background: rgba(37, 99, 235, 0.18);
}

/* Keep download available without opening the information overlay. */
[data-webai-theme] .my-videos-card__quick-download {
    position: absolute;
    z-index: 5;
    top: 10px;
    left: 10px;
    width: 32px;
    height: 32px;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--vx-border-strong);
    border-radius: 50%;
    color: #fff;
    background: var(--vx-primary);
    box-shadow: 0 4px 12px rgba(8, 29, 60, 0.34);
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
}

[data-webai-theme] .my-videos-card__quick-download:hover,
[data-webai-theme] .my-videos-card__quick-download:focus-visible {
    color: #fff;
    background: var(--vx-primary-hover);
    outline: 0;
    transform: translateY(-1px);
}

[data-webai-theme] .my-videos-card__body {
    padding-bottom: 8px;
}

[data-webai-theme] .my-videos-card__details,
[data-webai-theme] .my-videos-card__model {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
}

[data-webai-theme] .my-videos-card__details {
    flex-wrap: nowrap;
}

[data-webai-theme] .my-videos-card__model {
    flex: 0 1 auto;
    flex-wrap: nowrap;
}

[data-webai-theme] .my-videos-card__details .my-videos-card__model span,
[data-webai-theme] .my-videos-card__details .my-videos-card__meta {
    white-space: nowrap;
}

[data-webai-theme] .my-videos-card__actions:empty {
    display: none;
    min-height: 0;
}

/* These actions are temporarily replaced by the quick-download button. */
[data-webai-theme] .my-videos-card__actions [data-task-download],
[data-webai-theme] .my-videos-card__actions [data-task-issue-report] {
    display: none;
}

@media (max-width: 620px) {
    [data-webai-theme] .my-videos-card__details {
        flex: 1 0 100%;
        flex-wrap: wrap;
    }

    [data-webai-theme] .my-videos-card__model {
        display: flex;
        flex-wrap: wrap;
    }
}

[data-webai-theme] .my-videos-card__popup:hover,
[data-webai-theme] .my-videos-card__popup:focus-visible,
[data-webai-theme] .my-videos-card__info-toggle:hover,
[data-webai-theme] .my-videos-card__info-toggle:focus-visible,
[data-webai-theme] .my-videos-card.is-info-open .my-videos-card__info-toggle {
    border-color: var(--vx-primary);
    color: #eff6ff;
    background: rgba(37, 99, 235, 0.9);
}

[data-webai-theme] .my-videos-card__download,
[data-webai-theme] .credit-package-card form button:hover,
[data-webai-theme] .credit-package-card.is-popular form button,
[data-webai-theme] .affiliate-code-form button,
[data-webai-theme] .affiliate-kpi--withdraw a {
    border-color: var(--vx-primary);
    color: #fff;
    background: linear-gradient(135deg, #2563eb, #0284c7);
}

[data-webai-theme] .credit-package-card--pro,
[data-webai-theme] .credit-package-card--advanced,
[data-webai-theme] .credit-package-card--enterprise,
[data-webai-theme] .affiliate-kpi--withdraw {
    border-color: var(--vx-border-strong);
    background:
        radial-gradient(
            circle at 85% 0,
            var(--vx-primary-faint),
            transparent 38%
        ),
        var(--vx-surface-solid);
}

[data-webai-theme] .credit-package-card__badge,
[data-webai-theme] .affiliate-code-form span,
[data-webai-theme] .affiliate-referrer-state {
    border-color: var(--vx-border);
    color: var(--vx-primary);
    background: var(--vx-primary-soft);
}

/* Affiliate's compact layout was authored with hard-coded dark surfaces.
   These light-mode rules keep that layout while restoring readable surfaces. */
:root[data-webai-theme="light"] .affiliate-dashboard {
    --aff-card: var(--vx-surface-solid);
    --aff-border: var(--vx-border);
    --aff-muted: var(--vx-muted);
    color: var(--vx-text);
}

:root[data-webai-theme="light"] .affiliate-hero h1,
:root[data-webai-theme="light"] .affiliate-panel h2,
:root[data-webai-theme="light"] .affiliate-kpi strong,
:root[data-webai-theme="light"] .affiliate-withdraw-action strong,
:root[data-webai-theme="light"] .affiliate-table td,
:root[data-webai-theme="light"] .affiliate-referrer-state--locked strong {
    color: var(--vx-text);
}

:root[data-webai-theme="light"] .affiliate-hero h1::after,
:root[data-webai-theme="light"] .affiliate-heading-icon,
:root[data-webai-theme="light"] .affiliate-heading-icon--green {
    color: var(--vx-primary);
}

:root[data-webai-theme="light"] .affiliate-hero p,
:root[data-webai-theme="light"] .affiliate-kpi span,
:root[data-webai-theme="light"] .affiliate-kpi small,
:root[data-webai-theme="light"] .affiliate-panel__lead,
:root[data-webai-theme="light"] .affiliate-copy-box > span,
:root[data-webai-theme="light"] .affiliate-explain,
:root[data-webai-theme="light"] .affiliate-policy,
:root[data-webai-theme="light"] .affiliate-withdraw-action small,
:root[data-webai-theme="light"] .affiliate-tabs button,
:root[data-webai-theme="light"] .affiliate-empty,
:root[data-webai-theme="light"] .affiliate-table th {
    color: var(--vx-muted);
}

:root[data-webai-theme="light"] .affiliate-kpi,
:root[data-webai-theme="light"] .affiliate-panel {
    border-color: var(--vx-border);
    background: rgba(255, 255, 255, 0.82);
    box-shadow: var(--vx-shadow-soft);
}

:root[data-webai-theme="light"] .affiliate-copy-box,
:root[data-webai-theme="light"] .affiliate-copy-box--green,
:root[data-webai-theme="light"] .affiliate-referrer-state,
:root[data-webai-theme="light"] .affiliate-withdraw-action {
    border-color: var(--vx-border-strong);
    background: var(--vx-primary-faint);
}

:root[data-webai-theme="light"] .affiliate-explain,
:root[data-webai-theme="light"] .affiliate-policy,
:root[data-webai-theme="light"] .affiliate-referrer-state--locked,
:root[data-webai-theme="light"] .affiliate-code-form {
    border-color: var(--vx-border);
    background: var(--vx-surface-soft);
    box-shadow: none;
}

:root[data-webai-theme="light"] .affiliate-code-form input {
    color: var(--vx-text);
}

:root[data-webai-theme="light"] .affiliate-code-form:focus-within {
    border-color: var(--vx-primary);
    box-shadow: 0 0 0 3px var(--vx-primary-faint);
}

:root[data-webai-theme="light"] .affiliate-tabs,
:root[data-webai-theme="light"] .affiliate-table th,
:root[data-webai-theme="light"] .affiliate-table td {
    border-color: var(--vx-border);
}

:root[data-webai-theme="light"] .affiliate-kpi--withdraw {
    border-color: var(--vx-border-strong);
    background:
        radial-gradient(
            circle at 90% 0,
            rgba(59, 130, 246, 0.15),
            transparent 46%
        ),
        rgba(255, 255, 255, 0.88);
}

[data-webai-theme] .credit-packages__balance strong i,
[data-webai-theme] .credit-package-card li::before {
    border-color: var(--vx-border-strong);
    color: var(--vx-primary);
    background: var(--vx-primary-faint);
}

[data-webai-theme] .credit-package-card__gem,
[data-webai-theme] .credit-package-card--pro .credit-package-card__gem,
[data-webai-theme] .credit-package-card--advanced .credit-package-card__gem,
[data-webai-theme] .credit-package-card--enterprise .credit-package-card__gem,
[data-webai-theme] .credit-package-card__conversion-arrow,
[data-webai-theme] .affiliate-heading-icon,
[data-webai-theme] .affiliate-heading-icon--green,
[data-webai-theme] .affiliate-kpi--green strong,
[data-webai-theme] .affiliate-kpi--blue strong,
[data-webai-theme] .affiliate-kpi--purple strong {
    color: var(--vx-primary);
}

[data-webai-theme] .credit-packages__header h1 span {
    color: var(--vx-primary);
}

[data-webai-theme] .credit-package-future--starter,
[data-webai-theme] .credit-package-future--enterprise {
    border-color: rgba(59, 130, 246, 0.82);
    background:
        radial-gradient(
            circle at 20% 23%,
            rgba(37, 99, 235, 0.24),
            transparent 30%
        ),
        radial-gradient(
            circle at 88% 100%,
            rgba(14, 165, 233, 0.2),
            transparent 32%
        ),
        linear-gradient(145deg, #07182e, #020a15);
}

[data-webai-theme]
    .credit-package-future--starter
    .credit-package-future__heading
    h2,
[data-webai-theme]
    .credit-package-future--enterprise
    .credit-package-future__heading
    h2 {
    background-image: linear-gradient(100deg, #38bdf8, #3b82f6);
}

[data-webai-theme]
    .credit-package-future--starter
    .credit-package-future__reward,
[data-webai-theme]
    .credit-package-future--enterprise
    .credit-package-future__reward {
    border-color: #38bdf8;
    border-right-color: #6366f1;
    background: linear-gradient(
        105deg,
        rgba(8, 76, 166, 0.76),
        rgba(8, 42, 111, 0.64)
    );
}

[data-webai-theme] .credit-package-future--starter form button,
[data-webai-theme] .credit-package-future--enterprise form button {
    border-color: #60a5fa;
    border-right-color: #38bdf8;
    background: linear-gradient(100deg, #2563eb, #0284c7);
}

/* Profile, payment, event and authentication overlays. */
[data-webai-theme] .webai-profile-modal__dialog,
[data-webai-theme] .webai-event-modal__dialog,
[data-webai-theme] .webai-payment-modal__dialog,
[data-webai-theme] .webai-credit-payment-card,
[data-webai-theme] .my-videos-issue-modal__dialog {
    border-color: var(--vx-border);
    color: var(--vx-text);
    background: var(--vx-surface-solid);
    box-shadow: var(--vx-shadow);
}

[data-webai-theme] .webai-profile-modal__sidebar,
[data-webai-theme] .webai-credit-payment-details,
[data-webai-theme] .webai-credit-payment-qr,
[data-webai-theme] .webai-payment-modal__details,
[data-webai-theme] .webai-payment-modal__qr,
[data-webai-theme] .webai-event-modal__content {
    border-color: var(--vx-border);
    color: var(--vx-text);
    background: var(--vx-surface-soft);
}

[data-webai-theme] .webai-profile-modal__identity strong,
[data-webai-theme] .webai-profile-modal__content h2,
[data-webai-theme] .webai-profile-modal__details strong,
[data-webai-theme] .webai-profile-modal__history-table,
[data-webai-theme] .webai-credit-payment-details h1,
[data-webai-theme] .webai-credit-payment-list dd,
[data-webai-theme] .webai-event-modal__content h2 {
    color: var(--vx-text);
}

[data-webai-theme] .webai-profile-modal__panel-note,
[data-webai-theme] .webai-profile-modal__details span,
[data-webai-theme] .webai-profile-modal__details small,
[data-webai-theme] .webai-profile-modal__history-event small,
[data-webai-theme] .webai-credit-payment-list dt,
[data-webai-theme] .webai-credit-payment-qr small,
[data-webai-theme] .webai-event-modal__content p {
    color: var(--vx-muted);
}

[data-webai-theme] .webai-profile-modal__nav button:hover,
[data-webai-theme] .webai-profile-modal__nav button.is-active,
[data-webai-theme] .webai-profile-modal__edit:hover,
[data-webai-theme] .webai-profile-modal__pagination button.is-active,
[data-webai-theme] .webai-profile-modal__update {
    border-color: var(--vx-primary);
    color: #fff;
    background: var(--vx-primary);
}

[data-webai-theme] .webai-profile-modal__membership b,
[data-webai-theme] .webai-profile-modal__sidebar-balance strong,
[data-webai-theme] .webai-profile-modal__history-status.is-completed {
    color: var(--vx-primary);
    background: var(--vx-primary-faint);
}

[data-webai-theme] .webai-profile-modal__sidebar-balance {
    border-color: var(--vx-border-strong);
    background: var(--vx-primary-faint);
}

[data-webai-theme] .webai-profile-modal__sidebar-balance strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

[data-webai-theme] .webai-profile-modal__sidebar-balance strong b {
    color: #fff;
}

[data-webai-theme] .webai-profile-modal__coin {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    border-radius: 50%;
    object-fit: contain;
    filter: drop-shadow(0 2px 3px rgba(146, 64, 14, 0.3));
}

/* Keep the VietQR Select2 list in the same surface system as the profile modal. */
[data-webai-theme] .webai-vietqr-select-dropdown.select2-dropdown,
[data-webai-theme] .webai-vietqr-select-dropdown .select2-search--dropdown,
[data-webai-theme] .webai-vietqr-select-dropdown .select2-results,
[data-webai-theme] .webai-vietqr-select-dropdown .select2-results__options {
    border-color: var(--vx-border);
    color: var(--vx-text);
    background: var(--vx-surface-solid);
}

[data-webai-theme] .webai-vietqr-select-dropdown .select2-search__field {
    border-color: var(--vx-border) !important;
    color: var(--vx-text);
    background: var(--vx-surface-soft);
}

[data-webai-theme] .webai-vietqr-select-dropdown .select2-results__option--selected {
    color: var(--vx-text);
    background: var(--vx-primary-faint);
}

[data-webai-theme] .webai-vietqr-select-dropdown .select2-results__option--highlighted.select2-results__option--selectable {
    color: #fff;
    background: var(--vx-primary);
}

[data-webai-theme] .webai-vietqr-select-dropdown .select2-results__option--highlighted .webai-bank-option__copy strong,
[data-webai-theme] .webai-vietqr-select-dropdown .select2-results__option--highlighted .webai-bank-option__copy small {
    color: #fff;
}

/* Profile actions use the same primary token as every other client CTA. */
[data-webai-theme] .webai-profile-modal__edit,
[data-webai-theme] .webai-profile-modal.is-editing .webai-profile-modal__edit,
[data-webai-theme] .webai-profile-modal__update {
    border-color: var(--vx-primary);
}

[data-webai-theme] .webai-profile-modal.is-editing .webai-profile-modal__edit,
[data-webai-theme] .webai-profile-modal__update {
    color: #fff;
    background: var(--vx-primary);
}

[data-webai-theme] .webai-profile-modal__details input,
[data-webai-theme] .webai-profile-modal__details input[readonly],
[data-webai-theme]
    .webai-profile-modal
    .select2-container
    .select2-selection--single,
[data-webai-theme] .webai-profile-modal__history-table th,
[data-webai-theme] .webai-profile-modal__pagination button {
    border-color: var(--vx-border);
    color: var(--vx-text);
    background: var(--vx-surface-soft);
}

[data-webai-theme] .webai-credit-payment-back,
[data-webai-theme] .webai-credit-payment-eyebrow,
[data-webai-theme] .webai-credit-payment-total dd,
[data-webai-theme] .webai-credit-payment-success,
[data-webai-theme] .webai-event-modal__eyebrow {
    color: var(--vx-primary);
}

[data-webai-theme] .webai-credit-payment-credits {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
}

[data-webai-theme] .webai-credit-payment-coin {
    display: inline-block;
    width: 19px;
    min-width: 19px;
    height: 19px;
    max-width: 19px;
    max-height: 19px;
    border: 1px solid #ffb11b;
    border-radius: 50%;
    background-position: center;
    background-size: cover;
    object-fit: cover;
    box-shadow: 0 0 5px rgba(255, 177, 27, .8);
}

[data-webai-theme] .webai-credit-payment-qr img,
[data-webai-theme] .webai-credit-payment-qr-empty {
    border-color: var(--vx-border-strong);
}

[data-webai-theme] .webai-credit-payment-qr-empty,
[data-webai-theme] .webai-credit-payment-success,
[data-webai-theme] .webai-credit-payment-success__icon {
    color: var(--vx-primary);
}

[data-webai-theme] .webai-credit-payment-success__icon {
    background: var(--vx-primary-faint);
}

/* Remove the remaining legacy emerald accents from affiliate states. */
[data-webai-theme] .affiliate-alert:not(.affiliate-alert--error) {
    border-color: var(--vx-border-strong);
    color: var(--vx-primary);
    background: var(--vx-primary-faint);
}

[data-webai-theme] .affiliate-kpi:first-child span::first-letter,
[data-webai-theme] .affiliate-heading-icon,
[data-webai-theme] .affiliate-heading-icon--green,
[data-webai-theme] .affiliate-copy-box strong,
[data-webai-theme] .affiliate-copy-box--green strong,
[data-webai-theme] .affiliate-explain h3,
[data-webai-theme] .affiliate-policy h3,
[data-webai-theme] .affiliate-explain b,
[data-webai-theme] .affiliate-tabs button.is-active,
[data-webai-theme] .affiliate-entry--earned,
[data-webai-theme] .affiliate-entry--paid,
[data-webai-theme] .affiliate-detail-link,
[data-webai-theme] .is-positive {
    color: var(--vx-primary) !important;
}

[data-webai-theme] .affiliate-copy-box button,
[data-webai-theme] .affiliate-copy-box--green button,
[data-webai-theme] .affiliate-tabs button.is-active {
    border-color: var(--vx-border-strong);
}

[data-webai-theme] .affiliate-copy-box button,
[data-webai-theme] .affiliate-copy-box--green button,
[data-webai-theme] .affiliate-entry--earned,
[data-webai-theme] .affiliate-entry--paid {
    background: var(--vx-primary-faint);
}

[data-webai-theme] .affiliate-copy-box button:hover,
[data-webai-theme] .affiliate-copy-box button:focus-visible,
[data-webai-theme] .affiliate-copy-box--green button:hover,
[data-webai-theme] .affiliate-copy-box--green button:focus-visible {
    color: #fff;
    background: var(--vx-primary);
}

[data-webai-theme] .webai-auth-form .btn,
[data-webai-theme] .webai-auth-form button[type="submit"] {
    border-color: var(--vx-primary);
    color: #fff;
    background: linear-gradient(135deg, #2563eb, #0284c7);
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.2);
}

[data-webai-theme] .webai-auth-form a,
[data-webai-theme] .webai-auth-form .auth-card__header-icon {
    color: var(--vx-primary);
}

[data-webai-theme] .webai-auth-form .auth-card,
[data-webai-theme] .webai-auth-form .auth-card.card {
    border-color: var(--vx-border);
    background: var(--vx-surface) !important;
}

[data-webai-theme] .webai-auth-form .auth-card__header-icon {
    border-color: var(--vx-border-strong);
    background: var(--vx-primary-faint) !important;
}

[data-webai-theme] .webai-auth-form .auth-card__header-title {
    color: var(--vx-text) !important;
}

[data-webai-theme] .webai-auth-form .auth-card__header-description {
    color: var(--vx-muted) !important;
}

:root[data-webai-theme="dark"] .webai-auth-form .form-control,
:root[data-webai-theme="dark"] .webai-auth-form .form-select,
:root[data-webai-theme="dark"] .webai-profile-modal__details input,
:root[data-webai-theme="dark"]
    .webai-profile-modal
    .select2-container
    .select2-selection--single {
    background: #0a1d34;
}

@media (max-width: 880px) {
    .webai-theme-toggle {
        width: 56px;
        height: 34px;
    }

    .webai-theme-toggle__thumb {
        width: 26px;
        height: 26px;
    }

    .webai-theme-toggle[aria-pressed="true"] .webai-theme-toggle__thumb {
        transform: translateX(23px);
    }

    .webai-theme-toggle__icon {
        top: 9px;
        width: 15px;
        height: 15px;
    }

    .webai-theme-toggle__icon--sun {
        left: 8px;
    }

    .webai-theme-toggle__icon--moon {
        right: 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body,
    .webai-shell,
    .webai-main,
    .webai-page,
    .webai-aave-header__nav,
    .webai-theme-toggle__thumb,
    .webai-theme-toggle__icon {
        transition: none;
    }
}