/* Global CursoVy theme — sol / luna */

.vy-theme-switch {
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}

.vy-theme-switch:focus-visible .vy-theme-switch__track {
    outline: 2px solid rgba(45, 138, 158, 0.55);
    outline-offset: 3px;
}

.vy-theme-switch--float {
    position: fixed;
    top: calc(var(--hub-status-offset, 0px) + 14px);
    right: 16px;
    z-index: 9990;
}

.vy-theme-switch__track {
    position: relative;
    display: block;
    width: 72px;
    height: 38px;
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: #1c1c1e;
    box-shadow:
        inset 0 2px 8px rgba(0, 0, 0, 0.55),
        inset 0 -1px 0 rgba(255, 255, 255, 0.04),
        0 1px 0 rgba(255, 255, 255, 0.04);
    transition:
        background 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.vy-theme-switch:hover .vy-theme-switch__track {
    box-shadow:
        inset 0 2px 8px rgba(0, 0, 0, 0.55),
        inset 0 -1px 0 rgba(255, 255, 255, 0.06),
        0 0 0 1px rgba(255, 255, 255, 0.06);
}

html.vy-light .vy-theme-switch:hover .vy-theme-switch__track {
    box-shadow:
        inset 0 3px 10px rgba(0, 0, 0, 0.1),
        inset 0 -2px 5px rgba(255, 255, 255, 0.95),
        0 0 0 1px rgba(0, 0, 0, 0.04);
}

.vy-theme-switch__knob {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #e8e8ed;
    box-shadow:
        0 2px 10px rgba(0, 0, 0, 0.22),
        0 1px 2px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
    transform: translateX(34px);
    transition:
        transform 0.5s cubic-bezier(0.34, 1.35, 0.64, 1),
        box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 2;
}

html.vy-light .vy-theme-switch__knob {
    transform: translateX(0);
    box-shadow:
        0 3px 12px rgba(0, 0, 0, 0.14),
        0 1px 3px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 1);
}

.vy-theme-switch:active .vy-theme-switch__knob {
    transform: translateX(34px) scale(0.96);
}

html.vy-light .vy-theme-switch:active .vy-theme-switch__knob {
    transform: translateX(0) scale(0.96);
}

.vy-theme-switch__icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
    z-index: 1;
    pointer-events: none;
    transition:
        opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        color 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.5s cubic-bezier(0.34, 1.35, 0.64, 1);
}

.vy-theme-switch__icon svg {
    width: 15px;
    height: 15px;
    display: block;
}

.vy-theme-switch__icon--sun {
    right: 11px;
    color: rgba(255, 255, 255, 0.28);
}

.vy-theme-switch__icon--moon {
    left: 11px;
    color: rgba(255, 255, 255, 0.95);
}

html:not(.vy-light) .vy-theme-switch__icon--sun {
    opacity: 0.35;
    transform: translateY(-50%) scale(0.92);
}

html:not(.vy-light) .vy-theme-switch__icon--moon {
    opacity: 1;
    transform: translateY(-50%) scale(1);
    color: #ffffff;
}

html.vy-light .vy-theme-switch__icon--sun {
    opacity: 1;
    transform: translateY(-50%) scale(1);
    color: #8e8e93;
}

html.vy-light .vy-theme-switch__icon--moon {
    opacity: 0.28;
    transform: translateY(-50%) scale(0.9);
    color: #aeaeb2;
}

html.vy-light .vy-theme-switch__track {
    background: #ececf0;
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow:
        inset 0 3px 10px rgba(0, 0, 0, 0.11),
        inset 0 -2px 6px rgba(255, 255, 255, 0.92),
        0 1px 0 rgba(255, 255, 255, 0.85);
}

.vy-theme-flash {
    position: fixed;
    inset: 0;
    z-index: 99999;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.vy-theme-flash.is-to-light { background: #ffffff; }
.vy-theme-flash.is-to-dark { background: #000000; }
.vy-theme-flash.is-show { opacity: 0.42; }

html.vy-theme-animating,
html.vy-theme-animating body,
html.vy-theme-animating .home-nav,
html.vy-theme-animating .hub-page-nav,
html.vy-theme-animating .vy-sidebar,
html.vy-theme-animating .vy-chat,
html.vy-theme-animating .vy-compose,
html.vy-theme-animating header.vc-nav,
html.vy-theme-animating nav,
html.vy-theme-animating main,
html.vy-theme-animating .kpi,
html.vy-theme-animating .modal,
html.vy-theme-animating .login-card {
    transition:
        background 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        background-color 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        color 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.55s;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Shared tokens */
html.vy-light {
    color-scheme: light;
    --bg-void: #f2f2f7;
    --bg-deep: #ebebef;
    --bg-elev: #ffffff;
    --bg: #f2f2f7;
    --bg-card: rgba(255, 255, 255, 0.94);
    --bg-card-solid: #ffffff;
    --bg2: #ebebef;
    --card: rgba(255, 255, 255, 0.96);
    --border: rgba(0, 0, 0, 0.09);
    --border-strong: rgba(0, 0, 0, 0.12);
    --border-s: rgba(0, 0, 0, 0.12);
    --border-glow: rgba(0, 0, 0, 0.16);
    --text: #1d1d1f;
    --head: #000000;
    --muted: #6e6e73;
    --muted-soft: #86868b;
    --accent: #1d1d1f;
    --panel: rgba(0, 0, 0, 0.03);
    --panel-strong: rgba(0, 0, 0, 0.06);
    --vc-bg: #f2f2f7;
    --vc-card: rgba(255, 255, 255, 0.94);
    --vc-border: rgba(0, 0, 0, 0.09);
    --vc-border-strong: rgba(0, 0, 0, 0.12);
    --vc-text: #1d1d1f;
    --vc-head: #000000;
    --vc-muted: #6e6e73;
    --bg-2: #ebebef;
    --accent-light: #424245;
    --accent-pale: #000000;
    --accent-glow: rgba(0, 0, 0, 0.08);
    --accent-soft: rgba(0, 0, 0, 0.05);
    --violet: #7c3aed;
}

.nav-cta,
.vy-panel-nav__cta,
.dash-actions,
.home-nav-meta,
.hub-nav-mobile-actions,
.vc-actions,
.nav-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

body.hub-page-home .vy-theme-switch,
.home-nav-meta .vy-theme-switch,
.hub-nav-mobile-actions .vy-theme-switch {
    position: relative;
    z-index: 5;
    flex-shrink: 0;
}

html.vy-light body {
    color: var(--text);
}

html.vy-light .home-bg,
html.vy-light .login-bg,
html.vy-light .bg,
html.vy-light .vc-bg,
html.vy-light .grid-bg {
    background: var(--bg-void) !important;
}

html.vy-light .home-nav,
html.vy-light .hub-page-nav,
html.vy-light header.vc-nav,
html.vy-light nav {
    background: rgba(255, 255, 255, 0.86) !important;
    border-bottom-color: rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}

html.vy-light .home-bg-grid,
html.vy-light .login-bg-grid,
html.vy-light .vc-bg-grid {
    opacity: 0.35;
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
}

html.vy-light .home-orb,
html.vy-light .vc-bg-noise,
html.vy-light .home-bg-noise,
html.vy-light .login-bg-noise {
    opacity: 0.12;
}

html.vy-light .nav-pill,
html.vy-light .hub-nav-cta,
html.vy-light .hub-btn,
html.vy-light .btn-hero,
html.vy-light .vc-btn,
html.vy-light .nav-btn {
    border-color: rgba(0, 0, 0, 0.1);
    background: rgba(0, 0, 0, 0.04);
    color: var(--text);
}

html.vy-light .nav-pill:hover,
html.vy-light .hub-btn:hover,
html.vy-light .btn-hero:hover,
html.vy-light .vc-btn:hover,
html.vy-light .nav-btn:hover {
    background: rgba(0, 0, 0, 0.07);
    color: var(--head);
}

html.vy-light .lg-card,
html.vy-light .login-card,
html.vy-light .shop-card,
html.vy-light .split-card,
html.vy-light .kpi,
html.vy-light .modal,
html.vy-light .vc-keys-panel,
html.vy-light .vc-toolbar,
html.vy-light .vc-modal__panel {
    background: rgba(255, 255, 255, 0.96) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08) !important;
}

html.vy-light .form-input,
html.vy-light .field input,
html.vy-light .vc-toolbar__search input,
html.vy-light .vc-key-results__input,
html.vy-light input,
html.vy-light textarea,
html.vy-light select {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.12);
    color: var(--head);
}

html.vy-light table tbody tr:hover {
    background: rgba(0, 0, 0, 0.03);
}

html.vy-light .global-status {
    background: #fff;
    border-bottom-color: rgba(0, 0, 0, 0.08);
}

html.vy-light .cursor-dot,
html.vy-light .cursor-ring {
    mix-blend-mode: normal;
}

html.vy-light .cursor-dot {
    background: #000;
}

html.vy-light .cursor-ring {
    border-color: rgba(0, 0, 0, 0.35);
}

html.vy-light .vy-sidebar,
html.vy-light .vy-chat__toolbar,
html.vy-light .vy-compose,
html.vy-light .vy-new-chat,
html.vy-light .vy-session.is-active,
html.vy-light .vy-modal__card,
html.vy-light .vy-cli {
    background: rgba(255, 255, 255, 0.94);
    border-color: rgba(0, 0, 0, 0.1);
}

html.vy-light body.hub-page-vycosito {
    background: radial-gradient(120% 80% at 50% -8%, rgba(0, 0, 0, 0.03) 0%, var(--bg) 46%), var(--bg);
}

html.vy-light .vy-blob { opacity: 0.18; }
html.vy-light .vy-vignette { opacity: 0; }

html.vy-light .dash-page-root {
    background: transparent !important;
}

html.vy-light .app-bg {
    background:
        radial-gradient(ellipse 100% 60% at 50% 0, rgba(34, 158, 217, 0.05) 0, transparent 55%),
        radial-gradient(ellipse 80% 50% at 50% 100%, rgba(191, 90, 242, 0.03) 0, transparent 60%),
        radial-gradient(ellipse 60% 40% at 100% 30%, rgba(48, 209, 88, 0.03) 0, transparent 60%) !important;
}

html.vy-light .bg {
    background: var(--bg-void) !important;
}

html.vy-light .app-bg-grid {
    opacity: 1;
    mask-image: none !important;
    -webkit-mask-image: none !important;
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.06) 1px, transparent 1px) !important;
    background-size: 64px 64px !important;
}

html.vy-light .ambient-orb,
html.vy-light .vm-ambient__orb,
html.vy-light .app-bg-noise {
    opacity: 0.12;
}

html.vy-light .dash-nav,
html.vy-light .login-nav {
    background: rgba(255, 255, 255, 0.86) !important;
    border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}

html.vy-light .dash-nav-btn,
html.vy-light .dash-user,
html.vy-light .nav-mobile-menu,
html.vy-light .nav-mm-row__btn {
    border-color: rgba(0, 0, 0, 0.1);
    background: rgba(0, 0, 0, 0.04);
    color: var(--text);
}

html.vy-light .dash-nav-btn:hover,
html.vy-light .nav-mm-row__btn:hover {
    background: rgba(0, 0, 0, 0.07);
    color: var(--head);
}

html.vy-light .dash-card,
html.vy-light .service-card,
html.vy-light .dash-inbox,
html.vy-light .client-block,
html.vy-light .error-box {
    background: rgba(255, 255, 255, 0.96) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08) !important;
}

html.vy-light .service-card__cta {
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.1);
    color: var(--head);
}

html.vy-light .tabs,
html.vy-light .tab,
html.vy-light .tbl-wrap,
html.vy-light .modal-veil .modal,
html.vy-light .badge,
html.vy-light .btn-ghost,
html.vy-light .btn-primary,
html.vy-light .btn-cred {
    border-color: rgba(0, 0, 0, 0.1);
}

html.vy-light .tab.active,
html.vy-light .btn-primary {
    background: rgba(0, 0, 0, 0.08);
    color: var(--head);
}

html.vy-light .tbl-wrap tbody tr:hover {
    background: rgba(0, 0, 0, 0.03);
}

html.vy-light .vc-key-row:hover,
html.vy-light .vc-key-row.is-selected {
    background: rgba(0, 0, 0, 0.04);
}

html.vy-light .vc-modal__backdrop {
    background: rgba(0, 0, 0, 0.35);
}

/* ===== Hub nav — IA invisible, dock oscuro en secciones ===== */
html.vy-light {
    --hub-ia: #1d1d1f;
    --hub-ia-soft: rgba(0, 0, 0, 0.06);
    --hub-ia-glow: rgba(0, 0, 0, 0.1);
    --hub-servicios: #636366;
    --hub-servicios-soft: rgba(0, 0, 0, 0.05);
}

html.vy-light body.hub-layout-section .hub-page-nav,
html.vy-light body.hub-page-home .hub-page-nav,
html.vy-light body.hub-page-ia .hub-page-nav {
    background: rgba(255, 255, 255, 0.88) !important;
    border-bottom-color: rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}

html.vy-light .hub-btn--ia,
html.vy-light .hub-btn--ia:hover,
html.vy-light .hub-btn--ia.hub-btn--active {
    color: var(--hub-ia) !important;
    background: transparent !important;
}

html.vy-light .hub-btn--ia:hover {
    background: var(--hub-ia-soft) !important;
}

html.vy-light .hub-nav-dock {
    background: rgba(255, 255, 255, 0.94) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 10px 36px rgba(0, 0, 0, 0.08) !important;
}

html.vy-light .hub-fab__menu .hub-nav-dock,
html.vy-light .hub-nav-dock--fab {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

html.vy-light .hub-nav-dock--fab .hub-btn,
html.vy-light .hub-nav-dock .hub-btn {
    background: rgba(255, 255, 255, 0.98) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    color: var(--text) !important;
}

html.vy-light .hub-nav-dock .hub-btn:hover,
html.vy-light .hub-nav-dock--fab .hub-btn:hover {
    background: rgba(0, 0, 0, 0.05) !important;
    color: var(--head) !important;
}

html.vy-light .global-status,
html.vy-light .global-status__item {
    color: var(--muted) !important;
}

html.vy-light .global-status__item strong {
    color: var(--text) !important;
}

/* ===== Dashboard ===== */
html.vy-light .dash-nav {
    background: rgba(255, 255, 255, 0.92) !important;
    border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}

html.vy-light .dash-nav-dock {
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
}

html.vy-light .dash-nav-btn,
html.vy-light .dash-nav-btn--profile,
html.vy-light .dash-nav-btn--vymovie {
    color: var(--text) !important;
    background: rgba(0, 0, 0, 0.04) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
}

html.vy-light .dash-nav-btn:hover {
    background: rgba(0, 0, 0, 0.07) !important;
    color: var(--head) !important;
}

html.vy-light .client-gear-menu {
    background: rgba(255, 255, 255, 0.98) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12) !important;
}

html.vy-light .client-gear-menu__title {
    color: var(--muted) !important;
}

html.vy-light .client-gear-menu button {
    background: rgba(0, 0, 0, 0.03) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    color: var(--head) !important;
}

html.vy-light .client-gear-menu button:hover {
    background: rgba(0, 0, 0, 0.06) !important;
    border-color: rgba(0, 0, 0, 0.14) !important;
}

html.vy-light .client-gear-menu__text span {
    color: var(--muted) !important;
}

html.vy-light .client-panel {
    background: rgba(255, 255, 255, 0.96) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
}

html.vy-light .client-panel__tabs {
    background: rgba(0, 0, 0, 0.04) !important;
}

html.vy-light .client-panel__field input,
html.vy-light .client-panel__field textarea,
html.vy-light .client-panel__field select {
    background: rgba(0, 0, 0, 0.03) !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
    color: var(--head) !important;
}

html.vy-light .dash-hero.has-hero-bg,
html.vy-light .dash-hero.has-hero-bg.dash-card {
    background: #111214 !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
}

html.vy-light .dash-hero.has-hero-bg .dash-hero__overlay,
html.vy-light .dash-hero__overlay {
    background: none !important;
    opacity: 0 !important;
}

html.vy-light .dash-hero.has-hero-bg .dash-hero__bg,
html.vy-light .dash-hero__bg {
    opacity: 1 !important;
}

html.vy-light .dash-hero.has-hero-bg h1,
html.vy-light .dash-hero.has-hero-bg .dash-hero__title {
    color: #f5f5f7 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75), 0 8px 24px rgba(0, 0, 0, 0.45);
}

html.vy-light .dash-hero.has-hero-bg p,
html.vy-light .dash-hero.has-hero-bg .hero-sub {
    color: rgba(245, 245, 247, 0.88) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7), 0 6px 18px rgba(0, 0, 0, 0.4);
}

html.vy-light .dash-hero.has-hero-bg .hero-eyebrow {
    background: rgba(0, 0, 0, 0.45) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    color: rgba(245, 245, 247, 0.92) !important;
}

html.vy-light .nav-mm-row__btn,
html.vy-light .nav-mm-row__label {
    background: rgba(255, 255, 255, 0.96) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    color: var(--text) !important;
}

html.vy-light .nav-mobile-backdrop {
    background: rgba(0, 0, 0, 0.25) !important;
}

html.vy-light .dash-feed-slide__title {
    color: var(--head) !important;
}

html.vy-light .dash-feed-slide__shade {
    background: linear-gradient(to top, rgba(255, 255, 255, 0.88), transparent) !important;
}

/* ===== Admin ===== */
html.vy-light.admin-crm-ui {
    --crm-surface: rgba(255, 255, 255, 0.96);
    --crm-surface-2: rgba(255, 255, 255, 0.98);
    --crm-border: rgba(0, 0, 0, 0.1);
    --crm-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}

html.vy-light.admin-crm-ui body {
    background: var(--bg-void) !important;
    color: var(--text) !important;
}

html.vy-light .adm-rail,
html.vy-light.admin-crm-ui .adm-rail {
    background: rgba(255, 255, 255, 0.94) !important;
    border-right-color: rgba(0, 0, 0, 0.1) !important;
}

html.vy-light .adm-rail-nav-wrap::before,
html.vy-light .adm-rail-nav-wrap::after,
html.vy-light.admin-crm-ui .adm-rail-nav-wrap::before,
html.vy-light.admin-crm-ui .adm-rail-nav-wrap::after {
    background: linear-gradient(to bottom, rgba(242, 242, 247, 0.98), transparent) !important;
}

html.vy-light .adm-rl,
html.vy-light.admin-crm-ui .adm-rl {
    color: var(--text) !important;
}

html.vy-light .adm-rl:hover,
html.vy-light .adm-rl.is-active,
html.vy-light.admin-crm-ui .adm-rl:hover,
html.vy-light.admin-crm-ui .adm-rl.is-active {
    background: rgba(0, 0, 0, 0.05) !important;
    color: var(--head) !important;
}

html.vy-light .adm-topbar,
html.vy-light.admin-crm-ui .adm-topbar {
    background: rgba(255, 255, 255, 0.92) !important;
    border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}

html.vy-light .adm-card,
html.vy-light.admin-crm-ui .adm-card {
    background: rgba(255, 255, 255, 0.96) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06) !important;
}

html.vy-light .adm-card-desc,
html.vy-light.admin-crm-ui .adm-card-desc {
    color: var(--muted) !important;
}

html.vy-light .table-wrap,
html.vy-light .cc-catalog-item {
    background: rgba(255, 255, 255, 0.96) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
}

html.vy-light .cc-catalog-thumb {
    background: rgba(0, 0, 0, 0.04) !important;
}

html.vy-light .adm-section,
html.vy-light .adm-shell {
    background: transparent !important;
}

/* ===== Perfil: formulario claro; la card Discord conserva su color ===== */
html.vy-light .pf-editor-card {
    background: rgba(255, 255, 255, 0.96) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
}

html.vy-light .pf-editor-card select option {
    background: #fff !important;
    color: var(--head) !important;
}

html.vy-light .pf-crop-view {
    background: #f2f2f7 !important;
}

/* Preview text stays Discord-dark; do not paint the card white. */
html.vy-light .pf-discord-card,
html.vy-light .pf-discord-card.pf-shell,
html.vy-light #pf-preview-shell,
html.vy-light #pf-dc-shell {
    --head: #f5f5f7;
    --text: #b5bac1;
    --muted: #b5bac1;
    --border: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.14);
    color-scheme: dark;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html.vy-light .pf-discord-frame:not([data-custom="1"]) .pf-discord-card,
html.vy-light .pf-discord-frame:not([data-custom="1"]) .pf-shell {
    --card: #1e1f22;
    background: #1e1f22;
}

/* Custom frame is the accent. Inner card must stay transparent so
   the body tint composites on that color — same as the public profile. */
.pf-discord-frame[data-custom="1"] .pf-discord-card,
.pf-discord-frame[data-custom="1"] .pf-shell,
html.vy-light .pf-discord-frame[data-custom="1"] .pf-discord-card,
html.vy-light .pf-discord-frame[data-custom="1"] .pf-shell {
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ===== VyMovie ===== */
html.vy-light .vm-profile-gate {
    background: radial-gradient(ellipse 100% 100% at 50% 0%, #f2f2f7, #ebebef) !important;
}

html.vy-light .vm-profile-gate__h,
html.vy-light .vm-profile-gate__card,
html.vy-light .vm-profile-gate__kicker,
html.vy-light .vm-profile-gate__kletter {
    color: var(--head) !important;
    text-shadow: none !important;
}

html.vy-light .vm-profile-gate__hint {
    color: var(--muted) !important;
}

html.vy-light .vm-profile-gate__rule {
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.2), transparent) !important;
}

html.vy-light .xtr-header {
    background: rgba(255, 255, 255, 0.92) !important;
}

html.vy-light .xtr-header.scrolled {
    background: rgba(255, 255, 255, 0.96) !important;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08) !important;
}

html.vy-light .xtr-logo,
html.vy-light .xtr-nav__tab,
html.vy-light .xtr-nav__tab.active {
    color: var(--text) !important;
}

html.vy-light .xtr-nav__tab.active {
    color: var(--head) !important;
    font-weight: 600;
}

html.vy-light .xtr-nav__tab:hover {
    color: var(--head) !important;
}

html.vy-light .xtr-search {
    background: rgba(0, 0, 0, 0.04) !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
}

html.vy-light .xtr-search input {
    color: var(--head) !important;
}

html.vy-light .xtr-search input::placeholder {
    color: var(--muted) !important;
}

html.vy-light .vm-profile-pop {
    background: rgba(255, 255, 255, 0.98) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12) !important;
}

html.vy-light .vm-profile-pop__btn {
    color: var(--text) !important;
}

html.vy-light .vm-profile-pop__btn:hover {
    background: rgba(0, 0, 0, 0.05) !important;
    color: var(--head) !important;
}

html.vy-light #vm-cast-modal-box {
    background: rgba(255, 255, 255, 0.98) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    color: var(--text) !important;
}

html.vy-light body.vm-app,
html.vy-light .vm-page,
html.vy-light #vm-preloader {
    background: var(--bg-void) !important;
}

html.vy-theme-animating .vy-msgs-wrap,
html.vy-theme-animating .dash-nav,
html.vy-theme-animating .dash-card,
html.vy-theme-animating .service-card,
html.vy-theme-animating .vc-nav,
html.vy-theme-animating .vc-keys-panel {
    transition:
        background 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        background-color 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        color 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

@media (max-width: 640px) {
    .vy-theme-switch--float {
        top: auto;
        bottom: 16px;
        right: 16px;
    }
}

/* ===== Light: headers that stayed black + glass overlays ===== */
html.vy-light .dash-nav,
html.vy-light header.dash-nav {
    background: rgba(255, 255, 255, 0.92) !important;
    border-bottom-color: rgba(0, 0, 0, 0.08) !important;
    backdrop-filter: blur(22px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(160%) !important;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}

html.vy-light header.cc-nav,
html.vy-light .cc-nav,
html.vy-light header.obm-nav,
html.vy-light .obm-nav,
html.vy-light header.mtd-nav,
html.vy-light .mtd-nav,
html.vy-light header.vc-nav,
html.vy-light .vc-nav {
    background: rgba(255, 255, 255, 0.92) !important;
    border-bottom-color: rgba(0, 0, 0, 0.08) !important;
    backdrop-filter: blur(22px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(160%) !important;
    color: var(--text);
}

html.vy-light .obm-brand,
html.vy-light .mtd-brand,
html.vy-light .cc-brand,
html.vy-light .vc-brand,
html.vy-light .dash-nav .brand,
html.vy-light .dash-brand,
html.vy-light .dash-brand span,
html.vy-light .obm-brand small,
html.vy-light .mtd-brand small,
html.vy-light .vc-brand small {
    color: var(--head);
}

html.vy-light .lg-effect,
html.vy-light .lg-tint,
html.vy-light .lg-shine,
html.vy-light .dash-nav .lg-effect,
html.vy-light .dash-nav .lg-tint,
html.vy-light .dash-nav .lg-shine {
    display: none !important;
    opacity: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
    box-shadow: none !important;
}

html.vy-light header.dash-nav.lg-wrapper,
html.vy-light .dash-nav.lg-wrapper {
    background: rgba(255, 255, 255, 0.94) !important;
    border-bottom-color: rgba(0, 0, 0, 0.08) !important;
    backdrop-filter: blur(22px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(160%) !important;
}

html.vy-light .dash-user,
html.vy-light .nav-status {
    color: var(--muted) !important;
}

html.vy-light .dash-user strong {
    color: var(--head) !important;
}

html.vy-light .dash-nav .btn-ghost,
html.vy-light .ix-btn {
    background: rgba(0, 0, 0, 0.04) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    color: var(--head) !important;
}

html.vy-light .ix-btn {
    color: #0a7ab8 !important;
    background: rgba(34, 158, 217, 0.1) !important;
    border-color: rgba(34, 158, 217, 0.28) !important;
}

html.vy-light .claude-terminal,
html.vy-light .lg-wrapper .claude-terminal {
    background: rgba(255, 255, 255, 0.96) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.1) !important;
}

html.vy-light .bsw-header {
    color: var(--muted) !important;
    border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}

html.vy-light .kpi strong,
html.vy-light .group-sub strong,
html.vy-light .cc-weekly-stat strong {
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: #1d1d1f !important;
    color: #1d1d1f !important;
}

html.vy-light .kpi--blue::after,
html.vy-light .kpi--green::after,
html.vy-light .kpi--purple::after {
    display: none !important;
}

html.vy-light .group-tile {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.06) !important;
}

html.vy-light .group-tile::after {
    opacity: 0 !important;
    background: none !important;
}

html.vy-light .cc-weekly,
html.vy-light .cc-date-panel {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.07) !important;
}

html.vy-light .cc-weekly-stat {
    background: rgba(0, 0, 0, 0.03) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    color: var(--head) !important;
}

html.vy-light .cc-day-cell {
    border-color: rgba(0, 0, 0, 0.08) !important;
    color: #1d1d1f !important;
}

html.vy-light .cc-day-cell:not([data-level]),
html.vy-light .cc-day-cell[data-level="0"] {
    background: rgba(0, 0, 0, 0.04) !important;
}

html.vy-light .cc-month-btn {
    background: rgba(0, 0, 0, 0.04) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    color: var(--head) !important;
}

html.vy-light .cc-promo-banner__veil,
html.vy-light .obm-promo-banner__veil,
html.vy-light .mtd-promo-banner__veil,
html.vy-light .vc-promo-banner__veil {
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.12) 0%,
        rgba(0, 0, 0, 0.28) 100%
    ) !important;
}

html.vy-light .obm-cat,
html.vy-light .mtd-cat {
    background: rgba(0, 0, 0, 0.04) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    color: #1d1d1f !important;
}

html.vy-light .obm-cat .vl-cat__count,
html.vy-light .mtd-cat .vl-cat__count {
    color: #6e6e73 !important;
    background: rgba(0, 0, 0, 0.06) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

html.vy-light .obm-cat:hover,
html.vy-light .mtd-cat:hover {
    background: rgba(0, 0, 0, 0.07) !important;
    color: #000 !important;
}

html.vy-light .obm-cat.is-active,
html.vy-light .mtd-cat.is-active {
    color: #fff !important;
    background: linear-gradient(135deg, #229ed9 0%, #1a7eb5 100%) !important;
    border-color: transparent !important;
}

html.vy-light .obm-search,
html.vy-light .mtd-search {
    background: #fff !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
    color: var(--head);
}

html.vy-light .vc-tabs {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.08) !important;
}

html.vy-light .vc-tabs::after {
    opacity: 0.4;
}

html.vy-light .vc-tabs__glide {
    background: linear-gradient(145deg, rgba(34, 158, 217, 0.18), rgba(34, 158, 217, 0.08)) !important;
    border-color: rgba(34, 158, 217, 0.42) !important;
    box-shadow: 0 0 18px rgba(34, 158, 217, 0.12) !important;
}

html.vy-light .vc-tab {
    color: #6e6e73 !important;
}

html.vy-light .vc-tab:hover,
html.vy-light .vc-tab.is-active {
    color: #1d1d1f !important;
    text-shadow: none !important;
}

html.vy-light .vc-tab.is-active i {
    color: #229ed9 !important;
}

html.vy-light .vc-feed .vc-card,
html.vy-light #vc-grid .vc-card {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

html.vy-light .vc-card__title {
    color: #1d1d1f !important;
}

html.vy-light .vc-card__desc,
html.vy-light .vc-card__date {
    color: #6e6e73 !important;
}

html.vy-light .vc-prog-pill {
    background: rgba(0, 0, 0, 0.04) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    color: #1d1d1f !important;
}

html.vy-light .vc-prog-pill.is-active {
    color: #1d1d1f !important;
}

/* VIPConfigs keys · light contrast (injected after page CSS) */
html.vy-light {
    --vc-keys-cyan: #0369a1;
    --vc-keys-sky: #0284c7;
    --vc-keys-violet: #6d28d9;
    --vc-keys-active: #059669;
    --vc-keys-active-text: #047857;
    --vc-keys-warn-text: #b45309;
    --vc-keys-danger-text: #b91c1c;
}

html.vy-light .vc-keys-panel__sub,
html.vy-light .vc-key-stats__meta,
html.vy-light .vc-key-results__meta,
html.vy-light .vc-key-chart__hint {
    color: #3f5b6e !important;
}

html.vy-light .vc-keys-panel__title,
html.vy-light .vc-key-stats__title,
html.vy-light .vc-key-results__title,
html.vy-light .vc-key-chart__val,
html.vy-light .vc-key-chart__val.is-peak-val {
    color: #1d1d1f !important;
}

html.vy-light .vc-key-row.is-active .vc-key-row__badge,
html.vy-light .vc-key-row.is-active .vc-key-row__preview,
html.vy-light .vc-key-row.is-active .vc-key-row__full,
html.vy-light .vc-key-row.is-active .vc-key-reveal,
html.vy-light .vc-key-row.is-active .vc-key-meta [data-vc-key-estado] {
    color: #047857 !important;
}

html.vy-light .vc-key-row__preview,
html.vy-light .vc-key-row__full,
html.vy-light .vc-key-reveal,
html.vy-light .vc-key-meta div:nth-child(1) dd {
    color: #0369a1 !important;
}

html.vy-light .vc-key-row.is-active .vc-key-row__full {
    color: #047857 !important;
}

html.vy-light .vc-keys-stat:nth-child(2) .vc-keys-stat__value {
    color: #6d28d9 !important;
}

html.vy-light .vc-key-meta div:nth-child(2) dd {
    color: #b45309 !important;
}