body {
    background-color: #0d1321;
    color: #f8fafc;
    font-family: 'Nunito Sans', sans-serif;
    overflow-x: hidden;
}

body.vyl-bg-cosmic {
    background:
        radial-gradient(circle at 18% 12%, rgba(184, 166, 255, 0.11), transparent 28%),
        radial-gradient(circle at 86% 18%, rgba(76, 212, 148, 0.06), transparent 30%),
        linear-gradient(145deg, #0a0a0e 0%, #09090d 48%, #0f0f14 100%);
}

body.vyl-bg-eclipse {
    background:
        radial-gradient(circle at 72% 8%, rgba(184, 166, 255, 0.12), transparent 24%),
        linear-gradient(155deg, #050506 0%, #0a0a0e 52%, #111016 100%);
}

body.vyl-bg-aurora {
    background:
        radial-gradient(circle at 12% 22%, rgba(76, 212, 148, 0.12), transparent 28%),
        radial-gradient(circle at 80% 14%, rgba(184, 166, 255, 0.09), transparent 26%),
        linear-gradient(145deg, #080b0d 0%, #0b1010 54%, #0d1015 100%);
}

body.vyl-bg-steel {
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.055), transparent 26%),
        linear-gradient(145deg, #0a0b0f 0%, #0d0f14 50%, #101116 100%);
}

body.vyl-bg-pearl {
    background:
        radial-gradient(circle at 12% 8%, rgba(93, 191, 232, 0.24), transparent 31%),
        radial-gradient(circle at 88% 18%, rgba(138, 214, 246, 0.18), transparent 29%),
        radial-gradient(circle at 62% 88%, rgba(96, 137, 205, 0.18), transparent 34%),
        linear-gradient(145deg, #183246 0%, #254f68 48%, #2d6880 100%);
}

body.vyl-bg-mist {
    background:
        radial-gradient(circle at 74% 2%, rgba(91, 214, 232, 0.2), transparent 31%),
        radial-gradient(circle at 8% 76%, rgba(120, 154, 255, 0.16), transparent 30%),
        radial-gradient(circle at 36% 24%, rgba(255, 255, 255, 0.08), transparent 28%),
        linear-gradient(145deg, #1b3343 0%, #24495b 52%, #2f6070 100%);
}

body.vyl-bg-daybreak {
    background:
        radial-gradient(circle at 16% 13%, rgba(255, 193, 104, 0.24), transparent 33%),
        radial-gradient(circle at 84% 9%, rgba(113, 188, 228, 0.18), transparent 31%),
        radial-gradient(circle at 70% 82%, rgba(255, 143, 112, 0.14), transparent 34%),
        linear-gradient(145deg, #3a2d1f 0%, #544127 50%, #285064 100%);
}

body.vyl-bg-solstice {
    background:
        radial-gradient(circle at 15% 12%, rgba(255, 128, 139, 0.22), transparent 32%),
        radial-gradient(circle at 86% 12%, rgba(111, 206, 255, 0.18), transparent 32%),
        radial-gradient(circle at 42% 86%, rgba(255, 178, 126, 0.16), transparent 34%),
        linear-gradient(145deg, #402a32 0%, #5a3c45 48%, #2d5267 100%);
}

/*
 * VylMoon internal typography system
 * - UI: navigation, controls and explanatory copy.
 * - Display: page and section hierarchy.
 * - Data: financial values, tickers, timestamps and technical identifiers.
 */
:root {
    --font-ui: 'Nunito Sans', sans-serif;
    --font-display: 'Outfit', sans-serif;
    --font-data: 'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, monospace;
}

.font-ui {
    font-family: var(--font-ui);
}

.font-display,
h1,
h2,
h3,
h4,
h5,
h6,
h1.font-ui,
h2.font-ui,
h3.font-ui,
h4.font-ui,
h5.font-ui,
h6.font-ui {
    font-family: var(--font-display);
}

p,
li {
    font-family: var(--font-ui);
}

.type-ui {
    font-family: var(--font-ui);
}

.type-display {
    font-family: var(--font-display);
}

.type-data {
    font-family: var(--font-data);
    font-variant-numeric: tabular-nums slashed-zero;
}

.ui-caption {
    font-family: var(--font-ui);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0.025em;
}

.ui-control {
    font-family: var(--font-ui);
    font-weight: 700;
    letter-spacing: 0.015em;
}

.data-value {
    font-family: var(--font-data);
    font-variant-numeric: tabular-nums slashed-zero;
}

/* Canvas de fondo */
#particles-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: 0.6; /* Mayor opacidad para que resalte más */
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #2d3748;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #4a5568;
}

.vylmoon-scroll-hidden {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.vylmoon-scroll-hidden::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

/* Glass HUD (now solid panel) */
.glass-hud {
    background: #151e2f;
    border: 1px solid rgba(255, 255, 255, 0.03);
    box-shadow: 0 8px 20px -4px rgba(0, 0, 0, 0.4);
    border-radius: 1rem;
}

.positions-orders-panel {
    margin-top: 16px;
    background:
        linear-gradient(180deg, rgba(22, 30, 52, .88), rgba(18, 21, 39, .92)),
        rgba(12, 18, 33, .94);
    border-color: rgba(118, 187, 255, .18);
    box-shadow:
        0 18px 42px rgba(0, 0, 0, .24),
        inset 0 1px 0 rgba(255, 255, 255, .045);
}

.positions-orders-panel::before {
    content: "";
    display: block;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(34, 211, 238, .5), rgba(167, 139, 250, .28), transparent);
}

/* Sidebar Glass (now solid dashboard sidebar) */
.sidebar-glass {
    background: #0d1321;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
}

/* input[type=range] CORREGIDO */
input[type=range] {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    width: 100%;
    cursor: pointer;
}

/* La Pista (Track) */
input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 6px;
    background: #1e293b;
    border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* La Bola (Thumb) */
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    height: 18px;
    width: 18px;
    border-radius: 50%;
    background: #00d2ff;
    cursor: pointer;
    margin-top: -6px;
    box-shadow: 0 2px 4px rgba(0, 210, 255, 0.4);
    transition: transform 0.1s;
}

input[type=range]::-webkit-slider-thumb:hover {
    transform: scale(1.1);
}

/* Number Input */
input[type=number] {
    -moz-appearance: textfield;
    background: #0a0f1a;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 0.5rem;
}

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

/* Inputs & Dropdowns to match dark style */
input[type=text], select {
    background: #0a0f1a;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 0.5rem;
    color: #fff;
}

input:focus, select:focus, input[type=number]:focus {
    outline: none;
    border-color: #00d2ff;
    box-shadow: 0 0 0 1px rgba(0, 210, 255, 0.2);
}

/* Primary Buttons */
button.bg-cyber-blue {
    background: #00d2ff;
    color: #0d1321;
    font-weight: 600;
    border-radius: 0.5rem;
    border: none;
    box-shadow: 0 4px 10px rgba(0, 210, 255, 0.2);
}
button.bg-cyber-blue:hover {
    background: #00e0ff;
}

/* Animaciones */
@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 5px rgba(0, 210, 255, 0.3); }
    50% { box-shadow: 0 0 15px rgba(0, 210, 255, 0.6); }
}

.pulse-active {
    animation: pulse-glow 2s infinite;
}

/* Modal Slide */
.slide-in-right {
    animation: slideInRight 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* Live Pulsing Dot for RealTime P&L */
.live-pulse {
    animation: livePulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes livePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.1); }
}

/* Sidebar Menu Item Hover Effect */
.sidebar-item {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    transition:
        color 0.28s ease,
        background-color 0.28s ease,
        border-color 0.28s ease,
        transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.32s ease;
    border-radius: 0.5rem;
    margin: 0.25rem 0.5rem;
    color: #8b9bb4;
    font-weight: 500;
    display: flex;
    align-items: center;
    animation: sidebarItemIn 0.42s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: calc(var(--sidebar-index, 0) * 32ms);
}

.sidebar-item::after {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(105deg, transparent 15%, rgba(0, 210, 255, 0.09) 50%, transparent 78%);
    transform: translateX(-115%);
    transition: transform 0.58s cubic-bezier(0.16, 1, 0.3, 1);
}

.sidebar-item:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.045);
    transform: translateX(4px);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035);
}

.sidebar-item:hover::after {
    transform: translateX(115%);
}

.sidebar-item-icon {
    transition:
        color 0.28s ease,
        transform 0.34s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.28s ease;
}

.sidebar-item:hover .sidebar-item-icon {
    color: #8eeeff;
    transform: translateX(1px) scale(1.08);
    filter: drop-shadow(0 0 7px rgba(0, 210, 255, 0.32));
}

.sidebar-item-label {
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), letter-spacing 0.28s ease;
}

.sidebar-item:hover .sidebar-item-label {
    transform: translateX(1px);
    letter-spacing: 0.035em;
}

.sidebar-item.active {
    background: linear-gradient(90deg, rgba(0, 210, 255, 0.14) 0%, rgba(91, 127, 255, 0.055) 58%, rgba(0, 210, 255, 0) 100%);
    color: #00d2ff;
    box-shadow: inset 0 0 0 1px rgba(0, 210, 255, 0.07);
}

.sidebar-item.active::before {
    content: '';
    position: absolute;
    left: -0.5rem; /* Extends to the very edge of the sidebar padding */
    top: 10%;
    height: 80%;
    width: 3px;
    background: #00d2ff;
    border-radius: 0 2px 2px 0;
    box-shadow: 0 0 8px rgba(0, 210, 255, 0.5);
}

.sidebar-item.active svg {
    color: #00d2ff;
    filter: drop-shadow(0 0 7px rgba(0, 210, 255, 0.42));
}

.sidebar-brand {
    overflow: hidden;
}

.sidebar-brand::after {
    content: '';
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 210, 255, 0.48), rgba(176, 38, 255, 0.32), transparent);
    animation: sidebarBrandGlow 4.5s ease-in-out infinite;
}

.sidebar-footer {
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.sidebar-footer:hover {
    background: rgba(0, 210, 255, 0.018);
    border-color: rgba(0, 210, 255, 0.14);
}

.sidebar-broker-compact {
    position: relative;
    display: flex;
    width: 100%;
    min-height: 4rem;
    align-items: center;
    justify-content: center;
    border: 1px solid #223147;
    border-radius: 0.65rem;
    background: linear-gradient(145deg, #111b29, #0c1521);
    box-shadow: none;
    transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.sidebar-broker-compact:hover {
    border-color: rgba(118, 187, 255, 0.34);
    background: #142033;
    transform: translateY(-1px);
}

.sidebar-broker-compact .broker-brand-logo {
    box-shadow: none;
    transition: transform 0.2s ease;
}

.sidebar-broker-compact:hover .broker-brand-logo {
    transform: scale(1.04);
}

.sidebar-broker-status {
    position: absolute;
    right: calc(50% - 1.7rem);
    bottom: 0.52rem;
    width: 0.52rem;
    height: 0.52rem;
    border: 2px solid #0d1724;
    border-radius: 999px;
}

.sidebar-broker-status.is-connected {
    background: #4cd494;
}

.sidebar-broker-status.is-disconnected {
    background: #f87171;
}

.mobile-broker-compact {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    transition: transform 0.18s ease;
}

.mobile-broker-compact:hover {
    transform: translateY(-1px);
}

.mobile-broker-compact .broker-brand-logo {
    box-shadow: none;
}

.sidebar-backdrop {
    animation: sidebarBackdropIn 0.24s ease-out both;
}

.sidebar-settings-chevron {
    width: 0.9rem;
    height: 0.9rem;
    margin-left: auto;
    color: #52647b;
    transition: color 0.2s ease, transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.sidebar-settings-chevron.is-open {
    color: #76bbff;
    transform: rotate(180deg);
}

.settings-flyout {
    position: fixed;
    z-index: 80;
    width: 238px;
    max-height: calc(100vh - 24px);
    overflow: hidden auto;
    padding: 0.45rem;
    border: 1px solid #253650;
    border-radius: 0.72rem;
    color: #edf3fb;
    background: linear-gradient(155deg, #111d2d, #0b1421 72%);
    box-shadow: 0 20px 55px rgba(0, 0, 0, 0.48);
    animation: settingsFlyoutIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) both;
    scrollbar-width: thin;
    scrollbar-color: #31445c transparent;
}

.settings-flyout::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(118, 187, 255, 0.7), rgba(176, 38, 255, 0.28), transparent);
}

.settings-flyout-head {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.62rem 0.55rem 0.7rem;
    margin-bottom: 0.35rem;
    border-bottom: 1px solid #1f2e43;
}

.settings-flyout-head-icon,
.settings-flyout-item-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
}

.settings-flyout-head-icon {
    width: 1.8rem;
    height: 1.8rem;
    border: 1px solid rgba(118, 187, 255, 0.24);
    border-radius: 0.46rem;
    color: #76bbff;
    background: rgba(118, 187, 255, 0.08);
}

.settings-flyout-head strong,
.settings-flyout-head small {
    display: block;
}

.settings-flyout-head strong {
    font-family: var(--font-display);
    font-size: 0.76rem;
    font-weight: 750;
}

.settings-flyout-head small {
    margin-top: 0.05rem;
    color: #65768c;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.settings-flyout-list {
    display: grid;
    gap: 0.18rem;
}

.settings-flyout-item {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0.65rem;
    padding: 0.58rem 0.62rem;
    border: 1px solid transparent;
    border-radius: 0.48rem;
    color: #8797ab;
    background: transparent;
    font-family: var(--font-ui);
    font-size: 0.72rem;
    font-weight: 700;
    text-align: left;
    transition: color 0.18s ease, border-color 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
    animation: settingsFlyoutItemIn 0.26s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: calc(var(--settings-index, 0) * 24ms);
}

.settings-flyout-item:hover {
    color: #e6f1fc;
    border-color: #263850;
    background: #142135;
    transform: translateX(2px);
}

.settings-flyout-item.is-active {
    color: #dff1ff;
    border-color: rgba(118, 187, 255, 0.22);
    background: linear-gradient(90deg, rgba(118, 187, 255, 0.15), rgba(118, 187, 255, 0.035));
}

.settings-flyout-item-icon {
    width: 1.65rem;
    height: 1.65rem;
    color: #6e8097;
}

.settings-flyout-item-icon svg {
    width: 0.95rem;
    height: 0.95rem;
}

.settings-flyout-item:hover .settings-flyout-item-icon,
.settings-flyout-item.is-active .settings-flyout-item-icon {
    color: #76bbff;
}

.settings-flyout-arrow {
    width: 0.75rem;
    height: 0.75rem;
    margin-left: auto;
    color: #42536a;
}

@keyframes settingsFlyoutIn {
    from { opacity: 0; transform: translateX(-10px) scale(0.985); }
    to { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes settingsFlyoutItemIn {
    from { opacity: 0; transform: translateX(-5px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes sidebarItemIn {
    from { opacity: 0; transform: translateX(-9px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes sidebarBrandGlow {
    0%, 100% { opacity: 0.38; transform: scaleX(0.82); }
    50% { opacity: 1; transform: scaleX(1); }
}

@keyframes sidebarBackdropIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/*
 * Laptop density: Windows display scaling can reduce a 1366px laptop to
 * roughly 900-1100 CSS pixels. The JS shell turns the main sidebar into a
 * drawer in that range; short desktop viewports keep tighter vertical rhythm.
 */
@media (min-width: 1180px) and (max-height: 820px) {
    .sidebar-brand {
        padding-top: 0.65rem;
        padding-bottom: 0.65rem;
    }

    .sidebar-navigation {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    .sidebar-item {
        margin-top: 0.125rem;
        margin-bottom: 0.125rem;
        padding-top: 0.45rem;
        padding-bottom: 0.45rem;
    }

    .sidebar-footer {
        padding: 0.75rem;
    }

    .configuration-page {
        padding: 0.75rem;
    }

    .configuration-header {
        margin-bottom: 0.75rem;
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
        gap: 0.75rem;
    }

    .configuration-layout {
        gap: 0.75rem;
    }

    .configuration-nav-item {
        padding-top: 0.55rem;
        padding-bottom: 0.55rem;
    }

    .configuration-nav-icon {
        width: 2rem;
        height: 2rem;
    }
}

/* Configuration navigation */
.configuration-sidebar {
    --config-accent: #00d2ff;
    --config-accent-rgb: 0, 210, 255;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.055);
    background:
        linear-gradient(180deg, rgba(13, 19, 33, 0.98), rgba(8, 13, 24, 0.98)),
        #0d1321;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.025),
        0 18px 55px rgba(0, 0, 0, 0.24);
}

.configuration-sidebar::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    background:
        radial-gradient(circle at 20% 0%, rgba(0, 210, 255, 0.065), transparent 30%),
        radial-gradient(circle at 100% 100%, rgba(176, 38, 255, 0.045), transparent 34%);
    pointer-events: none;
}

.configuration-sidebar-head {
    position: relative;
    align-items: center;
    gap: 0.7rem;
    margin: -0.625rem -0.625rem 0.7rem;
    padding: 0.9rem 0.9rem 0.85rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
    background: rgba(10, 15, 26, 0.72);
}

.configuration-sidebar-head::after {
    content: '';
    position: absolute;
    right: 12%;
    bottom: -1px;
    left: 12%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 210, 255, 0.48), rgba(176, 38, 255, 0.32), transparent);
}

.configuration-sidebar-symbol {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0, 210, 255, 0.22);
    border-radius: 0.55rem;
    color: #00d2ff;
    background: rgba(0, 210, 255, 0.075);
    box-shadow: 0 0 18px rgba(0, 210, 255, 0.08);
}

.configuration-sidebar-head strong {
    display: block;
    color: #f8fbff;
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.configuration-sidebar-head small {
    display: block;
    overflow: hidden;
    margin-top: 0.08rem;
    color: #66758b;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.configuration-nav-item {
    --config-accent: #00d2ff;
    --config-accent-rgb: 0, 210, 255;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid transparent;
    color: #8b9bb4;
    background: transparent;
    transition:
        color 0.28s ease,
        border-color 0.3s ease,
        background-color 0.3s ease,
        transform 0.34s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.34s ease;
}

.configuration-nav-item::before {
    content: '';
    position: absolute;
    top: 12%;
    bottom: 12%;
    left: -1px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--config-accent);
    box-shadow: 0 0 10px rgba(var(--config-accent-rgb), 0.62);
    opacity: 0;
    transform: scaleY(0.25);
    transition: opacity 0.28s ease, transform 0.34s cubic-bezier(0.16, 1, 0.3, 1);
}

.configuration-nav-item::after {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(105deg, transparent 15%, rgba(0, 210, 255, 0.085) 50%, transparent 78%);
    transform: translateX(-115%);
    transition: transform 0.58s cubic-bezier(0.16, 1, 0.3, 1);
}

.configuration-nav-item:hover {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.04);
    background: rgba(255, 255, 255, 0.045);
    transform: translateX(4px);
}

.configuration-nav-item:hover::after {
    transform: translateX(115%);
}

.configuration-nav-item.is-active {
    color: var(--config-accent);
    border-color: rgba(var(--config-accent-rgb), 0.075);
    background: linear-gradient(90deg, rgba(var(--config-accent-rgb), 0.14), rgba(91, 127, 255, 0.05) 58%, rgba(var(--config-accent-rgb), 0));
    box-shadow:
        inset 0 0 0 1px rgba(var(--config-accent-rgb), 0.04),
        0 8px 24px rgba(0, 0, 0, 0.11);
}

.configuration-nav-item.is-active::before {
    opacity: 1;
    transform: scaleY(1);
}

.configuration-nav-icon {
    color: #78879d;
    transition:
        color 0.28s ease,
        transform 0.36s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.3s ease;
}

.configuration-nav-item:hover .configuration-nav-icon,
.configuration-nav-item.is-active .configuration-nav-icon {
    color: var(--config-accent);
    transform: translateX(1px) scale(1.08);
    filter: drop-shadow(0 0 7px rgba(var(--config-accent-rgb), 0.32));
}

.configuration-nav-description {
    color: #5f6f85;
    transition: color 0.28s ease;
}

.configuration-nav-item:hover .configuration-nav-description,
.configuration-nav-item.is-active .configuration-nav-description {
    color: #8f9eb2;
}

.configuration-nav-marker {
    display: none;
}

.configuration-panel-enter {
    animation: configurationPanelIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Broker connection hub */
.broker-brand-logo {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.75rem;
    background: #f8fafc;
    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.24),
        0 0 0 1px color-mix(in srgb, var(--broker-brand-accent) 20%, transparent);
}

.broker-brand-logo-sm {
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 0.5rem;
}

.broker-brand-logo-md {
    width: 3rem;
    height: 3rem;
}

.broker-brand-logo-lg {
    width: 3.35rem;
    height: 3.35rem;
}

.broker-brand-logo img {
    display: block;
    width: 84%;
    height: 84%;
    object-fit: contain;
}

.broker-brand-logo[data-family="schwab"] img {
    width: 100%;
    height: 100%;
}

.broker-brand-logo[data-family="vylmoon"] {
    border-color: rgba(176, 38, 255, 0.25);
    background: #0a0f1a;
}

.broker-brand-logo[data-family="vylmoon"] img {
    width: 88%;
    height: 88%;
}

.broker-brand-fallback {
    color: var(--broker-brand-accent);
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: -0.02em;
}

.broker-hub-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.broker-hub-permissions,
.broker-active-manage,
.broker-family-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #a6b3c5;
    background: rgba(255, 255, 255, 0.025);
    transition:
        color 0.25s ease,
        border-color 0.25s ease,
        background-color 0.25s ease,
        transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.broker-hub-permissions {
    flex: 0 0 auto;
    padding: 0.6rem 0.8rem;
    border-radius: 0.65rem;
    font-size: 0.74rem;
}

.broker-hub-permissions svg {
    width: 1rem;
    height: 1rem;
}

.broker-hub-permissions:hover,
.broker-active-manage:hover,
.broker-family-action:hover {
    border-color: rgba(0, 210, 255, 0.34);
    color: #8eeeff;
    background: rgba(0, 210, 255, 0.06);
}

.broker-security-note {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    margin-top: 1rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid rgba(0, 210, 255, 0.12);
    border-radius: 0.75rem;
    color: #8b9bb0;
    background: rgba(0, 210, 255, 0.035);
    font-size: 0.75rem;
    line-height: 1.5;
}

.broker-security-note-icon {
    display: inline-flex;
    flex: 0 0 auto;
    color: #00d2ff;
}

.broker-security-note-icon svg {
    width: 1rem;
    height: 1rem;
}

.broker-active-summary {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto auto;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
    padding: 0.9rem;
    border: 1px solid rgba(0, 210, 255, 0.17);
    border-radius: 0.9rem;
    background:
        linear-gradient(105deg, rgba(0, 210, 255, 0.075), rgba(91, 127, 255, 0.025) 46%, rgba(176, 38, 255, 0.035)),
        rgba(5, 10, 19, 0.7);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.broker-status-dot {
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 999px;
    background: #64748b;
    box-shadow: 0 0 0 3px rgba(100, 116, 139, 0.1);
}

.broker-status-dot.is-online {
    background: #2de2a6;
    box-shadow: 0 0 0 3px rgba(45, 226, 166, 0.1), 0 0 9px rgba(45, 226, 166, 0.38);
}

.broker-active-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(110px, 1fr));
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 0.7rem;
    background: rgba(0, 0, 0, 0.2);
}

.broker-active-metrics > div {
    padding: 0.6rem 0.75rem;
}

.broker-active-metrics > div + div {
    border-left: 1px solid rgba(255, 255, 255, 0.07);
}

.broker-active-metrics span {
    display: block;
    color: #64748b;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.broker-active-metrics strong {
    display: block;
    margin-top: 0.18rem;
    color: #f8fbff;
    font-family: var(--font-data);
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
}

.broker-active-manage {
    padding: 0.65rem 0.8rem;
    border-radius: 0.65rem;
    font-size: 0.72rem;
    white-space: nowrap;
}

.broker-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
    margin-top: 1rem;
}

.broker-family-card {
    position: relative;
    overflow: hidden;
    min-width: 0;
    padding: 0.95rem;
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 0.9rem;
    background:
        linear-gradient(145deg, rgba(18, 27, 44, 0.84), rgba(6, 11, 20, 0.88)),
        #0a0f1a;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
    transition:
        transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.broker-family-card::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 2px;
    background: var(--broker-card-accent);
    opacity: 0.24;
    transition: opacity 0.3s ease, box-shadow 0.3s ease;
}

.broker-family-card:hover {
    transform: translateY(-2px);
    border-color: rgba(0, 210, 255, 0.2);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.18);
}

.broker-family-card.is-active {
    border-color: color-mix(in srgb, var(--broker-card-accent) 48%, rgba(255, 255, 255, 0.08));
    box-shadow:
        0 0 25px color-mix(in srgb, var(--broker-card-accent) 10%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.broker-family-card.is-active::before {
    width: 3px;
    opacity: 1;
    box-shadow: 0 0 12px var(--broker-card-accent);
}

.broker-family-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
}

.broker-family-name {
    overflow: hidden;
    color: #f8fbff;
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.broker-family-status {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    margin-top: 0.2rem;
    color: #66758a;
    font-size: 0.66rem;
    font-weight: 700;
}

.broker-family-status > span {
    width: 0.34rem;
    height: 0.34rem;
    border-radius: 999px;
    background: #64748b;
}

.broker-family-status.is-active {
    color: #2de2a6;
}

.broker-family-status.is-active > span {
    background: #2de2a6;
    box-shadow: 0 0 8px rgba(45, 226, 166, 0.5);
}

.broker-family-description {
    min-height: 2.9rem;
    margin-top: 0.75rem;
    color: #8492a7;
    font-size: 0.75rem;
    line-height: 1.48;
}

.broker-mode-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.8rem;
}

.broker-mode-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.38rem 0.58rem;
    border: 1px solid rgba(0, 210, 255, 0.13);
    border-radius: 999px;
    color: #8a9aaf;
    background: rgba(0, 210, 255, 0.025);
    font-family: var(--font-ui);
    font-size: 0.68rem;
    font-weight: 700;
    transition: color 0.22s ease, border-color 0.22s ease, background-color 0.22s ease;
}

.broker-mode-chip-dot {
    width: 0.34rem;
    height: 0.34rem;
    border-radius: 999px;
    background: #00d2ff;
    opacity: 0.55;
}

.broker-mode-chip.is-live {
    border-color: rgba(255, 97, 120, 0.15);
    background: rgba(255, 97, 120, 0.025);
}

.broker-mode-chip.is-live .broker-mode-chip-dot {
    background: #ff6178;
}

.broker-mode-chip:hover,
.broker-mode-chip.is-current {
    border-color: var(--broker-card-accent);
    color: #f8fbff;
    background: rgba(255, 255, 255, 0.045);
}

.broker-mode-chip.is-current .broker-mode-chip-dot {
    opacity: 1;
    box-shadow: 0 0 8px currentColor;
}

.broker-family-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.85rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.055);
}

.broker-family-action {
    flex: 0 0 auto;
    padding: 0.44rem 0.6rem;
    border-radius: 0.55rem;
    font-size: 0.68rem;
}

.broker-family-action span {
    color: #00d2ff;
    transition: transform 0.25s ease;
}

.broker-family-action:hover span {
    transform: translateX(2px);
}

@media (max-width: 1100px) {
    .broker-active-summary {
        grid-template-columns: minmax(200px, 1fr) auto;
    }

    .broker-active-manage {
        grid-column: 1 / -1;
        width: 100%;
    }
}

@media (max-width: 820px) {
    .broker-card-grid {
        grid-template-columns: 1fr;
    }

    .broker-family-description {
        min-height: 0;
    }
}

@media (max-width: 640px) {
    .broker-hub-heading {
        flex-direction: column;
    }

    .broker-hub-permissions {
        width: 100%;
    }

    .broker-active-summary {
        grid-template-columns: 1fr;
    }

    .broker-active-metrics {
        width: 100%;
    }

    .broker-family-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .broker-family-action {
        width: 100%;
    }
}

.billing-plan-card {
    background: rgba(0, 0, 0, 0.38);
    border-color: rgba(148, 163, 184, 0.14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
    transition:
        transform 0.38s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.34s ease,
        background-color 0.34s ease,
        box-shadow 0.34s ease;
}

.billing-plan-card:hover {
    transform: translateY(-4px);
}

.billing-plan-standard:hover {
    border-color: rgba(0, 210, 255, 0.5);
    background: rgba(0, 210, 255, 0.035);
    box-shadow: 0 20px 55px rgba(0, 210, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.billing-plan-pro {
    border-color: rgba(176, 38, 255, 0.32);
    background: linear-gradient(150deg, rgba(176, 38, 255, 0.07), rgba(0, 0, 0, 0.4) 45%);
}

.billing-plan-pro:hover {
    border-color: rgba(176, 38, 255, 0.62);
    box-shadow: 0 20px 60px rgba(176, 38, 255, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.billing-plan-card.is-current {
    border-color: rgba(45, 226, 166, 0.56);
    box-shadow: 0 0 26px rgba(45, 226, 166, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* Configuration visual system: solid, compact and consistent */
.configuration-page {
    --cfg-bg: #09090d;
    --cfg-panel: rgba(255, 255, 255, 0.055);
    --cfg-panel-soft: rgba(255, 255, 255, 0.022);
    --cfg-panel-raised: rgba(255, 255, 255, 0.075);
    --cfg-border: rgba(255, 255, 255, 0.12);
    --cfg-border-soft: rgba(255, 255, 255, 0.075);
    --cfg-text: #edf3fb;
    --cfg-muted: #8795a9;
    --cfg-subtle: #5f6f84;
    --cfg-accent: #b8a6ff;
    --cfg-green: #4cd494;
    background:
        linear-gradient(145deg, #0a0a0e 0%, #09090d 48%, #0f0f14 100%);
    color: var(--cfg-text);
}

.configuration-header,
.configuration-tabs-strip,
.configuration-layout {
    width: min(100%, 1120px);
    margin-left: auto;
    margin-right: auto;
}

.configuration-header {
    position: relative;
    overflow: hidden;
    border-color: var(--cfg-border);
    border-radius: 0.75rem;
    background: linear-gradient(110deg, #121e30, #0d1725 65%, #101b2b);
    box-shadow: none;
}

.configuration-header::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(118, 187, 255, 0.5), transparent);
}

.configuration-header h1 {
    color: var(--cfg-text);
    font-size: 1.1rem;
    font-weight: 750;
    letter-spacing: -0.015em;
}

.configuration-header p {
    margin-top: 0.2rem;
    color: var(--cfg-muted);
    font-size: 0.72rem;
}

.configuration-layout {
    gap: 0.75rem;
}

.configuration-tabs-strip {
    display: flex;
    flex-wrap: nowrap;
    justify-content: stretch;
    gap: 0.38rem;
    overflow-x: auto;
    width: min(100%, clamp(720px, 96%, 1600px));
    margin: 0 auto 0.75rem;
    padding: 0.42rem;
    border: 1px solid var(--cfg-border);
    border-radius: 0.7rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018));
}

.configuration-tab-wide {
    display: flex;
    flex: 1 1 0;
    min-width: 110px;
    max-width: 200px;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.55rem 0.48rem;
    border: 1px solid transparent;
    border-radius: 0.46rem;
    color: var(--cfg-muted);
    background: transparent;
    font-family: var(--font-ui);
    font-size: 0.66rem;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    white-space: nowrap;
    transition: color 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}

.configuration-tab-wide:hover {
    color: #dce7f4;
    border-color: var(--cfg-border-soft);
    background: rgba(255, 255, 255, 0.055);
}

.configuration-tab-wide.is-active {
    color: #f4f0ff;
    border-color: rgba(184, 166, 255, 0.34);
    background: linear-gradient(180deg, rgba(184, 166, 255, 0.16), rgba(255, 255, 255, 0.035));
}

.configuration-tab-wide-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    color: #6f829a;
}

.configuration-tab-wide-icon svg {
    width: 0.92rem;
    height: 0.92rem;
}

.configuration-tab-wide:hover .configuration-tab-wide-icon,
.configuration-tab-wide.is-active .configuration-tab-wide-icon {
    color: var(--cfg-accent);
}

.configuration-sidebar {
    border-color: var(--cfg-border);
    border-radius: 0.75rem;
    background: linear-gradient(180deg, #101a29, #0c1522);
    box-shadow: none;
}

.configuration-sidebar::before {
    background: linear-gradient(145deg, rgba(118, 187, 255, 0.035), transparent 42%);
}

.configuration-sidebar-head {
    margin: -0.5rem -0.5rem 0.45rem;
    padding: 0.72rem 0.7rem;
    border-color: var(--cfg-border-soft);
    background: #0d1725;
}

.configuration-sidebar-symbol {
    width: 1.75rem;
    height: 1.75rem;
    border-color: rgba(118, 187, 255, 0.25);
    border-radius: 0.45rem;
    color: var(--cfg-accent);
    background: rgba(118, 187, 255, 0.08);
    box-shadow: none;
}

.configuration-sidebar-head strong {
    font-size: 0.76rem;
}

.configuration-sidebar-head small {
    color: var(--cfg-subtle);
    font-size: 0.58rem;
}

.configuration-nav-item {
    color: var(--cfg-muted);
    border-radius: 0.5rem;
}

.configuration-nav-item:hover {
    color: #dce7f4;
    border-color: var(--cfg-border-soft);
    background: #142033;
    transform: translateX(2px);
}

.configuration-nav-item.is-active {
    color: #f4f0ff;
    border-color: rgba(184, 166, 255, 0.26);
    background: linear-gradient(90deg, rgba(184, 166, 255, 0.12), rgba(255, 255, 255, 0.025));
    box-shadow: none;
}

.configuration-nav-item::after {
    display: none;
}

.configuration-nav-item::before {
    width: 2px;
    background: var(--cfg-accent);
    box-shadow: none;
}

.configuration-nav-icon {
    width: 1.7rem;
    height: 1.7rem;
    color: #708198;
}

.configuration-nav-icon svg {
    width: 1rem;
    height: 1rem;
}

.configuration-nav-item:hover .configuration-nav-icon,
.configuration-nav-item.is-active .configuration-nav-icon {
    color: var(--cfg-accent);
    transform: none;
    filter: none;
}

.configuration-nav-label {
    font-size: 0.75rem;
    font-weight: 700;
}

.configuration-nav-description {
    margin-top: 0.15rem;
    color: var(--cfg-subtle);
    font-size: 0.58rem;
}

.configuration-nav-item:hover .configuration-nav-description,
.configuration-nav-item.is-active .configuration-nav-description {
    color: #8292a7;
}

.configuration-content {
    scrollbar-width: thin;
    scrollbar-color: #31445c transparent;
}

.configuration-content::-webkit-scrollbar {
    width: 5px;
}

.configuration-content::-webkit-scrollbar-thumb {
    border-radius: 99px;
    background: #31445c;
}

.configuration-content-inner {
    /* Antes: cap fijo en 1000px → mucho whitespace en monitores >=1200px.
       Ahora: fluido — usa ~92% del ancho hasta un tope generoso (1600px). */
    width: min(100%, clamp(720px, 92%, 1600px));
    margin-left: auto;
    margin-right: auto;
}

/* Alineamos el header y el strip de tabs al MISMO ancho que el contenido,
   así todo queda flush en cualquier resolución (evita el efecto "todo pegado
   a la izquierda, contenido flotando en el centro"). */
.configuration-header {
    width: min(100%, clamp(720px, 96%, 1600px));
    margin-left: auto;
    margin-right: auto;
}

.configuration-section-heading h2 {
    color: var(--cfg-text);
    font-size: 1.05rem;
    letter-spacing: -0.015em;
}

.configuration-section-heading p {
    color: var(--cfg-subtle);
    font-size: 0.68rem;
}

.configuration-page .configuration-panel-enter {
    font-family: var(--font-ui);
}

.configuration-page .glass-hud,
.configuration-page .billing-plan-card,
.configuration-page .broker-family-card,
.configuration-page .broker-active-summary,
.configuration-page .broker-security-note,
.configuration-page .rounded-xl.border.border-white\/10.bg-black\/40 {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.configuration-page .glass-hud {
    border: 1px solid var(--cfg-border);
    border-radius: 0.7rem;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.018)),
        rgba(10, 10, 14, 0.74);
    box-shadow: none;
}

.configuration-page .backdrop-blur,
.configuration-page [class*="backdrop-blur"] {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.configuration-page .configuration-panel-enter .glass-hud[class*="p-6"],
.configuration-page .configuration-panel-enter .glass-hud[class*="p-4"] {
    padding: 1rem;
}

.configuration-page .configuration-panel-enter .rounded-xl.border,
.configuration-page .configuration-panel-enter .rounded-lg.border {
    border-color: var(--cfg-border);
    background-color: rgba(255, 255, 255, 0.035);
    box-shadow: none;
}

.configuration-page .configuration-panel-enter > .space-y-4,
.configuration-page .configuration-panel-enter .space-y-4 {
    gap: 0.65rem;
}

.configuration-page .configuration-panel-enter section {
    border-color: var(--cfg-border-soft);
}

.configuration-page .configuration-panel-enter section[class*="px-5"],
.configuration-page .configuration-panel-enter section[class*="px-4"] {
    padding: 0.9rem 1rem;
}

.configuration-page .configuration-panel-enter h1,
.configuration-page .configuration-panel-enter h2,
.configuration-page .configuration-panel-enter h3,
.configuration-page .configuration-panel-enter h4 {
    color: var(--cfg-text);
    background: none;
    -webkit-text-fill-color: currentColor;
}

.configuration-page .configuration-panel-enter h1 {
    font-size: 1.05rem;
}

.configuration-page .configuration-panel-enter h3 {
    font-size: 1rem;
    line-height: 1.25;
    letter-spacing: -0.012em;
}

.configuration-page .configuration-panel-enter h4 {
    font-size: 0.82rem;
}

.configuration-page .configuration-panel-enter p {
    color: var(--cfg-muted);
    font-size: 0.72rem;
    line-height: 1.48;
}

.configuration-page .configuration-panel-enter label,
.configuration-page .configuration-panel-enter li,
.configuration-page .configuration-panel-enter td {
    font-size: 0.72rem;
}

.configuration-page .configuration-panel-enter [class*="text-gray-400"] {
    color: var(--cfg-muted);
}

.configuration-page .configuration-panel-enter [class*="text-gray-500"],
.configuration-page .configuration-panel-enter [class*="text-gray-600"] {
    color: var(--cfg-subtle);
}

.configuration-page .configuration-panel-enter input:not([type="checkbox"]),
.configuration-page .configuration-panel-enter select,
.configuration-page .configuration-panel-enter textarea,
.configuration-page .configuration-panel-enter .sp-control {
    min-height: 2rem;
    border: 1px solid var(--cfg-border);
    border-radius: 0.45rem;
    color: var(--cfg-text);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018));
    box-shadow: none;
    font-size: 0.72rem;
}

.configuration-page .configuration-panel-enter input:focus,
.configuration-page .configuration-panel-enter select:focus,
.configuration-page .configuration-panel-enter textarea:focus {
    border-color: rgba(184, 166, 255, 0.56);
    box-shadow: 0 0 0 2px rgba(184, 166, 255, 0.08);
}

.configuration-page .configuration-panel-enter button {
    border-radius: 0.45rem;
    font-family: var(--font-ui);
}

.configuration-page .configuration-panel-enter button:not(.peer) {
    transition:
        color 0.18s ease,
        border-color 0.18s ease,
        background-color 0.18s ease,
        transform 0.18s ease;
}

.configuration-page .configuration-panel-enter button:hover:not(:disabled) {
    transform: translateY(-1px);
}

.configuration-page .configuration-panel-enter .w-20.h-20 {
    width: 3.25rem;
    height: 3.25rem;
    font-size: 1.2rem;
}

.configuration-page .configuration-panel-enter .mb-6 {
    margin-bottom: 1rem;
}

.configuration-page .configuration-panel-enter .gap-4 {
    gap: 0.75rem;
}

.configuration-page .configuration-panel-enter .py-4 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.configuration-page .configuration-panel-enter table {
    border-color: var(--cfg-border-soft);
    background: rgba(255, 255, 255, 0.025);
}

.configuration-page .configuration-panel-enter thead tr {
    border-color: var(--cfg-border);
    color: var(--cfg-subtle);
    background: rgba(255, 255, 255, 0.05);
}

.configuration-page .configuration-panel-enter tbody tr {
    border-color: var(--cfg-border-soft);
}

.configuration-page .configuration-panel-enter tbody tr:hover {
    background: rgba(255, 255, 255, 0.045);
}

.configuration-page .configuration-panel-enter th,
.configuration-page .configuration-panel-enter td {
    padding: 0.62rem 0.7rem;
}

.configuration-page .broker-security-note,
.configuration-page .broker-active-summary,
.configuration-page .broker-family-card,
.configuration-page .billing-plan-card {
    border-color: var(--cfg-border);
    border-radius: 0.65rem;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.018)),
        rgba(10, 10, 14, 0.72);
    box-shadow: none;
}

.configuration-page .broker-family-card {
    padding: 0.8rem;
}

.configuration-page .broker-family-card:hover,
.configuration-page .billing-plan-card:hover {
    transform: translateY(-1px);
    border-color: rgba(184, 166, 255, 0.32);
    box-shadow: none;
}

.configuration-page .broker-brand-logo {
    box-shadow: none;
}

.configuration-page .broker-mode-chip,
.configuration-page .broker-hub-permissions,
.configuration-page .broker-active-manage,
.configuration-page .broker-family-action {
    border-radius: 0.45rem;
    background: rgba(255, 255, 255, 0.045);
}

.configuration-page .broker-hub-permissions:hover,
.configuration-page .broker-active-manage:hover,
.configuration-page .broker-family-action:hover {
    border-color: rgba(184, 166, 255, 0.3);
    color: #efeaff;
    background: rgba(184, 166, 255, 0.08);
}

.configuration-page .broker-security-note {
    border-color: var(--cfg-border);
    color: var(--cfg-muted);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
        rgba(10, 10, 14, 0.72);
}

.configuration-page .broker-security-note-icon {
    color: #b8a6ff;
}

.configuration-page .broker-active-summary {
    border-color: var(--cfg-border);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.018)),
        rgba(10, 10, 14, 0.72);
}

.configuration-page .broker-family-card:hover {
    border-color: rgba(184, 166, 255, 0.28);
}

.configuration-page .broker-mode-chip {
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--cfg-muted);
    background: rgba(255, 255, 255, 0.035);
}

.configuration-page .broker-mode-chip-dot {
    background: #aab2c0;
    opacity: 0.68;
}

.configuration-page .broker-mode-chip:hover,
.configuration-page .broker-mode-chip.is-current {
    border-color: rgba(184, 166, 255, 0.34);
    color: #f4f0ff;
    background: rgba(184, 166, 255, 0.08);
}

.configuration-page .broker-mode-chip:hover .broker-mode-chip-dot,
.configuration-page .broker-mode-chip.is-current .broker-mode-chip-dot {
    background: #b8a6ff;
    box-shadow: 0 0 8px rgba(184, 166, 255, 0.45);
}

.configuration-page .broker-mode-chip.is-live {
    border-color: rgba(255, 97, 120, 0.16);
    background: rgba(255, 97, 120, 0.035);
}

.configuration-page .broker-mode-chip.is-live .broker-mode-chip-dot {
    background: #ff7186;
}

.configuration-page .broker-family-action span {
    color: #c9bcff;
}

.configuration-page .broker-card-grid {
    gap: 0.65rem;
    margin-top: 0.7rem;
}

.configuration-page .billing-plan-card {
    padding: 1rem;
}

.configuration-page .billing-plan-pro,
.configuration-page .billing-plan-standard {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.018)),
        rgba(10, 10, 14, 0.72);
}

.configuration-page .billing-plan-card.is-current {
    border-color: rgba(76, 212, 148, 0.5);
}

.configuration-page .billing-landing-card {
    border-color: var(--plan-border);
    border-radius: 1rem;
    background: var(--plan-bg);
    box-shadow: var(--plan-shadow);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    transition:
        transform 0.38s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.34s ease,
        background 0.34s ease,
        box-shadow 0.34s ease;
}

.configuration-page .billing-landing-card:hover {
    transform: translateY(-4px);
}

.vyl-personalization-panel {
    width: min(100%, 900px);
    margin-left: 4px;
    margin-right: auto;
    padding: 1rem;
}

.vyl-personalization-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.075);
}

.vyl-personalization-head h3 {
    margin: 0;
    color: #edf3fb;
    font-size: 1rem;
    font-weight: 750;
}

.vyl-personalization-head p {
    margin-top: 0.25rem;
    color: #8795a9;
    font-size: 0.76rem;
    line-height: 1.45;
}

.vyl-personalization-head > span {
    flex: 0 0 auto;
    padding: 0.28rem 0.48rem;
    border: 1px solid rgba(184, 166, 255, 0.28);
    border-radius: 0.45rem;
    color: #c9bcff;
    background: rgba(184, 166, 255, 0.08);
    font-family: var(--font-ui);
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
}

.vyl-background-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 0.9rem;
}

.vyl-background-option {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    align-items: stretch;
    gap: 0.7rem;
    min-height: 96px;
    padding: 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.65rem;
    color: #edf3fb;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
        rgba(10, 10, 14, 0.72);
    text-align: left;
}

.vyl-background-option:hover,
.vyl-background-option.is-selected {
    border-color: rgba(184, 166, 255, 0.34);
    background:
        linear-gradient(145deg, rgba(184, 166, 255, 0.11), rgba(255, 255, 255, 0.025)),
        rgba(10, 10, 14, 0.78);
}

.vyl-background-preview {
    position: relative;
    grid-row: 1 / span 2;
    overflow: hidden;
    min-height: 76px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 0.5rem;
    background: #0a0a0e;
}

.vyl-background-preview i {
    position: absolute;
    inset: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.42rem;
    background: rgba(255, 255, 255, 0.05);
}

.vyl-background-cosmic .vyl-background-preview {
    background:
        radial-gradient(circle at 20% 20%, rgba(184, 166, 255, 0.36), transparent 35%),
        radial-gradient(circle at 82% 18%, rgba(76, 212, 148, 0.18), transparent 34%),
        linear-gradient(145deg, #0a0a0e, #101016);
}

.vyl-background-eclipse .vyl-background-preview {
    background:
        radial-gradient(circle at 72% 12%, rgba(184, 166, 255, 0.34), transparent 32%),
        linear-gradient(155deg, #050506, #111016);
}

.vyl-background-aurora .vyl-background-preview {
    background:
        radial-gradient(circle at 12% 25%, rgba(76, 212, 148, 0.38), transparent 34%),
        radial-gradient(circle at 82% 14%, rgba(184, 166, 255, 0.2), transparent 32%),
        linear-gradient(145deg, #080b0d, #0d1015);
}

.vyl-background-steel .vyl-background-preview {
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.18), transparent 34%),
        linear-gradient(145deg, #0a0b0f, #101116);
}

.vyl-background-pearl .vyl-background-preview {
    background:
        radial-gradient(circle at 12% 8%, rgba(93, 191, 232, 0.28), transparent 35%),
        radial-gradient(circle at 88% 18%, rgba(138, 214, 246, 0.22), transparent 32%),
        radial-gradient(circle at 62% 88%, rgba(96, 137, 205, 0.2), transparent 36%),
        linear-gradient(145deg, #183246, #2d6880);
}

.vyl-background-mist .vyl-background-preview {
    background:
        radial-gradient(circle at 74% 2%, rgba(91, 214, 232, 0.24), transparent 35%),
        radial-gradient(circle at 8% 76%, rgba(120, 154, 255, 0.18), transparent 32%),
        radial-gradient(circle at 36% 24%, rgba(255, 255, 255, 0.08), transparent 30%),
        linear-gradient(145deg, #1b3343, #2f6070);
}

.vyl-background-daybreak .vyl-background-preview {
    background:
        radial-gradient(circle at 16% 13%, rgba(255, 193, 104, 0.28), transparent 35%),
        radial-gradient(circle at 84% 9%, rgba(113, 188, 228, 0.2), transparent 34%),
        radial-gradient(circle at 70% 82%, rgba(255, 143, 112, 0.16), transparent 36%),
        linear-gradient(145deg, #3a2d1f, #285064);
}

.vyl-background-solstice .vyl-background-preview {
    background:
        radial-gradient(circle at 15% 12%, rgba(255, 128, 139, 0.26), transparent 35%),
        radial-gradient(circle at 86% 12%, rgba(111, 206, 255, 0.2), transparent 34%),
        radial-gradient(circle at 42% 86%, rgba(255, 178, 126, 0.18), transparent 36%),
        linear-gradient(145deg, #402a32, #2d5267);
}

.vyl-background-copy {
    min-width: 0;
}

.vyl-background-copy strong {
    display: block;
    color: #edf3fb;
    font-size: 0.84rem;
}

.vyl-background-copy small {
    display: block;
    margin-top: 0.25rem;
    color: #8795a9;
    font-size: 0.68rem;
    line-height: 1.35;
}

.vyl-background-state {
    align-self: end;
    justify-self: start;
    padding: 0.22rem 0.42rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.4rem;
    color: #8795a9;
    font-size: 0.58rem;
    font-weight: 800;
    text-transform: uppercase;
}

.vyl-background-option.is-selected .vyl-background-state {
    border-color: rgba(76, 212, 148, 0.34);
    color: #83dcb0;
    background: rgba(76, 212, 148, 0.08);
}

.configuration-page [class*="text-cyber-blue"] {
    color: #b8a6ff;
}

.configuration-page [class*="border-cyber-blue"] {
    border-color: rgba(184, 166, 255, 0.28);
}

.configuration-page [class*="bg-cyber-blue"] {
    background-color: rgba(184, 166, 255, 0.08);
}

.configuration-page [class*="from-cyber-blue"],
.configuration-page [class*="to-cyber-blue"] {
    background-image: linear-gradient(135deg, rgba(184, 166, 255, 0.18), rgba(255, 255, 255, 0.035));
}

.configuration-page a[class*="text-cyber-blue"],
.configuration-page button[class*="text-cyber-blue"] {
    color: #c9bcff;
}

.configuration-page a[class*="text-cyber-blue"]:hover,
.configuration-page button[class*="text-cyber-blue"]:hover {
    color: #efeaff;
    background-color: rgba(184, 166, 255, 0.1);
}

.configuration-page .broker-active-summary [class*="text-cyber-blue"],
.configuration-page .broker-hub [class*="text-cyber-blue"] {
    color: #a9f0c7;
}

@media (max-width: 767px) {
    .vyl-background-grid {
        grid-template-columns: 1fr;
    }

    .vyl-background-option {
        grid-template-columns: 78px minmax(0, 1fr);
    }

    .vyl-personalization-head {
        flex-direction: column;
    }
}

@media (max-width: 767px) {
    .configuration-header,
    .configuration-tabs-strip,
    .configuration-layout {
        width: 100%;
    }

    .configuration-tabs-strip {
        display: flex;
    }

    .configuration-tab-wide {
        min-width: 132px;
    }

    .configuration-content-inner {
        width: 100%;
    }
}

/* Main dashboard visual system aligned with Configuration */
.app-main-surface {
    background: linear-gradient(145deg, #0a1220 0%, #09101b 48%, #0b1422 100%);
}

.dashboard-page {
    --dash-panel: #111a26;
    --dash-panel-soft: #0f1722;
    --dash-panel-raised: #15202e;
    --dash-border: #263345;
    --dash-border-soft: #1b283a;
    --dash-text: #edf3fb;
    --dash-muted: #8795a9;
    --dash-subtle: #5f6f84;
    --dash-accent: #76bbff;
    position: relative;
    z-index: 1;
    color: var(--dash-text);
    background: linear-gradient(145deg, #0a1220 0%, #09101b 48%, #0b1422 100%);
}

.dashboard-page .glass-hud {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-color: var(--dash-border);
    border-radius: 0.62rem;
    background: linear-gradient(150deg, var(--dash-panel), var(--dash-panel-soft));
    box-shadow: none;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.dashboard-page .backdrop-blur,
.dashboard-page [class*="backdrop-blur"] {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.dashboard-page [class*="bg-dark/"],
.dashboard-page [class*="bg-black/"] {
    background-color: #0c1522;
}

.dashboard-page header.glass-hud {
    position: relative;
    overflow: hidden;
    background: linear-gradient(150deg, #121c29, #0f1823);
}

.dashboard-page header.glass-hud::after {
    display: none;
}

.dashboard-page .positions-orders-panel {
    margin-top: 0.7rem;
    border-color: var(--dash-border);
    background: linear-gradient(150deg, #121c29, #0f1722);
    box-shadow: none;
}

.dashboard-page .positions-orders-panel::before {
    display: none;
}

.dashboard-page .glass-hud[class*="border-cyber-red"],
.dashboard-page .glass-hud[class*="border-red-"] {
    background: linear-gradient(150deg, #251820, #111722);
}

.dashboard-page .glass-hud[class*="border-cyber-orange"] {
    background: linear-gradient(150deg, #251e16, #111722);
}

.dashboard-page .glass-hud[class*="border-cyber-blue"] {
    background: linear-gradient(150deg, #12202d, #0f1722);
}

.dashboard-page nav.glass-hud {
    padding-top: 0.42rem;
    padding-bottom: 0.42rem;
}

.dashboard-page nav.glass-hud button {
    border-radius: 0.45rem;
    box-shadow: none;
    transform: none;
}

.dashboard-page nav.glass-hud button:hover {
    background-color: var(--dash-panel-raised);
}

.dashboard-page h1,
.dashboard-page h2,
.dashboard-page h3,
.dashboard-page h4 {
    color: var(--dash-text);
}

.dashboard-page p,
.dashboard-page [class*="text-gray-400"] {
    color: var(--dash-muted);
}

.dashboard-page [class*="text-gray-500"],
.dashboard-page [class*="text-gray-600"] {
    color: var(--dash-subtle);
}

.dashboard-page input:not([type="checkbox"]):not([type="range"]),
.dashboard-page select,
.dashboard-page textarea {
    border-color: var(--dash-border);
    border-radius: 0.45rem;
    color: var(--dash-text);
    background: #0a1320;
    box-shadow: none;
}

.dashboard-page input:focus,
.dashboard-page select:focus,
.dashboard-page textarea:focus {
    border-color: rgba(118, 187, 255, 0.65);
    box-shadow: 0 0 0 2px rgba(118, 187, 255, 0.08);
}

.dashboard-page button {
    font-family: var(--font-ui);
}

.dashboard-page button:not(:disabled) {
    transition:
        color 0.18s ease,
        border-color 0.18s ease,
        background-color 0.18s ease,
        transform 0.18s ease;
}

.dashboard-page ::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

.dashboard-page ::-webkit-scrollbar-thumb {
    border-radius: 99px;
    background: #31445c;
}

.dashboard-page {
    scrollbar-width: thin;
    scrollbar-color: #31445c transparent;
}

/* Dashboard terminal layout: one continuous surface with line dividers */
.dashboard-page .dashboard-topbar {
    margin-bottom: 0;
    border-radius: 10px 10px 0 0;
}

.dashboard-page .dashboard-tickerbar {
    margin-bottom: 0;
    border-top: 0;
    border-radius: 0;
    background: #0e1825;
}

.dashboard-page .dashboard-workspace {
    gap: 0;
    overflow: auto;
    border: 1px solid var(--dash-border);
    border-top: 0;
    border-radius: 0 0 10px 10px;
    background: linear-gradient(145deg, #101927, #0c1522);
}

.dashboard-page .dashboard-primary-column {
    gap: 0;
    min-width: 240px;
    background: var(--dash-panel-soft);
}

.dashboard-page .dashboard-monitor {
    border: 0;
    border-radius: 0;
    background: linear-gradient(150deg, #111b29, #0e1723);
}

.dashboard-page .positions-orders-panel {
    margin-top: 0;
    border: 0;
    border-top: 1px solid var(--dash-border);
    border-radius: 0;
}

.dashboard-page .dashboard-dock-panel {
    border: 0;
    border-left: 1px solid var(--dash-border);
    border-radius: 0;
    background: #0f1825;
}

.dashboard-page .dashboard-dock-panel > div > div:first-child {
    border-color: var(--dash-border);
    background: #111c2a;
}

.dashboard-page .dashboard-panel-rail {
    gap: 3px;
    border: 0;
    border-left: 1px solid var(--dash-border);
    border-radius: 0;
    background: #0c1522;
}

.dashboard-page .dashboard-panel-rail button {
    border-radius: 5px;
}

.dashboard-page .dashboard-panel-rail button:not(:disabled):hover,
.dashboard-page .dashboard-dock-panel button:not(:disabled):hover {
    transform: none;
}

@media (min-width: 768px) {
    .dashboard-page {
        padding: 8px;
    }
}

@media (max-width: 767px) {
    .dashboard-page .dashboard-workspace {
        gap: 0;
    }

    .dashboard-page .dashboard-primary-column,
    .dashboard-page .dashboard-dock-panels {
        gap: 0;
    }

    .dashboard-page .dashboard-dock-panel {
        border-left: 0;
        border-top: 1px solid var(--dash-border);
    }
}

@media (max-width: 767px) {
    .settings-flyout-mobile {
        width: auto;
        max-height: calc(100vh - 84px);
        animation-name: settingsFlyoutMobileIn;
    }
}

@keyframes settingsFlyoutMobileIn {
    from { opacity: 0; transform: translateY(-8px) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Information center: same compact visual language as Configuration */
.info-page {
    --info-panel: rgba(255, 255, 255, 0.055);
    --info-panel-soft: rgba(255, 255, 255, 0.022);
    --info-panel-raised: rgba(255, 255, 255, 0.075);
    --info-border: rgba(255, 255, 255, 0.12);
    --info-border-soft: rgba(255, 255, 255, 0.075);
    --info-text: #edf3fb;
    --info-muted: #8795a9;
    --info-subtle: #5f6f84;
    --info-accent: #b8a6ff;
    color: var(--info-text);
    background: linear-gradient(145deg, #0a0a0e 0%, #09090d 48%, #0f0f14 100%);
}

.info-tabs-strip,
.info-content {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}

.info-tabs-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.38rem;
    flex: 0 0 auto;
    overflow-x: auto;
    margin-bottom: 0.75rem;
    padding: 0.42rem;
    border: 1px solid var(--info-border);
    border-radius: 0.7rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018));
}

.info-tab-wide {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: center;
    gap: 0.48rem;
    padding: 0.72rem 0.7rem;
    border: 1px solid transparent;
    border-radius: 0.46rem;
    color: var(--info-muted);
    background: transparent;
    font-family: var(--font-ui);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    white-space: nowrap;
    transition: color 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}

.info-tab-wide:hover {
    color: #dce7f4;
    border-color: var(--info-border-soft);
    background: rgba(255, 255, 255, 0.055);
}

.info-tab-wide.is-active {
    color: #f4f0ff;
    border-color: rgba(184, 166, 255, 0.34);
    background: linear-gradient(180deg, rgba(184, 166, 255, 0.16), rgba(255, 255, 255, 0.035));
}

.info-tab-wide-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    color: #6f829a;
}

.info-tab-wide-icon svg {
    width: 1.08rem;
    height: 1.08rem;
}

.info-tab-wide:hover .info-tab-wide-icon,
.info-tab-wide.is-active .info-tab-wide-icon {
    color: var(--info-accent);
}

.info-content {
    scrollbar-width: thin;
    scrollbar-color: #31445c transparent;
}

.info-content::-webkit-scrollbar {
    width: 5px;
}

.info-content::-webkit-scrollbar-thumb {
    border-radius: 99px;
    background: #31445c;
}

.info-page .glass-hud {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 1px solid var(--info-border);
    border-radius: 0.7rem;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.018)),
        rgba(10, 10, 14, 0.74);
    box-shadow: none;
}

.info-page .glass-hud,
.info-page [class*="bg-dark/30"],
.info-page [class*="bg-dark/40"],
.info-page [class*="bg-dark/50"] {
    transition:
        transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease;
}

.info-page .glass-hud:hover {
    border-color: rgba(184, 166, 255, 0.28);
    transform: translateY(-1px);
}

.info-page [class*="bg-dark/30"],
.info-page [class*="bg-dark/40"],
.info-page [class*="bg-dark/50"],
.info-page [class*="bg-black/20"],
.info-page [class*="bg-black/30"],
.info-page [class*="bg-black/40"] {
    border: 1px solid var(--info-border-soft);
    border-radius: 0.55rem;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
        rgba(10, 10, 14, 0.72);
    box-shadow: none;
}

.info-page [class*="bg-dark/30"]:hover,
.info-page [class*="bg-dark/40"]:hover,
.info-page [class*="bg-dark/50"]:hover {
    border-color: rgba(184, 166, 255, 0.28);
    background:
        linear-gradient(145deg, rgba(184, 166, 255, 0.08), rgba(255, 255, 255, 0.028)),
        rgba(10, 10, 14, 0.74);
    transform: translateY(-1px);
}

.info-page .glass-hud h3 {
    color: var(--info-text);
    border-color: var(--info-border-soft);
    font-size: 1.28rem;
    font-weight: 750;
    letter-spacing: -0.01em;
    text-transform: none;
}

.info-page .glass-hud strong {
    font-size: 0.98rem;
}

.info-page .glass-hud p,
.info-page .glass-hud li,
.info-page .glass-hud [class*="text-gray-300"],
.info-page .glass-hud [class*="text-gray-400"] {
    color: var(--info-muted);
    font-size: 0.88rem;
    line-height: 1.62;
}

.info-page .glass-hud [class*="text-gray-500"],
.info-page .glass-hud [class*="text-gray-600"] {
    color: var(--info-subtle);
}

.info-page input,
.info-page select,
.info-page textarea {
    min-height: 2.45rem;
    border: 1px solid var(--info-border);
    border-radius: 0.45rem;
    color: var(--info-text);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018));
    box-shadow: none;
    font-family: var(--font-ui);
    font-size: 0.85rem;
}

.info-page input:focus,
.info-page select:focus,
.info-page textarea:focus {
    border-color: rgba(184, 166, 255, 0.56);
    box-shadow: 0 0 0 2px rgba(184, 166, 255, 0.08);
}

.info-page button {
    font-family: var(--font-ui);
}

.info-page .glass-hud button:hover {
    border-color: rgba(184, 166, 255, 0.26);
    background-color: rgba(184, 166, 255, 0.075);
}

.info-page .glass-hud button span[class*="text-cyber-green"] {
    color: var(--info-accent);
}

.info-page [class*="text-cyber-blue"] {
    color: #c9bcff;
}

.info-page [class*="border-cyber-blue"] {
    border-color: rgba(184, 166, 255, 0.28);
}

.info-page [class*="bg-cyber-blue"] {
    background-color: rgba(184, 166, 255, 0.08);
}

.info-page em.text-cyber-blue {
    color: #c9bcff;
}

@media (max-width: 767px) {
    .info-tabs-strip {
        display: flex;
    }

    .info-tab-wide {
        min-width: 142px;
    }

    .info-page .glass-hud {
        padding: 1rem;
    }
}

/* Support center: compact controls, conversation-first layout */
.support-page {
    --support-panel: rgba(255, 255, 255, 0.055);
    --support-panel-soft: rgba(255, 255, 255, 0.022);
    --support-panel-raised: rgba(255, 255, 255, 0.075);
    --support-border: rgba(255, 255, 255, 0.12);
    --support-border-soft: rgba(255, 255, 255, 0.075);
    --support-text: #edf3fb;
    --support-muted: #8795a9;
    --support-subtle: #5f6f84;
    --support-accent: #b8a6ff;
    color: var(--support-text);
    background: linear-gradient(145deg, #0a0a0e 0%, #09090d 48%, #0f0f14 100%);
}

.support-page .glass-hud {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 1px solid var(--support-border);
    border-radius: 0.7rem;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.018)),
        rgba(10, 10, 14, 0.74);
    box-shadow: none;
}

.support-header {
    flex: 0 0 auto;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.018)),
        rgba(10, 10, 14, 0.76);
}

.support-header-icon {
    display: inline-flex;
    width: 1.8rem;
    height: 1.8rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(184, 166, 255, 0.26);
    border-radius: 0.45rem;
    color: var(--support-accent);
    background: rgba(184, 166, 255, 0.09);
}

.support-header-icon svg {
    width: 1rem;
    height: 1rem;
}

.support-search,
.support-page input:not([type="file"]),
.support-page textarea {
    border: 1px solid var(--support-border);
    border-radius: 0.45rem;
    color: var(--support-text);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018));
    box-shadow: none;
    font-family: var(--font-ui);
}

.support-search:focus,
.support-page input:focus,
.support-page textarea:focus {
    border-color: rgba(184, 166, 255, 0.56);
    box-shadow: 0 0 0 2px rgba(184, 166, 255, 0.08);
}

.support-mobile-search {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--support-border);
    border-radius: 0.45rem;
    color: var(--support-muted);
    background: rgba(255, 255, 255, 0.045);
}

.support-workspace {
    min-height: 0;
}

.support-intro {
    overflow: hidden;
    color: var(--support-muted);
    line-height: 1.45;
    text-overflow: ellipsis;
}

.support-case-bar,
.support-report-panel {
    border: 1px solid var(--support-border-soft);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
        rgba(10, 10, 14, 0.72);
}

.support-actions button {
    border-radius: 0.45rem;
    box-shadow: none;
    font-family: var(--font-ui);
    transition: color 0.18s ease, border-color 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
}

.support-actions button:hover:not(:disabled) {
    transform: translateY(-1px);
}

.support-error {
    border: 1px solid rgba(248, 113, 113, 0.28);
    color: #fca5a5;
    background: rgba(127, 29, 29, 0.16);
}

.support-conversation {
    min-height: 180px;
    border: 1px solid var(--support-border-soft);
    background: rgba(255, 255, 255, 0.025);
    scrollbar-width: thin;
    scrollbar-color: #31445c transparent;
}

.support-conversation::-webkit-scrollbar {
    width: 5px;
}

.support-conversation::-webkit-scrollbar-thumb {
    border-radius: 99px;
    background: #31445c;
}

.support-message {
    border: 1px solid var(--support-border-soft);
    box-shadow: none;
    transition: border-color 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
}

.support-message:hover {
    border-color: rgba(184, 166, 255, 0.26);
    transform: translateY(-1px);
}

.support-message-user {
    border-color: rgba(184, 166, 255, 0.28);
    background: linear-gradient(135deg, rgba(184, 166, 255, 0.14), rgba(255, 255, 255, 0.04));
}

.support-message-agent {
    background: rgba(255, 255, 255, 0.04);
}

.support-system-message {
    color: var(--support-subtle);
    border: 1px solid var(--support-border-soft);
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.035);
}

.support-composer {
    flex: 0 0 auto;
    padding-top: 0.15rem;
}

.support-composer > button,
.support-composer > input {
    min-height: 2.55rem;
}

.support-composer > button:first-of-type {
    border-color: var(--support-border);
    border-radius: 0.45rem;
    color: var(--support-muted);
    background: rgba(255, 255, 255, 0.045);
    box-shadow: none;
}

.support-composer > button:first-of-type:hover {
    color: var(--support-accent);
    border-color: rgba(184, 166, 255, 0.38);
}

.support-send {
    border: 1px solid rgba(184, 166, 255, 0.36);
    color: #f4f0ff;
    background: linear-gradient(135deg, rgba(184, 166, 255, 0.22), rgba(255, 255, 255, 0.04));
    font-family: var(--font-ui);
    font-size: 0.76rem;
}

.support-send:hover:not(:disabled) {
    border-color: rgba(184, 166, 255, 0.58);
    background: linear-gradient(135deg, rgba(184, 166, 255, 0.3), rgba(255, 255, 255, 0.07));
    transform: translateY(-1px);
}

.support-page [class*="text-cyber-blue"] {
    color: #c9bcff;
}

.support-page [class*="border-cyber-blue"] {
    border-color: rgba(184, 166, 255, 0.3);
}

.support-page [class*="bg-cyber-blue"] {
    background-color: rgba(184, 166, 255, 0.1);
}

.support-page button[class*="bg-cyber-blue"] {
    color: #f4f0ff;
    border: 1px solid rgba(184, 166, 255, 0.36);
    background: linear-gradient(135deg, rgba(184, 166, 255, 0.22), rgba(255, 255, 255, 0.04));
    box-shadow: none;
}

.support-page button[class*="bg-cyber-blue"]:hover {
    border-color: rgba(184, 166, 255, 0.56);
    background: linear-gradient(135deg, rgba(184, 166, 255, 0.3), rgba(255, 255, 255, 0.07));
}

@media (max-width: 767px) {
    .support-page {
        padding: 0.65rem;
    }

    .support-header {
        margin-bottom: 0.55rem;
    }

    .support-workspace {
        padding: 0.7rem;
    }

    .support-intro {
        display: none;
    }

    .support-message {
        max-width: 90%;
    }

    .support-send {
        padding-right: 0.8rem;
        padding-left: 0.8rem;
        font-size: 0.68rem;
    }
}

/* Broker selector modal: unified VylMoon settings visual system */
.broker-selector-overlay {
    padding: 0.75rem;
    background: rgba(3, 8, 15, 0.78);
}

.broker-selector-modal {
    --broker-modal-panel: rgba(255, 255, 255, 0.06);
    --broker-modal-soft: rgba(255, 255, 255, 0.025);
    --broker-modal-raised: rgba(255, 255, 255, 0.075);
    --broker-modal-border: rgba(255, 255, 255, 0.13);
    --broker-modal-border-soft: rgba(255, 255, 255, 0.08);
    --broker-modal-text: #edf3fb;
    --broker-modal-muted: #8795a9;
    --broker-modal-subtle: #5f6f84;
    --broker-modal-accent: #b8a6ff;
    border: 1px solid var(--broker-modal-border);
    border-radius: 0.78rem;
    color: var(--broker-modal-text);
    background:
        linear-gradient(150deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.018) 72%),
        rgba(9, 9, 13, 0.94);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
    scrollbar-width: thin;
    scrollbar-color: #31445c transparent;
    animation: brokerSelectorIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.broker-selector-modal::-webkit-scrollbar {
    width: 5px;
}

.broker-selector-modal::-webkit-scrollbar-thumb {
    border-radius: 99px;
    background: #31445c;
}

.broker-selector-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: -0.15rem 0 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--broker-modal-border-soft);
}

.broker-selector-heading-icon {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(184, 166, 255, 0.26);
    border-radius: 0.48rem;
    color: var(--broker-modal-accent);
    background: rgba(184, 166, 255, 0.09);
}

.broker-selector-heading-icon svg {
    width: 1.05rem;
    height: 1.05rem;
}

.broker-selector-title {
    margin: 0;
    color: var(--broker-modal-text);
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 750;
    letter-spacing: -0.01em;
}

.broker-selector-heading p {
    margin-top: 0.12rem;
    color: var(--broker-modal-subtle);
    font-size: 0.65rem;
}

.broker-selector-close {
    display: inline-flex;
    width: 1.9rem;
    height: 1.9rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--broker-modal-border-soft);
    border-radius: 0.45rem;
    color: var(--broker-modal-muted);
    background: rgba(255, 255, 255, 0.045);
    font-size: 0.7rem;
    transition: color 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}

.broker-selector-close:hover {
    color: #fca5a5;
    border-color: rgba(248, 113, 113, 0.3);
    background: rgba(127, 29, 29, 0.12);
}

.broker-selector-delay {
    border: 1px solid rgba(245, 190, 74, 0.2);
    color: #b9a773;
    background: rgba(112, 78, 20, 0.09);
}

.broker-selector-option {
    min-height: 3.2rem;
    border: 1px solid var(--broker-modal-border-soft);
    border-radius: 0.52rem;
    color: var(--broker-modal-muted);
    background: rgba(255, 255, 255, 0.035);
    box-shadow: none;
    transition: color 0.18s ease, border-color 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
}

.broker-selector-option:hover {
    color: #dce7f4;
    border-color: rgba(255, 255, 255, 0.18);
    background: var(--broker-modal-raised);
    transform: translateY(-1px);
}

.broker-selector-option.is-selected {
    color: #f4f0ff;
    border-color: rgba(184, 166, 255, 0.38);
    background: linear-gradient(135deg, rgba(184, 166, 255, 0.14), rgba(255, 255, 255, 0.04));
}

.broker-selector-option .broker-brand-logo {
    border-radius: 0.45rem;
    box-shadow: none;
}

.broker-selector-current {
    padding: 0.18rem 0.38rem;
    border: 1px solid rgba(76, 212, 148, 0.24);
    border-radius: 99px;
    color: #83dcb0;
    background: rgba(76, 212, 148, 0.08);
    font-family: var(--font-data);
    font-size: 0.48rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.broker-selector-details {
    border-color: var(--broker-modal-border-soft);
}

.broker-selector-note,
.broker-selector-modal [class*="bg-dark/30"],
.broker-selector-modal [class*="bg-dark/40"],
.broker-selector-modal [class*="bg-dark/50"],
.broker-selector-modal [class*="bg-black/"] {
    border-color: var(--broker-modal-border-soft);
    border-radius: 0.52rem;
    color: var(--broker-modal-muted);
    background: rgba(255, 255, 255, 0.035);
    box-shadow: none;
}

.broker-selector-modal input,
.broker-selector-modal select,
.broker-selector-modal textarea {
    min-height: 2.25rem;
    border: 1px solid var(--broker-modal-border);
    border-radius: 0.46rem;
    color: var(--broker-modal-text);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018));
    box-shadow: none;
    font-family: var(--font-ui);
}

.broker-selector-modal input:focus,
.broker-selector-modal select:focus,
.broker-selector-modal textarea:focus {
    border-color: rgba(184, 166, 255, 0.58);
    box-shadow: 0 0 0 2px rgba(184, 166, 255, 0.08);
}

.broker-selector-modal button {
    font-family: var(--font-ui);
}

.broker-selector-modal button[class*="bg-cyber-blue/20"],
.broker-selector-modal button[class*="bg-cyber-red/20"] {
    border-radius: 0.48rem;
    box-shadow: none;
}

.broker-selector-primary {
    border: 1px solid rgba(184, 166, 255, 0.36);
    border-radius: 0.5rem;
    color: #f4f0ff;
    background: linear-gradient(135deg, rgba(184, 166, 255, 0.22), rgba(184, 166, 255, 0.1));
    box-shadow: none;
    font-size: 0.76rem;
    transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.broker-selector-primary:hover:not(:disabled) {
    border-color: rgba(184, 166, 255, 0.58);
    background: linear-gradient(135deg, rgba(184, 166, 255, 0.3), rgba(184, 166, 255, 0.14));
    transform: translateY(-1px);
}

.broker-selector-primary.is-locked {
    border-color: var(--broker-modal-border-soft);
    color: var(--broker-modal-subtle);
    background: rgba(255, 255, 255, 0.04);
}

.broker-selector-modal [class*="text-cyber-blue"] {
    color: #c9bcff;
}

.broker-selector-modal [class*="border-cyber-blue"] {
    border-color: rgba(184, 166, 255, 0.3);
}

.broker-selector-modal [class*="bg-cyber-blue"] {
    background-color: rgba(184, 166, 255, 0.1);
}

.broker-selector-modal button[class*="bg-cyber-blue/20"] {
    color: #f4f0ff;
    border-color: rgba(184, 166, 255, 0.36);
    background: linear-gradient(135deg, rgba(184, 166, 255, 0.2), rgba(255, 255, 255, 0.04));
}

.broker-selector-modal button[class*="bg-cyber-blue/20"]:hover {
    border-color: rgba(184, 166, 255, 0.56);
    background: linear-gradient(135deg, rgba(184, 166, 255, 0.28), rgba(255, 255, 255, 0.07));
}

@keyframes brokerSelectorIn {
    from { opacity: 0; transform: translateY(8px) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 560px) {
    .broker-selector-overlay {
        align-items: flex-end;
        padding: 0;
    }

    .broker-selector-modal {
        max-height: 92vh;
        margin: 0;
        border-right: 0;
        border-bottom: 0;
        border-left: 0;
        border-radius: 0.85rem 0.85rem 0 0;
    }

    .broker-selector-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@keyframes configurationPanelIn {
    from { opacity: 0; transform: translateY(8px); filter: blur(2px); }
    to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes configurationAmbient {
    0%, 100% { transform: translate3d(0, 0, 0) scale(0.92); opacity: 0.55; }
    50% { transform: translate3d(28px, -22px, 0) scale(1.08); opacity: 0.9; }
}

/* ============================================================
   MOBILE RESPONSIVE — sidebar drawer + page scroll
   ============================================================ */

/* Sidebar drawer transition on mobile */
.mobile-sidebar-drawer {
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.6);
}

.mobile-sidebar-drawer.open {
    transform: translateX(0);
}

@media (max-width: 767px) {
    .configuration-nav-item:hover {
        transform: translateY(-2px);
    }

    .configuration-nav-item::before {
        inset: auto 12px 0 12px;
        width: auto;
        height: 2px;
        transform: scaleX(0.2);
    }

    .configuration-nav-item.is-active::before {
        transform: scaleX(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sidebar-item,
    .sidebar-brand::after,
    .sidebar-backdrop,
    .configuration-sidebar::before,
    .configuration-panel-enter {
        animation: none;
    }

    .sidebar-item,
    .sidebar-item-icon,
    .sidebar-item-label,
    .configuration-nav-item,
    .configuration-nav-icon,
    .billing-plan-card {
        transition-duration: 0.01ms;
    }
}

/* Unified visual language: History + Combo SPX */
.history-page {
    --history-panel: #101927;
    --history-panel-soft: #0d1623;
    --history-panel-raised: #142033;
    --history-border: #233147;
    --history-text: #edf3fb;
    --history-muted: #8795a9;
    background:
        radial-gradient(900px 420px at 7% -8%, rgba(73, 139, 210, .08), transparent 62%),
        linear-gradient(145deg, #09101b 0%, #0b1320 52%, #09111d 100%);
    color: var(--history-text);
    font-family: var(--font-ui);
}

.history-page .history-header,
.history-page .history-stat,
.history-page .history-ledger {
    border: 1px solid var(--history-border);
    background: linear-gradient(145deg, rgba(18, 29, 45, .98), rgba(13, 22, 35, .98));
    box-shadow: 0 12px 28px rgba(2, 7, 14, .2);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.history-page .history-header {
    border-radius: 10px;
}

.history-page .history-header h2 {
    color: #dfeeff;
    font-family: var(--font-display);
    font-weight: 850;
    letter-spacing: -.02em;
    text-transform: none;
}

.history-page .history-header select {
    min-height: 30px;
    border-color: #2a3a51;
    border-radius: 7px;
    color: #e7eef8;
    background: #0c1522;
    font-family: var(--font-ui);
    transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.history-page .history-header select:focus {
    border-color: #5797d2;
    box-shadow: 0 0 0 3px rgba(87, 151, 210, .1);
}

.history-page .history-header button {
    min-height: 30px;
    border-radius: 7px;
    font-family: var(--font-ui);
    font-weight: 800;
    transition: transform .18s ease, border-color .18s ease, background-color .18s ease, color .18s ease;
}

.history-page .history-header button:not(:disabled):hover {
    transform: translateY(-1px);
}

.history-page .history-stat {
    position: relative;
    overflow: hidden;
    min-height: 54px;
    border-radius: 9px;
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.history-page .history-stat::before {
    position: absolute;
    top: 0;
    right: 18%;
    left: 18%;
    height: 1px;
    content: "";
    background: linear-gradient(90deg, transparent, rgba(118, 187, 255, .5), transparent);
    opacity: .55;
}

.history-page .history-stat:hover {
    transform: translateY(-1px);
    border-color: #304561;
    background: linear-gradient(145deg, #142136, #0f1928);
}

.history-page .history-stat > div:first-child {
    color: var(--history-muted);
    font-family: var(--font-ui);
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .1em;
}

.history-page .history-stat .font-display {
    font-family: var(--font-data);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}

.history-page .history-ledger {
    border-radius: 10px;
}

.history-page .history-ledger table {
    font-family: var(--font-data);
    font-variant-numeric: tabular-nums;
}

.history-page .history-ledger thead {
    background: #0d1724;
}

.history-page .history-ledger thead tr {
    border-color: #29384d;
    color: #8998ac;
    font-family: var(--font-ui);
    font-size: 9px;
    letter-spacing: .055em;
}

.history-page .history-ledger tbody tr {
    border-color: rgba(42, 57, 78, .62);
    transition: background-color .16s ease;
}

.history-page .history-ledger tbody tr:hover,
.history-page .history-mobile-trade:hover {
    background: rgba(87, 151, 210, .065);
}

.history-page .table-scroll-wrapper,
.history-page .history-ledger > div {
    scrollbar-width: thin;
    scrollbar-color: #40536c #0a121e;
}

.history-page .table-scroll-wrapper::-webkit-scrollbar,
.history-page .history-ledger > div::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.history-page .table-scroll-wrapper::-webkit-scrollbar-thumb,
.history-page .history-ledger > div::-webkit-scrollbar-thumb {
    border: 2px solid #0a121e;
    border-radius: 999px;
    background: #40536c;
}

.history-page .history-mobile-trade {
    background: rgba(13, 22, 35, .68);
}

.strategy-picker-page {
    --sp-panel: #101927;
    --sp-panel-2: #0c1522;
    --sp-line: #29394f;
    --sp-line-2: #202e41;
    --sp-muted: #8795a9;
    --sp-green: #52d69a;
    --sp-red: #ff7489;
    --sp-yellow: #e9c76b;
    --sp-violet: #76bbff;
    color: #edf3fb;
    background:
        radial-gradient(960px 440px at 8% -10%, rgba(73, 139, 210, .08), transparent 62%),
        linear-gradient(145deg, #09101b 0%, #0b1320 52%, #09111d 100%);
}

.strategy-picker-page.sp-study-active {
    background:
        radial-gradient(900px 440px at 5% -8%, rgba(88, 166, 255, .1), transparent 62%),
        linear-gradient(145deg, #09101b, #0b1320 54%, #09111d);
}

.strategy-picker-page .sp-panel,
.strategy-picker-page .sp-quote {
    border-color: var(--sp-line);
    border-radius: 10px;
    background: linear-gradient(145deg, rgba(18, 29, 45, .98), rgba(13, 22, 35, .98));
    box-shadow: 0 12px 28px rgba(2, 7, 14, .2);
}

.strategy-picker-page .sp-contextbar {
    color: var(--sp-muted);
    font-family: var(--font-ui);
}

.strategy-picker-page .sp-dot {
    box-shadow: 0 0 0 3px rgba(82, 214, 154, .1);
}

.strategy-picker-page .sp-qitem {
    border-color: var(--sp-line-2);
    transition: background-color .18s ease;
}

.strategy-picker-page .sp-qitem:hover {
    background: rgba(118, 187, 255, .035);
}

.strategy-picker-page .sp-qitem label,
.strategy-picker-page .sp-status label,
.strategy-picker-page .sp-leg > label,
.strategy-picker-page .sp-order-grid label {
    color: #8190a4;
    font-family: var(--font-ui);
    letter-spacing: .075em;
}

.strategy-picker-page .sp-qitem > strong,
.strategy-picker-page .sp-qitem select,
.strategy-picker-page .sp-symbol-select {
    color: #edf3fb;
}

.strategy-picker-page button,
.strategy-picker-page select,
.strategy-picker-page input {
    font-family: var(--font-ui);
}

.strategy-picker-page button {
    transition: transform .18s ease, border-color .18s ease, background-color .18s ease, color .18s ease, opacity .18s ease;
}

.strategy-picker-page button:not(:disabled):hover {
    transform: translateY(-1px);
}

.strategy-picker-page .sp-strategy-head,
.strategy-picker-page .sp-strategy-helper,
.strategy-picker-page .sp-chain-top,
.strategy-picker-page .sp-chain-controls,
.strategy-picker-page .sp-an-head {
    border-color: var(--sp-line-2);
}

.strategy-picker-page .sp-strategy-helper,
.strategy-picker-page .sp-chain-controls {
    background: #0c1522;
}

.strategy-picker-page .sp-chain-top {
    background: linear-gradient(90deg, #142135, #101a2a);
}

.strategy-picker-page .sp-section-toggle strong,
.strategy-picker-page .sp-chain-top strong,
.strategy-picker-page .sp-ticket h2,
.strategy-picker-page .sp-dev h3,
.strategy-picker-page .sp-an-card h3 {
    color: #e7f0fb;
    font-family: var(--font-display);
}

.strategy-picker-page .sp-strategy-card {
    border-color: #27374b;
    border-radius: 8px;
    background: #0c1522;
}

.strategy-picker-page .sp-strategy-card:hover {
    border-color: #3c5572;
    background: #122035;
}

.strategy-picker-page .sp-strategy-card.active {
    border-color: rgba(118, 187, 255, .65);
    background: rgba(118, 187, 255, .11);
    box-shadow: inset 0 0 0 1px rgba(118, 187, 255, .08);
}

.strategy-picker-page .sp-strategy-helper button,
.strategy-picker-page .sp-chain-controls button,
.strategy-picker-page .sp-ticket-head button {
    border-color: #30425a;
    color: #cbd8e7;
    background: #111d2d;
}

.strategy-picker-page .sp-strategy-helper button:hover,
.strategy-picker-page .sp-chain-controls button:hover,
.strategy-picker-page .sp-ticket-head button:hover {
    border-color: #52759b;
    color: #edf5ff;
    background: #17263a;
}

.strategy-picker-page .sp-chain-scroll {
    scrollbar-color: #40536c #0a121e;
}

.strategy-picker-page .sp-chain-scroll thead th {
    border-color: #304158;
    color: #8798ad;
    background: #0d1724;
    font-family: var(--font-ui);
}

.strategy-picker-page .sp-chain-scroll tbody td {
    border-color: rgba(42, 57, 78, .62);
}

.strategy-picker-page .sp-chain-scroll tbody tr:hover td {
    background-color: rgba(87, 151, 210, .045);
}

.strategy-picker-page .sp-strike-cell {
    border-color: #34465d;
    background: #132033;
}

.strategy-picker-page .sp-ticket {
    background: linear-gradient(160deg, #111d2e, #0d1623);
}

.strategy-picker-page .sp-status,
.strategy-picker-page .sp-leg,
.strategy-picker-page .sp-cost,
.strategy-picker-page .sp-control,
.strategy-picker-page .sp-an-card,
.strategy-picker-page .sp-an-metric,
.strategy-picker-page .sp-an-note {
    border-color: #293a50;
    border-radius: 9px;
    background: #0c1522;
}

.strategy-picker-page .sp-status {
    border-color: rgba(118, 187, 255, .38);
    background: rgba(118, 187, 255, .075);
}

.strategy-picker-page .sp-panel-resizer::before {
    background: #24364c;
    box-shadow: none;
}

.strategy-picker-page .sp-panel-resizer:hover::before {
    background: rgba(118, 187, 255, .24);
    box-shadow: none;
}

.strategy-picker-page .sp-panel-resizer span {
    background: #6785a6;
    box-shadow: none;
}

.strategy-picker-page .sp-study-banner {
    border-color: rgba(118, 187, 255, .42);
    background: linear-gradient(90deg, rgba(61, 121, 178, .08), rgba(118, 187, 255, .12), rgba(61, 121, 178, .08));
    animation: none;
}

.strategy-picker-page .sp-dev {
    background: linear-gradient(145deg, #101a29, #0c1522);
}

@media (prefers-reduced-motion: reduce) {
    .history-page *,
    .strategy-picker-page * {
        scroll-behavior: auto;
        transition-duration: .01ms;
    }
}

/* Main sidebar: opaque, quiet and consistent with the dashboard */
.sidebar-glass {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-right: 1px solid #202e41;
    background: linear-gradient(180deg, #0d1623 0%, #0b1420 52%, #0a121d 100%);
    box-shadow: none;
}

.sidebar-glass .sidebar-brand {
    border-color: #202e41;
    background: linear-gradient(180deg, #101a29, #0d1623);
}

.sidebar-glass .sidebar-brand::after {
    right: 18%;
    left: 18%;
    background: linear-gradient(90deg, transparent, rgba(118, 187, 255, .28), transparent);
    animation: none;
}

.sidebar-glass .sidebar-navigation {
    background: transparent;
}

.sidebar-glass .sidebar-item {
    overflow: visible;
    margin: 2px 7px;
    border: 1px solid transparent;
    border-radius: 6px;
    color: #8795a9;
    background: transparent;
    box-shadow: none;
    animation-duration: .26s;
    transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}

.sidebar-glass .sidebar-item::after {
    display: none;
}

.sidebar-glass .sidebar-item:hover {
    transform: none;
    border-color: #26364a;
    color: #dce7f4;
    background: #111d2d;
    box-shadow: none;
}

.sidebar-glass .sidebar-item-icon,
.sidebar-glass .sidebar-item-label {
    filter: none;
    transform: none;
    transition: color .18s ease;
}

.sidebar-glass .sidebar-item:hover .sidebar-item-icon,
.sidebar-glass .sidebar-item:hover .sidebar-item-label {
    filter: none;
    transform: none;
    letter-spacing: inherit;
}

.sidebar-glass .sidebar-item.active {
    border-color: #2b4058;
    color: #9ed0ff;
    background: linear-gradient(90deg, #142338, #111d2d);
    box-shadow: none;
}

.sidebar-glass .sidebar-item.active::before {
    left: -8px;
    top: 22%;
    width: 2px;
    height: 56%;
    border-radius: 0 2px 2px 0;
    background: #76bbff;
    box-shadow: none;
}

.sidebar-glass .sidebar-item.active svg {
    color: #8ec8ff;
    filter: none;
}

.sidebar-glass .sidebar-footer {
    border-color: #202e41;
    background: #0b1420;
    transition: none;
}

.sidebar-glass .sidebar-footer:hover {
    border-color: #202e41;
    background: #0b1420;
}

.sidebar-glass .sidebar-broker-compact {
    width: 46px;
    min-height: 46px;
    margin-right: auto;
    margin-left: auto;
    border: 0;
    border-radius: 999px;
    background: transparent;
}

.sidebar-glass .sidebar-broker-compact:hover {
    transform: none;
    border-color: transparent;
    background: radial-gradient(circle, rgba(118, 187, 255, .13) 0%, rgba(118, 187, 255, .045) 52%, transparent 74%);
}

.sidebar-glass .sidebar-broker-compact:hover .broker-brand-logo {
    transform: scale(1.035);
}

.sidebar-glass .sidebar-broker-status {
    right: 2px;
    bottom: 4px;
    border-color: #0b1420;
}

.sidebar-glass .sidebar-footer button[class*="bg-dark"] {
    border: 1px solid #24344a;
    color: #9aa9bc;
    background: #101b2a;
    box-shadow: none;
}

.sidebar-glass .sidebar-footer button[class*="bg-dark"]:hover {
    border-color: #3a516d;
    color: #e2eaf4;
}

.mobile-sidebar-drawer.sidebar-glass {
    box-shadow: 10px 0 28px rgba(2, 7, 14, .34);
}

.dashboard-page .dashboard-topbar {
    z-index: 40;
    overflow: visible;
}

.dashboard-page .dashboard-tickerbar {
    position: relative;
    z-index: 2;
}

.dashboard-page .dashboard-workspace {
    position: relative;
    z-index: 1;
}

.dashboard-page .orders-mini-chart {
    z-index: 42;
}

.dashboard-page .orders-mini-chart-popover {
    z-index: 100;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-color: #2b3b51;
    background: linear-gradient(150deg, #111c2a, #0a1320);
    box-shadow: 0 18px 38px rgba(2, 7, 14, .48);
}

/* Mobile: stop ALL horizontal overflow at the root */
@media (max-width: 767px) {
    html, body {
        overflow-x: hidden;
        max-width: 100vw;
    }

    .mobile-main {
        overflow-x: hidden;
        max-width: 100vw;
    }

    /* Pages: remove fixed height constraints; DO NOT set overflow:visible */
    .mobile-main > div {
        height: auto;
        min-height: 0;
        max-width: 100%;
    }

    /* Tables on mobile: natural width inside a scrollable wrapper */
    .mobile-main .table-scroll-wrapper {
        overflow-x: auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    /* Reduce particles on mobile for perf */
    #particles-canvas {
        opacity: 0.3;
    }

    /* Bigger touch targets for sidebar items */
    .sidebar-item {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }
}

/* ============================================================
   LANDING PAGE — Aurora, Reveal, Cursor Glow
   ============================================================ */

/* Scroll reveal base state */
.reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-left {
    transform: translateX(-56px);
}

.reveal-right {
    transform: translateX(56px);
}

.reveal-left.reveal-offset-y {
    transform: translate(-48px, 24px);
}

.reveal-right.reveal-offset-y {
    transform: translate(48px, 24px);
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.hero-rotator {
    position: relative;
    overflow: hidden;
}

.hero-rotator-phrase {
    display: inline-block;
    animation: hero-phrase-in .48s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes hero-phrase-in {
    from { opacity: 0; filter: blur(7px); transform: translateY(42%); }
    to { opacity: 1; filter: blur(0); transform: translateY(0); }
}

@media (max-width: 767px) {
    .reveal-left {
        transform: translateX(-24px);
    }

    .reveal-right {
        transform: translateX(24px);
    }

    .reveal-left.reveal-offset-y {
        transform: translate(-22px, 18px);
    }

    .reveal-right.reveal-offset-y {
        transform: translate(22px, 18px);
    }

    .reveal.is-visible,
    .reveal.is-visible.reveal-offset-y {
        transform: translate(0, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-rotator-phrase {
        animation: none;
    }
}


/* Stagger delays for children */
.reveal-d1 { transition-delay: 0.08s; }
.reveal-d2 { transition-delay: 0.16s; }
.reveal-d3 { transition-delay: 0.24s; }
.reveal-d4 { transition-delay: 0.32s; }
.reveal-d5 { transition-delay: 0.40s; }
.reveal-d6 { transition-delay: 0.48s; }

/* Aurora blobs — animated drifting glows */
@keyframes aurora-drift {
    0%,  100% { transform: translate(0px, 0px)   scale(1);    }
    30%        { transform: translate(-25px, 18px) scale(1.04); }
    65%        { transform: translate(18px, -14px) scale(0.96); }
}
@keyframes aurora-drift-b {
    0%,  100% { transform: translate(0px, 0px)   scale(1);    }
    40%        { transform: translate(22px, -20px) scale(1.05); }
    70%        { transform: translate(-15px, 12px) scale(0.97); }
}
.aurora-a { animation: aurora-drift   14s ease-in-out infinite; will-change: transform; }
.aurora-b { animation: aurora-drift-b 18s ease-in-out infinite; will-change: transform; }
.aurora-c { animation: aurora-drift   22s ease-in-out infinite reverse; will-change: transform; }

/* Card hover lift */
.card-lift {
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.22s ease,
                border-color 0.22s ease;
}
.card-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}

.entry-flow-card {
    position: relative;
    overflow: hidden;
}

.entry-flow-card::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,0.08) 42%, transparent 58%);
    transform: translateX(-120%);
    transition: opacity 0.2s ease;
}

.entry-flow-card::after {
    content: '';
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 0;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, var(--entry-accent), transparent);
    opacity: 0;
    transform: scaleX(0.2);
    transition: opacity 0.28s ease, transform 0.28s ease;
}

.entry-flow-card:hover::before {
    opacity: 1;
    animation: entry-sheen 0.9s ease forwards;
    animation-delay: var(--entry-delay);
}

.entry-flow-card:hover::after {
    opacity: 0.85;
    transform: scaleX(1);
}

@keyframes entry-sheen {
    to { transform: translateX(120%); }
}

.engine-row {
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
                background-color 0.2s ease,
                border-color 0.2s ease;
}

.engine-row:hover {
    transform: translateX(4px);
    background-color: rgba(0, 210, 255, 0.055);
    border-color: rgba(0, 210, 255, 0.28);
}

.demo-cta {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(135deg, #00d2ff, #0077ff);
    box-shadow: 0 12px 30px rgba(0, 210, 255, 0.24);
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s ease;
}

.demo-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(108deg, transparent 28%, rgba(255,255,255,0.55) 48%, transparent 68%);
    transform: translateX(-130%);
    animation: demo-cta-sheen 3.2s ease-in-out infinite;
}

.demo-cta:hover,
.demo-cta:focus-visible {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 18px 38px rgba(0, 210, 255, 0.34), 0 0 0 4px rgba(0, 210, 255, 0.10);
    outline: none;
}

@keyframes demo-cta-sheen {
    0%, 44% { transform: translateX(-130%); }
    74%, 100% { transform: translateX(130%); }
}

.exit-demo-native {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: visible;
    background: #0d1321;
}

.exit-demo-native.is-light {
    background: #f5f7fb;
}

.exit-demo-nav {
    position: sticky;
    top: 0;
    z-index: 30;
    border-bottom: 1px solid rgba(0, 210, 255, .12);
    background: rgba(13, 19, 33, .76);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

.exit-demo-nav.is-light {
    border-bottom-color: rgba(0, 140, 168, .16);
    background: rgba(255, 255, 255, .72);
}

.exit-demo-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1380px;
    height: 56px;
    margin: 0 auto;
    padding: 0 20px;
}

.exit-demo-nav-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.exit-demo-nav-actions > span {
    color: #00d2ff;
    font-family: var(--font-data);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.exit-demo-language {
    min-width: 34px;
    height: 28px;
    border: 1px solid rgba(0, 210, 255, .2);
    border-radius: 6px;
    background: rgba(0, 210, 255, .06);
    color: #9aa6b8;
    font-family: var(--font-data);
    font-size: 9px;
    font-weight: 900;
    cursor: pointer;
}

.exit-demo-language:hover {
    border-color: rgba(0, 210, 255, .48);
    color: #00d2ff;
}

.exit-demo-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0;
    background: transparent;
    color: #9aa6b8;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.exit-demo-back svg {
    width: 16px;
    height: 16px;
}

.exit-demo-back:hover {
    color: #00d2ff;
}

.exit-demo-hero {
    max-width: 1380px;
    margin: 0 auto;
    padding: 16px 20px 12px;
    text-align: center;
}

.exit-demo-hero > span {
    display: inline-flex;
    padding: 5px 12px;
    border: 1px solid rgba(0, 210, 255, .32);
    border-radius: 999px;
    background: rgba(0, 210, 255, .07);
    color: #00d2ff;
    font-family: var(--font-data);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.exit-demo-hero h1 {
    margin: 8px 0 0;
    color: inherit;
    font-size: clamp(24px, 2.4vw, 36px);
    font-weight: 900;
    letter-spacing: 0;
}

.exit-demo-hero p {
    max-width: 680px;
    margin: 6px auto 0;
    color: #9aa6b8;
    font-size: 14px;
    line-height: 1.55;
}

.exit-demo-shell {
    max-width: 1380px;
    margin: 0 auto;
    padding: 0 20px 36px;
}

.exit-demo-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.exit-demo-tabs button,
.exit-demo-panel,
.exit-demo-chart-panel,
.exit-demo-status {
    border: 1px solid rgba(0, 210, 255, .14);
    background: rgba(14, 22, 38, .72);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    box-shadow: 0 18px 54px rgba(0, 0, 0, .18);
}

.exit-demo-tabs button {
    min-height: 58px;
    padding: 10px 12px;
    border-radius: 8px;
    color: #92a0b3;
    text-align: left;
    cursor: pointer;
    transition: .18s ease;
}

.exit-demo-tabs button:hover,
.exit-demo-tabs button[aria-selected="true"] {
    border-color: rgba(0, 210, 255, .5);
    background: linear-gradient(135deg, rgba(0, 210, 255, .13), rgba(176, 38, 255, .08));
    color: #f7fbff;
}

.exit-demo-tabs strong,
.exit-demo-tabs small {
    display: block;
}

.exit-demo-tabs strong {
    font-size: 13px;
    font-weight: 900;
}

.exit-demo-tabs small {
    margin-top: 5px;
    font-size: 11px;
    line-height: 1.3;
}

.exit-demo-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1.62fr) minmax(330px, .72fr);
    gap: 14px;
    align-items: start;
}

.exit-demo-chart-panel,
.exit-demo-panel,
.exit-demo-status {
    border-radius: 8px;
}

.exit-demo-chart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.exit-demo-chart-head span {
    display: inline-grid;
    min-width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 8px;
    background: rgba(0, 210, 255, .12);
    color: #00d2ff;
    font-family: var(--font-data);
    font-size: 11px;
    font-weight: 950;
}

.exit-demo-chart-head h2 {
    margin: 7px 0 0;
    color: #f6f9fc;
    font-size: 17px;
    font-weight: 950;
    letter-spacing: 0;
    text-transform: uppercase;
}

.exit-demo-chart-head p,
.exit-demo-live small {
    margin: 4px 0 0;
    color: #8e9caf;
    font-size: 12px;
}

.exit-demo-live {
    text-align: right;
}

.exit-demo-live strong {
    display: block;
    color: #f7fbff;
    font-family: var(--font-data);
    font-size: 22px;
    font-weight: 950;
}

.exit-demo-chart-wrap {
    padding: 8px 20px 2px;
}

.exit-demo-chart {
    display: block;
    width: 100%;
    min-height: 350px;
    color: #00d2ff;
}

.exit-demo-chart .grid {
    stroke: rgba(0, 210, 255, .13);
    stroke-width: 1.1;
}

.exit-demo-chart text {
    fill: #8e9caf;
    font-family: var(--font-data);
    font-size: 12px;
    font-weight: 800;
}

.exit-demo-chart .x-label {
    fill: #6f7e91;
}

.exit-demo-chart .area {
    fill: url(#exitDemoArea);
}

.exit-demo-chart .line {
    fill: none;
    stroke: #f6f9fc;
    stroke-width: 3.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .3));
}

.exit-demo-chart .dot {
    fill: #101827;
    stroke: #00d2ff;
    stroke-width: 3;
}

.exit-demo-chart .guide {
    stroke-width: 1.6;
    stroke-dasharray: 6 6;
    opacity: .82;
}

.exit-demo-chart .guide.is-live {
    opacity: .42;
}

.exit-demo-chart .guide.cyan { stroke: #00d2ff; }
.exit-demo-chart .guide.green { stroke: #00e676; }
.exit-demo-chart .guide.amber { stroke: #f97316; }
.exit-demo-chart .guide.red { stroke: #ef4444; }
.exit-demo-chart .guide.purple { stroke: #b026ff; }
.exit-demo-chart .guide-label {
    font-size: 11px;
    font-weight: 950;
}
.exit-demo-chart .guide-label.cyan { fill: #00d2ff; }
.exit-demo-chart .guide-label.green { fill: #00e676; }
.exit-demo-chart .guide-label.amber { fill: #f97316; }
.exit-demo-chart .guide-label.red { fill: #ef4444; }
.exit-demo-chart .guide-label.purple { fill: #b026ff; }

.exit-demo-chart .stop-line {
    fill: none;
    stroke: #f97316;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .9;
}

.exit-demo-chart .event-dot {
    fill: #0d1321;
    stroke-width: 2.5;
}

.exit-demo-chart .event-dot.cyan { stroke: #00d2ff; }
.exit-demo-chart .event-dot.green { stroke: #00e676; }
.exit-demo-chart .event-dot.amber { stroke: #f97316; }
.exit-demo-chart .event-dot.red { stroke: #ef4444; }
.exit-demo-chart .event-dot.purple { stroke: #c979ff; }

.exit-demo-telemetry {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    background: rgba(8, 14, 26, .42);
}

.exit-demo-telemetry > div {
    min-width: 0;
    padding: 10px 14px;
    border-right: 1px solid rgba(255, 255, 255, .07);
}

.exit-demo-telemetry > div:last-child {
    border-right: 0;
}

.exit-demo-telemetry span,
.exit-demo-telemetry strong {
    display: block;
}

.exit-demo-telemetry span {
    color: #708096;
    font-family: var(--font-data);
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
}

.exit-demo-telemetry strong {
    overflow: hidden;
    margin-top: 4px;
    color: #f7fbff;
    font-family: var(--font-data);
    font-size: 13px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.exit-demo-telemetry strong.is-confirming,
.exit-demo-telemetry strong.is-fill_pending {
    color: #c979ff;
}

.exit-demo-telemetry strong.is-closed {
    color: #00e676;
}

.exit-demo-telemetry strong.is-data_hold {
    color: #f97316;
}

.exit-demo-timeline {
    padding: 0 20px 8px;
}

.exit-demo-timeline input {
    width: 100%;
    accent-color: #00d2ff;
    cursor: pointer;
}

.exit-demo-timeline > div {
    display: flex;
    align-items: center;
    gap: 8px 14px;
    margin-top: 2px;
    color: #708096;
    font-size: 10px;
    font-weight: 800;
}

.exit-demo-timeline > div span {
    position: relative;
}

.exit-demo-timeline > div span + span::before {
    position: absolute;
    top: 50%;
    left: -8px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #4b5a70;
    content: "";
}

.exit-demo-timeline > div strong {
    margin-left: auto;
    color: #9aa6b8;
    font-family: var(--font-data);
}

.exit-demo-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    padding: 0 20px 16px;
    color: #8e9caf;
    font-size: 12px;
    font-weight: 700;
}

.exit-demo-legend span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.exit-demo-legend i {
    width: 22px;
    height: 2px;
    border-radius: 2px;
}

.exit-demo-legend .cyan { background: #00d2ff; }
.exit-demo-legend .green { background: #00e676; }
.exit-demo-legend .amber { background: #f97316; }
.exit-demo-legend .red { background: #ef4444; }
.exit-demo-legend .purple { background: #b026ff; }

.exit-demo-side {
    display: grid;
    gap: 12px;
}

.exit-demo-panel {
    padding: 16px;
}

.exit-demo-panel h3 {
    margin: 0 0 12px;
    color: #f6f9fc;
    font-size: 13px;
    font-weight: 950;
    letter-spacing: 0;
    text-transform: uppercase;
}

.exit-demo-panel-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.exit-demo-panel-title h3 {
    margin: 0;
}

.exit-demo-panel-title > span {
    color: #708096;
    font-family: var(--font-data);
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
}

.exit-demo-panel-title > button {
    min-height: 28px;
    padding: 0 9px;
    border: 1px solid rgba(0, 210, 255, .22);
    border-radius: 6px;
    background: transparent;
    color: #00d2ff;
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
    cursor: pointer;
}

.exit-demo-rules {
    display: grid;
    gap: 7px;
}

.exit-demo-rule {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 10px;
    border: 1px solid rgba(0, 210, 255, .13);
    border-radius: 8px;
    background: rgba(13, 19, 33, .58);
    color: #9aa6b8;
    font-size: 12px;
    line-height: 1.35;
}

.exit-demo-rule strong {
    color: #f6f9fc;
    font-weight: 950;
}

.exit-demo-rule span {
    text-align: right;
}

.exit-demo-rule.green strong { color: #00e676; }
.exit-demo-rule.amber strong { color: #f97316; }
.exit-demo-rule.red strong { color: #ef4444; }
.exit-demo-rule.purple strong { color: #b026ff; }

.exit-demo-panel p {
    margin: 10px 0 0;
    color: #8e9caf;
    font-size: 12px;
    line-height: 1.55;
}

.exit-demo-scenarios {
    display: grid;
    gap: 8px;
}

.exit-demo-scenarios button,
.exit-demo-actions button {
    min-height: 42px;
    border: 1px solid rgba(0, 210, 255, .16);
    border-radius: 8px;
    background: rgba(13, 19, 33, .58);
    color: #9aa6b8;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
    transition: .18s ease;
}

.exit-demo-scenarios button {
    min-height: 48px;
    padding: 8px 10px;
    text-align: left;
}

.exit-demo-scenarios button strong,
.exit-demo-scenarios button small {
    display: block;
}

.exit-demo-scenarios button strong {
    color: inherit;
    font-size: 11px;
}

.exit-demo-scenarios button small {
    overflow: hidden;
    margin-top: 3px;
    color: #708096;
    font-family: var(--font-data);
    font-size: 9px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.exit-demo-scenarios button:hover,
.exit-demo-scenarios button[aria-pressed="true"] {
    border-color: rgba(0, 210, 255, .5);
    background: rgba(0, 210, 255, .11);
    color: #f7fbff;
}

.exit-demo-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.exit-demo-actions .primary {
    border-color: transparent;
    background: linear-gradient(90deg, #00d2ff, #b026ff);
    color: #fff;
}

.exit-demo-playback {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
}

.exit-demo-step-actions,
.exit-demo-speed {
    display: flex;
    min-width: 0;
    gap: 6px;
}

.exit-demo-step-actions button,
.exit-demo-speed button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    border: 1px solid rgba(0, 210, 255, .16);
    border-radius: 7px;
    background: rgba(13, 19, 33, .72);
    color: #8e9caf;
    font-size: 10px;
    font-weight: 900;
    cursor: pointer;
}

.exit-demo-step-actions button:disabled {
    opacity: .35;
    cursor: default;
}

.exit-demo-step-actions button svg {
    width: 15px;
    height: 15px;
}

.exit-demo-step-actions .primary {
    flex: 1 1 auto;
    gap: 7px;
    min-width: 92px;
    border-color: transparent;
    background: linear-gradient(90deg, #00bfe8, #8f39f5);
    color: #fff;
}

.exit-demo-speed {
    padding: 3px;
    border: 1px solid rgba(0, 210, 255, .13);
    border-radius: 8px;
    background: rgba(8, 14, 26, .68);
}

.exit-demo-speed button {
    min-width: 32px;
    height: 30px;
    border: 0;
    background: transparent;
}

.exit-demo-speed button[aria-pressed="true"] {
    background: rgba(0, 210, 255, .14);
    color: #00d2ff;
}

.exit-demo-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
}

.exit-demo-config {
    background: rgba(8, 14, 26, .82);
}

.exit-demo-config-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.exit-demo-config-field {
    display: grid;
    gap: 6px;
    color: #8e9caf;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.exit-demo-config-field.is-wide {
    margin-bottom: 10px;
}

.exit-demo-config-field > div {
    display: flex;
    align-items: center;
    overflow: hidden;
    min-height: 36px;
    border: 1px solid rgba(0, 210, 255, .15);
    border-radius: 8px;
    background: rgba(13, 19, 33, .72);
}

.exit-demo-config-field input,
.exit-demo-config-field select {
    width: 100%;
    min-height: 36px;
    border: 1px solid rgba(0, 210, 255, .15);
    border-radius: 8px;
    background: rgba(13, 19, 33, .72);
    color: #f7fbff;
    padding: 0 10px;
    outline: none;
    font-family: var(--font-data);
    font-size: 13px;
    font-weight: 900;
}

.exit-demo-config-field > div input {
    min-height: 34px;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.exit-demo-config-field b {
    padding: 0 10px;
    color: #00d2ff;
    font-size: 10px;
}

.exit-demo-level-grid {
    display: grid;
    gap: 7px;
    margin-bottom: 8px;
}

.exit-demo-level-row {
    display: grid;
    grid-template-columns: 34px 1fr 1fr;
    gap: 7px;
    align-items: end;
}

.exit-demo-level-row > strong {
    display: grid;
    place-items: center;
    min-height: 36px;
    border: 1px solid rgba(0, 230, 118, .22);
    border-radius: 8px;
    background: rgba(0, 230, 118, .08);
    color: #00e676;
    font-size: 12px;
    font-weight: 950;
}

.exit-demo-status strong,
.exit-demo-status span {
    display: block;
}

.exit-demo-status strong {
    color: #f6f9fc;
    font-size: 14px;
    font-weight: 950;
}

.exit-demo-status span {
    margin-top: 5px;
    color: #8e9caf;
    font-size: 12px;
    line-height: 1.4;
}

.exit-demo-status b {
    flex: 0 0 auto;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(0, 210, 255, .12);
    color: #00d2ff;
    font-size: 10px;
    font-weight: 950;
    text-transform: uppercase;
}

.exit-demo-status.green b { background: rgba(0, 230, 118, .12); color: #00e676; }
.exit-demo-status.amber b { background: rgba(249, 115, 22, .13); color: #f97316; }
.exit-demo-status.red b { background: rgba(239, 68, 68, .13); color: #ef4444; }
.exit-demo-status.purple b { background: rgba(176, 38, 255, .13); color: #c979ff; }

.exit-demo-events {
    background: rgba(8, 14, 26, .66);
}

.exit-demo-event-list {
    display: grid;
    gap: 8px;
}

.exit-demo-event {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px;
    padding-left: 9px;
    border-left: 2px solid rgba(0, 210, 255, .45);
}

.exit-demo-event.green { border-left-color: #00e676; }
.exit-demo-event.amber { border-left-color: #f97316; }
.exit-demo-event.red { border-left-color: #ef4444; }
.exit-demo-event.purple { border-left-color: #c979ff; }

.exit-demo-event time {
    padding-top: 2px;
    color: #708096;
    font-family: var(--font-data);
    font-size: 9px;
}

.exit-demo-event strong,
.exit-demo-event span {
    display: block;
}

.exit-demo-event strong {
    color: #e9f0f8;
    font-size: 11px;
    font-weight: 900;
}

.exit-demo-event span {
    margin-top: 2px;
    color: #7e8da1;
    font-size: 10px;
    line-height: 1.35;
}

.exit-demo-event-empty {
    margin: 0;
}

.exit-demo-native.is-light .exit-demo-hero p,
.exit-demo-native.is-light .exit-demo-chart-head p,
.exit-demo-native.is-light .exit-demo-live small,
.exit-demo-native.is-light .exit-demo-panel p,
.exit-demo-native.is-light .exit-demo-status span,
.exit-demo-native.is-light .exit-demo-rule,
.exit-demo-native.is-light .exit-demo-legend {
    color: #64748b;
}

.exit-demo-native.is-light .exit-demo-tabs button,
.exit-demo-native.is-light .exit-demo-panel,
.exit-demo-native.is-light .exit-demo-chart-panel,
.exit-demo-native.is-light .exit-demo-status {
    border-color: rgba(15, 23, 42, .1);
    background: rgba(255, 255, 255, .78);
    box-shadow: 0 18px 54px rgba(15, 23, 42, .08);
}

.exit-demo-native.is-light .exit-demo-config,
.exit-demo-native.is-light .exit-demo-config-field input,
.exit-demo-native.is-light .exit-demo-config-field select,
.exit-demo-native.is-light .exit-demo-config-field > div,
.exit-demo-native.is-light .exit-demo-rule {
    background: rgba(248, 250, 252, .88);
    border-color: rgba(15, 23, 42, .12);
}

.exit-demo-native.is-light .exit-demo-telemetry,
.exit-demo-native.is-light .exit-demo-speed,
.exit-demo-native.is-light .exit-demo-step-actions button,
.exit-demo-native.is-light .exit-demo-events {
    background: rgba(248, 250, 252, .88);
}

.exit-demo-native.is-light .exit-demo-config-field input,
.exit-demo-native.is-light .exit-demo-config-field select {
    color: #0f172a;
}

.exit-demo-native.is-light .exit-demo-chart-head h2,
.exit-demo-native.is-light .exit-demo-panel h3,
.exit-demo-native.is-light .exit-demo-status strong,
.exit-demo-native.is-light .exit-demo-rule strong,
.exit-demo-native.is-light .exit-demo-live strong {
    color: #0f172a;
}

.exit-demo-native.is-light .exit-demo-telemetry strong,
.exit-demo-native.is-light .exit-demo-event strong {
    color: #0f172a;
}

.exit-demo-native.is-light .exit-demo-chart .event-dot {
    fill: #f5f7fb;
}

.exit-demo-native.is-light .exit-demo-chart .line {
    stroke: #111827;
}

@media (max-width: 980px) {
    .exit-demo-tabs,
    .exit-demo-workspace {
        grid-template-columns: 1fr;
    }

    .exit-demo-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .exit-demo-chart {
        min-height: 330px;
    }

    .exit-demo-config-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .exit-demo-telemetry {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .exit-demo-telemetry > div:nth-child(2) {
        border-right: 0;
    }

    .exit-demo-telemetry > div:nth-child(-n+2) {
        border-bottom: 1px solid rgba(255, 255, 255, .07);
    }
}

@media (max-width: 560px) {
    .exit-demo-tabs,
    .exit-demo-actions {
        grid-template-columns: 1fr;
    }

    .exit-demo-chart-head,
    .exit-demo-status {
        align-items: flex-start;
        flex-direction: column;
    }

    .exit-demo-live {
        text-align: left;
    }

    .exit-demo-config-grid,
    .exit-demo-level-row {
        grid-template-columns: 1fr;
    }

    .exit-demo-playback {
        grid-template-columns: 1fr;
    }

    .exit-demo-speed {
        justify-content: center;
    }

    .exit-demo-speed button {
        flex: 1 1 0;
    }

    .exit-demo-timeline > div {
        flex-wrap: wrap;
    }

    .exit-demo-timeline > div strong {
        width: 100%;
        margin-left: 0;
    }
}

.landing-theme-light {
    color: #0f172a;
    background:
        radial-gradient(circle at 18% 12%, rgba(0, 210, 255, 0.16), transparent 28%),
        radial-gradient(circle at 88% 22%, rgba(176, 38, 255, 0.12), transparent 28%),
        linear-gradient(180deg, #f8fafc 0%, #eef5ff 44%, #ffffff 100%);
}

.landing-theme-light #particles-canvas {
    opacity: 0.82;
    mix-blend-mode: multiply;
}

.landing-theme-light .landing-noise::after {
    opacity: 0.28;
}

.landing-theme-light .text-white,
.landing-theme-light .text-gray-200,
.landing-theme-light .text-gray-300 {
    color: #0f172a;
}

.landing-theme-light .text-gray-400 {
    color: #334155;
}

.landing-theme-light .text-gray-500 {
    color: #475569;
}

.landing-theme-light .text-gray-600 {
    color: #64748b;
}

.landing-theme-light .text-\[\#ff9d00\] {
    color: #ea580c;
}

.landing-theme-light .text-cyber-green {
    color: #059669;
}

.landing-theme-light .text-cyber-blue {
    color: #0284c7;
}

.landing-theme-light h1,
.landing-theme-light h2,
.landing-theme-light h3,
.landing-theme-light h4 {
    color: #07111f;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.62);
}

/* Allow gradient-clipped text in headings */
.landing-theme-light h1 .text-transparent,
.landing-theme-light h2 .text-transparent {
    color: transparent;
    text-shadow: none;
}

.landing-theme-light .bg-black\/40,
.landing-theme-light .bg-black\/35,
.landing-theme-light .bg-black\/30,
.landing-theme-light .bg-black\/50,
.landing-theme-light .bg-black\/60 {
    background-color: rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(18px);
}

.landing-theme-light .bg-\[\#0d1321\]\/70,
.landing-theme-light .bg-\[\#0d1321\]\/65 {
    background-color: rgba(248, 250, 252, 0.86);
}

.landing-theme-light .bg-white\/8,
.landing-theme-light .bg-white\/12 {
    background-color: rgba(15, 23, 42, 0.04);
}

.landing-theme-light .border-cyber-blue\/10,
.landing-theme-light .border-cyber-blue\/12,
.landing-theme-light .border-cyber-blue\/15,
.landing-theme-light .border-cyber-blue\/20,
.landing-theme-light .border-white\/10 {
    border-color: rgba(15, 23, 42, 0.10);
}

.landing-theme-light .card-lift,
.landing-theme-light .entry-flow-card {
    box-shadow: 0 16px 42px rgba(15, 23, 42, 0.06);
}

.landing-theme-light .card-lift:hover {
    box-shadow: 0 22px 54px rgba(15, 23, 42, 0.12);
}

.landing-theme-light .theme-toggle-button {
    background: rgba(0, 210, 255, 0.08);
}

.theme-toggle-button {
    flex-shrink: 0;
}

.landing-theme-light section {
    position: relative;
    isolation: isolate;
}

.landing-theme-light section::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.34;
    background:
        radial-gradient(circle at 12% 22%, rgba(0, 210, 255, 0.16), transparent 26%),
        radial-gradient(circle at 86% 62%, rgba(176, 38, 255, 0.10), transparent 28%);
}

.landing-theme-light .landing-noise {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.52), rgba(239,246,255,0.36)),
        radial-gradient(circle at 50% 8%, rgba(0, 210, 255, 0.14), transparent 34%);
}

.landing-theme-light .inline-flex.bg-cyber-blue\/5,
.landing-theme-light .bg-cyber-blue\/5,
.landing-theme-light .bg-cyber-purple\/5 {
    background-color: rgba(0, 210, 255, 0.09);
}

.landing-theme-light .cta-primary {
    box-shadow: 0 18px 42px rgba(0, 119, 255, 0.22);
}

.landing-theme-light .vylmoon-pricing-wordmark-base {
    color: rgba(15, 23, 42, 0.12);
    text-shadow: none;
}

.landing-theme-light .vylmoon-pricing-wordmark-light {
    background:
        radial-gradient(
            circle 260px at var(--spot-x) var(--spot-y),
            rgba(15, 23, 42, 0.78) 0%,
            rgba(71, 85, 105, 0.46) 36%,
            rgba(148, 163, 184, 0.18) 62%,
            rgba(255, 255, 255, 0) 78%
        );
    -webkit-background-clip: text;
    background-clip: text;
}

.vylmoon-pricing-wordmark {
    --spot-x: 50%;
    --spot-y: 50%;
    position: relative;
    display: inline-grid;
    place-items: center;
    cursor: default;
    user-select: none;
    width: min(1180px, calc(100vw - 40px));
    padding: 0.1em 0;
    font-family: var(--font-display);
    font-size: clamp(4.6rem, 12vw, 10.5rem);
    font-weight: 300;
    line-height: 0.9;
    letter-spacing: 0.075em;
    text-transform: uppercase;
    text-align: center;
}

.vylmoon-pricing-wordmark-base,
.vylmoon-pricing-wordmark-light {
    grid-area: 1 / 1;
}

.vylmoon-pricing-wordmark-base {
    color: rgba(148, 163, 184, 0.08);
    text-shadow: 0 0 22px rgba(15, 23, 42, 0.55);
}

.vylmoon-pricing-wordmark-light {
    color: transparent;
    background:
        radial-gradient(
            circle 260px at var(--spot-x) var(--spot-y),
            rgba(226, 232, 240, 0.82) 0%,
            rgba(148, 163, 184, 0.42) 34%,
            rgba(71, 85, 105, 0.18) 58%,
            rgba(15, 23, 42, 0) 76%
        );
    -webkit-background-clip: text;
    background-clip: text;
    opacity: 0;
    filter: drop-shadow(0 0 16px rgba(226, 232, 240, 0.10));
    transition: opacity 0.16s ease-out;
    will-change: opacity, background;
}

.vylmoon-pricing-wordmark:hover .vylmoon-pricing-wordmark-light {
    opacity: 1;
}

@media (max-width: 640px) {
    .vylmoon-pricing-wordmark {
        width: calc(100vw - 28px);
        font-size: clamp(2.8rem, 13vw, 4.6rem);
        letter-spacing: 0.055em;
    }
}

.login-brand-panel {
    animation: login-panel-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.login-form-shell {
    animation: login-form-in 0.75s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.login-card {
    position: relative;
    overflow: hidden;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.28);
    transition: border-color 0.24s ease, box-shadow 0.24s ease, transform 0.24s ease;
}

.login-card:hover {
    border-color: rgba(0, 210, 255, 0.28);
    box-shadow: 0 32px 90px rgba(0, 0, 0, 0.35), 0 0 42px rgba(0, 210, 255, 0.08);
    transform: translateY(-2px);
}

.login-card::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.045), transparent);
    transform: translateX(-120%);
    transition: transform 0.9s ease;
}

.login-card:hover::before {
    transform: translateX(120%);
}

.login-card input {
    min-height: 42px;
    padding-top: 0.66rem;
    padding-bottom: 0.66rem;
    border-radius: 10px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.login-card label {
    margin-bottom: 0.4rem;
    font-size: 0.78rem;
}

.login-card form {
    gap: 0.85rem;
}

.login-card input:focus {
    border-color: #00d2ff;
    box-shadow: 0 0 0 1px rgba(0, 210, 255, 0.24), 0 0 24px rgba(0, 210, 255, 0.08);
    background-color: #111a2a;
    transform: translateY(-1px);
}

.login-logo-home {
    transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1), filter 0.24s ease;
}

.login-logo-home:hover {
    transform: translateY(-2px);
    filter: drop-shadow(0 0 18px rgba(0, 210, 255, 0.18));
}

.login-trust-item {
    padding: 11px 13px;
    border: 1px solid rgba(148, 163, 184, 0.10);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.18);
    transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.24s ease, background-color 0.24s ease;
}

.login-trust-item:hover {
    transform: translateX(6px);
    border-color: rgba(0, 210, 255, 0.28);
    background: rgba(0, 210, 255, 0.045);
}

.login-check-dot {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: #00ff9d;
    background: rgba(0, 255, 157, 0.09);
    border: 1px solid rgba(0, 255, 157, 0.28);
    box-shadow: 0 0 18px rgba(0, 255, 157, 0.12);
    font-size: 13px;
}

@media (min-width: 1024px) and (max-height: 820px) {
    .login-logo-home img {
        width: 240px;
    }

    .login-brand-panel {
        transform: scale(.94);
        transform-origin: center;
    }

    .login-trust-item {
        padding: 9px 12px;
    }
}

.login-theme-light {
    color: #0f172a;
    background:
        radial-gradient(circle at 16% 18%, rgba(0, 210, 255, 0.14), transparent 30%),
        radial-gradient(circle at 84% 72%, rgba(176, 38, 255, 0.12), transparent 30%),
        linear-gradient(180deg, #f8fafc 0%, #edf6ff 100%);
}

.login-theme-light #particles-canvas {
    opacity: 0.78;
    mix-blend-mode: multiply;
}

.login-theme-light .aurora-a,
.login-theme-light .aurora-b,
.login-theme-light .aurora-c {
    opacity: 0.75;
}

.login-theme-light .text-white,
.login-theme-light .text-gray-200,
.login-theme-light .text-gray-300 {
    color: #0f172a;
}

.login-theme-light .text-gray-400 {
    color: #475569;
}

.login-theme-light .text-gray-500 {
    color: #64748b;
}

.login-theme-light .text-\[\#dbeafe\],
.login-theme-light .text-cyan-300,
.login-theme-light .text-cyan-400 {
    color: #111827;
}

.login-theme-light .text-\[\#c7d2fe\] {
    color: #4f46e5;
}

.login-theme-light .text-red-400 {
    color: #b91c1c;
}

.login-theme-light .text-green-400 {
    color: #047857;
}

.login-theme-light .login-card {
    background: rgba(255, 255, 255, 0.86);
    border-color: rgba(15, 23, 42, 0.12);
    box-shadow: 0 30px 90px rgba(15, 23, 42, 0.10);
}

.login-theme-light .login-card input {
    background: rgba(248, 250, 252, 0.92);
    border-color: rgba(15, 23, 42, 0.16);
    color: #0f172a;
}

.login-theme-light .login-card input::placeholder {
    color: #94a3b8;
}

.login-theme-light .login-trust-item {
    background: rgba(255, 255, 255, 0.68);
    border-color: rgba(15, 23, 42, 0.10);
    box-shadow: 0 16px 42px rgba(15, 23, 42, 0.06);
}

.login-theme-light .login-trust-item:hover {
    background: rgba(255, 255, 255, 0.88);
    border-color: rgba(0, 210, 255, 0.28);
}

.login-theme-light .bg-\[\#101b2b\],
.login-theme-light .bg-\[\#151b28\],
.login-theme-light .bg-\[\#1e2536\] {
    background-color: rgba(248, 250, 252, 0.92);
}

.login-theme-light .border-gray-700,
.login-theme-light .border-gray-700\/50 {
    border-color: rgba(15, 23, 42, 0.14);
}

@keyframes login-panel-in {
    from { opacity: 0; transform: translateX(-34px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes login-form-in {
    from { opacity: 0; transform: translateX(28px) scale(0.985); }
    to { opacity: 1; transform: translateX(0) scale(1); }
}

/* Animated gradient border on primary CTA */
@keyframes cta-glow-pulse {
    0%, 100% { box-shadow: 0 0 28px rgba(0, 210, 255, 0.28), 0 4px 16px rgba(0,0,0,0.35); }
    50%       { box-shadow: 0 0 48px rgba(0, 210, 255, 0.55), 0 4px 20px rgba(0,0,0,0.4);  }
}
.cta-primary { animation: cta-glow-pulse 3s ease-in-out infinite; }

/* Dynamic floor milestone connector fill */
.milestone-connector {
    position: relative;
    overflow: hidden;
    border-radius: 999px;
}
.milestone-connector::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: scaleX(0);
    transform-origin: left;
    background: linear-gradient(to right, var(--from-color), var(--to-color));
    box-shadow: 0 0 12px var(--to-color);
    animation: milestone-fill 4.8s ease-in-out infinite;
    animation-delay: var(--fill-delay);
}
@keyframes milestone-fill {
    0%, 12% {
        transform: scaleX(0);
        opacity: 0.45;
    }
    30%, 78% {
        transform: scaleX(1);
        opacity: 1;
    }
    100% {
        transform: scaleX(1);
        opacity: 0.55;
    }
}

/* Strategy Option Picker */
.strategy-picker-page {
    --sp-panel: #111720;
    --sp-panel-2: #0d121a;
    --sp-line: #263241;
    --sp-line-2: #1b2531;
    --sp-muted: #8190a2;
    --sp-green: #4cd494;
    --sp-red: #ff7187;
    --sp-yellow: #f3c968;
    --sp-violet: #76bbff;
    position: relative;
    z-index: 1;
    height: 100%;
    overflow-y: auto;
    color: #f5f7fa;
    background: #090d13;
    font-family: var(--font-ui);
}
.sp-brand,
.sp-hero h1,
.sp-strategy-head h2,
.sp-chain-top strong,
.sp-ticket h2,
.sp-confirm h2,
.sp-an-head h2,
.sp-an-card h3,
.sp-compare-section h3,
.sp-sim-section h3 {
    font-family: var(--font-display);
}
.sp-refresh,
.sp-qitem > strong,
.sp-qitem select,
.sp-chain-controls select,
.sp-chain-value,
.sp-premium,
.sp-position > strong,
.sp-leg-value,
.sp-cost > div b,
.sp-compare-table td {
    font-family: var(--font-data);
    font-variant-numeric: tabular-nums slashed-zero;
}
.sp-app { width: 100%; max-width: none; margin: 0; padding: 10px 14px 24px; }
.sp-topbar, .sp-hero, .sp-strategy-head, .sp-strategy-helper, .sp-chain-top { display: flex; justify-content: space-between; gap: 16px; }
.sp-topbar { align-items: center; margin-bottom: 25px; }
.sp-brand { font-size: 24px; font-weight: 900; letter-spacing: -.8px; }
.sp-brand > span { color: var(--sp-green); }
.sp-brand small { display: block; margin-top: 2px; color: #697382; font-size: 9px; letter-spacing: 1.55px; }
.sp-live { display: flex; align-items: center; gap: 8px; color: var(--sp-muted); font-size: 12px; }
.sp-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sp-green); box-shadow: 0 0 0 4px rgba(23, 201, 109, .11); }
.sp-dot.pause { background: #8e98a7; box-shadow: none; }
.sp-hero { align-items: flex-end; margin-bottom: 18px; }
.sp-hero h1 { margin: 0; font-size: 27px; font-weight: 900; line-height: 1.08; letter-spacing: -.9px; }
.sp-hero p { margin: 7px 0 0; color: var(--sp-muted); font-size: 13px; line-height: 1.45; }
.sp-refresh { color: var(--sp-muted); font-size: 11px; line-height: 1.55; text-align: right; }
.sp-refresh b { color: #dbe2ea; }
.sp-contextbar { display: flex; align-items: center; justify-content: space-between; min-height: 28px; margin-bottom: 8px; padding: 4px 2px; }
.sp-contextbar .sp-refresh { display: flex; align-items: center; gap: 8px; line-height: 1.2; }
.sp-contextbar .sp-refresh span { color: #6f7d8d; }
.sp-panel { overflow: hidden; min-width: 0; border: 1px solid #2a3746; border-radius: 5px; background: var(--sp-panel); box-shadow: 0 20px 52px rgba(0, 0, 0, .28); }

.sp-quote { display: grid; grid-template-columns: minmax(145px, .8fr) minmax(180px, 1.8fr) minmax(150px, .9fr) minmax(126px, .8fr) minmax(132px, auto); overflow: hidden; margin-bottom: 12px; border: 1px solid #2a3746; border-radius: 5px; background: var(--sp-panel); box-shadow: 0 20px 52px rgba(0, 0, 0, .28); }
.sp-qitem { min-height: 64px; padding: 10px 12px; border-right: 1px solid var(--sp-line-2); }
.sp-qitem label, .sp-status label, .sp-leg > label, .sp-order-grid label { display: block; color: #818b99; font-size: 9px; font-weight: 850; letter-spacing: .8px; text-transform: uppercase; }
.sp-qitem select { width: 100%; margin-top: 3px; padding: 0; border: 0; outline: 0; color: #f5f7fa; background: transparent; font-size: 18px; font-weight: 900; }
.sp-qitem select option { background: #12151b; }
.sp-qitem > strong { display: block; margin-top: 5px; font-size: 18px; font-weight: 900; letter-spacing: 0; }
.sp-qitem > strong.sp-fixed-symbol { margin-top: 3px; font-size: 20px; }
.sp-qitem > strong.compact, .sp-qitem > strong.target { font-size: 18px; }
.sp-qitem > strong.target { color: var(--sp-yellow); }
.sp-qitem small { display: block; margin-top: 3px; color: var(--sp-muted); font-size: 11px; }
.strategy-picker-page .positive { color: var(--sp-green); }
.strategy-picker-page .negative { color: var(--sp-red); }
.sp-toggle { display: flex; align-items: center; justify-content: center; border: 0; }
.sp-toggle button, .sp-strategy-head > button { padding: 9px 11px; border: 1px solid #303844; border-radius: 10px; color: #d4dce5; background: #171b22; font-size: 11px; font-weight: 850; transition: .16s; }
.sp-toggle button:hover, .sp-strategy-head > button:hover { border-color: #465367; background: #1c222b; }
.sp-toggle button.playing { border-color: rgba(23, 201, 109, .52); color: #b7f3d2; background: rgba(23, 201, 109, .07); }
.sp-toggle button:disabled { opacity: .45; cursor: wait; }

.sp-strategy { margin-bottom: 8px; }
.sp-strategy-head { align-items: center; padding: 7px 9px; border-bottom: 1px solid var(--sp-line-2); }
.sp-strategy.collapsed .sp-strategy-head { border-bottom: 0; }
.sp-strategy-head h2, .sp-chain-top strong { margin: 0; font-size: 15px; font-weight: 900; letter-spacing: -.25px; }
.sp-strategy-head p { margin: 4px 0 0; color: var(--sp-muted); font-size: 11px; line-height: 1.45; }
.sp-section-toggle { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; padding: 0; border: 0; color: #e8edf3; background: transparent; text-align: left; cursor: pointer; }
.sp-section-toggle span { color: #8190a2; font-size: 9px; font-weight: 900; letter-spacing: .75px; text-transform: uppercase; }
.sp-section-toggle strong { overflow: hidden; font-size: 12px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.sp-section-toggle i { display: grid; place-items: center; width: 22px; height: 22px; margin-left: auto; border: 1px solid #344151; border-radius: 5px; color: #aeb9c7; background: #111820; font-size: 14px; font-style: normal; }
.sp-strategy-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 8px; }
.sp-strategy-card { min-height: 48px; padding: 7px 9px; border: 1px solid #2a3039; border-radius: 5px; color: #f5f7fa; background: #0d121a; text-align: left; transition: .15s; }
.sp-strategy-card:hover { transform: translateY(-1px); border-color: #4a5666; background: #131720; }
.sp-strategy-card.active { border-color: var(--sp-violet); background: rgba(167, 139, 250, .12); box-shadow: inset 0 0 0 1px rgba(167, 139, 250, .18); }
.sp-strategy-card span { display: block; font-size: 11px; font-weight: 900; letter-spacing: -.1px; }
.sp-strategy-card b { display: block; margin-top: 3px; color: #8996a7; font-size: 8px; line-height: 1.25; }
.sp-strategy-card small { display: block; margin-top: 8px; color: #7e8999; font-size: 10px; }
.sp-strategy-helper { align-items: center; justify-content: flex-end; padding: 6px 8px; border-top: 1px solid var(--sp-line-2); background: #0d0f13; }
.sp-strategy.collapsed .sp-strategy-helper { border-top-color: #202a36; }
.sp-strategy-helper p { margin: 0; color: var(--sp-muted); font-size: 11px; line-height: 1.45; }
.sp-strategy-helper p b { color: #e7ebf1; }
.sp-strategy-helper button { padding: 6px 9px; border: 1px solid rgba(167, 139, 250, .48); border-radius: 6px; color: #dfd5ff; background: rgba(167, 139, 250, .1); font-size: 9px; font-weight: 850; white-space: nowrap; }
.sp-strategy-helper button:hover { background: rgba(167, 139, 250, .18); }
.sp-helper-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.sp-helper-actions button:first-child { border-color: #35404d; color: #c7d0da; background: #171b22; }
.sp-error, .sp-loading { margin-bottom: 18px; padding: 24px; }
.sp-error { border-color: rgba(255, 92, 114, .42); }
.sp-error h2 { margin: 0 0 6px; color: #ff9baa; font-size: 16px; }
.sp-error p { margin: 0 0 14px; color: var(--sp-muted); font-size: 12px; }
.sp-error button { padding: 8px 12px; border: 1px solid #465367; border-radius: 9px; color: #e8edf3; background: #1c222b; font-size: 11px; font-weight: 850; }
.sp-loading { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--sp-muted); font-size: 12px; }
.sp-loading span { width: 14px; height: 14px; border: 2px solid rgba(167, 139, 250, .25); border-top-color: var(--sp-violet); border-radius: 50%; animation: sp-spin .8s linear infinite; }
@keyframes sp-spin { to { transform: rotate(360deg); } }

.sp-layout { display: grid; grid-template-columns: minmax(560px, var(--sp-chain-width, 640px)) 14px minmax(250px, 1fr); gap: 0; align-items: start; }
.sp-layout.sp-ticket-hidden { grid-template-columns: minmax(0, 1fr); }
.sp-chain-panel { min-width: 0; }
.sp-panel-resizer { position: relative; align-self: stretch; min-height: 220px; cursor: col-resize; touch-action: none; }
.sp-panel-resizer::before { content: ''; position: absolute; inset: 0 4px; border-radius: 999px; background: #253345; box-shadow: inset 0 0 0 1px rgba(118,187,255,.08); transition: background .16s, box-shadow .16s; }
.sp-panel-resizer span { position: sticky; top: 50%; display: block; width: 6px; height: 52px; margin: 0 auto; transform: translateY(-50%); border-radius: 999px; background: #7187a1; box-shadow: 0 0 0 1px rgba(9,13,19,.72); transition: background .16s, height .16s; }
.sp-panel-resizer:hover::before { background: rgba(118,187,255,.22); box-shadow: 0 0 12px rgba(118,187,255,.16); }
.sp-panel-resizer:hover span { height: 56px; background: #76bbff; }
.sp-chain-top { align-items: center; padding: 10px 11px; border-bottom: 1px solid var(--sp-line); background: #141c27; }
.sp-chain-top > div:first-child small { display: block; margin-top: 3px; color: var(--sp-muted); font-size: 11px; }
.sp-chain-top > div:last-child { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.sp-chain-top > div:last-child span { padding: 6px 8px; border: 1px solid #2b323c; border-radius: 999px; color: #a6b0bd; background: #151920; font-size: 10px; font-weight: 850; }
.sp-chain-top > div:last-child span.yellow { border-color: rgba(244, 197, 87, .35); color: #f7d583; background: rgba(244, 197, 87, .11); }
.sp-chain-controls { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 8px 11px; border-bottom: 1px solid var(--sp-line); background: #0e141d; }
.sp-chain-controls label { display: inline-flex; align-items: center; gap: 8px; height: 25px; padding: 0 8px; border: 1px solid #314153; border-radius: 3px; color: #8190a2; background: #111a25; font-size: 9px; font-weight: 900; letter-spacing: .7px; text-transform: uppercase; }
.sp-chain-controls select { border: 0; outline: 0; color: #f5f7fa; background: transparent; font-size: 12px; font-weight: 950; }
.sp-chain-controls select option { background: #12161d; }
.sp-chain-controls button { height: 25px; padding: 0 10px; border: 1px solid rgba(118,154,190,.42); border-radius: 6px; color: #dce7f4; background: rgba(31,52,72,.64); font-size: 10px; font-weight: 900; cursor: pointer; }
.sp-chain-controls button.active, .sp-chain-controls button:hover { border-color: rgba(167,139,250,.55); color: #dfd5ff; background: rgba(167,139,250,.12); }
.sp-density-control { display: inline-flex; align-items: center; gap: 3px; margin-right: auto; }
.sp-density-control > span { margin-right: 4px; color: #718095; font-size: 8px; font-weight: 900; letter-spacing: .65px; text-transform: uppercase; }
.sp-density-control button { height: 25px; padding: 0 7px; border-color: #2b3848; color: #8e9bad; background: #101721; font-size: 8px; }
.sp-density-control button.active { border-color: rgba(118,187,255,.58); color: #b9ddff; background: rgba(118,187,255,.12); }
.sp-chain-controls .sp-ticket-reopen { border-color: rgba(76,212,148,.5); color: #a9ebc8; background: rgba(76,212,148,.1); }
.sp-column-config-panel { padding: 12px 13px 14px; border-bottom: 1px solid var(--sp-line-2); background: #0f1218; }
.sp-column-config-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 10px; }
.sp-column-config-head strong { font-size: 12px; font-weight: 950; }
.sp-column-config-head span { color: #828d9c; font-size: 10px; line-height: 1.35; text-align: right; }
.sp-column-config-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sp-column-config-group { border: 1px solid #28313c; border-radius: 8px; background: #0b0e13; }
.sp-column-config-title { display: flex; align-items: center; justify-content: space-between; padding: 9px 10px; border-bottom: 1px solid #1d232d; }
.sp-column-config-title strong { font-size: 11px; font-weight: 950; }
.sp-column-config-title button { border: 0; color: #8994a3; background: transparent; font-size: 10px; font-weight: 900; cursor: pointer; }
.sp-column-config-title button:hover { color: #e8edf3; }
.sp-column-list { display: grid; gap: 6px; padding: 8px; }
.sp-column-item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; min-height: 34px; padding: 5px 6px; border: 1px solid #26303a; border-radius: 7px; color: #dce3ec; background: #121720; cursor: grab; }
.sp-column-item.dragging { opacity: .5; border-color: rgba(167,139,250,.55); }
.sp-column-grip { color: #657181; font-size: 12px; letter-spacing: -2px; }
.sp-column-item b { font-size: 11px; font-weight: 900; }
.sp-column-item div { display: flex; gap: 4px; }
.sp-column-item button { width: 24px; height: 24px; border: 1px solid #323b48; border-radius: 6px; color: #bac4d0; background: #171d26; font-size: 11px; cursor: pointer; }
.sp-column-item button:disabled { opacity: .35; cursor: not-allowed; }
.sp-chain-scroll { overflow: auto; width: 100%; max-width: 100%; height: clamp(330px, calc(100vh - 385px), 560px); scrollbar-color: #405168 #0c1118; scrollbar-width: thin; }
.sp-chain-scroll table { width: min(100%, 640px); min-width: 590px; margin: 0 auto; border-spacing: 0; border-collapse: separate; table-layout: fixed; }
.sp-density-medium .sp-chain-scroll table { width: min(100%, 800px); min-width: 700px; }
.sp-density-wide .sp-chain-scroll table { width: 100%; min-width: 760px; }
.sp-chain-scroll thead { position: sticky; z-index: 6; top: 0; }
.sp-chain-scroll thead th { height: 23px; border-bottom: 1px solid #334152; color: #8292a5; background: #101721; font-size: 8px; font-weight: 900; letter-spacing: .5px; text-align: center; text-transform: uppercase; }
.sp-chain-scroll thead th.sp-side-head { height: 25px; color: #d8dee7; font-size: 9px; }
.sp-chain-scroll thead th.sp-side-head.call { color: #9de8bf; }
.sp-chain-scroll thead th.sp-side-head.put { color: #ffb4be; }
.sp-chain-scroll thead th.sp-strike-head { width: 66px; color: #d7e3f1; border-right: 1px solid #384656; border-left: 1px solid #384656; background: #111317; }
.sp-chain-scroll thead th.sp-column-head.spread.call { color: #9fc8ff; }
.sp-chain-scroll thead th.sp-column-head.spread.put { color: #ffb4c8; }
.sp-chain-scroll tbody td { position: relative; height: 26px; border-bottom: 1px solid rgba(43, 55, 70, .72); text-align: center; }
.sp-density-medium .sp-chain-scroll tbody td { height: 28px; }
.sp-density-wide .sp-chain-scroll tbody td { height: 30px; }
.sp-chain-cell { width: calc((100% - 66px) / 8); padding: 0; }
.sp-strike-cell { width: 66px; border-right: 1px solid #384656; border-left: 1px solid #384656; background: #141d28; }
.sp-study-active .sp-chain-scroll thead th.sp-strike-head,
.sp-study-active .sp-strike-cell { width: 96px; }
.sp-study-active .sp-chain-cell { width: calc((100% - 96px) / 8); }
.sp-contract-wrap { position: relative; height: 100%; }
.sp-contract { display: flex; align-items: center; justify-content: center; width: 100%; height: 22px; padding: 0 2px; border: 1px solid transparent; border-radius: 2px; color: #dbe5f0; background: transparent; text-align: center; transition: .12s; }
.sp-contract:hover { transform: none; border-color: rgba(118,187,255,.42); background: rgba(118,187,255,.065); }
.sp-contract.eligible { box-shadow: none; }
.sp-contract.selected.call { border-color: rgba(76,212,148,.82); background: rgba(76,212,148,.14); box-shadow: inset 0 0 0 1px rgba(76,212,148,.16); }
.sp-contract.selected.put { border-color: rgba(255,113,135,.82); background: rgba(255,113,135,.13); box-shadow: inset 0 0 0 1px rgba(255,113,135,.16); }
.sp-chain-value { flex-direction: column; gap: 0; color: #eef5fb; font-family: var(--font-data); font-size: 10.5px; font-weight: 900; letter-spacing: 0; }
.sp-density-medium .sp-chain-value { font-size: 11px; }
.sp-density-wide .sp-chain-value { font-size: 11.5px; }
.sp-chain-value small { color: var(--sp-green); font-size: 8px; font-weight: 950; letter-spacing: .55px; }
.sp-spread-data.call .sp-chain-value { color: #9fd0ff; background: rgba(88,166,255,.055); }
.sp-spread-data.put .sp-chain-value { color: #ffb8c7; background: rgba(255,92,114,.055); }
.sp-spread-data .sp-chain-value.good { color: #92ebb8; }
.sp-spread-data .sp-chain-value.warn { color: #f3c76d; }
.sp-premium { font-size: 17px; font-weight: 900; letter-spacing: -.45px; }
.sp-miniquote { margin-top: 3px; color: #8691a0; font-size: 10px; }
.sp-target-dot { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: var(--sp-yellow); vertical-align: middle; }
.sp-spread { color: #929cab; font-size: 10px; font-weight: 850; white-space: nowrap; }
.sp-spread.good { color: #75e6af; }
.sp-spread.warn { color: #f3c76d; }
.sp-spread small { display: block; margin-top: 2px; color: var(--sp-green); font-size: 8px; letter-spacing: .4px; }
.sp-zone { display: flex; align-items: center; justify-content: center; flex-direction: column; height: 100%; gap: 1px; }
.sp-zone strong { font: 900 11.5px ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing: 0; }
.sp-zone small { color: #78899b; font-size: 8px; font-weight: 900; letter-spacing: .55px; }
.sp-strike-analysis-actions { position: absolute; z-index: 3; inset: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 3px; pointer-events: none; }
.sp-strike-analysis-actions button { display: grid; place-items: center; width: 19px; height: 19px; padding: 0; border: 1px solid rgba(88,166,255,.42); border-radius: 5px; color: #b9dcff; background: #102033; font-size: 10px; line-height: 1; cursor: pointer; pointer-events: auto; transition: .14s; }
.sp-strike-analysis-actions button.call { border-color: rgba(76,212,148,.42); background: rgba(25,74,54,.88); }
.sp-strike-analysis-actions button.put { border-color: rgba(255,113,135,.42); background: rgba(78,31,43,.88); }
.sp-strike-analysis-actions button:hover { transform: scale(1.08); filter: brightness(1.2); }
.sp-row-call-itm .sp-call-data, .sp-row-put-itm .sp-put-data { background: rgba(127,153,185,.15); color: #c8d5e2; }
.sp-row-call-otm .sp-call-data { background: rgba(76,212,148,.018); }
.sp-row-put-otm .sp-put-data { background: rgba(255,113,135,.018); }
.sp-row-atm td { background: linear-gradient(180deg, rgba(243,201,104,.15), rgba(243,201,104,.075)); border-top: 1px solid rgba(243,201,104,.74); border-bottom: 1px solid rgba(243,201,104,.74); }
.sp-row-atm .sp-contract { color: #fff4cf; font-weight: 950; }
.sp-row-atm .sp-strike-cell { background: rgba(243,201,104,.2); box-shadow: inset 0 0 0 1px rgba(243,201,104,.18); }
.sp-row-atm .sp-zone strong { color: #ffe6a6; }
.sp-row-atm .sp-zone small { color: #ffd978; }
.sp-price-divider td { height: 28px; border-top: 1px solid rgba(244,197,87,.42); border-bottom: 1px solid rgba(244,197,87,.42); background: linear-gradient(90deg,rgba(244,197,87,.025),rgba(244,197,87,.13),rgba(244,197,87,.025)); }
.sp-price-marker { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border: 1px solid rgba(244,197,87,.55); border-radius: 999px; color: #ffe39b; background: #1b1814; font-size: 10px; font-weight: 900; }
.sp-price-marker i { width: 6px; height: 6px; border-radius: 50%; background: var(--sp-yellow); }
.sp-note { padding: 7px 10px; border-top: 1px solid var(--sp-line-2); color: #909aa8; font-size: 9px; line-height: 1.35; }
.sp-note b { color: #dde4ed; }

.sp-ticket { padding: 12px; border-radius: 5px; }
.sp-ticket-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.sp-ticket-head button { padding: 5px 8px; border: 1px solid #344151; border-radius: 6px; color: #9aa8b9; background: #111820; font-size: 9px; font-weight: 850; }
.sp-ticket-head button:hover { border-color: #52647a; color: #e2e9f1; }
.sp-ticket h2 { margin: 0; font-size: 16px; font-weight: 900; letter-spacing: -.3px; }
.sp-ticket > p { margin: 5px 0 13px; color: var(--sp-muted); font-size: 12px; line-height: 1.45; }
.sp-status { margin-bottom: 10px; padding: 10px 11px; border: 1px solid rgba(167,139,250,.35); border-radius: 12px; background: rgba(167,139,250,.12); }
.sp-status label { color: #bdb1f9; }
.sp-status > strong, .sp-status > small { display: block; }
.sp-status > strong { margin-top: 4px; font-size: 13px; font-weight: 950; }
.sp-status > small { margin-top: 5px; color: #ffc068; font-size: 10px; line-height: 1.42; }
.sp-status > small.ready { color: #9aebbc; }
.sp-position { margin-bottom: 10px; padding: 11px; border: 1px solid rgba(23,201,109,.34); border-radius: 12px; background: rgba(23,201,109,.07); }
.sp-position > div { display: flex; justify-content: space-between; gap: 8px; color: #a4e7c2; font-size: 10px; font-weight: 900; }
.sp-position p { margin: 5px 0 0; font-size: 12px; font-weight: 850; }
.sp-position > strong { display: block; margin-top: 7px; font-size: 16px; font-weight: 950; }
.sp-leg { margin-bottom: 9px; padding: 11px; border: 1px solid var(--sp-line); border-radius: 12px; background: var(--sp-panel-2); }
.sp-leg.call { border-color: rgba(23,201,109,.36); }
.sp-leg.put { border-color: rgba(255,92,114,.36); }
.sp-empty { margin-top: 7px; color: #727d8d; font-size: 12px; }
.sp-leg-row { display: flex; align-items: center; justify-content: space-between; gap: 7px; margin-top: 7px; }
.sp-contract-name { font-size: 12px; font-weight: 900; }
.sp-detail { margin-top: 3px; color: #818c9c; font-size: 10px; }
.sp-leg-value { font-size: 16px; font-weight: 950; text-align: right; }
.sp-leg-value button { padding: 1px 0 0 4px; border: 0; color: #7d8795; background: transparent; font-size: 17px; }
.sp-order-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 12px 0; }
.sp-order-grid label { margin-bottom: 5px; color: #7f8998; letter-spacing: .7px; }
.sp-control { display: flex; align-items: center; height: 32px; padding: 0 8px; border: 1px solid var(--sp-line); border-radius: 5px; color: #e4edf7; background: var(--sp-panel-2); font-size: 11px; font-weight: 850; }
.sp-qty-select { width: 100%; outline: none; appearance: auto; }
.sp-qty-select option { background: #111a25; color: #e4edf7; }
.sp-stepper { justify-content: space-between; padding: 0 5px; }
.sp-stepper button { width: 24px; height: 24px; border: 0; border-radius: 6px; color: #fff; background: #202631; font-size: 15px; }
.sp-cost { padding: 11px; border: 1px solid #28313d; border-radius: 11px; background: #0f1218; }
.sp-cost > div { display: flex; justify-content: space-between; font-size: 11px; font-weight: 900; }
.sp-cost > div span { color: #99a4b4; }
.sp-cost > div b { font-size: 14px; }
.sp-cost p { margin: 5px 0 0; color: #7e8998; font-size: 10px; line-height: 1.45; }
.sp-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.sp-actions button { padding: 12px 7px; border-radius: 10px; font-size: 10px; font-weight: 950; transition: .15s; }
.sp-actions button:first-child { border: 0; color: #07110a; background: var(--sp-green); }
.sp-actions button:last-child { border: 1px solid #343d49; color: #e5eaf2; background: #252b34; }
.sp-actions button.sp-locked, .sp-actions button.sp-locked:first-child, .sp-actions button.sp-locked:last-child { border: 1px solid #3a424e; color: #aeb7c3; background: #20252d; }
.sp-actions button.sp-locked:hover { border-color: #687383; color: #e7ebf1; background: #282f39; }
.sp-actions button:disabled { opacity: .38; cursor: not-allowed; }
.sp-symbol-select { width: 112px; margin: 3px 0 2px; padding: 7px 9px; border: 1px solid rgba(167,139,250,.48); border-radius: 9px; color: #fff; background: #171b22; font-size: 18px; font-weight: 950; outline: none; }
.sp-symbol-select:focus { border-color: #a78bfa; box-shadow: 0 0 0 3px rgba(167,139,250,.12); }
.sp-confirm-backdrop { position: fixed; z-index: 90; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(4,6,10,.78); backdrop-filter: blur(8px); }
.sp-confirm { width: min(520px, 96vw); padding: 22px; border: 1px solid #384353; border-radius: 16px; color: #edf2f8; background: #11151c; box-shadow: 0 28px 80px rgba(0,0,0,.58); }
.sp-confirm > span { display: inline-flex; padding: 5px 8px; border-radius: 999px; font-size: 9px; font-weight: 950; letter-spacing: 1px; }
.sp-confirm > span.danger { color: #fff; background: #d33851; }
.sp-confirm > span.paper { color: #0b1710; background: #6ee7a2; }
.sp-confirm h2 { margin: 12px 0 8px; font-size: 20px; }
.sp-confirm p { color: #aeb8c6; font-size: 12px; line-height: 1.55; }
.sp-confirm-legs { display: grid; gap: 6px; margin: 12px 0; }
.sp-confirm-legs code { overflow: hidden; padding: 8px 9px; border: 1px solid #2d3642; border-radius: 8px; color: #dce4ef; background: #0b0e13; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.sp-confirm label { display: grid; gap: 7px; margin-top: 14px; color: #aab5c3; font-size: 11px; }
.sp-confirm input { width: 100%; padding: 10px 11px; border: 1px solid #434f60; border-radius: 9px; color: #fff; background: #090c11; font-weight: 900; outline: none; }
.sp-confirm input:focus { border-color: #a78bfa; }
.sp-confirm-actions { display: grid; grid-template-columns: .7fr 1.3fr; gap: 9px; margin-top: 18px; }
.sp-confirm-actions button { padding: 11px; border: 1px solid #35404e; border-radius: 9px; color: #d8e0ea; background: #202630; font-size: 10px; font-weight: 950; }
.sp-confirm-actions button.confirm { border-color: transparent; color: #07110a; background: var(--sp-green); }
.sp-confirm-actions button:disabled { opacity: .4; cursor: not-allowed; }
.sp-hint { margin-top: 9px; color: #778291; font-size: 10px; line-height: 1.45; text-align: center; }
.sp-dev { margin-top: 8px; padding: 10px 12px; }
.sp-dev h3 { margin: 0 0 5px; font-size: 13px; font-weight: 900; }
.sp-dev p { margin: 0; color: var(--sp-muted); font-size: 11px; line-height: 1.5; }
.sp-toast { position: fixed; z-index: 60; bottom: 24px; left: 50%; max-width: min(92vw, 560px); padding: 12px 15px; transform: translate(-50%, 20px); border: 1px solid #37414e; border-radius: 12px; opacity: 0; color: #eaf0f6; background: #1a2028; box-shadow: 0 18px 48px rgba(0,0,0,.4); font-size: 12px; text-align: center; transition: .23s; pointer-events: none; }
.sp-toast.show { transform: translate(-50%, 0); opacity: 1; }
.sp-toast.negative { border-color: rgba(255,92,114,.55); }

@media (max-width: 1220px) {
    .sp-strategy-grid { grid-template-columns: repeat(2, 1fr); }
    .sp-quote { grid-template-columns: repeat(3, 1fr); }
    .sp-qitem:nth-child(3) { border-right: 0; }
    .sp-qitem:nth-child(n+4) { border-top: 1px solid var(--sp-line-2); }
}
@media (max-width: 1000px) {
    .sp-layout { grid-template-columns: 1fr; }
    .sp-panel-resizer { display: none; }
}
@media (max-width: 650px) {
    .sp-app { padding: 12px 8px 26px; }
    .sp-topbar, .sp-hero { align-items: flex-start; flex-direction: column; }
    .sp-refresh { text-align: left; }
    .sp-hero h1 { font-size: 23px; }
    .sp-quote { grid-template-columns: 1fr 1fr; }
    .sp-qitem { border-bottom: 1px solid var(--sp-line-2); }
    .sp-qitem:nth-child(even) { border-right: 0; }
    .sp-qitem:last-child { grid-column: span 2; border-bottom: 0; }
    .sp-strategy-grid { grid-template-columns: 1fr; }
    .sp-strategy-helper { align-items: flex-start; flex-direction: column; }
    .sp-strategy-helper button { width: 100%; }
    .sp-helper-actions { width: 100%; }
    .sp-chain-scroll table { min-width: 590px; }
    .sp-chain-top, .sp-chain-controls { align-items: flex-start; flex-direction: column; }
    .sp-chain-controls label, .sp-chain-controls button { width: 100%; justify-content: space-between; }
}

/* ═══════════════════════════════════════════════════════════════
   STUDY MODE / ANÁLISIS DE CONTRATOS
   ═══════════════════════════════════════════════════════════════ */

/* ── Study mode visual override ── */
.sp-study-active { background: radial-gradient(900px 500px at 0 -10%, rgba(88,166,255,.09), transparent 64%), #090b0f; }
.sp-study-banner { padding: 7px 12px; border: 1px solid rgba(88,166,255,.45); border-radius: 7px; margin-bottom: 7px; color: #cce4ff; background: rgba(88,166,255,.08); font-size: 10px; font-weight: 900; text-align: center; letter-spacing: .3px; animation: sp-study-pulse 2.5s ease-in-out infinite; }
@keyframes sp-study-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(88,166,255,.15); } 50% { box-shadow: 0 0 0 6px rgba(88,166,255,0); } }
.sp-study-badge { padding: 5px 9px; border: 1px solid rgba(88,166,255,.55); border-radius: 999px; color: #cce4ff; background: rgba(88,166,255,.12); font-size: 9px; font-weight: 950; letter-spacing: .5px; }
.sp-study-toggle-active { border-color: rgba(88,166,255,.7); color: #cce4ff; background: rgba(88,166,255,.18); }

/* ── Ticket dimmed in study mode ── */
.sp-ticket-dimmed { opacity: .5; pointer-events: none; filter: saturate(.4); }

/* ── Analysis panel ── */
.sp-analysis-panel { margin-top: 8px; }
.sp-an-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 10px; border-bottom: 1px solid #1d2128; }
.sp-analysis-panel.collapsed .sp-an-head { border-bottom: 0; }
.sp-an-head h2 { margin: 0; font-size: 16px; font-weight: 900; letter-spacing: -.35px; color: #8dc5ff; }
.sp-an-head p { margin: 4px 0 0; color: #98a2b1; font-size: 11px; line-height: 1.45; }
.sp-an-body { padding: 15px; }

/* Empty/loading */
.sp-an-empty { border: 1px dashed #38424f; border-radius: 14px; padding: 22px; text-align: center; color: #8893a3; background: #0d1016; font-size: 12px; line-height: 1.55; }
.sp-an-empty b { display: block; color: #d7dee7; margin-bottom: 5px; }
.sp-an-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 30px; color: #8dc5ff; font-size: 12px; }
.sp-an-loading span { width: 14px; height: 14px; border: 2px solid rgba(88,166,255,.25); border-top-color: #58a6ff; border-radius: 50%; animation: sp-spin .8s linear infinite; }

/* Grid */
.sp-an-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.sp-an-card { border: 1px solid #29313b; border-radius: 14px; background: #0f1218; padding: 14px; }
.sp-an-card h3 { margin: 0 0 10px; font-size: 12px; font-weight: 900; color: #e8edf3; letter-spacing: -.1px; }
.sp-an-header-line { margin-bottom: 10px; padding: 7px 9px; border: 1px solid rgba(88,166,255,.3); border-radius: 9px; color: #acd4ff; background: rgba(88,166,255,.07); font-size: 11px; font-weight: 850; }

/* Metrics */
.sp-an-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.sp-an-metric { border: 1px solid #252d37; background: #0b0e13; border-radius: 11px; padding: 10px; }
.sp-an-metric .k { font-size: 9px; text-transform: uppercase; letter-spacing: .65px; color: #7f8998; font-weight: 900; }
.sp-an-metric .v { font-size: 17px; font-weight: 950; margin-top: 5px; }
.sp-an-metric .s { font-size: 10px; color: #7c8796; margin-top: 2px; }
.sp-an-blue .v { color: #8dc5ff; }
.sp-an-yellow .v { color: #f4c557; }

/* Summary lines */
.sp-an-summary { }
.sp-an-line { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px solid #20262f; padding: 7px 0; font-size: 12px; }
.sp-an-line:last-child { border: 0; }
.sp-an-line span { color: #8d97a6; }
.sp-an-line b { font-weight: 950; }
.sp-an-green { color: #17c96d; }
.sp-an-red { color: #ff5c72; }
.sp-an-note { margin-top: 10px; padding: 9px 11px; border: 1px solid #252d37; border-radius: 10px; color: #7e8998; background: #0b0e13; font-size: 10px; line-height: 1.5; }
.sp-an-note b { color: #cce4ff; }

/* Liquidity badge */
.sp-an-liq-badge { display: inline-block; margin-top: 10px; padding: 5px 10px; border-radius: 999px; font-size: 10px; font-weight: 900; }
.sp-an-liq-buena { border: 1px solid rgba(23,201,109,.45); color: #b7f3d2; background: rgba(23,201,109,.08); }
.sp-an-liq-media { border: 1px solid rgba(244,197,87,.45); color: #f7d583; background: rgba(244,197,87,.08); }
.sp-an-liq-mala { border: 1px solid rgba(255,92,114,.45); color: #ffb3bf; background: rgba(255,92,114,.08); }

/* Diagnosis */
.sp-an-diagnosis { margin-top: 13px; border-radius: 13px; padding: 14px; }
.sp-an-diagnosis h3 { margin: 0 0 6px; font-size: 14px; }
.sp-an-diagnosis p { margin: 0; font-size: 11px; line-height: 1.55; color: #c5ccd6; }
.sp-an-diag-sub { margin-top: 6px; color: #8d97a6; font-size: 10px; }
.sp-an-diag-explosive { border: 1px solid rgba(23,201,109,.4); background: rgba(23,201,109,.07); }
.sp-an-diag-explosive h3 { color: #5eeea2; }
.sp-an-diag-good { border: 1px solid rgba(23,201,109,.34); background: rgba(23,201,109,.06); }
.sp-an-diag-good h3 { color: #82ebb8; }
.sp-an-diag-warn { border: 1px solid rgba(244,197,87,.34); background: rgba(244,197,87,.06); }
.sp-an-diag-warn h3 { color: #f7d583; }
.sp-an-diag-bad { border: 1px solid rgba(255,92,114,.34); background: rgba(255,92,114,.06); }
.sp-an-diag-bad h3 { color: #ff9baa; }

/* Diagnosis pills for comparator */
.sp-an-diag-pill { display: inline-block; padding: 3px 7px; border-radius: 999px; font-size: 9px; font-weight: 900; white-space: nowrap; }
.sp-an-diag-pill.sp-an-diag-explosive { color: #5eeea2; }
.sp-an-diag-pill.sp-an-diag-good { color: #82ebb8; }
.sp-an-diag-pill.sp-an-diag-warn { color: #f7d583; }
.sp-an-diag-pill.sp-an-diag-bad { color: #ff9baa; }

/* Action buttons */
.sp-an-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px; }
.sp-an-actions button { padding: 10px 7px; border: 1px solid #303844; border-radius: 10px; color: #d4dce5; background: #171b22; font-size: 10px; font-weight: 900; cursor: pointer; transition: .15s; }
.sp-an-actions button:hover { border-color: #465367; background: #1c222b; }
.sp-an-act-primary { border-color: rgba(88,166,255,.45); color: #cce4ff; background: rgba(88,166,255,.12); }
.sp-an-act-primary:hover { background: rgba(88,166,255,.22); }

/* ── Comparator table ── */
.sp-compare-section { margin-top: 15px; padding: 14px; border-top: 1px solid #1d2128; }
.sp-compare-section h3 { margin: 0 0 10px; font-size: 13px; font-weight: 900; color: #e8edf3; }
.sp-compare-scroll { overflow-x: auto; }
.sp-compare-table { width: 100%; min-width: 900px; border-spacing: 0; border-collapse: collapse; }
.sp-compare-table th { padding: 7px 6px; border-bottom: 1px solid #252a32; color: #7d8897; background: #0f1116; font-size: 8px; font-weight: 900; letter-spacing: .6px; text-align: center; text-transform: uppercase; white-space: nowrap; }
.sp-compare-table td { padding: 6px 6px; border-bottom: 1px solid #1d2128; text-align: center; font-size: 11px; white-space: nowrap; }
.sp-compare-rm { width: 22px; height: 22px; padding: 0; border: 1px solid #3a424e; border-radius: 6px; color: #8e98a7; background: transparent; font-size: 13px; cursor: pointer; }
.sp-compare-rm:hover { color: #ff5c72; border-color: rgba(255,92,114,.5); }

/* ── Strangle simulation ── */
.sp-sim-section { margin-top: 15px; padding: 14px; border-top: 1px solid #1d2128; }
.sp-sim-section h3 { margin: 0 0 6px; font-size: 13px; font-weight: 900; color: #e8edf3; }
.sp-sim-disclaimer { margin: 0 0 12px; padding: 7px 10px; border: 1px solid rgba(244,197,87,.3); border-radius: 9px; color: #f7d583; background: rgba(244,197,87,.06); font-size: 10px; line-height: 1.45; }
.sp-sim-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sp-sim-leg { padding: 10px; border: 1px solid #29313b; border-radius: 11px; background: #0b0e13; font-size: 11px; color: #98a2b1; }
.sp-sim-leg label { display: block; margin-bottom: 5px; color: #7f8998; font-size: 9px; font-weight: 900; letter-spacing: .8px; text-transform: uppercase; }
.sp-sim-sym { font-size: 12px; font-weight: 900; color: #e8edf3; margin-bottom: 4px; }
.sp-sim-results { margin-top: 12px; padding: 11px; border: 1px solid #28313d; border-radius: 11px; background: #0f1218; }
.sp-sim-actions { margin-top: 10px; text-align: right; }
.sp-sim-actions button { padding: 8px 12px; border: 1px solid #303844; border-radius: 9px; color: #d4dce5; background: #171b22; font-size: 10px; font-weight: 850; cursor: pointer; }

/* ── Responsive for analysis ── */
@media (max-width: 1040px) {
    .sp-an-grid { grid-template-columns: 1fr; }
    .sp-an-actions { grid-template-columns: 1fr 1fr; }
    .sp-sim-grid { grid-template-columns: 1fr; }
}
@media (max-width: 650px) {
    .sp-an-metrics { grid-template-columns: 1fr 1fr; }
    .sp-an-actions { grid-template-columns: 1fr; }
    .sp-an-head { flex-direction: column; }
}

/* Hero noise texture overlay */
.landing-noise::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity: 0.035;
    pointer-events: none;
    z-index: 0;
    border-radius: inherit;
}

/* Waitlist confirmation */
.waitlist-success {
    min-height: 286px;
}

.waitlist-confetti {
    position: absolute;
    z-index: 0;
    top: -76px;
    left: -40px;
    width: calc(100% + 80px);
    height: 330px;
    object-fit: cover;
    object-position: center top;
    opacity: 0.78;
    pointer-events: none;
    user-select: none;
}

.waitlist-success-mark {
    color: #a5b4fc;
    background: rgba(99, 102, 241, 0.18);
    border: 1px solid rgba(165, 180, 252, 0.45);
    box-shadow: 0 0 28px rgba(99, 102, 241, 0.22);
}

@media (max-width: 640px) {
    .waitlist-confetti {
        top: -58px;
        height: 306px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .waitlist-confetti {
        display: none;
    }
}

/* ========================================================================
   VYLMOON FLUID SCALE LAYER  (added 2026-07-31)
   Objetivo: que la UI se vea proporcional en cualquier resolución
   (14" a 4K) sin tocar cada className del código.

   Diseño:
   - Baseline sin cambios hasta 1440px de ancho de viewport (los usuarios
     actuales no notan diferencia en su laptop habitual).
   - A partir de ~1440px, la escala crece suavemente hasta un tope en 4K.
   - Se refuerza también un mínimo en pantallas muy angostas (<400px).

   Cómo funciona:
   - html { font-size: clamp(...) } escala TODO lo que use rem
     (Tailwind text-xs, text-sm, text-base, gaps con rem, etc.).
   - Overrides !important sobre las clases arbitrarias en píxeles
     (text-[10px], text-[11px] ...) para que también escalen.
   ======================================================================== */

html {
    /* Baseline en 1280px = 16px. A 1600px ≈ 17.2px (+8%). A 1920px ≈ 18.4px (+15%).
       A 2560px = 20px cap. En pantallas <1280 no hay reducción agresiva (mín 15px). */
    font-size: clamp(15px, calc(0.375vw + 11.2px), 20px);
}

/* Overrides de los tamaños arbitrarios encontrados en el código.
   Fórmula: preferido = N * 0.28 + N * 0.05625vw (kick-in efectivo en ~1280px)
     - a 1280px de viewport: N * 0.28 + N * 0.72 = N px  (sin cambio)
     - a 1920px de viewport: N * 0.28 + N * 1.08 = N * 1.36
     - a 2560px de viewport: N * 0.28 + N * 1.44 = N * 1.72 → cap a N * 1.4 */
.text-\[7px\]  { font-size: clamp(7px,  calc(7  * 0.28px + 7  * 0.05625vw), 9.8px); }
.text-\[8px\]  { font-size: clamp(8px,  calc(8  * 0.28px + 8  * 0.05625vw), 11.2px); }
.text-\[9px\]  { font-size: clamp(9px,  calc(9  * 0.28px + 9  * 0.05625vw), 12.6px); }
.text-\[10px\] { font-size: clamp(10px, calc(10 * 0.28px + 10 * 0.05625vw), 14px); }
.text-\[11px\] { font-size: clamp(11px, calc(11 * 0.28px + 11 * 0.05625vw), 15.4px); }
.text-\[12px\] { font-size: clamp(12px, calc(12 * 0.28px + 12 * 0.05625vw), 16.8px); }
.text-\[13px\] { font-size: clamp(13px, calc(13 * 0.28px + 13 * 0.05625vw), 18.2px); }
.text-\[17px\] { font-size: clamp(17px, calc(17 * 0.28px + 17 * 0.05625vw), 23.8px); }

/* ---- Sidebar izquierdo colapsable (estilo TradingView) ---- */
.sidebar-desktop {
    transition: width .18s ease;
}
.sidebar-collapse-toggle {
    position: absolute;
    top: 50%;
    right: -9px;
    transform: translateY(-50%);
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0 6px 6px 0;
    background: rgba(21, 30, 47, 0.94);
    color: #9aa6b8;
    cursor: pointer;
    transition: color .15s ease, background .15s ease, box-shadow .15s ease;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    opacity: 0;
}
.sidebar-desktop:hover .sidebar-collapse-toggle,
.sidebar-collapse-toggle:hover,
.sidebar-collapse-toggle:focus-visible {
    opacity: 1;
}
.sidebar-collapse-toggle:hover {
    color: #00d2ff;
    background: rgba(0, 210, 255, 0.08);
    box-shadow: 0 0 12px rgba(0, 210, 255, 0.15);
}
.sidebar-collapse-toggle svg {
    width: 12px;
    height: 12px;
}
/* En estado colapsado el chevron siempre visible para volver a expandir. */
.sidebar-collapsed .sidebar-collapse-toggle {
    opacity: 1;
}

/* Colapsado: solo iconos. Ocultamos labels, textos de sesión, footer texto. */
.sidebar-collapsed .sidebar-item {
    justify-content: center;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    gap: 0;
}
.sidebar-collapsed .sidebar-item-label,
.sidebar-collapsed .sidebar-brand h1,
.sidebar-collapsed .sidebar-brand p,
.sidebar-collapsed .sidebar-brand > .text-center,
.sidebar-collapsed .sidebar-footer .flex.items-center.gap-2 > span:not([class*="bg-cyber"]) {
    display: none;
}
/* En colapsado el "brand" solo muestra un mini-logo compacto. */
.sidebar-collapsed .sidebar-brand {
    padding: 0.75rem 0.25rem;
}
/* El footer se compacta: broker en la parte alta, resto se oculta. */
.sidebar-collapsed .sidebar-footer {
    padding: 0.5rem 0.25rem;
}
.sidebar-collapsed .sidebar-footer .flex.items-center.justify-between,
.sidebar-collapsed .sidebar-footer .flex.items-center.gap-2.text-\[10px\] {
    display: none;
}
.sidebar-collapsed .sidebar-broker-compact {
    justify-content: center;
}
/* Notif de soporte en colapsado se convierte en punto rojo esquina. */
.sidebar-collapsed .sidebar-item .min-w-\[18px\] {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 8px;
    height: 8px;
    padding: 0;
    font-size: 0;
    color: transparent;
}

/* ---- Dashboard dock colapsable (chevron flotante estilo TradingView) ---- */
.dashboard-dock-toggle {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: 25;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-right: 0;
    border-radius: 6px 0 0 6px;
    background: rgba(21, 30, 47, 0.92);
    color: #9aa6b8;
    cursor: pointer;
    transition: color .15s ease, background .15s ease, box-shadow .15s ease;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.dashboard-dock-toggle:hover {
    color: #00d2ff;
    background: rgba(0, 210, 255, 0.08);
    box-shadow: 0 0 12px rgba(0, 210, 255, 0.15);
}
.dashboard-dock-toggle svg {
    width: 12px;
    height: 12px;
}

/* Anchos mínimos hardcodeados: escalan un poco en pantallas grandes
   para que los "chips" del topbar no se vean minúsculos en 4K. */
.min-w-\[46px\]  { min-width: clamp(46px,  calc(46  * 0.05vw + 46  * 0.28px), 64px); }
.min-w-\[54px\]  { min-width: clamp(54px,  calc(54  * 0.05vw + 54  * 0.28px), 76px); }
.min-w-\[58px\]  { min-width: clamp(58px,  calc(58  * 0.05vw + 58  * 0.28px), 81px); }
.min-w-\[132px\] { min-width: clamp(132px, calc(132 * 0.05vw + 132 * 0.28px), 185px); }
.min-w-\[142px\] { min-width: clamp(142px, calc(142 * 0.05vw + 142 * 0.28px), 200px); }
.min-w-\[180px\] { min-width: clamp(180px, calc(180 * 0.05vw + 180 * 0.28px), 252px); }
.min-w-\[240px\] { min-width: clamp(240px, calc(240 * 0.05vw + 240 * 0.28px), 336px); }

/* Contenedores globales: los dashboards con max-width fijos de 1380 se ven
   apretados en 4K. Los llevamos hasta 1720 (aún con márgenes cómodos). */
@media (min-width: 1800px) {
    .exit-demo-nav-inner,
    .exit-demo-hero,
    .exit-demo-shell {
        max-width: clamp(1380px, 82vw, 1720px);
    }
}

/* Dashboard panel dock: default de 340px queda pequeño en pantallas grandes.
   El JS ya lee esta variable para elegir el ancho base al montar. */
:root {
    --vylmoon-panel-base-width: clamp(320px, 22vw, 480px);
    --vylmoon-panel-max-width: 800px;
}
/* VylMoon dashboard sidebar, aligned with the 2026 reference build. */
:root {
    --vyl-sidebar-width: 192px;
    --vyl-sidebar-collapsed-width: 52px;
    --vyl-sidebar-gap: 4px;
    --vyl-sidebar-surface: linear-gradient(180deg, rgba(32, 32, 34, .985), rgba(14, 14, 16, .985));
    --vyl-sidebar-hover: rgba(255, 255, 255, 0.065);
    --vyl-sidebar-active: rgba(255, 255, 255, 0.115);
    --vyl-sidebar-text: rgb(245, 245, 245);
    --vyl-sidebar-muted: rgb(166, 166, 174);
    --vyl-sidebar-ease: cubic-bezier(0.05, 0.39, 0.42, 0.94);
}

.vyl-sidebar {
    position: relative;
    z-index: 20;
    width: var(--vyl-sidebar-width);
    height: 100%;
    min-width: var(--vyl-sidebar-width);
    display: flex;
    flex: 0 0 var(--vyl-sidebar-width);
    flex-direction: column;
    overflow: visible;
    border: 1px solid transparent;
    border-radius: 2px;
    color: var(--vyl-sidebar-text);
    background: var(--vyl-sidebar-surface);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .045);
    transition: width 220ms var(--vyl-sidebar-ease), min-width 220ms var(--vyl-sidebar-ease), flex-basis 220ms var(--vyl-sidebar-ease);
}

.vyl-sidebar::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, .045), transparent 32%);
}

.vyl-sidebar-brand {
    position: relative;
    z-index: 5;
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    flex: 0 0 auto;
    padding: 0 7px 0 12px;
}

.vyl-sidebar-brand-mark {
    width: 34px;
    min-width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    cursor: pointer;
}

.vyl-sidebar-logo-full {
    width: 98px;
    height: auto;
    display: block;
    object-fit: contain;
}

.vyl-sidebar-logo-icon {
    width: 28px;
    height: 28px;
    display: block;
    object-fit: contain;
}

.vyl-sidebar-header-actions {
    display: flex;
    align-items: center;
    gap: 2px;
}

.vyl-sidebar-icon-button {
    position: relative;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    border-radius: 4px;
    color: rgb(174, 174, 182);
    background: transparent;
    cursor: pointer;
    font-size: 11px;
    font-weight: 650;
    transition: color 200ms var(--vyl-sidebar-ease), background-color 200ms var(--vyl-sidebar-ease), transform 100ms ease;
}

.vyl-sidebar-icon-button:hover {
    color: var(--vyl-sidebar-text);
    background: rgba(255, 255, 255, .07);
}

.vyl-sidebar-icon-button[aria-expanded="true"] {
    color: rgb(245, 245, 245);
    background: rgba(255, 255, 255, .09);
}

.vyl-sidebar-icon-button:active {
    transform: scale(.92);
}

.vyl-sidebar-icon-button:focus-visible,
.vyl-sidebar-option:focus-visible,
.vyl-broker-status-button:focus-visible,
.vyl-sidebar-collapse-control:focus-visible,
.vyl-sidebar-mobile-close:focus-visible {
    outline: 2px solid rgba(255, 255, 255, .72);
    outline-offset: -2px;
}

.vyl-sidebar-bell-glyph {
    position: relative;
    width: 14px;
    height: 15px;
    display: block;
}

.vyl-sidebar-bell-glyph::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 10px;
    height: 10px;
    border: 1.5px solid currentColor;
    border-bottom: 0;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
}

.vyl-sidebar-bell-glyph::after {
    content: "";
    position: absolute;
    bottom: 1px;
    left: 3px;
    width: 8px;
    height: 3px;
    border-top: 1.5px solid currentColor;
    border-radius: 50%;
    box-shadow: 0 2px 0 -1px currentColor;
}

.vyl-sidebar-lang-glyph {
    position: relative;
    width: 18px;
    height: 18px;
    display: block;
    border: 1.55px solid currentColor;
    border-radius: 50%;
    opacity: .96;
}

.login-register-card {
    box-shadow: 0 18px 54px rgba(0, 0, 0, 0.24);
}

.login-register-card:hover {
    transform: none;
    box-shadow: 0 22px 62px rgba(0, 0, 0, 0.3), 0 0 28px rgba(0, 210, 255, 0.06);
}

.login-register-note {
    padding: 0.65rem 0.8rem;
    border-radius: 10px;
    line-height: 1.35;
}

.login-register-form input,
.login-register-form select {
    min-height: 40px;
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
}

.login-register-form label {
    margin-bottom: 0.3rem;
}

.login-register-terms {
    line-height: 1.35;
}

.vyl-sidebar-lang-glyph::before {
    content: "";
    position: absolute;
    left: 2px;
    right: 2px;
    top: 7px;
    border-top: 1.35px solid currentColor;
}

.vyl-sidebar-lang-glyph::after {
    content: "";
    position: absolute;
    top: 2px;
    bottom: 2px;
    left: 5px;
    right: 5px;
    border-left: 1.25px solid currentColor;
    border-right: 1.25px solid currentColor;
    border-radius: 50%;
    opacity: .86;
}

.vyl-lang-toggle {
    border-color: rgba(255, 255, 255, 0.12);
    color: #aeb6c5;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
        rgba(10, 10, 14, 0.7);
    box-shadow: none;
}

.vyl-lang-toggle:hover {
    border-color: rgba(184, 166, 255, 0.36);
    color: #f4f0ff;
    background:
        linear-gradient(145deg, rgba(184, 166, 255, 0.11), rgba(255, 255, 255, 0.025)),
        rgba(10, 10, 14, 0.76);
}

.vyl-lang-toggle-icon {
    color: inherit;
    background: rgba(255, 255, 255, 0.055);
}

.vyl-lang-toggle-badge {
    background: rgba(184, 166, 255, 0.76);
}

.vyl-lang-toggle:hover .vyl-lang-toggle-chevron {
    color: #c9bcff;
    transform: translateY(1px);
}

.vyl-sidebar-events-glyph {
    position: relative;
    width: 15px;
    height: 15px;
    display: block;
}

.vyl-sidebar-events-glyph::before {
    content: "";
    position: absolute;
    inset: 1px 2px 3px;
    border: 1.5px solid currentColor;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    border-bottom: 0;
}

.vyl-sidebar-events-glyph::after {
    content: "";
    position: absolute;
    left: 3px;
    right: 3px;
    bottom: 2px;
    height: 4px;
    border-top: 1.5px solid currentColor;
    border-radius: 50%;
    box-shadow: 0 2px 0 -1px currentColor;
}

.vyl-sidebar-terminal-glyph {
    position: relative;
    width: 15px;
    height: 14px;
    display: block;
    border: 1.4px solid currentColor;
    border-radius: 3px;
}

.vyl-sidebar-terminal-glyph::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 4px;
    width: 4px;
    height: 4px;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    transform: rotate(45deg);
}

.vyl-sidebar-terminal-glyph::after {
    content: "";
    position: absolute;
    right: 3px;
    bottom: 3px;
    width: 4px;
    border-top: 1.5px solid currentColor;
}

.vyl-sidebar-header-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 5px;
    height: 5px;
    border: 1px solid rgb(48, 48, 51);
    border-radius: 50%;
    background: rgb(0, 200, 5);
    box-shadow: 0 0 7px rgba(0, 200, 5, .42);
    opacity: 0;
    transform: scale(0);
    transition: opacity 120ms var(--vyl-sidebar-ease), transform 120ms var(--vyl-sidebar-ease);
}

.vyl-sidebar-header-dot.has-events {
    opacity: 1;
    transform: scale(1);
}

.vyl-sidebar-icon-button.has-new-event {
    color: #f4f0ff;
    border-color: rgba(0, 210, 255, .42);
    background: rgba(0, 210, 255, .085);
    animation: vyl-sidebar-event-attention 1.3s ease-in-out 0s 4;
}

.vyl-sidebar-icon-button.has-new-event .vyl-sidebar-events-glyph {
    filter: drop-shadow(0 0 7px rgba(0, 210, 255, .65));
}

.vyl-sidebar-icon-button.has-new-event .vyl-sidebar-header-dot {
    opacity: 1;
    transform: scale(1.28);
    background: #00d2ff;
    box-shadow: 0 0 10px rgba(0, 210, 255, .72);
}

@keyframes vyl-sidebar-event-attention {
    0%, 100% {
        box-shadow: inset 0 1px rgba(255, 255, 255, .08), 0 0 0 rgba(0, 210, 255, 0);
    }
    50% {
        box-shadow: inset 0 1px rgba(255, 255, 255, .12), 0 0 16px rgba(0, 210, 255, .28);
    }
}

.vyl-sidebar-user-glyph {
    position: relative;
    width: 22px;
    height: 22px;
    display: block;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 50%;
    background: rgba(255, 255, 255, .055);
}

.vyl-sidebar-user-glyph::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 7px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.vyl-sidebar-user-glyph::after {
    content: "";
    position: absolute;
    bottom: 2px;
    left: 4px;
    width: 12px;
    height: 7px;
    border-radius: 8px 8px 3px 3px;
    background: currentColor;
}

.vyl-sidebar-popover {
    position: fixed;
    z-index: 90;
    top: 44px;
    left: var(--vyl-sidebar-width);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 12px;
    color: rgb(245, 245, 245);
    background:
        linear-gradient(150deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .012) 46%, rgba(0, 0, 0, .08)),
        #121216;
    -webkit-backdrop-filter: blur(40px) saturate(150%);
    backdrop-filter: blur(40px) saturate(150%);
    box-shadow:
        0 28px 90px rgba(0, 0, 0, .62),
        inset 0 1px rgba(255, 255, 255, .08),
        inset 0 -1px rgba(255, 255, 255, .025);
    isolation: isolate;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-5px) scale(.99);
    transform-origin: 44% top;
    transition:
        opacity 100ms var(--vyl-sidebar-ease),
        transform 100ms var(--vyl-sidebar-ease),
        visibility 0s linear 100ms;
}

.vyl-sidebar-popover.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
    transition-delay: 0s;
}

.vyl-sidebar-popover.is-dragging {
    transition: none;
    user-select: none;
}

.vyl-events-popover {
    width: 336px;
    height: min(521px, calc(100vh - 56px));
}

.vyl-terminal-popover {
    z-index: 91;
    width: min(720px, calc(100vw - 236px));
    height: min(580px, calc(100vh - 56px));
}

.vyl-user-popover {
    z-index: 92;
    width: 320px;
}

.vyl-sidebar-popover-header {
    height: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    background: rgba(52, 52, 57, .45);
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.vyl-sidebar-popover.is-dragging .vyl-sidebar-popover-header {
    cursor: grabbing;
}

.vyl-sidebar-popover-header > div,
.vyl-floating-panel-actions {
    display: flex;
    align-items: center;
    gap: 9px;
}

.vyl-floating-panel-actions {
    gap: 6px;
}

.vyl-sidebar-popover-header h2 {
    margin: 0;
    color: rgb(245, 245, 245);
    font-size: 13px;
    font-weight: 650;
    line-height: 18px;
    letter-spacing: 0;
}

.vyl-floating-close {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    padding: 0 0 2px;
    border: 0;
    border-radius: 4px;
    color: rgb(148, 148, 157);
    background: transparent;
    font-size: 18px;
    font-weight: 350;
    line-height: 1;
    cursor: pointer;
    transition: color 120ms var(--vyl-sidebar-ease), background-color 120ms var(--vyl-sidebar-ease), transform 100ms ease;
}

.vyl-floating-close:hover {
    color: rgb(245, 245, 245);
    background: rgba(255, 255, 255, .075);
}

.vyl-floating-close:active {
    transform: scale(.9);
}

.vyl-sidebar-popover-status {
    padding: 3px 6px;
    border-radius: 8px;
    color: rgb(151, 190, 255);
    background: rgba(115, 168, 255, .09);
    font-size: 12px;
    font-weight: 680;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.vyl-events-header-glyph {
    width: 9px;
    height: 9px;
    border-radius: 2px;
    background: rgb(115, 168, 255);
    box-shadow: 0 0 9px rgba(115, 168, 255, .22);
}

.vyl-user-header-glyph {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgb(176, 176, 184);
    box-shadow: 0 0 9px rgba(255, 255, 255, .14);
}

.vyl-terminal-header-glyph {
    width: 14px;
    height: 12px;
    border: 1.5px solid currentColor;
    border-radius: 3px;
}

.vyl-events-empty-state {
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px;
    text-align: center;
    background: rgba(0, 0, 0, .06);
}

.vyl-events-empty-glyph {
    position: relative;
    width: 30px;
    height: 31px;
    margin-bottom: 16px;
    color: rgb(115, 115, 124);
}

.vyl-events-empty-glyph::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 4px;
    width: 20px;
    height: 20px;
    border: 2px solid currentColor;
    border-bottom: 0;
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
}

.vyl-events-empty-glyph::after {
    content: "";
    position: absolute;
    bottom: 2px;
    left: 6px;
    width: 18px;
    height: 6px;
    border-top: 2px solid currentColor;
    border-radius: 50%;
    box-shadow: 0 4px 0 -2px currentColor;
}

.vyl-events-empty-state h3 {
    margin: 0;
    color: rgb(224, 224, 228);
    font-size: 15px;
    font-weight: 650;
    line-height: 20px;
}

.vyl-events-empty-state p {
    max-width: 240px;
    margin: 7px 0 0;
    color: rgb(128, 128, 137);
    font-size: 14px;
    line-height: 16px;
}

.vyl-events-live-body,
.vyl-terminal-log-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 10px;
    background: rgba(0, 0, 0, .12);
    scrollbar-width: thin;
}

.vyl-event-row {
    display: grid;
    grid-template-columns: 9px minmax(0, 1fr);
    gap: 8px;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, .055);
    border-radius: 6px;
    background: rgba(255, 255, 255, .025);
}

.vyl-event-row + .vyl-event-row {
    margin-top: 6px;
}

.vyl-event-row-dot {
    width: 7px;
    height: 7px;
    margin-top: 4px;
    border-radius: 50%;
    background: rgb(115, 168, 255);
    box-shadow: 0 0 10px rgba(115, 168, 255, .3);
}

.vyl-event-row-success .vyl-event-row-dot {
    background: rgb(45, 226, 166);
    box-shadow: 0 0 10px rgba(45, 226, 166, .3);
}

.vyl-event-row-warning .vyl-event-row-dot {
    background: rgb(255, 204, 102);
    box-shadow: 0 0 10px rgba(255, 204, 102, .28);
}

.vyl-event-row-error .vyl-event-row-dot {
    background: rgb(255, 82, 109);
    box-shadow: 0 0 10px rgba(255, 82, 109, .3);
}

.vyl-event-row p,
.vyl-terminal-log p {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

.vyl-event-row p {
    color: rgb(228, 233, 242);
    font-size: 13px;
    line-height: 18px;
}

.vyl-event-row time {
    display: block;
    margin-top: 3px;
    color: rgb(112, 130, 162);
    font-family: var(--font-mono);
    font-size: 11px;
}

/* ── Problemas de plataforma (services/user_events.py) ──────────────────────
   Se distinguen de la actividad normal: barra lateral de color, y el detalle y
   la accion en su propia linea. La actividad dice QUE paso; estos dicen ademas
   que significa y que puede hacer el usuario. */
.vyl-event-row-critical .vyl-event-row-dot {
    background: rgb(255, 82, 109);
    box-shadow: 0 0 12px rgba(255, 82, 109, .55);
}

.vyl-event-row.is-platform {
    border-left: 2px solid rgba(255, 204, 102, .55);
    background: rgba(255, 204, 102, .05);
}

.vyl-event-row.is-platform.vyl-event-row-error,
.vyl-event-row.is-platform.vyl-event-row-critical {
    border-left-color: rgba(255, 82, 109, .7);
    background: rgba(255, 82, 109, .07);
}

/* Un problema resuelto sigue visible un rato, pero atenuado: informa sin
   seguir alarmando. */
.vyl-event-row.is-resolved {
    opacity: .62;
    border-left-color: rgba(45, 226, 166, .5);
    background: rgba(45, 226, 166, .04);
}

.vyl-event-detail {
    margin-top: 3px;
    color: rgb(150, 163, 186);
    font-size: 11.5px;
    line-height: 16px;
}

.vyl-event-action {
    margin-top: 4px;
    color: rgb(255, 204, 102);
    font-size: 11.5px;
    line-height: 16px;
    font-weight: 600;
}

.vyl-event-row-error .vyl-event-action,
.vyl-event-row-critical .vyl-event-action {
    color: rgb(255, 138, 158);
}

.vyl-event-count,
.vyl-event-solved {
    margin-left: 6px;
    padding: 1px 5px;
    border-radius: 999px;
    font-size: 9.5px;
    font-weight: 700;
    vertical-align: middle;
}

.vyl-event-count {
    background: rgba(255, 255, 255, .1);
    color: rgb(190, 201, 219);
}

.vyl-event-solved {
    background: rgba(45, 226, 166, .16);
    color: rgb(45, 226, 166);
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* ── Puntero sobre una linea arrastrable (stop / objetivo / etiqueta) ───────
   KLineCharts fija `cursor: crosshair` como estilo EN LINEA en su panel interno,
   asi que ponerlo en el contenedor no se veia nunca: el hijo bajo el puntero
   manda. Se necesita `!important` (supera al estilo en linea del vendor) y
   alcanzar tambien a los descendientes, que son quienes estan realmente debajo
   del raton. Sin esto la linea se arrastra, pero nada le indica al usuario que
   hay algo agarrable ahi. */
.nvc-drag-ns,
.nvc-drag-ns * {
    cursor: ns-resize;
}

.nvc-drag-ew,
.nvc-drag-ew * {
    cursor: ew-resize;
}

.vyl-sidebar-popover-status.is-alert {
    color: rgb(255, 138, 158);
    font-weight: 700;
}

/* El punto del icono ya no dice solo "hay actividad": late en rojo cuando hay
   algo que el usuario debe atender. */
.vyl-sidebar-header-dot.needs-attention {
    background: rgb(255, 82, 109);
    box-shadow: 0 0 10px rgba(255, 82, 109, .65);
    animation: vyl-event-attention 1.6s ease-in-out infinite;
}

@keyframes vyl-event-attention {
    0%, 100% { opacity: 1; }
    50% { opacity: .35; }
}

.vyl-terminal-filter-bar {
    min-height: 38px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    background: rgba(0, 0, 0, .08);
}

.vyl-terminal-filter-bar input {
    height: 24px;
    min-width: 0;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 5px;
    color: rgb(235, 240, 250);
    background:
        linear-gradient(150deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .012) 46%, rgba(0, 0, 0, .08)),
        #121216;
    font-size: 11px;
    color-scheme: dark;
}

.vyl-terminal-filter-bar input[type="date"] {
    width: 126px;
}

.vyl-terminal-filter-bar input[type="time"] {
    width: 86px;
}

.vyl-terminal-copy-button {
    height: 22px;
    margin-left: auto;
    padding: 0 8px;
    border: 1px solid rgba(0, 210, 255, .26);
    border-radius: 5px;
    color: rgb(72, 217, 255);
    background: rgba(0, 210, 255, .08);
    font-size: 13px;
    font-weight: 780;
    cursor: pointer;
}

.vyl-terminal-log {
    display: grid;
    grid-template-columns: auto 10px minmax(0, 1fr);
    gap: 6px;
    padding: 3px 0;
    color: rgb(190, 200, 217);
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 17px;
}

.vyl-terminal-log time {
    color: rgb(104, 121, 151);
}

.vyl-terminal-log > span {
    color: rgb(45, 226, 166);
}

.vyl-terminal-log-error,
.vyl-terminal-log-error > span {
    color: rgb(255, 112, 132);
}

.vyl-terminal-log-warning,
.vyl-terminal-log-warning > span {
    color: rgb(255, 204, 102);
}

.vyl-terminal-log-success,
.vyl-terminal-log-success > span {
    color: rgb(45, 226, 166);
}

.vyl-terminal-log-empty {
    color: rgb(112, 130, 162);
    font-family: var(--font-mono);
    font-size: 12px;
    padding: 18px 0;
    text-align: center;
}

.vyl-user-profile-summary {
    position: relative;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 18px 16px;
    background: rgba(0, 0, 0, .12);
}

.vyl-user-avatar {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: rgb(238, 235, 255);
    background: linear-gradient(145deg, rgba(137, 92, 246, .88), rgba(91, 72, 170, .78));
    box-shadow: 0 8px 22px rgba(71, 45, 145, .24);
    font-size: 13px;
    font-weight: 720;
    letter-spacing: .04em;
}

.vyl-user-profile-summary h3 {
    margin: 0;
    color: rgb(242, 242, 244);
    font-size: 15px;
    font-weight: 680;
    line-height: 19px;
}

.vyl-user-profile-summary p {
    overflow: hidden;
    margin: 3px 0 0;
    color: rgb(132, 132, 141);
    font-size: 11px;
    line-height: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vyl-user-online-state {
    position: absolute;
    right: 15px;
    bottom: 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: rgb(0, 200, 5);
    font-size: 13px;
    font-weight: 620;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.vyl-user-online-state i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgb(0, 200, 5);
    box-shadow: 0 0 7px rgba(0, 200, 5, .4);
}

.vyl-user-information-list {
    margin: 0;
    padding: 7px 16px 10px;
    background: rgba(0, 0, 0, .08);
}

.vyl-user-information-list > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 38px;
    border-bottom: 1px solid rgba(255, 255, 255, .055);
}

.vyl-user-information-list > div:last-child {
    border-bottom: 0;
}

.vyl-user-information-list dt {
    color: rgb(126, 126, 135);
    font-size: 11px;
    font-weight: 560;
}

.vyl-user-information-list dd {
    margin: 0;
    min-width: 0;
    color: rgb(218, 218, 222);
    font-size: 12px;
    font-weight: 620;
    text-align: right;
    overflow-wrap: anywhere;
}

.vyl-user-session-note {
    margin: 0;
    padding: 0 16px 16px;
    color: rgb(126, 126, 135);
    font-size: 12px;
    line-height: 17px;
    background: rgba(0, 0, 0, .08);
}

.vyl-sidebar-navigation,
.vyl-sidebar-utility-navigation {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px;
}

.vyl-sidebar-navigation {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #505057 transparent;
}

.vyl-sidebar-footer {
    position: relative;
    z-index: 3;
    flex: 0 0 auto;
    padding: 4px;
    border-top: 1px solid rgba(255, 255, 255, .055);
}

.vyl-sidebar-utility-navigation {
    margin-bottom: 4px;
    padding: 0;
}

.vyl-sidebar-option {
    position: relative;
    width: 100%;
    height: 32px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    padding: 0 12px;
    border: 0;
    border-radius: 4px;
    outline: 0;
    color: #b8b8c0;
    background: transparent;
    text-align: left;
    cursor: pointer;
    transition: color 120ms ease, background-color 120ms ease;
}

.vyl-sidebar-option:hover {
    color: #f5f5f5;
    background: var(--vyl-sidebar-hover);
}

.vyl-sidebar-option.is-active {
    color: #ffffff;
    background: var(--vyl-sidebar-active);
}

.vyl-sidebar-option-label {
    min-width: 0;
    overflow: hidden;
    font-size: 13px;
    font-weight: 560;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vyl-sidebar-option > [aria-hidden="true"] {
    transform: scale(1.14);
    transform-origin: center;
}

.vyl-sidebar-dashboard-glyph {
    width: 14px;
    height: 14px;
    display: grid;
    grid-template-columns: 4px 7px;
    grid-template-rows: 6px 6px;
    gap: 2px;
    flex: 0 0 auto;
}

.vyl-sidebar-dashboard-glyph span {
    display: block;
    border-radius: 1px;
    background: currentColor;
}

.vyl-sidebar-dashboard-glyph span:first-child {
    grid-row: 1 / 3;
}

.vyl-sidebar-chain-glyph,
.vyl-sidebar-history-glyph,
.vyl-sidebar-journal-glyph,
.vyl-sidebar-settings-glyph {
    position: relative;
    width: 14px;
    height: 14px;
    display: block;
    flex: 0 0 auto;
}

.vyl-sidebar-chain-glyph::before,
.vyl-sidebar-chain-glyph::after {
    content: "";
    position: absolute;
    inset: 2px 1px;
    border: 1.5px solid currentColor;
    border-radius: 3px;
}

.vyl-sidebar-chain-glyph::after {
    inset: 6px 5px 2px 1px;
    border-top: 0;
    border-right: 0;
}

.vyl-sidebar-history-glyph::before {
    content: "";
    position: absolute;
    inset: 1px;
    border: 1.5px solid currentColor;
    border-radius: 50%;
}

.vyl-sidebar-history-glyph::after {
    content: "";
    position: absolute;
    left: 7px;
    top: 4px;
    width: 4px;
    height: 5px;
    border-left: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
}

.vyl-sidebar-journal-glyph::before {
    content: "";
    position: absolute;
    inset: 1px 2px;
    border: 1.5px solid currentColor;
    border-radius: 2px;
}

.vyl-sidebar-journal-glyph::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 5px;
    width: 5px;
    border-top: 1.5px solid currentColor;
    box-shadow: 0 3px 0 currentColor;
}

.vyl-sidebar-settings-glyph::before {
    content: "";
    position: absolute;
    inset: 3px;
    border: 1.5px solid currentColor;
    border-radius: 50%;
}

.vyl-sidebar-settings-glyph::after {
    content: "";
    position: absolute;
    left: 1px;
    right: 1px;
    top: 6px;
    border-top: 1.5px solid currentColor;
    box-shadow: 0 -4px 0 -1px currentColor, 0 4px 0 -1px currentColor;
}

.vyl-sidebar-info-glyph,
.vyl-sidebar-letter-glyph {
    width: 14px;
    height: 14px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border: 1.3px solid currentColor;
    border-radius: 50%;
    font-family: Georgia, serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}

.vyl-sidebar-letter-glyph {
    border-radius: 4px;
    font-family: inherit;
    font-size: 10px;
}

.vyl-sidebar-support-glyph {
    position: relative;
    width: 14px;
    height: 12px;
    flex: 0 0 auto;
    border: 1.3px solid currentColor;
    border-radius: 4px;
}

.vyl-sidebar-support-glyph::after {
    content: "";
    position: absolute;
    bottom: -3px;
    left: 3px;
    width: 4px;
    height: 4px;
    border-left: 1.3px solid currentColor;
    transform: skew(-28deg);
}

.vyl-sidebar-support-glyph span {
    position: absolute;
    top: 4px;
    left: 3px;
    width: 6px;
    height: 1px;
    background: currentColor;
    box-shadow: 0 3px 0 currentColor;
    opacity: .72;
}

.vyl-sidebar-svg-glyph {
    width: 14px;
    height: 14px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}

.vyl-sidebar-svg-glyph svg {
    width: 14px;
    height: 14px;
}

.vyl-sidebar-unread {
    width: 15px;
    height: 15px;
    display: grid;
    place-items: center;
    margin-left: auto;
    border-radius: 50%;
    color: #fff;
    background: #ff586f;
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 0 8px rgba(255, 88, 111, .28);
}

.vyl-broker-status-button {
    width: 100%;
    min-height: 50px;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) 7px;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border: 0;
    border-radius: 5px;
    color: #d6d6da;
    background: rgba(0, 0, 0, .2);
    cursor: pointer;
    transition: background 120ms ease, transform 80ms ease;
}

.vyl-broker-status-button:hover {
    background: rgba(255, 255, 255, .075);
}

.vyl-broker-status-button:active {
    transform: scale(.985);
}

.vyl-broker-plug-icon {
    position: relative;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    justify-self: center;
    align-self: center;
    flex: 0 0 auto;
    border-radius: 5px;
    color: #7ce4aa;
    background: rgba(0, 200, 5, .09);
}

.vyl-broker-plug-icon::before {
    content: "";
    width: 8px;
    height: 7px;
    border: 1.4px solid currentColor;
    border-top: 0;
    border-radius: 0 0 4px 4px;
}

.vyl-broker-plug-icon::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 8px;
    width: 1.4px;
    height: 5px;
    background: currentColor;
    box-shadow: 4px 0 0 currentColor;
}

.vyl-broker-plug-icon i {
    position: absolute;
    bottom: 3px;
    left: 10px;
    width: 1.4px;
    height: 5px;
    background: currentColor;
}

.vyl-broker-status-button.is-disconnected .vyl-broker-plug-icon {
    color: #ff8293;
    background: rgba(255, 88, 111, .09);
}

.vyl-broker-status-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
}

.vyl-broker-status-copy strong {
    overflow: hidden;
    font-size: 13px;
    font-weight: 620;
    line-height: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vyl-broker-status-copy small {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #7e7e86;
    font-size: 11px;
    line-height: 14px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vyl-broker-status-copy small span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vyl-broker-status-copy small i {
    width: 5px;
    height: 5px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: rgb(0, 200, 5);
    box-shadow: 0 0 6px rgba(0, 200, 5, .42);
}

.vyl-broker-status-button.is-disconnected .vyl-broker-status-copy small i {
    background: #ff586f;
    box-shadow: 0 0 6px rgba(255, 88, 111, .4);
}

.vyl-broker-menu-chevron {
    width: 6px;
    height: 6px;
    flex: 0 0 auto;
    border-right: 1px solid #77777e;
    border-bottom: 1px solid #77777e;
    transform: rotate(-45deg);
}

.vyl-sidebar-system-state {
    height: 25px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 10px;
    color: #85858c;
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
}

.vyl-sidebar-system-state i {
    width: 5px;
    height: 5px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #ff586f;
    box-shadow: 0 0 6px rgba(255, 88, 111, .4);
}

.vyl-sidebar-system-state.is-running i {
    background: rgb(0, 200, 5);
    box-shadow: 0 0 6px rgba(0, 200, 5, .42);
}

.vyl-sidebar-collapse-control {
    width: 100%;
    height: 30px;
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 3px;
    padding: 0 10px;
    border: 0;
    border-radius: 4px;
    color: #85858c;
    background: transparent;
    font-size: 12px;
    cursor: pointer;
    transition: color 120ms ease, background 120ms ease;
}

.vyl-sidebar-collapse-control:hover {
    color: #eeeef0;
    background: rgba(255, 255, 255, .055);
}

.vyl-sidebar-collapse-control span {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    border-left: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate(45deg);
    transition: transform 180ms var(--vyl-sidebar-ease);
}

.vyl-sidebar-collapse-control b {
    font-weight: 560;
}

.vyl-sidebar.is-collapsed {
    width: var(--vyl-sidebar-collapsed-width);
    min-width: var(--vyl-sidebar-collapsed-width);
    flex-basis: var(--vyl-sidebar-collapsed-width);
}

.vyl-sidebar.is-collapsed .vyl-sidebar-brand {
    height: 190px;
    min-height: 190px;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 4px 0;
}

.vyl-sidebar.is-collapsed .vyl-sidebar-header-actions {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
}

.vyl-sidebar.is-collapsed .vyl-sidebar-brand-mark {
    width: 40px;
    min-width: 40px;
    height: 40px;
    flex: 0 0 40px;
    justify-content: center;
    padding: 0;
}

.vyl-sidebar.is-collapsed .vyl-sidebar-logo-icon {
    width: 26px;
    height: 26px;
}

.vyl-sidebar.is-collapsed .vyl-sidebar-icon-button {
    width: 36px;
    height: 32px;
    flex: 0 0 32px;
}

.vyl-sidebar.is-collapsed .vyl-sidebar-popover {
    left: calc(var(--vyl-sidebar-collapsed-width) + 4px);
}

.vyl-sidebar.is-collapsed .vyl-sidebar-option {
    width: 40px;
    height: 40px;
    margin: 0 auto;
    justify-content: center;
    gap: 0;
    padding: 0;
}

.vyl-sidebar.is-collapsed .vyl-sidebar-option-label,
.vyl-sidebar.is-collapsed .vyl-broker-status-copy,
.vyl-sidebar.is-collapsed .vyl-broker-menu-chevron,
.vyl-sidebar.is-collapsed .vyl-sidebar-system-state span {
    display: none;
}

.vyl-sidebar.is-collapsed .vyl-sidebar-footer {
    padding: 4px;
}

.vyl-sidebar.is-collapsed .vyl-broker-status-button {
    width: 40px;
    height: 42px;
    grid-template-columns: 1fr;
    place-items: center;
    margin-right: auto;
    margin-left: auto;
    padding: 0;
}

.vyl-sidebar.is-collapsed .vyl-broker-plug-icon {
    grid-column: 1;
    margin: 0;
}

.vyl-sidebar.is-collapsed .vyl-sidebar-system-state {
    justify-content: center;
    padding: 0;
}

.vyl-sidebar.is-collapsed .vyl-sidebar-collapse-control {
    width: 40px;
    margin-right: auto;
    margin-left: auto;
    justify-content: center;
    padding: 0;
}

.vyl-sidebar.is-collapsed .vyl-sidebar-collapse-control span {
    transform: rotate(225deg);
}

.vyl-sidebar.is-collapsed .vyl-sidebar-unread {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 8px;
    min-width: 8px;
    height: 8px;
    padding: 0;
    color: transparent;
    font-size: 0;
}

/* Editable profile: one continuous surface that fades into the settings background. */
.account-profile-editor {
    position: relative;
    overflow: hidden;
    padding: 18px 18px 34px;
    width: min(100%, 900px);
    margin-right: auto;
    margin-left: 4px;
    color: #ececf0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .045) 0, rgba(255, 255, 255, .022) 58%, transparent 100%);
}

.account-profile-editor::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .13) 12%, rgba(255, 255, 255, .05) 72%, transparent);
}

.account-profile-editor::after {
    content: "";
    position: absolute;
    inset: 0;
    border-right: 1px solid rgba(255, 255, 255, .065);
    border-left: 1px solid rgba(255, 255, 255, .085);
    pointer-events: none;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 9%, #000 64%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent, #000 9%, #000 64%, transparent 100%);
}

.account-profile-editor-head {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.account-profile-editor-avatar {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(145deg, #18b9f2, #8055f4);
    font-size: 18px;
    font-weight: 750;
}

.account-profile-editor-head h3 {
    overflow: hidden;
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-profile-editor-head p {
    margin: 3px 0 0;
    color: #8f8f99;
    font-size: 11px;
}

.account-profile-plan {
    padding: 3px 7px;
    border-radius: 3px;
    color: #ffd83d;
    background: rgba(255, 204, 0, .11);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.account-profile-form-section {
    padding: 15px 0 18px;
    border-top: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .065) 10%, rgba(255, 255, 255, .035) 72%, transparent) top / 100% 1px no-repeat;
}

.account-profile-form-section h4,
.account-profile-summary h4 {
    margin: 0 0 12px;
    color: #a8a8b2;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.account-profile-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.account-profile-field {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.account-profile-field-wide {
    grid-column: auto;
}

.account-profile-field > span {
    color: #92929d;
    font-size: 11px;
    font-weight: 560;
}

.account-profile-field input,
.account-profile-field select {
    width: 100%;
    height: 38px;
    min-width: 0;
    padding: 0 10px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 4px;
    outline: 0;
    color: #eeeef1;
    background: rgba(0, 0, 0, .24);
    font-size: 12px;
}

.account-profile-field input:focus,
.account-profile-field select:focus {
    border-color: rgba(120, 172, 255, .52);
    box-shadow: 0 0 0 2px rgba(74, 134, 255, .08);
}

.account-profile-field input[readonly] {
    color: #a0a0aa;
    background: rgba(0, 0, 0, .13);
}

.account-profile-field small {
    color: #74747e;
    font-size: 9px;
}

.account-profile-actions {
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    padding: 5px 0 16px;
}

.account-profile-actions button {
    min-width: 132px;
    height: 36px;
    padding: 0 14px;
    border: 1px solid rgba(114, 165, 255, .34);
    border-radius: 4px;
    color: #dfeaff;
    background: rgba(75, 125, 232, .14);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.account-profile-actions button:hover {
    border-color: rgba(129, 177, 255, .58);
    background: rgba(75, 125, 232, .22);
}

.account-profile-actions button:disabled {
    opacity: .55;
    cursor: wait;
}

.account-profile-message {
    color: #8c8c96;
    font-size: 11px;
}

.account-profile-message.success { color: #36d98a; }
.account-profile-message.error { color: #ff7186; }

.account-profile-summary {
    padding-top: 15px;
    border-top: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .06) 10%, rgba(255, 255, 255, .03) 72%, transparent) top / 100% 1px no-repeat;
}

/* Current glass settings skin: replaces the legacy blue configuration controls. */
body.vyl-visual-v2 .configuration-tabs-strip {
    border-color: rgba(255, 255, 255, .08);
    background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .018)), rgba(10, 10, 13, .76);
    box-shadow: inset 0 1px rgba(255, 255, 255, .025);
    -webkit-backdrop-filter: blur(18px) saturate(120%);
    backdrop-filter: blur(18px) saturate(120%);
}

body.vyl-visual-v2 .configuration-tab-wide:hover {
    color: #e5e3eb;
    border-color: rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .035);
}

body.vyl-visual-v2 .configuration-tab-wide.is-active {
    color: #f3f0ff;
    border-color: rgba(184, 157, 255, .2);
    background: linear-gradient(180deg, rgba(166, 127, 255, .13), rgba(255, 255, 255, .025));
    box-shadow: inset 0 -1px rgba(180, 150, 255, .5);
}

body.vyl-visual-v2 .configuration-tab-wide:hover .configuration-tab-wide-icon,
body.vyl-visual-v2 .configuration-tab-wide.is-active .configuration-tab-wide-icon {
    color: #bca8ff;
}

body.vyl-visual-v2 .configuration-page .account-profile-field input,
body.vyl-visual-v2 .configuration-page .account-profile-field select {
    border-color: rgba(255, 255, 255, .105);
    color: #eeeeF2;
    background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .018)), rgba(11, 11, 14, .72);
    box-shadow: inset 0 1px rgba(255, 255, 255, .035), 0 8px 22px rgba(0, 0, 0, .1);
    -webkit-backdrop-filter: blur(16px) saturate(120%);
    backdrop-filter: blur(16px) saturate(120%);
}

body.vyl-visual-v2 .configuration-page .account-profile-field input:hover,
body.vyl-visual-v2 .configuration-page .account-profile-field select:hover {
    border-color: rgba(255, 255, 255, .17);
}

body.vyl-visual-v2 .configuration-page .account-profile-field input:focus,
body.vyl-visual-v2 .configuration-page .account-profile-field select:focus {
    border-color: rgba(183, 153, 255, .5);
    box-shadow: inset 0 1px rgba(255, 255, 255, .04), 0 0 0 2px rgba(154, 112, 255, .1);
}

body.vyl-visual-v2 .configuration-page .account-profile-field input[readonly] {
    color: #9999a3;
    background: rgba(255, 255, 255, .018);
}

body.vyl-visual-v2 .account-profile-actions button {
    border-color: rgba(181, 151, 255, .3);
    color: #eee9ff;
    background: linear-gradient(180deg, rgba(159, 116, 255, .2), rgba(116, 80, 198, .12));
}

body.vyl-visual-v2 .account-profile-actions button:hover {
    border-color: rgba(193, 169, 255, .5);
    background: linear-gradient(180deg, rgba(166, 126, 255, .27), rgba(116, 80, 198, .17));
}

/* One glass language for the sidebar tooltips and all floating submenus. */
body.vyl-visual-v2 .vyl-sidebar-icon-button::after {
    content: attr(aria-label);
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 110;
    width: max-content;
    max-width: 180px;
    padding: 6px 8px;
    border: 1px solid rgba(255, 255, 255, .095);
    border-radius: 4px;
    color: #dedde4;
    background: linear-gradient(145deg, rgba(255, 255, 255, .065), rgba(255, 255, 255, .018)), rgba(17, 17, 21, .94);
    box-shadow: 0 12px 34px rgba(0, 0, 0, .42), inset 0 1px rgba(255, 255, 255, .05);
    -webkit-backdrop-filter: blur(20px) saturate(120%);
    backdrop-filter: blur(20px) saturate(120%);
    font-size: 10px;
    font-weight: 560;
    line-height: 14px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-3px);
    transition: opacity 120ms ease, transform 120ms ease, visibility 0s linear 120ms;
}

body.vyl-visual-v2 .vyl-sidebar-icon-button:hover::after,
body.vyl-visual-v2 .vyl-sidebar-icon-button:focus-visible::after {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 260ms;
}

body.vyl-visual-v2 .vyl-sidebar-icon-button[aria-expanded="true"]::after {
    opacity: 0;
    visibility: hidden;
}

body.vyl-visual-v2 .vyl-sidebar-popover {
    border-color: rgba(255, 255, 255, .105);
    background: linear-gradient(145deg, rgba(255, 255, 255, .065), rgba(255, 255, 255, .016) 48%, rgba(0, 0, 0, .08)), rgba(17, 17, 21, .965);
    box-shadow: 0 28px 90px rgba(0, 0, 0, .6), inset 0 1px rgba(255, 255, 255, .075), inset 0 -1px rgba(255, 255, 255, .025);
}

body.vyl-visual-v2 .vyl-sidebar-popover-header,
body.vyl-visual-v2 .vyl-terminal-filter-bar {
    border-bottom-color: rgba(255, 255, 255, .06);
    background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .018));
}

body.vyl-visual-v2 .vyl-terminal-copy-button {
    border-color: rgba(181, 151, 255, .3);
    color: #c7b6ff;
    background: rgba(154, 112, 255, .09);
}

.account-profile-summary dl {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin: 0;
}

.account-profile-summary dl > div {
    min-width: 0;
    padding: 10px 12px;
    background: rgba(0, 0, 0, .13);
}

.account-profile-summary dt {
    color: #7f7f89;
    font-size: 10px;
}

.account-profile-summary dd {
    overflow: hidden;
    margin: 5px 0 0;
    color: #e7e7ea;
    font-size: 12px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-profile-summary dd.is-plan { color: #ffd83d; }
.account-profile-summary dd.is-online { color: #36d98a; }

.account-profile-loading {
    min-height: 180px;
    display: grid;
    place-items: center;
    color: #85858f;
    font-size: 12px;
}

@media (max-width: 680px) {
    .account-profile-fields,
    .account-profile-summary dl {
        grid-template-columns: 1fr;
    }

    .account-profile-editor {
        padding-right: 12px;
        padding-left: 12px;
    }
}

.vyl-sidebar-backdrop {
    background: rgba(0, 0, 0, .62);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

.vyl-sidebar-mobile {
    width: min(320px, calc(100vw - 42px));
    min-width: 0;
    max-width: 320px;
    flex-basis: auto;
    border-radius: 0 2px 2px 0;
    box-shadow: 10px 0 28px rgba(2, 7, 14, .46);
    transform: translateX(-104%);
    transition: transform 180ms var(--vyl-sidebar-ease);
}

.vyl-sidebar-mobile.is-open {
    transform: translateX(0);
}

/* Dashboard header and ticker controls matched to the latest reference build. */
.dashboard-page .dashboard-topbar {
    min-height: 56px;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, .055);
    border-bottom-color: rgba(255, 255, 255, .075);
    border-radius: 6px 6px 0 0;
    background:
        linear-gradient(180deg, rgba(36, 36, 39, .86), rgba(18, 18, 21, .9));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .06),
        0 10px 24px rgba(0, 0, 0, .18);
}

.dashboard-page .dashboard-topbar > div {
    gap: 12px;
}

.dashboard-page .dashboard-topbar .border-cyber-blue\/20,
.dashboard-page .dashboard-topbar .border-white\/10,
.dashboard-page .dashboard-topbar .border-white\/20 {
    border-color: rgba(255, 255, 255, .1);
}

.dashboard-page .dashboard-topbar .bg-black\/20,
.dashboard-page .dashboard-topbar .bg-dark\/50 {
    background-color: rgba(0, 0, 0, .28);
}

.dashboard-page .dashboard-topbar span {
    letter-spacing: 0;
}

.dashboard-page .dashboard-topbar .text-\[10px\] {
    font-size: 10px;
}

.dashboard-page .dashboard-topbar .text-sm {
    font-size: 13px;
}

.dashboard-page .dashboard-topbar button {
    min-height: 28px;
    border-radius: 4px;
}

.dashboard-page .dashboard-sync-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    height: 24px;
    line-height: 1;
    text-align: center;
}

.dashboard-page .dashboard-system-button,
.dashboard-page .dashboard-panic-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    min-height: 34px;
    border-radius: 6px;
    border: 1px solid transparent;
    box-shadow: none;
    line-height: 1;
    font-size: 14px;
    font-weight: 650;
    letter-spacing: 0;
    white-space: nowrap;
}

.dashboard-page .dashboard-system-button {
    min-width: 136px;
    padding: 0 18px;
    gap: 7px;
    background: rgba(255, 255, 255, 0.055);
    border-color: rgba(148, 163, 184, 0.28);
    color: #e6e6e8;
}

.dashboard-page .dashboard-system-button.is-on {
    border-color: #00c777;
    color: #00db89;
    background: rgba(255, 255, 255, 0.055);
}

.dashboard-page .dashboard-system-button.is-off {
    border-color: #d94b39;
    color: #e06652;
    background: rgba(255, 255, 255, 0.055);
}

.dashboard-page .dashboard-control-dot {
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #00b84a;
    box-shadow: 0 0 7px rgba(0, 184, 74, 0.34);
}

.dashboard-page .dashboard-system-button.is-off .dashboard-control-dot {
    background: #df4f3b;
    box-shadow: 0 0 7px rgba(223, 79, 59, 0.28);
}

.dashboard-page .dashboard-panic-button {
    min-width: 86px;
    padding: 0 12px;
    border: 1px solid #ff5a36;
    color: #ff6f55;
    background: rgba(255, 90, 54, 0.09);
}

.dashboard-page .dashboard-panic-button:hover,
.dashboard-page .dashboard-panic-button.is-active {
    color: #ffffff;
    background: #ff4b55;
    border: 1px solid #ff4b55;
    box-shadow: 0 0 16px rgba(255, 75, 85, 0.25);
}

.dashboard-page .dashboard-panic-button:focus-visible {
    outline: 2px solid rgba(255, 90, 54, 0.72);
    outline-offset: 2px;
}

.dashboard-page .dashboard-panic-button:active {
    transform: translateY(1px);
}

.dashboard-page .dashboard-tickerbar {
    position: relative;
    min-height: 48px;
    align-items: center;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, .045);
    border-top: 0;
    border-radius: 0;
    background: linear-gradient(180deg, rgba(28, 28, 31, .82), rgba(14, 14, 17, .88));
}

.dashboard-page .dashboard-tickerbar .dashboard-active-ticker-button {
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    border-radius: 4px;
    font-size: 13px;
    line-height: 1;
    letter-spacing: 0;
}

.dashboard-page .dashboard-tickerbar .dashboard-active-ticker-button.scale-105 {
    transform: none;
}

.ticker-bar-search {
    width: 34px;
    height: 34px;
    min-width: 34px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 4px;
    color: #a9b3c0;
    background: rgba(0, 0, 0, .22);
    transition: color 140ms ease, border-color 140ms ease, background-color 140ms ease;
}

.ticker-bar-search:hover,
.ticker-bar-search[aria-expanded="true"] {
    color: #73a8ff;
    border-color: rgba(115, 168, 255, .55);
    background: rgba(115, 168, 255, .12);
}

.search-glyph {
    position: relative;
    width: 15px;
    height: 15px;
    display: block;
    border: 1.6px solid currentColor;
    border-radius: 50%;
}

.search-glyph::after {
    content: "";
    position: absolute;
    right: -4px;
    bottom: -3px;
    width: 6px;
    border-top: 1.6px solid currentColor;
    transform: rotate(45deg);
}

.dashboard-empty-ticker-message {
    align-self: center;
    padding: 0 8px;
    color: #777e89;
    font-size: 12px;
    line-height: 34px;
    white-space: nowrap;
}

.ticker-search-popover {
    position: fixed;
    top: 106px;
    left: calc(var(--vyl-sidebar-width) + 18px);
    z-index: 95;
    width: min(360px, calc(100vw - var(--vyl-sidebar-width) - 36px));
    max-height: min(460px, calc(100vh - 132px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 8px;
    color: #f2f4f8;
    background: linear-gradient(180deg, rgba(28, 28, 32, .98), rgba(12, 12, 15, .98));
    box-shadow: 0 18px 42px rgba(0, 0, 0, .44);
}

.vyl-sidebar.is-collapsed ~ .main-content .ticker-search-popover,
.vyl-sidebar.is-collapsed ~ * .ticker-search-popover {
    left: calc(var(--vyl-sidebar-collapsed-width) + 18px);
}

.ticker-search-popover header {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.ticker-search-popover header div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ticker-search-popover header strong {
    font-size: 13px;
    line-height: 16px;
}

.ticker-search-popover header span {
    color: #8a8f9b;
    font-size: 11px;
    line-height: 14px;
}

.ticker-search-close {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border: 0;
    border-radius: 4px;
    color: #9aa2ad;
    background: transparent;
    font-size: 17px;
    line-height: 1;
}

.ticker-search-close:hover {
    color: #fff;
    background: rgba(255, 255, 255, .07);
}

.ticker-search-field {
    height: 38px;
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 12px;
    padding: 0 10px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 5px;
    color: #8d98a7;
    background: rgba(0, 0, 0, .26);
}

.ticker-search-field input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    color: #f4f7fb;
    background: transparent;
    font-size: 13px;
}

.ticker-search-list {
    min-height: 0;
    overflow-y: auto;
    padding: 0 8px 10px;
}

.ticker-search-row {
    width: 100%;
    min-height: 38px;
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr) 20px;
    align-items: center;
    gap: 8px;
    padding: 0 8px;
    border: 0;
    border-radius: 5px;
    color: #c3c7cf;
    background: transparent;
    text-align: left;
}

.ticker-search-row:hover {
    background: rgba(255, 255, 255, .06);
}

.ticker-search-row strong {
    color: #f3f6fb;
    font-size: 13px;
    line-height: 1;
}

.ticker-search-row span {
    min-width: 0;
    overflow: hidden;
    color: #858c98;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ticker-search-row i {
    width: 16px;
    height: 16px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 50%;
}

.ticker-search-row.is-active {
    color: #7ce4aa;
    background: rgba(124, 228, 170, .08);
}

.ticker-search-row.is-active i {
    border-color: rgba(124, 228, 170, .72);
    background: radial-gradient(circle at center, #7ce4aa 0 38%, transparent 42%);
}

.ticker-search-empty {
    padding: 16px 8px;
    color: #858c98;
    font-size: 12px;
}

.dashboard-trash-drop {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    pointer-events: none;
}

.dashboard-trash-drop-box {
    width: 128px;
    min-height: 98px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px;
    border: 1px solid rgba(255, 88, 111, .34);
    border-radius: 8px;
    color: #ff8fa0;
    background: rgba(20, 10, 13, .92);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .42), 0 0 24px rgba(255, 88, 111, .14);
    pointer-events: auto;
    transform: scale(.96);
    transition: transform 120ms ease, border-color 120ms ease, background-color 120ms ease;
}

.dashboard-trash-drop.is-armed .dashboard-trash-drop-box {
    border-color: rgba(255, 88, 111, .78);
    background: rgba(54, 15, 22, .96);
    transform: scale(1);
}

.dashboard-trash-drop-icon {
    position: relative;
    width: 20px;
    height: 20px;
    display: block;
    border: 1.6px solid currentColor;
    border-top: 0;
    border-radius: 0 0 4px 4px;
}

.dashboard-trash-drop-icon::before {
    content: "";
    position: absolute;
    top: -5px;
    left: -2px;
    width: 22px;
    border-top: 1.6px solid currentColor;
}

.dashboard-trash-drop-icon::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 5px;
    width: 1.4px;
    height: 10px;
    background: currentColor;
    box-shadow: 6px 0 0 currentColor;
}

.dashboard-trash-drop-box strong {
    font-size: 12px;
    line-height: 14px;
    text-align: center;
}

.dashboard-trash-drop-box small {
    color: #c46b78;
    font-size: 10px;
    line-height: 12px;
    text-align: center;
}

@media (max-width: 767px) {
    .ticker-search-popover {
        top: 92px;
        left: 12px;
        width: calc(100vw - 24px);
        max-height: min(430px, calc(100vh - 116px));
    }

    .dashboard-page .dashboard-tickerbar {
        min-height: 42px;
        padding: 6px;
    }

    .dashboard-page .dashboard-tickerbar .dashboard-active-ticker-button,
    .ticker-bar-search {
        height: 30px;
        min-width: 30px;
    }
}

.vyl-sidebar-mobile-close {
    position: absolute;
    z-index: 5;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 4px;
    color: #a6a6ae;
    background: transparent;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.vyl-sidebar-mobile-close:hover {
    color: #fff;
    background: rgba(255, 255, 255, .075);
}

@media (max-width: 920px) {
    .vyl-sidebar-mobile .vyl-sidebar-brand {
        padding-right: 42px;
    }

    .vyl-sidebar-mobile .vyl-sidebar-popover,
    .vyl-sidebar-mobile .vyl-terminal-popover {
        left: 8px;
        right: 8px;
        top: 64px;
        width: auto;
        height: min(620px, calc(100vh - 76px));
    }

    .vyl-sidebar-mobile .vyl-user-popover {
        height: auto;
    }

    .vyl-terminal-filter-bar {
        flex-wrap: wrap;
    }
}

.dashboard-page header.dashboard-topbar.glass-hud[class*="border-cyber-blue"] {
    background:
        linear-gradient(180deg, rgba(36, 36, 39, .86), rgba(18, 18, 21, .9));
}


/* ==========================================================================
   Nueva Chart — sección independiente, sobre KLineChart Pro (2026-08-17).
   Namespace propio (.nvc-*). El "chrome" (rail de dibujo, temporalidades,
   indicadores) lo aporta klinecharts-pro.css (vendorizado); aquí solo va la
   cabecera propia de VylMoon y los estados de carga/error.
   ========================================================================== */
:root { --nvc-hairline: #1e222a; }
.nvc-page {
    height: 100%;
    width: 100%;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: transparent;
    box-sizing: border-box;
}
.nvc-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.nvc-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #6b7c96;
    font-weight: 700;
}
.nvc-dot { width: 7px; height: 7px; border-radius: 50%; background: #00e0a4; box-shadow: 0 0 8px rgba(0, 224, 164, 0.6); animation: nvc-pulse 1.8s ease-in-out infinite; }
.nvc-dot.is-closed { background: #ffcc66; box-shadow: 0 0 8px rgba(255, 204, 102, 0.6); animation: none; }
@keyframes nvc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.nvc-anchor-badge { padding: 2px 8px; border-radius: 999px; background: rgba(0, 210, 255, 0.08); border: 1px solid rgba(0, 210, 255, 0.2); color: #7fe9ff; font-size: 9px; }
.nvc-live { padding: 2px 8px; border-radius: 999px; background: rgba(0, 224, 164, 0.12); border: 1px solid rgba(0, 224, 164, 0.3); color: #00e0a4; font-size: 9px; }
.nvc-closed { padding: 2px 8px; border-radius: 999px; background: rgba(255, 204, 102, 0.1); border: 1px solid rgba(255, 204, 102, 0.3); color: #ffcc66; font-size: 9px; }
.nvc-title { font-size: 18px; font-weight: 800; color: #eaf2ff; margin-top: 4px; }
.nvc-symbol { color: #00d2ff; }
.nvc-header-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nvc-provider { padding: 3px 8px; border-radius: 6px; font-size: 10px; font-weight: 700; border: 1px solid rgba(148, 163, 184, 0.2); color: #9fb0c9; }
.nvc-provider.is-self { color: #00e0a4; border-color: rgba(0, 224, 164, 0.35); background: rgba(0, 224, 164, 0.08); }
.nvc-provider.is-shared { color: #ffcc66; border-color: rgba(255, 204, 102, 0.35); background: rgba(255, 204, 102, 0.08); }
.nvc-safety { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; color: #6b7c96; }
.nvc-safety svg { width: 14px; height: 14px; stroke-width: 1.8; }

.nvc-stage {
    --nvc-toolbar-bg: #151517;
    /* Un solo tono para todos los vivos de la seccion. Antes convivian tres
       grises distintos (rgba(49,65,83,.95) azulado, #292929 neutro y #34363d),
       asi que ningun borde casaba con el de al lado; y los tres eran demasiado
       claros sobre el fondo casi negro, por eso se leian como lineas blancas.
       Se toca AQUI para subir o bajar la intensidad de todos a la vez. */
    --nvc-hairline: #1e222a;
    position: relative;
    display: flex;
    /* Columna: la barra informativa es la cabecera de la sección y debajo va el
       cuerpo (gráfico + cadena) en fila. Ambas dentro del stage para que entren
       en pantalla completa. */
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 420px;
    border-radius: 12px;
    overflow: hidden;
    /* Mismo vivo que el resto de la seccion. Antes era blanco 0.09 y ademas
       llevaba un `box-shadow: inset 0 1px 0` que iluminaba SOLO el canto
       superior: el marco no casaba con los filetes internos y los cuatro lados
       no eran simetricos. */
    border: 1px solid var(--nvc-hairline);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.058), rgba(255, 255, 255, 0.016)),
        rgba(10, 10, 14, 0.58);
    -webkit-backdrop-filter: blur(18px) saturate(112%);
    backdrop-filter: blur(18px) saturate(112%);
}
.nvc-stage-body {
    position: relative;
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    background: rgba(0, 0, 0, 0.18);
}

/* ── Barra informativa de la sección del gráfico ─────────────────────────────
   Misma gramática visual que la tira de cuenta de Signals: celdas de
   etiqueta/valor. Alto FIJO y scroll horizontal en vez de envolver a dos filas:
   si envolviera, el alto cambiaría solo y el gráfico saltaría de tamaño
   mientras operas. */
.nvc-info-bar {
    position: relative;
    display: flex;
    align-items: stretch;
    flex: 0 0 auto;
    min-height: 46px;
    box-sizing: border-box;
    padding: 0 30px 0 10px;
    background: var(--nvc-toolbar-bg, #151517);
    border-bottom: 1px solid var(--nvc-hairline);
}
.nvc-info-bar.is-collapsed { min-height: 16px; }
.nvc-info-cells {
    display: flex;
    align-items: center;
    gap: 18px;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    white-space: nowrap;
}
.nvc-info-cells::-webkit-scrollbar { display: none; }
.nvc-info-cell {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    flex: 0 0 auto;
}
.nvc-info-label {
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #6b7a90;
    line-height: 1;
}
.nvc-info-value {
    font-size: 12px;
    font-weight: 700;
    color: #e6edf7;
    line-height: 1.2;
    font-family: "JetBrains Mono", ui-monospace, monospace;
}
/* Al seleccionar un trade o con posición viva, un filo de color a la izquierda
   dice de un vistazo qué está mirando la barra. */
.nvc-info-mode-trade { box-shadow: inset 3px 0 0 #7fe9ff; }
.nvc-info-mode-abierta { box-shadow: inset 3px 0 0 #00e0a4; }
.nvc-info-toggle {
    position: absolute;
    top: 2px;
    right: 6px;
    z-index: 2;
    width: 20px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: #6b7a90;
    cursor: pointer;
    font-size: 11px;
    line-height: 1;
    padding: 0;
}
.nvc-info-toggle:hover { color: #7fe9ff; }

/* Ghost/Import, SYS ON/OFF, PANIC, ONLINE - los mismos controles de Signals,
   en la zona izquierda de la barra de info junto a los datos del trade.
   Mismo lenguaje oscuro del resto del chart (fondo #151517-#1c1c1f, texto
   #cfe0f5, acentos cyan) en vez de la paleta más brillante de Signals. */
.nvc-system-controls {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 6px;
    flex: 0 0 auto;
    margin-left: auto;
    padding-left: 14px;
    border-left: 1px solid var(--nvc-hairline);
}
.nvc-system-ghost-wrap { position: relative; }
.nvc-system-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 26px;
    padding: 0 9px;
    border-radius: 5px;
    border: 1px solid var(--nvc-hairline);
    background: #1c1c1f;
    color: #cfe0f5;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    white-space: nowrap;
}
.nvc-system-btn:hover:not(:disabled) { border-color: #00d2ff; color: #00d2ff; }
.nvc-system-btn:disabled { opacity: 0.5; cursor: default; }
.nvc-system-ghost { width: 26px; padding: 0; font-size: 13px; }
.nvc-system-toggle.is-on { border-color: rgba(0, 224, 164, 0.4); color: #00e0a4; background: rgba(0, 224, 164, 0.08); }
.nvc-system-toggle.is-off { border-color: rgba(255, 77, 109, 0.4); color: #ff4d6d; background: rgba(255, 77, 109, 0.08); }
.nvc-system-panic { border-color: rgba(255, 77, 109, 0.5); color: #ff4d6d; background: rgba(255, 77, 109, 0.08); }
.nvc-system-panic:hover { background: rgba(255, 77, 109, 0.18); color: #ff4d6d; border-color: #ff4d6d; }
.nvc-system-online {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 26px;
    padding: 0 9px;
    border-radius: 5px;
    border: 1px solid var(--nvc-hairline);
    background: #1c1c1f;
    color: #6b7a90;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
}
.nvc-system-online i { width: 6px; height: 6px; border-radius: 50%; background: #6b7a90; }
.nvc-system-online.is-on { color: #00e0a4; }
.nvc-system-online.is-on i { background: #00e0a4; box-shadow: 0 0 6px rgba(0, 224, 164, 0.6); }

.nvc-ghost-picker {
    position: absolute;
    top: 32px;
    /* Abre hacia la izquierda, no hacia la derecha: el botón ahora vive
       pegado al borde derecho de la barra, así que anclar a la izquierda
       (left:0) lo sacaría de la pantalla. */
    right: 0;
    z-index: 60;
    width: 200px;
    border-radius: 8px;
    border: 1px solid var(--nvc-hairline);
    background: #141c27;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    overflow: hidden;
}
.nvc-ghost-picker-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #9fb0c9;
    border-bottom: 1px solid var(--nvc-hairline);
}
.nvc-ghost-picker-head button { border: 0; background: transparent; color: #6b7a90; cursor: pointer; padding: 0; display: inline-flex; }
.nvc-ghost-picker-head button:hover { color: #fff; }
.nvc-ghost-picker-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-top: 1px solid var(--nvc-hairline);
    background: transparent;
    color: #cfe0f5;
    font-size: 11px;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    cursor: pointer;
    text-align: left;
}
.nvc-ghost-picker-row:first-of-type { border-top: 0; }
.nvc-ghost-picker-row:hover { background: rgba(0, 210, 255, 0.1); color: #00d2ff; }

.nvc-plot {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    display: grid;
    gap: 1px;
    padding-left: 52px;
    box-sizing: border-box;
    background: var(--nvc-chart-bg, #070c16);
}
/* El hueco de 52px existe solo para la barra de dibujo, que va `position: fixed`.
   Al ocultarla, KLineChart Pro marca el widget con data-drawing-bar-visible=false
   pero el padding seguía reservado: quedaba una franja vacía a la izquierda. Se
   mira el panel ACTIVO, que es el único cuya barra se muestra. */
.nvc-plot:has(.nvc-chart-pane.is-active .klinecharts-pro-widget[data-drawing-bar-visible="false"]) {
    padding-left: 0;
}

.nvc-stage.nvc-tools-hidden .nvc-plot {
    padding-left: 0;
}

.nvc-stage.nvc-tools-visible .nvc-plot {
    padding-left: 52px;
}
/* El botón de contraer la barra de dibujo se saca del flujo y se ancla al hueco
   de 52px que queda libre en la esquina superior izquierda — justo encima de la
   barra que controla. Aprovecha ese espacio en blanco y deja de empujar los
   periodos hacia la derecha. */
.nvc-global-toolbar .klinecharts-pro-period-bar .menu-container {
    position: absolute;
    left: -52px;
    top: 0;
    width: 52px;
    height: 38px;
    box-sizing: border-box;
    border-right: solid 1px var(--klinecharts-pro-border-color);
}
/* Con la barra de dibujo oculta el hueco de 52px desaparece, así que el botón
   vuelve al flujo normal para no quedarse fuera del gráfico. */
.nvc-plot:has(.nvc-chart-pane.is-active .klinecharts-pro-widget[data-drawing-bar-visible="false"]) .nvc-global-toolbar .klinecharts-pro-period-bar .menu-container {
    position: static;
    left: auto;
}

.nvc-stage.nvc-tools-hidden .nvc-global-toolbar .klinecharts-pro-period-bar .menu-container {
    position: static;
    left: auto;
}

.nvc-stage.nvc-tools-visible .nvc-global-toolbar .klinecharts-pro-period-bar .menu-container {
    position: absolute;
    left: -52px;
}

.nvc-global-toolbar {
    position: relative;
    grid-column: 1 / -1;
    min-width: 0;
    height: 38px;
    overflow: hidden;
    background: var(--nvc-toolbar-bg, #151517);
    /* Deja sitio a los cinco botones del extremo derecho: replay, lab, cadena,
       estilo, capas. */
    padding-right: 186px;
    box-sizing: border-box;
    /* La barra de periodos se MUEVE aquí desde dentro de `.klinecharts-pro`, así
       que se queda sin las variables del tema del vendor. `fill: var(--klinecharts
       -pro-text-color)` quedaba sin valor y los iconos caían al negro por defecto,
       invisibles sobre el fondo oscuro. Se redefinen aquí. */
    --klinecharts-pro-text-color: #e6edf7;
    --klinecharts-pro-text-second-color: #9fb0c9;
    --klinecharts-pro-text-third-color: #6b7a90;
    --klinecharts-pro-border-color: var(--nvc-hairline);
    --klinecharts-pro-primary-color: #00d2ff;
    --klinecharts-pro-hover-background-color: rgba(0, 210, 255, 0.15);
    --klinecharts-pro-selected-color: rgba(0, 210, 255, 0.18);
    --klinecharts-pro-background-color: var(--nvc-toolbar-bg, #151517);
    --klinecharts-pro-popover-background-color: #1c1c1f;
    color: var(--klinecharts-pro-text-color);
    fill: var(--klinecharts-pro-text-color);
}
/* La barra de periodos hace scroll horizontal sin barra visible, y las
   herramientas van al final: en ventanas estrechas Ajustes, Pantalla completa y
   Captura quedaban fuera de vista y era imposible llegar a ellas (de ahí que
   "el botón de Settings no salía"). Se deja fluir a una segunda fila en lugar de
   recortar. En pantallas anchas sigue siendo una sola fila. */
/* BARRA SUPERIOR: UNA SOLA FILA CON DESPLAZAMIENTO.
   Antes usaba `flex-wrap: wrap` con altura automatica, asi que en una laptop o
   un monitor pequeno las herramientas saltaban a filas nuevas y la barra crecia
   hasta desmontar la alineacion del grafico (medido a 1024px de ancho: pasaba de
   38px a 212px de alto, cinco filas). Ahora se queda en una fila de 38px fijos y
   lo que no cabe se alcanza desplazando.
   El manejador de rueda ya existia en JS (`onTopToolbarWheel`, convierte el
   scroll vertical en horizontal); era este CSS el que lo dejaba inutil.
   El boton ☰ de la barra de dibujo vive dentro con `left:-52px` y NO se recorta:
   la period-bar es `position: static`, asi que no es su bloque contenedor. */
.nvc-global-toolbar {
    height: 38px;
    min-height: 38px;
    overflow: visible;
}
.nvc-global-toolbar .klinecharts-pro-period-bar {
    flex-wrap: nowrap;
    height: 38px;
    min-height: 38px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    row-gap: 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 210, 255, 0.35) transparent;
    overscroll-behavior-x: contain;
}
/* Nada se encoge: si algo no cabe, se desplaza. Sin esto flex apretaria los
   iconos hasta deformarlos en vez de generar scroll. */
.nvc-global-toolbar .klinecharts-pro-period-bar > * {
    flex: 0 0 auto;
}
/* Barra de desplazamiento fina y discreta, pero VISIBLE: si no se ve, el usuario
   no sabe que hay mas herramientas a la derecha. */
.nvc-global-toolbar .klinecharts-pro-period-bar::-webkit-scrollbar {
    height: 4px;
}
.nvc-global-toolbar .klinecharts-pro-period-bar::-webkit-scrollbar-track {
    background: transparent;
}
.nvc-global-toolbar .klinecharts-pro-period-bar::-webkit-scrollbar-thumb {
    background: rgba(0, 210, 255, 0.35);
    border-radius: 2px;
}
.nvc-global-toolbar .klinecharts-pro-period-bar::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 210, 255, 0.6);
}
/* Solo iconos: `font-size: 0` colapsa el texto de cada herramienta sin tocar el
   SVG (el nombre pasa a tooltip nativo, puesto por JS). Libera bastante ancho. */
.nvc-global-toolbar .klinecharts-pro-period-bar .tools {
    font-size: 0;
    padding: 0 9px;
    color: #cfe0f5;
    fill: #cfe0f5;
}
.nvc-global-toolbar .klinecharts-pro-period-bar .tools svg {
    width: 17px;
    height: 17px;
    margin-right: 0;
}
.nvc-global-toolbar .klinecharts-pro-period-bar .tools:hover {
    color: var(--klinecharts-pro-primary-color);
    fill: var(--klinecharts-pro-primary-color);
}
.nvc-global-toolbar .klinecharts-pro-period-bar .menu-container svg,
.nvc-global-toolbar .klinecharts-pro-period-bar .item {
    fill: #cfe0f5;
}
/* El <select> de tipo de gráfico se dimensiona por su opción más larga ("Hollow
   Candles"), y se comía 121px de la barra. Recortarlo libera sitio para que las
   herramientas de la derecha quepan sin desbordar. */
.nvc-global-toolbar .klinecharts-pro-period-bar .chart-type-select {
    max-width: 84px;
    font-size: 11px;
}
.nvc-global-toolbar .klinecharts-pro-period-bar {
    width: 100% !important;
}
/* ── Lenguaje visual único para TODOS los submenús de la barra ───────────────
   Convivían tres estilos: los modales del vendor (fondo #1c1c1f, esquinas de
   4px, título de 52px y 18px de fuente), el diálogo de Ajustes y el menú de
   capas. Se unifican sobre el nuestro: fondo oscuro translúcido, borde azulado,
   radio de 8px y tipografía compacta. */
.nvc-stage-pro .klinecharts-pro-modal .inner {
    border: 1px solid var(--nvc-hairline);
    border-radius: 8px;
    background: rgba(10, 17, 25, 0.98) !important;
    box-shadow: 0 22px 70px rgba(0, 0, 0, 0.55);
    color: #d1d4dc;
}
.nvc-stage-pro .klinecharts-pro-modal .inner .title-container {
    height: 42px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 700;
    color: #e6edf7;
    border-bottom: 1px solid var(--nvc-hairline);
}
.nvc-stage-pro .klinecharts-pro-modal .inner .title-container .close-icon { fill: #6b7a90; }
.nvc-stage-pro .klinecharts-pro-modal .inner .title-container .close-icon:hover { fill: #ff6b78; }
.nvc-stage-pro .klinecharts-pro-modal .inner .content-container { padding: 0 14px; }
.nvc-stage-pro .klinecharts-pro-modal .inner .button-container { padding: 14px; }
/* Fondo del velo: el del vendor es casi transparente y el nuestro más denso. */
.nvc-stage-pro .klinecharts-pro-modal { background-color: rgba(0, 0, 0, 0.42); }

/* El diálogo de Ajustes adopta el mismo borde y radio que los demás. */
.nvc-settings-modal {
    border-color: var(--nvc-hairline) !important;
    border-radius: 8px !important;
    background: rgba(10, 17, 25, 0.98) !important;
}

/* Botón de capas: mismo lenguaje que las herramientas del vendor (icono suelto,
   sin borde ni relleno), no una píldora aparte. */
.nvc-layers-btn {
    position: absolute;
    top: 6px;
    right: 40px;
    z-index: 36;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #cfe0f5;
    cursor: pointer;
    padding: 0;
}
.nvc-layers-btn:hover { color: #00d2ff; background: rgba(0, 210, 255, 0.12); }
.nvc-layers-btn.is-active { color: #00d2ff; background: rgba(0, 210, 255, 0.18); }

/* Botón del panel de estilo de indicadores, a la izquierda del de capas. */
.nvc-indstyle-btn {
    position: absolute;
    top: 6px;
    right: 68px;
    z-index: 36;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #cfe0f5;
    cursor: pointer;
    padding: 0;
}
.nvc-indstyle-btn:hover { color: #00d2ff; background: rgba(0, 210, 255, 0.12); }
.nvc-indstyle-btn.is-active { color: #00d2ff; background: rgba(0, 210, 255, 0.18); }

.nvc-indstyle-menu { width: 296px; }
.nvc-indstyle-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
}
.nvc-indstyle-name {
    flex: 1 1 auto;
    min-width: 0;
    color: #cfe0f5;
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nvc-indstyle-row input[type="color"] {
    width: 26px;
    height: 22px;
    padding: 0;
    border: 1px solid var(--nvc-hairline);
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
}
.nvc-indstyle-row select {
    height: 22px;
    padding: 0 4px;
    border: 1px solid var(--nvc-hairline);
    border-radius: 4px;
    background: #0f1722;
    color: #cfe0f5;
    font-size: 10px;
    cursor: pointer;
    outline: none;
}

/* Controles visuales anexados al modal nativo del engranaje del indicador. */
.klinecharts-pro-indicator-setting-modal-content .nvc-inline-indicator-style {
    grid-column: 1 / -1;
    display: grid;
    gap: 8px;
    min-width: 308px;
    padding-top: 16px;
    border-top: 1px solid var(--klinecharts-pro-border-color);
}
.nvc-inline-indicator-style-title {
    color: var(--klinecharts-pro-text-color);
    font-size: 13px;
}
.nvc-inline-indicator-style-row {
    display: grid;
    grid-template-columns: minmax(88px, 1fr) 32px 64px 104px;
    gap: 8px;
    align-items: center;
    color: var(--klinecharts-pro-text-second-color);
    font-size: 12px;
}
.nvc-inline-indicator-style-row > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nvc-inline-indicator-style-row input[type="color"] {
    width: 32px;
    height: 28px;
    padding: 2px;
    border: 1px solid var(--klinecharts-pro-border-color);
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
}
.nvc-inline-indicator-style-row select {
    width: 100%;
    height: 30px;
    padding: 0 7px;
    border: 1px solid var(--klinecharts-pro-border-color);
    border-radius: 4px;
    background: var(--klinecharts-pro-popover-background-color);
    color: var(--klinecharts-pro-text-color);
    font-size: 11px;
}
.nvc-inline-indicator-style-reset {
    justify-self: end;
    padding: 6px 10px;
    border: 1px solid var(--klinecharts-pro-border-color);
    border-radius: 4px;
    background: transparent;
    color: var(--klinecharts-pro-text-second-color);
    font-size: 11px;
    cursor: pointer;
}
.nvc-inline-indicator-style-reset:hover {
    border-color: var(--klinecharts-pro-primary-color);
    color: var(--klinecharts-pro-primary-color);
}

.nvc-layers-menu {
    position: absolute;
    top: 38px;
    right: 8px;
    z-index: 60;
    width: 262px;
    max-height: 70vh;
    overflow-y: auto;
    padding: 10px;
    border: 1px solid var(--nvc-hairline);
    border-radius: 8px;
    background: rgba(10, 17, 25, 0.98);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.45);
    font-size: 11px;
}
.nvc-layers-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    color: #e6edf7;
    font-size: 12px;
}
.nvc-layers-head button { border: 0; background: transparent; color: #6b7a90; cursor: pointer; padding: 2px; }
.nvc-layers-head button:hover { color: #ff6b78; }
.nvc-layers-section { padding: 8px 0; border-top: 1px solid var(--nvc-hairline); }
.nvc-layers-section:first-of-type { border-top: 0; padding-top: 0; }
.nvc-layers-title {
    display: block;
    margin-bottom: 6px;
    color: #6b7a90;
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.nvc-layers-title em { font-style: normal; color: #4d5b6e; text-transform: none; letter-spacing: 0; }
.nvc-layers-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    color: #cfe0f5;
    cursor: pointer;
}
.nvc-layers-row input { accent-color: #00d2ff; cursor: pointer; }
.nvc-layers-segmented { display: flex; gap: 4px; margin-bottom: 6px; flex-wrap: wrap; }
.nvc-layers-segmented button {
    flex: 1 1 auto;
    min-width: 52px;
    padding: 5px 6px;
    border: 1px solid var(--nvc-hairline);
    border-radius: 4px;
    background: transparent;
    color: #8190a2;
    font-size: 10px;
    cursor: pointer;
}
.nvc-layers-segmented button:hover { color: #7fe9ff; border-color: rgba(0, 210, 255, 0.4); }
.nvc-layers-segmented button.is-active { color: #00e0a4; border-color: rgba(0, 224, 164, 0.5); background: rgba(0, 224, 164, 0.1); }
.nvc-layers-preset {
    width: 100%;
    margin-top: 6px;
    padding: 6px;
    border: 1px dashed var(--nvc-hairline);
    border-radius: 4px;
    background: transparent;
    color: #8190a2;
    font-size: 10px;
    cursor: pointer;
}
.nvc-layers-preset:hover { color: #7fe9ff; border-color: rgba(0, 210, 255, 0.4); }
.nvc-layers-preset.is-active { color: #00e0a4; border-color: rgba(0, 224, 164, 0.5); }

.nvc-trades-toggle {
    position: absolute;
    top: 6px;
    right: 8px;
    z-index: 36;
    height: 26px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 1px solid var(--nvc-hairline);
    border-radius: 4px;
    color: #8190a2;
    background: rgba(15, 23, 34, 0.96);
    font-size: 9px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
}
.nvc-trades-toggle:hover {
    color: #7fe9ff;
    border-color: rgba(0, 210, 255, 0.4);
}
.nvc-trades-toggle.is-active {
    color: #00e0a4;
    border-color: rgba(0, 224, 164, 0.45);
    background: rgba(0, 224, 164, 0.1);
}

.nvc-settings-backdrop {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.42);
}

.nvc-settings-modal {
    width: min(760px, calc(100vw - 36px));
    /* Alto FIJO, no `max-height`. Con el alto guiado por el contenido, la ventana
       crecía y encogía al cambiar de pestaña o al escribir un valor, y el ratón se
       quedaba señalando otra cosa. El contenido hace scroll dentro
       (`.nvc-settings-content` ya es overflow-y: auto). */
    height: min(620px, calc(100vh - 36px));
    display: grid;
    grid-template-columns: 164px minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid var(--nvc-hairline);
    border-radius: 8px;
    background: #151517;
    box-shadow: 0 22px 70px rgba(0, 0, 0, 0.55);
    color: #d1d4dc;
}

.nvc-settings-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-right: 1px solid var(--nvc-hairline);
    background: #101012;
    padding: 10px 8px;
}

.nvc-settings-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px 12px;
    border-bottom: 1px solid var(--nvc-hairline);
    margin-bottom: 6px;
}
.nvc-settings-brand > span {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #2962ff;
    color: #fff;
    font-weight: 900;
}
.nvc-settings-brand b {
    display: block;
    color: #f0f3fa;
    font-size: 12px;
    line-height: 1;
}
.nvc-settings-brand small {
    display: block;
    margin-top: 3px;
    color: #787b86;
    font-size: 10px;
    line-height: 1;
}

.nvc-settings-nav button {
    height: 34px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #929aa5;
    padding: 0 10px;
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}
.nvc-settings-nav button:hover { background: #1f1f23; color: #f0f3fa; }
.nvc-settings-nav button.is-active { background: #292929; color: #f0f3fa; }

.nvc-settings-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.nvc-settings-head {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid var(--nvc-hairline);
    padding: 10px 14px;
}
.nvc-settings-head h2 {
    margin: 0;
    color: #f0f3fa;
    font-size: 16px;
    line-height: 1.15;
    font-weight: 800;
}
.nvc-settings-head p {
    margin: 4px 0 0;
    color: #787b86;
    font-size: 11px;
    line-height: 1.2;
}
.nvc-settings-head button {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #929aa5;
    cursor: pointer;
}
.nvc-settings-head button:hover { background: #292929; color: #fff; }

.nvc-settings-content {
    min-height: 0;
    overflow-y: auto;
    padding: 14px;
}

.nvc-setting-block {
    border: 1px solid var(--nvc-hairline);
    border-radius: 6px;
    background: #111113;
    padding: 11px;
    margin-bottom: 10px;
}
.nvc-setting-block h3 {
    margin: 0 0 9px;
    color: #929aa5;
    font-size: 10px;
    line-height: 1;
    font-weight: 900;
    text-transform: uppercase;
}

.nvc-setting-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 10px;
}

.nvc-setting-color,
.nvc-setting-toggle,
.nvc-setting-range {
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid var(--nvc-hairline);
    border-radius: 6px;
    background: #111113;
    padding: 8px 10px;
}
.nvc-setting-color span,
.nvc-setting-toggle b,
.nvc-setting-range b {
    display: block;
    color: #d1d4dc;
    font-size: 11px;
    line-height: 1.15;
    font-weight: 800;
}
.nvc-setting-toggle small {
    display: block;
    margin-top: 3px;
    color: #787b86;
    font-size: 10px;
    line-height: 1.15;
    font-weight: 600;
}
.nvc-setting-color input {
    width: 28px;
    height: 24px;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
}
.nvc-setting-color code {
    width: 62px;
    color: #929aa5;
    font-size: 10px;
    text-align: right;
}

.nvc-setting-toggle {
    width: 100%;
    margin-bottom: 8px;
    border-color: var(--nvc-hairline);
    text-align: left;
    cursor: pointer;
}
.nvc-setting-toggle:hover,
.nvc-setting-range:hover,
.nvc-setting-color:hover { border-color: #3f424b; }
.nvc-setting-toggle i {
    position: relative;
    width: 32px;
    height: 18px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: #34363d;
}
.nvc-setting-toggle i::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #929aa5;
    transition: transform 0.15s ease, background 0.15s ease;
}
.nvc-setting-toggle.is-on i { background: rgba(41, 98, 255, 0.38); }
.nvc-setting-toggle.is-on i::after { transform: translateX(14px); background: #7da2ff; }

.nvc-setting-range {
    display: block;
    margin-bottom: 8px;
}
.nvc-setting-range span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.nvc-setting-range em {
    color: #7da2ff;
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
}
.nvc-setting-range input {
    width: 100%;
    margin-top: 8px;
    accent-color: #2962ff;
}

.nvc-setting-segmented {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 2px;
    border: 1px solid var(--nvc-hairline);
    border-radius: 5px;
    background: #0d0d0f;
    padding: 2px;
}
.nvc-setting-segmented button {
    min-height: 28px;
    border: 0;
    border-radius: 3px;
    background: transparent;
    color: #929aa5;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
}
.nvc-setting-segmented button:hover { color: #f0f3fa; background: #1f1f23; }
.nvc-setting-segmented button.is-active { color: #fff; background: #2962ff; }

.nvc-settings-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    border-top: 1px solid var(--nvc-hairline);
    padding: 10px 14px;
}
.nvc-settings-footer button {
    height: 32px;
    border: 1px solid var(--nvc-hairline);
    border-radius: 4px;
    background: #111113;
    color: #d1d4dc;
    padding: 0 14px;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}
.nvc-settings-footer button:hover { border-color: #4c505b; color: #fff; }
.nvc-settings-footer button.is-primary {
    border-color: #2962ff;
    background: #2962ff;
    color: #fff;
}

body.nvc-resizing-trade,
body.nvc-resizing-trade * {
    cursor: ew-resize !important;
    user-select: none !important;
}
/* Pin de una operación cerrada bajo el puntero: se avisa de que es clicable. */
body.nvc-pin-hover .nvc-chart-pane,
body.nvc-pin-hover .nvc-chart-pane * {
    cursor: pointer !important;
}
/* Fila de la barra superior en `auto` y no 38px fijos: al permitir que la barra
   de periodos fluya a una segunda fila en ventanas estrechas, una altura fija
   dejaba esa segunda fila metida por debajo del gráfico. */
.nvc-layout-single { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
.nvc-layout-split-vertical { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto minmax(0, 1fr); }
.nvc-layout-split-horizontal { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto repeat(2, minmax(0, 1fr)); }
.nvc-layout-triple { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto repeat(2, minmax(0, 1fr)); }
.nvc-layout-triple .nvc-chart-pane:first-of-type { grid-row: 2 / span 2; }
.nvc-layout-quad { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto repeat(2, minmax(0, 1fr)); }
.nvc-layout-single .nvc-chart-pane { grid-column: 1; grid-row: 2; }
.nvc-layout-split-vertical .nvc-chart-pane { grid-row: 2; }
.nvc-layout-split-vertical .nvc-chart-pane:nth-of-type(1) { grid-column: 1; }
.nvc-layout-split-vertical .nvc-chart-pane:nth-of-type(2) { grid-column: 2; }
.nvc-layout-split-horizontal .nvc-chart-pane { grid-column: 1; }
.nvc-layout-split-horizontal .nvc-chart-pane:nth-of-type(1) { grid-row: 2; }
.nvc-layout-split-horizontal .nvc-chart-pane:nth-of-type(2) { grid-row: 3; }
.nvc-layout-triple .nvc-chart-pane:nth-of-type(1) { grid-column: 1; grid-row: 2 / span 2; }
.nvc-layout-triple .nvc-chart-pane:nth-of-type(2) { grid-column: 2; grid-row: 2; }
.nvc-layout-triple .nvc-chart-pane:nth-of-type(3) { grid-column: 2; grid-row: 3; }
.nvc-layout-quad .nvc-chart-pane:nth-of-type(1) { grid-column: 1; grid-row: 2; }
.nvc-layout-quad .nvc-chart-pane:nth-of-type(2) { grid-column: 2; grid-row: 2; }
.nvc-layout-quad .nvc-chart-pane:nth-of-type(3) { grid-column: 1; grid-row: 3; }
.nvc-layout-quad .nvc-chart-pane:nth-of-type(4) { grid-column: 2; grid-row: 3; }
.nvc-chart-pane {
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: var(--nvc-chart-bg, #070c16);
    outline: 1px solid rgba(148, 163, 184, 0.08);
}
.nvc-chart-pane.is-active {
    outline: 1px solid rgba(0, 210, 255, 0.62);
    outline-offset: -1px;
}
/* Con un solo panel no hay "panel activo" que distinguir, así que el borde cian
   no informa de nada: solo dibuja un filo alrededor de todo el gráfico, muy
   visible al poner un fondo claro. Se mantiene únicamente en layouts partidos,
   que es donde sí dice cuál panel recibe las acciones. */
.nvc-layout-single .nvc-chart-pane,
.nvc-layout-single .nvc-chart-pane.is-active {
    outline: none;
}
.nvc-pro-container { position: absolute; inset: 0; }
.nvc-stage-pro .nvc-pro-container,
.nvc-stage-pro .klinecharts-pro {
    overflow: hidden;
    background: var(--nvc-chart-bg, #151517) !important;
}
.nvc-stage-pro .klinecharts-pro-content,
.nvc-stage-pro .klinecharts-pro-widget,
.nvc-stage-pro .klinecharts-pro-widget > div {
    background-color: var(--nvc-chart-bg, #151517) !important;
}
.nvc-stage-pro .klinecharts-pro-content {
    height: calc(100% - 18px) !important;
}
.nvc-stage-pro .klinecharts-pro-widget,
.nvc-stage-pro .klinecharts-pro-widget[data-drawing-bar-visible=false] {
    width: 100% !important;
    margin-left: 0 !important;
}
.nvc-stage-pro .nvc-chart-pane .klinecharts-pro-period-bar,
.nvc-stage-pro .nvc-kc-detached-toolbar,
.nvc-stage-pro .nvc-kc-detached-drawing-toolbar {
    display: none !important;
}
.nvc-stage-pro .nvc-global-toolbar .klinecharts-pro-period-bar {
    display: flex !important;
}
.nvc-stage-pro .nvc-chart-pane.is-active .klinecharts-pro-drawing-bar {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 52px !important;
    max-height: 100% !important;
    overflow: visible !important;
    pointer-events: auto !important;
    border-right: 1px solid var(--nvc-hairline) !important;
    background: var(--nvc-toolbar-bg, #151517) !important;
    box-sizing: border-box !important;
}
/* La barra activa se fuerza a flex para poder sacarla del contenedor recortado,
   pero al ocultarla el estado de VylMoon debe ganar sobre esa regla. */
.nvc-stage-pro.nvc-tools-hidden .nvc-chart-pane.is-active .klinecharts-pro-drawing-bar {
    display: none !important;
}
.nvc-stage-pro .nvc-chart-pane.is-active .klinecharts-pro-drawing-bar .item .list {
    overflow-y: auto !important;
    overscroll-behavior: contain;
}
.nvc-stage-pro .klinecharts-pro-period-bar {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: thin !important;
    scrollbar-color: #314153 transparent !important;
}
.nvc-stage-pro .klinecharts-pro-bottom-bar {
    height: 18px !important;
    min-height: 18px !important;
    padding: 0 6px !important;
    gap: 4px !important;
    font-size: 9px !important;
}
.nvc-stage-pro .klinecharts-pro-bottom-bar .bottom-bar-icon-btn,
.nvc-stage-pro .klinecharts-pro-bottom-bar .bottom-bar-sep,
.nvc-stage-pro .klinecharts-pro-bottom-bar .bottom-bar-clock svg {
    display: none !important;
}
.nvc-stage-pro .nvc-layout-split-horizontal .nvc-chart-pane:nth-of-type(1) .klinecharts-pro-bottom-bar,
.nvc-stage-pro .nvc-layout-quad .nvc-chart-pane:nth-of-type(1) .klinecharts-pro-bottom-bar,
.nvc-stage-pro .nvc-layout-quad .nvc-chart-pane:nth-of-type(2) .klinecharts-pro-bottom-bar {
    display: none !important;
}
.nvc-stage-pro .nvc-layout-split-horizontal .nvc-chart-pane:nth-of-type(1) .klinecharts-pro-content,
.nvc-stage-pro .nvc-layout-quad .nvc-chart-pane:nth-of-type(1) .klinecharts-pro-content,
.nvc-stage-pro .nvc-layout-quad .nvc-chart-pane:nth-of-type(2) .klinecharts-pro-content {
    height: 100% !important;
}
.nvc-stage-pro .klinecharts-pro-period-bar::-webkit-scrollbar {
    display: block !important;
    height: 5px;
}
.nvc-stage-pro .klinecharts-pro-period-bar::-webkit-scrollbar-thumb {
    background: #314153;
    border-radius: 999px;
}
.nvc-stage-pro .klinecharts-pro-period-bar::-webkit-scrollbar-track {
    background: transparent;
}
.nvc-stage-pro .nvc-kc-hidden-tool,
.nvc-stage-pro .nvc-kc-native-fullscreen {
    display: none !important;
}
.nvc-stage-pro .nvc-kc-stage-fullscreen-tool {
    gap: 5px;
}
.nvc-pane-badge {
    position: absolute;
    left: 8px;
    bottom: 7px;
    z-index: 16;
    padding: 2px 6px;
    border: 1px solid var(--nvc-hairline);
    border-radius: 4px;
    color: #9fb0c9;
    background: rgba(10, 17, 25, 0.8);
    font-size: 9px;
    font-weight: 800;
    line-height: 1.25;
    pointer-events: none;
}
.nvc-chart-pane.is-active .nvc-pane-badge {
    color: #7fe9ff;
    border-color: rgba(0, 210, 255, 0.45);
}
.nvc-layout-menu {
    position: absolute;
    top: 44px;
    right: 12px;
    z-index: 40;
    width: 176px;
    padding: 6px;
    border: 1px solid var(--nvc-hairline);
    border-radius: 6px;
    background: rgba(10, 17, 25, 0.96);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.4);
}
.nvc-layout-menu button {
    width: 100%;
    height: 32px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 8px;
    border: 0;
    border-radius: 4px;
    color: #9fb0c9;
    background: transparent;
    font-size: 10px;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
}
.nvc-layout-menu button:hover,
.nvc-layout-menu button.is-active {
    color: #7fe9ff;
    background: rgba(0, 210, 255, 0.1);
}
.nvc-layout-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    display: grid;
    gap: 2px;
}
.nvc-layout-icon i {
    min-width: 0;
    min-height: 0;
    border: 1px solid currentColor;
    border-radius: 2px;
    opacity: 0.9;
}
.nvc-layout-icon-single { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.nvc-layout-icon-single i:not(:first-child) { display: none; }
.nvc-layout-icon-split-vertical { grid-template-columns: repeat(2, 1fr); grid-template-rows: 1fr; }
.nvc-layout-icon-split-vertical i:nth-child(n+3) { display: none; }
.nvc-layout-icon-split-horizontal { grid-template-columns: 1fr; grid-template-rows: repeat(2, 1fr); }
.nvc-layout-icon-split-horizontal i:nth-child(n+3) { display: none; }
.nvc-layout-icon-triple { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); }
.nvc-layout-icon-triple i:first-child { grid-row: span 2; }
.nvc-layout-icon-triple i:nth-child(4) { display: none; }
.nvc-layout-icon-quad { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); }
/* klinecharts-pro trae su propio tema oscuro; solo forzamos que el widget
   ocupe todo el alto/ancho de su contenedor. La cadena de opciones (aside,
   portada desde Options Chart) trae sus propias clases Tailwind, no depende
   de este namespace. */

.nvc-overlay {
    position: absolute;
    inset: 0;
    z-index: 15;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(7, 12, 22, 0.72);
    color: #9fb0c9;
    font-size: 13px;
    text-align: center;
    padding: 20px;
}
.nvc-overlay-error { color: #ffb3c0; }
/* Salida de los estados de fallo del arranque: antes eran callejones sin salida
   y solo se recuperaban recargando la página a mano. */
.nvc-overlay-retry {
    margin-top: 2px;
    padding: 6px 16px;
    border-radius: 6px;
    border: 1px solid rgba(0, 210, 255, 0.45);
    background: rgba(0, 210, 255, 0.1);
    color: #00d2ff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}
.nvc-overlay-retry:hover { background: rgba(0, 210, 255, 0.2); }
.nvc-bang { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255, 77, 109, 0.15); color: #ff4d6d; font-weight: 900; }
.nvc-loader { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(0, 210, 255, 0.2); border-top-color: #00d2ff; animation: nvc-spin 0.8s linear infinite; }
@keyframes nvc-spin { to { transform: rotate(360deg); } }

.nvc-footer { font-size: 10px; color: #4b5c74; text-align: center; padding-top: 2px; }

/* Toggle para ocultar/mostrar la cadena de opciones (más espacio para el chart).
   Físicamente en la barra de herramientas de arriba, a la izquierda de Estilo/
   Capas: mismo lenguaje visual del vendor (icono suelto, sin borde ni relleno),
   no una caja flotando aparte sobre la esquina del stage. */
.nvc-chain-toggle {
    position: absolute;
    top: 6px;
    right: 96px;
    z-index: 36;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #cfe0f5;
    cursor: pointer;
    padding: 0;
}
.nvc-chain-toggle:hover { color: #00d2ff; background: rgba(0, 210, 255, 0.12); }
.nvc-chain-toggle[aria-pressed="true"] { color: #00d2ff; background: rgba(0, 210, 255, 0.18); }
/* El icono de refrescar cadena se corre a la izquierda para dejarle su sitio. */
.nvc-chain-head .nvc-chain-title-row { padding-right: 30px; }

/* Replay y VylMoon Lab: mismo lenguaje visual que cadena/estilo/capas, dos
   posiciones más a la izquierda en la misma fila. */
.nvc-replay-btn, .nvc-lab-btn {
    position: absolute;
    top: 6px;
    z-index: 36;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #cfe0f5;
    cursor: pointer;
    padding: 0;
}
.nvc-replay-btn { right: 152px; }

/* Vinculacion de trazos entre paneles. Sexto boton de la fila derecha; el hueco
   reservado de la barra se amplia solo cuando existe (layout dividido), asi que
   con un panel unico no se roba espacio a los periodos. */
.nvc-link-toggle {
    position: absolute;
    top: 6px;
    right: 180px;
    z-index: 36;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #cfe0f5;
    cursor: pointer;
    padding: 0;
}
.nvc-link-toggle:hover { color: #00d2ff; background: rgba(0, 210, 255, 0.12); }
.nvc-link-toggle.is-active { color: #00d2ff; background: rgba(0, 210, 255, 0.18); }
.nvc-plot:has(.nvc-link-toggle) .nvc-global-toolbar { padding-right: 214px; }

/* Vinculacion de EJES (desplazamiento + zoom + cruz). Septimo boton de la fila,
   siguiente hueco del ritmo de 28px que ya usan lab(124), replay(152) y
   trazos(180). Reutiliza TODO el estilo de `.nvc-link-toggle` -- misma clase en el
   marcado -- y solo pisa la posicion; por eso esta regla va DESPUES, para ganar a
   `right: 180px` con la misma especificidad. */
.nvc-axes-toggle { right: 208px; }
.nvc-plot:has(.nvc-axes-toggle) .nvc-global-toolbar { padding-right: 242px; }

/* La regla NO lleva CSS propio a proposito: se inyecta como una `.item` con un
   svg de clase `icon-overlay`, igual que los iconos del vendor, y asi hereda
   exactamente su color, su fondo al pasar el raton y su transicion. Cualquier
   regla nuestra aqui la haria verse distinta del resto. */

/* ── TRAZOS DE LA BARRA SUPERIOR ─────────────────────────────────────────────
   El vendor pone `border-right` a CADA icono y a cada bloque, en su gris de tema
   CLARO (rgb(229,231,235)): sobre fondo oscuro son lineas casi blancas que
   encierran cada icono en su casilla. Ademas el trazo inferior colgaba de la
   period-bar, que es mas estrecha que la barra por el hueco reservado a los
   botones de la derecha — por eso NO llegaba hasta el borde.
   Se quitan todos los verticales por icono y se dejan solo dos trazos, arriba y
   abajo, colgados de la barra COMPLETA para que crucen de lado a lado. */
.nvc-global-toolbar .klinecharts-pro-period-bar .item,
.nvc-global-toolbar .klinecharts-pro-period-bar .tools,
.nvc-global-toolbar .klinecharts-pro-period-bar .symbol,
.nvc-global-toolbar .klinecharts-pro-period-bar .chart-type-selector {
    border-left: 0 !important;
    border-right: 0 !important;
}
.nvc-global-toolbar .klinecharts-pro-period-bar {
    border-bottom: 0 !important;
    border-top: 0 !important;
}
.nvc-global-toolbar {
    border-top: 1px solid var(--nvc-hairline);
    border-bottom: 1px solid var(--nvc-hairline);
}
/* Unica vertical que se conserva: el borde del canal de 52px. No encierra un
   icono, marca la columna de herramientas y continua el borde de la barra de
   dibujo que va justo debajo. Recolorada al tema oscuro. */
.nvc-global-toolbar .klinecharts-pro-period-bar .menu-container {
    border-right-color: var(--nvc-hairline) !important;
}
.nvc-lab-btn { right: 124px; }
.nvc-replay-btn:hover, .nvc-lab-btn:hover { color: #00d2ff; background: rgba(0, 210, 255, 0.12); }
.nvc-replay-btn[aria-pressed="true"] { color: #ff9600; background: rgba(255, 150, 0, 0.16); }

/* El propio vendor trae SU icono de "Replay" en la barra de periodos
   ("Reproducción" - registerStrings lo traduce, más abajo en este archivo).
   Nunca funcionó porque nunca le conectamos onReplayClick, y ahora hay uno
   nuestro que sí funciona (.nvc-replay-btn) - dos botones de replay
   confundía. Se oculta el suyo. */
.nvc-global-toolbar .klinecharts-pro-period-bar .tools[title="Reproducción"] { display: none !important; }

/* Aviso de "elige una vela": el propio del vendor depende de un hit-test por
   figura que casi nunca acierta (ver nvcStartReplayPicking en el JS), así que
   se reemplazó por selección propia (crosshair + clic normal) con este aviso. */
.nvc-replay-pick-hint {
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    background: rgba(0, 150, 255, 0.92);
    color: #fff;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 4px 16px rgba(0, 150, 255, 0.3);
}

/* Línea que marca exactamente dónde arrancaría el replay si se hace clic
   ahora. Se dibuja aparte del crosshair genérico del chart (delgado, color
   de rejilla, fácil de perder) para que sea inconfundible. */
.nvc-replay-pick-line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    border-left: 2px dashed #00d2ff;
    pointer-events: none;
    z-index: 50;
}

/* Panel de controles de reproducción. Abajo, centrado, como TradingView -
   no otra pieza más apretada en la barra superior. */
.nvc-replay-controls {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 37;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 10px;
    border-radius: 8px;
    background: #1c1c1f;
    border: 1px solid var(--nvc-hairline);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}
.nvc-replay-controls .nvc-replay-drag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 24px;
    color: #4b5c74;
    cursor: grab;
    touch-action: none;
    margin-right: 2px;
}
.nvc-replay-controls .nvc-replay-drag:hover { color: #9fb0c9; }
.nvc-replay-controls .nvc-replay-drag:active { cursor: grabbing; }
.nvc-replay-controls button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #cfe0f5;
    cursor: pointer;
    padding: 0;
    font-size: 12px;
}
.nvc-replay-controls button:hover:not(:disabled) { color: #00d2ff; background: rgba(0, 210, 255, 0.12); }
.nvc-replay-controls button:disabled { opacity: 0.4; cursor: default; }
.nvc-replay-controls .nvc-replay-play { color: #00e0a4; font-weight: bold; font-size: 13px; }
.nvc-replay-controls .nvc-replay-exit { width: auto; padding: 0 10px; color: #ff4d6d; font-size: 11px; font-weight: 600; }
.nvc-replay-controls .nvc-replay-exit:hover { background: rgba(255, 77, 109, 0.12); }
.nvc-replay-controls .nvc-replay-progress { font-size: 11px; color: #9fb0c9; white-space: nowrap; min-width: 48px; text-align: center; }
.nvc-replay-controls select {
    height: 22px;
    font-size: 11px;
    border: 1px solid var(--nvc-hairline);
    background: #141c27;
    color: #cfe0f5;
    border-radius: 4px;
}

/* La marca de agua del vendor (una bolsa con velas) se pinta enorme en el centro
   del gráfico y estorba la lectura de las velas. */
.nvc-stage-pro .klinecharts-pro-watermark { display: none !important; }

/* El hueco de la rejilla (`gap: 1px`) deja ver el fondo de .nvc-plot, que usa el
   color de REJILLA. Con un fondo de gráfico claro eso dibuja un filo oscuro por
   todo el contorno. Con un solo panel no hay nada que separar, así que el fondo
   pasa a ser el del propio gráfico y el filo desaparece. En layouts partidos se
   conserva, porque ahí ese hueco es la línea divisoria entre paneles. */
.nvc-plot.nvc-layout-single { background: var(--nvc-chart-bg, #070c16); }

/* ── Pestana Posiciones del panel derecho ────────────────────────────────────
   Ocupa el hueco de la cadena, no una ventana emergente. Tarjeta por posicion
   en vez de tabla: el panel mide 266px y las cinco columnas de Schwab no caben
   legibles ahi. Quitar la cadena da alto, no ancho. */
.nvc-pos-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}
.nvc-pos-account {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    flex-shrink: 0;
    background: var(--nvc-hairline);
    border-bottom: 1px solid var(--nvc-hairline);
}
.nvc-pos-account-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 7px 10px;
    background: #151517;
}
.nvc-pos-account-cell span {
    color: #6b7a90;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.nvc-pos-account-cell strong {
    color: #e6edf7;
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.nvc-pos-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.nvc-pos-empty {
    padding: 22px 10px;
    text-align: center;
    color: #6b7a90;
    font-size: 11px;
}
.nvc-pos-card {
    border: 1px solid var(--nvc-hairline);
    border-radius: 5px;
    background: #17171a;
    padding: 7px 8px;
}
/* La posicion del simbolo que se esta mirando en el grafico, marcada sin usar
   otro color de borde: seria un cuarto gris compitiendo con los demas. */
/* Borde fino coloreado por lado, en vez de la franja azul del simbolo activo:
   el azul era un tercer color peleando con los vivos ya unificados. Se usan los
   mismos verde/rojo de las velas y de la etiqueta CALL/PUT de la cabecera, asi
   que el panel no introduce paleta nueva. Grosor 1px, igual que antes. */
.nvc-pos-card.is-call { border-color: rgba(0, 192, 135, 0.55); }
.nvc-pos-card.is-put { border-color: rgba(242, 54, 69, 0.55); }
.nvc-pos-card-head {
    display: flex;
    align-items: baseline;
    gap: 5px;
    margin-bottom: 6px;
}
.nvc-pos-ticker { color: #e6edf7; font-size: 11px; font-weight: 800; }
.nvc-pos-side { font-size: 8px; font-weight: 800; letter-spacing: 0.06em; }
.nvc-pos-side.is-call { color: #00c087; }
.nvc-pos-side.is-put { color: #f23645; }
.nvc-pos-strike { color: #d1d4dc; font-size: 11px; font-variant-numeric: tabular-nums; }
.nvc-pos-qty { margin-left: auto; color: #929aa5; font-size: 10px; font-variant-numeric: tabular-nums; }
.nvc-pos-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.nvc-pos-metric { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.nvc-pos-metric span {
    color: #6b7a90;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.nvc-pos-metric strong {
    color: #d1d4dc;
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.nvc-pos-metric strong.is-up { color: #00c087; }
.nvc-pos-metric strong.is-down { color: #f23645; }
.nvc-pos-card-foot {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    margin-top: 6px;
    padding-top: 5px;
    border-top: 1px solid var(--nvc-hairline);
    color: #6b7a90;
    font-size: 9px;
    font-variant-numeric: tabular-nums;
}
/* Cabecera de la lista con "seleccionar todas", al estilo de la app del broker. */
.nvc-pos-listhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    padding: 6px 10px;
    border-bottom: 1px solid var(--nvc-hairline);
    background: #151517;
}
.nvc-pos-listhead span,
.nvc-pos-listhead-right {
    color: #6b7a90;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.nvc-pos-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}
/* Casilla propia: la nativa se pinta blanca en oscuro y rompe la paleta.
   Sin vivo azul: usa el mismo `--nvc-hairline` que el resto de la seccion en
   los dos estados, y la marcada se distingue por el relleno y el tick, no por
   un borde de color que competiria con los vivos ya unificados. */
.nvc-pos-check input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 13px;
    height: 13px;
    margin: 0;
    border: 1px solid var(--nvc-hairline);
    border-radius: 3px;
    background: #0f0f12;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
}
.nvc-pos-check input[type="checkbox"]:checked {
    background: #3a4150;
    border-color: var(--nvc-hairline);
}
.nvc-pos-check input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 1px;
    width: 3px;
    height: 7px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
/* Vender en la propia tarjeta, mismo lenguaje que el CERRAR del ticket. */
.nvc-pos-sell {
    margin-left: auto;
    height: 20px;
    padding: 0 9px;
    border: 1px solid rgba(242, 54, 69, 0.5);
    border-radius: 3px;
    background: rgba(242, 54, 69, 0.1);
    color: #f23645;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.06em;
    cursor: pointer;
}
.nvc-pos-sell:hover:not(:disabled) { background: #f23645; color: #fff; border-color: #f23645; }
.nvc-pos-sell:disabled { opacity: 0.5; cursor: default; }
.nvc-pos-sell-bulk {
    flex-shrink: 0;
    margin: 0 8px 8px;
    height: 30px;
    border: 1px solid #f23645;
    border-radius: 4px;
    background: rgba(242, 54, 69, 0.15);
    color: #f23645;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    cursor: pointer;
}
.nvc-pos-sell-bulk:hover:not(:disabled) { background: #f23645; color: #fff; }
.nvc-pos-sell-bulk:disabled { opacity: 0.5; cursor: default; }

.nvc-pos-totals {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    padding: 9px 10px;
    border-top: 1px solid var(--nvc-hairline);
    background: #151517;
}
.nvc-pos-totals span {
    color: #6b7a90;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.nvc-pos-totals strong { color: #d1d4dc; font-size: 13px; font-variant-numeric: tabular-nums; }
.nvc-pos-totals strong.is-up { color: #00c087; }
.nvc-pos-totals strong.is-down { color: #f23645; }

.nvc-chain-panel {
    width: 266px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-left: 1px solid var(--nvc-hairline);
    background: #151517;
    color: #d1d4dc;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-variant-numeric: tabular-nums;
}

.nvc-chain-head {
    border-bottom: 1px solid var(--nvc-hairline);
    background: #151517;
    padding: 8px 10px 7px;
}

.nvc-chain-title-row,
.nvc-chain-quote-row,
.nvc-chain-leg-main,
.nvc-chain-leg-sub,
.nvc-ticket-top,
.nvc-ticket-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nvc-chain-title-group { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.nvc-chain-title-group h2 {
    margin: 0;
    color: #d1d4dc;
    font-size: 10px;
    line-height: 1;
    font-weight: 800;
    text-transform: uppercase;
}
.nvc-chain-title-group span,
.nvc-ticket-top span {
    color: #787b86;
    font-size: 9px;
    line-height: 1;
}

.nvc-chain-icon-btn {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: #787b86;
    cursor: pointer;
}
.nvc-chain-icon-btn:hover { color: #d1d4dc; background: #222226; }

.nvc-chain-quote-row { gap: 7px; margin-top: 7px; }
.nvc-chain-symbol {
    color: #d1d4dc;
    font-size: 13px;
    line-height: 1;
    font-weight: 800;
}
.nvc-chain-spot {
    margin-right: auto;
    color: #f0f3fa;
    font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 15px;
    line-height: 1;
    font-weight: 800;
}

.nvc-chain-exits {
    height: 22px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid var(--nvc-hairline);
    background: #151517;
    color: #929aa5;
    padding: 0 7px;
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
    cursor: pointer;
}
.nvc-chain-exits:hover,
.nvc-chain-exits.is-active {
    border-color: #2962ff;
    color: #7da2ff;
    background: rgba(41, 98, 255, 0.1);
}

.nvc-chain-cols,
.nvc-chain-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 38px minmax(0, 1fr);
}
.nvc-chain-cols {
    border-bottom: 1px solid var(--nvc-hairline);
    background: #151517;
    padding: 5px 7px;
    color: #787b86;
    font-size: 8px;
    line-height: 1;
    font-weight: 800;
    text-transform: uppercase;
}
.nvc-chain-cols span:first-child { color: #00c087; }
.nvc-chain-cols span:nth-child(2) { text-align: center; }
.nvc-chain-cols span:last-child { color: #f23645; text-align: right; }

.nvc-chain-scroll {
    min-height: 0;
    flex: 1;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #34363d #151517;
}
.nvc-chain-row {
    border-bottom: 1px solid var(--nvc-hairline);
    background: #151517;
}
.nvc-chain-row:hover { background: #19191c; }
.nvc-chain-row.is-atm {
    background: rgba(41, 98, 255, 0.12);
    box-shadow: inset 0 0 0 1px rgba(41, 98, 255, 0.28);
}

.nvc-chain-leg {
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 5px 6px 4px;
    text-align: left;
    color: #d1d4dc;
    cursor: pointer;
}
.nvc-chain-leg:hover { background: #222226; }
.nvc-chain-leg.is-call.is-active { background: rgba(0, 192, 135, 0.18); }
.nvc-chain-leg.is-put.is-active { background: rgba(242, 54, 69, 0.18); }
.nvc-chain-leg.has-position { box-shadow: inset 0 -2px 0 #f0b90b; }
.nvc-chain-leg:disabled {
    cursor: default;
    opacity: 0.32;
}
.nvc-chain-leg-main {
    gap: 5px;
    font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10px;
    line-height: 1.1;
}
.nvc-chain-leg-main span { color: #929aa5; }
.nvc-chain-leg-main b { color: #f0f3fa; font-weight: 800; }
.nvc-chain-leg-sub {
    margin-top: 3px;
    color: #787b86;
    font-size: 8px;
    line-height: 1;
}

.nvc-chain-strike {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-left: 1px solid var(--nvc-hairline);
    border-right: 1px solid var(--nvc-hairline);
    color: #d1d4dc;
    font-size: 10px;
    font-weight: 800;
}
.nvc-chain-row.is-atm .nvc-chain-strike { color: #b8c7ff; background: rgba(41, 98, 255, 0.12); }
.nvc-chain-strike small {
    margin-top: 2px;
    color: #7da2ff;
    font-size: 7px;
    line-height: 1;
    font-weight: 900;
}

.nvc-chain-empty,
.nvc-chain-error,
.nvc-ticket-empty {
    padding: 18px 12px;
    color: #787b86;
    font-size: 10px;
    line-height: 1.3;
    text-align: center;
}
/* Cadena servida desde cache porque el broker no respondio: los precios de
   pantalla pueden no ser los reales, y desde aqui se compra. */
.nvc-chain-stale,
.nvc-chain-trade-alert {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin: 6px 8px;
    padding: 7px 9px;
    border-radius: 6px;
    font-size: 10px;
    line-height: 1.35;
}
.nvc-chain-stale {
    border: 1px solid rgba(255, 176, 32, 0.45);
    background: rgba(255, 176, 32, 0.12);
    color: #ffc65c;
}
.nvc-chain-trade-alert {
    display: block;
    border: 1px solid rgba(255, 77, 109, 0.5);
    background: rgba(255, 77, 109, 0.12);
    color: #ff8fa0;
}
.nvc-chain-stale svg { width: 12px; height: 12px; flex-shrink: 0; }
.nvc-chain-stale span { flex: 1; min-width: 0; }
.nvc-chain-stale button,
.nvc-chain-trade-alert button {
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 10px;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
    padding: 2px 0;
}
.nvc-chain-trade-alert strong { color: #ff4d6d; }

.nvc-chain-error { color: #ff6b78; }
.nvc-chain-error button {
    margin-top: 8px;
    border: 0;
    background: transparent;
    color: #7da2ff;
    font-size: 10px;
    cursor: pointer;
}
.nvc-chain-more {
    width: calc(100% - 16px);
    height: 26px;
    margin: 7px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: 1px dashed var(--nvc-hairline);
    background: transparent;
    color: #929aa5;
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
    cursor: pointer;
}
.nvc-chain-more:hover { color: #d1d4dc; border-color: #787b86; background: #1b1b1f; }

.nvc-ticket {
    border-top: 1px solid var(--nvc-hairline);
    background: #151517;
    padding: 8px;
}
.nvc-ticket-top { gap: 8px; }
.nvc-ticket-side {
    font-size: 10px;
    line-height: 1;
    font-weight: 900;
}
.nvc-ticket-side.is-call { color: #00c087; }
.nvc-ticket-side.is-put { color: #f23645; }
.nvc-ticket-contract {
    margin-top: 5px;
    overflow: hidden;
    color: #d1d4dc;
    font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 9px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nvc-ticket-actions { gap: 7px; margin-top: 8px; }
.nvc-ticket-qty {
    height: 28px;
    display: flex;
    align-items: center;
    border: 1px solid var(--nvc-hairline);
    background: #101012;
}
.nvc-ticket-qty button {
    width: 28px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: #929aa5;
    cursor: pointer;
}
.nvc-ticket-qty button:hover { color: #d1d4dc; background: #222226; }
.nvc-ticket-qty span {
    width: 28px;
    color: #f0f3fa;
    font-size: 11px;
    font-weight: 800;
    text-align: center;
}
.nvc-ticket-submit {
    height: 28px;
    flex: 1;
    border: 0;
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    cursor: pointer;
}
.nvc-ticket-submit.is-call { background: #008f66; }
.nvc-ticket-submit.is-put { background: #b32635; }
.nvc-ticket-submit.is-close { background: #f0b90b; color: #111; }
.nvc-ticket-submit:hover { filter: brightness(1.1); }
.nvc-ticket-submit:disabled { cursor: wait; opacity: 0.55; }
/* Reforzar: comprar más del mismo contrato ya abierto. Deliberadamente en
   contorno y no en sólido — es una acción secundaria que añade riesgo, y no
   debe competir visualmente con CERRAR, que es la que protege. */
.nvc-ticket-reinforce {
    width: 100%;
    height: 26px;
    margin-top: 6px;
    border: 1px solid #2a6df4;
    border-radius: 3px;
    background: transparent;
    color: #6ea8ff;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    cursor: pointer;
}
.nvc-ticket-reinforce:hover { background: rgba(42, 109, 244, 0.14); }
.nvc-ticket-reinforce:disabled { cursor: wait; opacity: 0.5; }
.nvc-ticket-note {
    margin-top: 6px;
    color: #787b86;
    font-size: 9px;
    line-height: 1.25;
}

/* Botón propio de pantalla completa: pone en fullscreen TODO `.nvc-stage`
   (chart + cadena juntos, como hermanos flex), a diferencia del botón nativo
   de KLineChart Pro que solo fullscreena el chart y deja la cadena afuera. */
/* Cuando `.nvc-stage` es el elemento en pantalla completa, el navegador ya lo
   expande a ocupar todo el viewport — solo se asegura un fondo sólido (no
   transparente) y bordes/radios que no tengan sentido a pantalla completa. */
.nvc-stage:fullscreen,
.nvc-stage-is-fullscreen {
    width: 100vw;
    height: 100vh;
    min-height: 100vh;
    border-radius: 0;
    border: none;
    background: #070c16;
}
.nvc-stage-is-fullscreen .nvc-plot { height: 100%; }
.nvc-stage-is-fullscreen .nvc-pro-container,
.nvc-stage-is-fullscreen .klinecharts-pro { width: 100%; height: 100%; }

/* Personalization backgrounds must win over the late vyl-visual-v2 theme. */
body.vyl-bg-cosmic {
    background:
        radial-gradient(circle at 18% 12%, rgba(184, 166, 255, 0.16), transparent 30%),
        radial-gradient(circle at 86% 18%, rgba(76, 212, 148, 0.08), transparent 32%),
        linear-gradient(145deg, #0a0a0e 0%, #09090d 48%, #0f0f14 100%) !important;
}

body.vyl-bg-eclipse {
    background:
        radial-gradient(circle at 72% 8%, rgba(184, 166, 255, 0.24), transparent 27%),
        radial-gradient(circle at 16% 80%, rgba(255, 255, 255, 0.04), transparent 26%),
        linear-gradient(155deg, #030304 0%, #08080b 52%, #121018 100%) !important;
}

body.vyl-bg-aurora {
    background:
        radial-gradient(circle at 12% 22%, rgba(76, 212, 148, 0.2), transparent 30%),
        radial-gradient(circle at 80% 14%, rgba(184, 166, 255, 0.15), transparent 28%),
        linear-gradient(145deg, #060809 0%, #0a1010 54%, #0d1015 100%) !important;
}

body.vyl-bg-steel {
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.1), transparent 30%),
        radial-gradient(circle at 8% 72%, rgba(135, 149, 169, 0.08), transparent 26%),
        linear-gradient(145deg, #08090d 0%, #0d0f14 50%, #121318 100%) !important;
}

body.vyl-bg-pearl {
    background:
        radial-gradient(circle at 12% 8%, rgba(93, 191, 232, 0.24), transparent 31%),
        radial-gradient(circle at 88% 18%, rgba(138, 214, 246, 0.18), transparent 29%),
        radial-gradient(circle at 62% 88%, rgba(96, 137, 205, 0.18), transparent 34%),
        linear-gradient(145deg, #183246 0%, #254f68 48%, #2d6880 100%) !important;
}

body.vyl-bg-mist {
    background:
        radial-gradient(circle at 74% 2%, rgba(91, 214, 232, 0.2), transparent 31%),
        radial-gradient(circle at 8% 76%, rgba(120, 154, 255, 0.16), transparent 30%),
        radial-gradient(circle at 36% 24%, rgba(255, 255, 255, 0.08), transparent 28%),
        linear-gradient(145deg, #1b3343 0%, #24495b 52%, #2f6070 100%) !important;
}

body.vyl-bg-daybreak {
    background:
        radial-gradient(circle at 16% 13%, rgba(255, 193, 104, 0.24), transparent 33%),
        radial-gradient(circle at 84% 9%, rgba(113, 188, 228, 0.18), transparent 31%),
        radial-gradient(circle at 70% 82%, rgba(255, 143, 112, 0.14), transparent 34%),
        linear-gradient(145deg, #3a2d1f 0%, #544127 50%, #285064 100%) !important;
}

body.vyl-bg-solstice {
    background:
        radial-gradient(circle at 15% 12%, rgba(255, 128, 139, 0.22), transparent 32%),
        radial-gradient(circle at 86% 12%, rgba(111, 206, 255, 0.18), transparent 32%),
        radial-gradient(circle at 42% 86%, rgba(255, 178, 126, 0.16), transparent 34%),
        linear-gradient(145deg, #402a32 0%, #5a3c45 48%, #2d5267 100%) !important;
}

body.vyl-bg-cosmic .configuration-page,
body.vyl-bg-eclipse .configuration-page,
body.vyl-bg-aurora .configuration-page,
body.vyl-bg-steel .configuration-page,
body.vyl-bg-pearl .configuration-page,
body.vyl-bg-mist .configuration-page,
body.vyl-bg-daybreak .configuration-page,
body.vyl-bg-solstice .configuration-page,
body.vyl-bg-cosmic .info-page,
body.vyl-bg-eclipse .info-page,
body.vyl-bg-aurora .info-page,
body.vyl-bg-steel .info-page,
body.vyl-bg-pearl .info-page,
body.vyl-bg-mist .info-page,
body.vyl-bg-daybreak .info-page,
body.vyl-bg-solstice .info-page,
body.vyl-bg-cosmic .support-page,
body.vyl-bg-eclipse .support-page,
body.vyl-bg-aurora .support-page,
body.vyl-bg-steel .support-page,
body.vyl-bg-pearl .support-page,
body.vyl-bg-mist .support-page,
body.vyl-bg-daybreak .support-page,
body.vyl-bg-solstice .support-page {
    background: transparent !important;
}

body.vyl-bg-eclipse #particles-canvas { opacity: 0.25; }
body.vyl-bg-aurora #particles-canvas { opacity: 0.42; }
body.vyl-bg-steel #particles-canvas { opacity: 0.2; }
body.vyl-bg-pearl #particles-canvas,
body.vyl-bg-mist #particles-canvas,
body.vyl-bg-daybreak #particles-canvas,
body.vyl-bg-solstice #particles-canvas { opacity: 0.12; }

/* The public shell can be fixed-height (login) or scrollable (landing/legal pages). */
.global-announcement-banner {
    width: 100%;
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 7px 16px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    line-height: 1.35;
    flex-shrink: 0;
}

.global-announcement-banner--floating {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 2147483000;
    pointer-events: none;
}

.global-announcement-text {
    width: min(100%, 1180px);
    text-align: center;
    overflow-wrap: anywhere;
    white-space: normal;
}

@media (max-width: 640px) {
    .global-announcement-banner {
        min-height: 32px;
        padding: 6px 10px;
    }

    .global-announcement-text {
        font-size: 11px;
    }
}

/* =========================================================================
   FLUIDEZ — sidebar, Inicio, Historial y Configuracion (2026-08-27)
   Bloque al final del archivo a proposito: varias reglas de aqui corrigen a
   otras anteriores con la MISMA especificidad, y en ese caso gana la ultima.
   No se quita ninguna funcion ni cambia la paleta; solo como se mueve.
   ========================================================================= */

/* --- Sidebar: contraer/expandir ---------------------------------------- */

/* El sidebar cambia de ancho, y eso obliga al navegador a recalcular el layout
   de TODA la pagina en cada fotograma de la animacion. Con `contain` se le dice
   que lo que pase DENTRO del sidebar no afecta a nada de fuera, asi el trabajo
   por fotograma se limita al ancho, no al arbol entero del sidebar. */
.vyl-sidebar-desktop {
    contain: layout style;
}

/* Las etiquetas desaparecian con `display:none`: el texto no se iba, se
   apagaba de golpe a mitad de la animacion del ancho. Con max-width + opacity
   acompanan al ancho del sidebar. La animacion queda contenida dentro del
   sidebar, que es barata; no toca el layout de la pagina. */
.vyl-sidebar-option-label,
.vyl-sidebar-collapse-control b {
    max-width: 160px;
    opacity: 1;
    transition:
        max-width 220ms var(--vyl-sidebar-ease),
        opacity 140ms var(--vyl-sidebar-ease) 60ms;
}

.vyl-sidebar.is-collapsed .vyl-sidebar-option-label,
.vyl-sidebar.is-collapsed .vyl-sidebar-collapse-control b {
    display: block;
    max-width: 0;
    opacity: 0;
    /* La opacidad se apaga primero para que el texto no se vea comprimido
       mientras el ancho todavia se esta cerrando. */
    transition:
        max-width 220ms var(--vyl-sidebar-ease),
        opacity 110ms var(--vyl-sidebar-ease);
}

/* Los botones cambiaban de tamano de golpe mientras el sidebar se deslizaba.
   Ahora se encogen con el, en la misma duracion y con la misma curva. */
.vyl-sidebar-option {
    transition:
        color 120ms ease,
        background-color 120ms ease,
        width 220ms var(--vyl-sidebar-ease),
        height 220ms var(--vyl-sidebar-ease),
        padding 220ms var(--vyl-sidebar-ease),
        gap 220ms var(--vyl-sidebar-ease);
}

.vyl-sidebar-brand,
.vyl-sidebar-brand-mark,
.vyl-sidebar-icon-button,
.vyl-broker-status-button,
.vyl-sidebar-collapse-control {
    transition:
        color 200ms var(--vyl-sidebar-ease),
        background-color 200ms var(--vyl-sidebar-ease),
        width 220ms var(--vyl-sidebar-ease),
        height 220ms var(--vyl-sidebar-ease),
        min-height 220ms var(--vyl-sidebar-ease),
        padding 220ms var(--vyl-sidebar-ease),
        gap 220ms var(--vyl-sidebar-ease);
}

/* `margin: auto` no es animable: el boton saltaba al centro en el primer
   fotograma. `align-self` centra igual y deja que el ancho se anime. */
.vyl-sidebar.is-collapsed .vyl-sidebar-option,
.vyl-sidebar.is-collapsed .vyl-broker-status-button,
.vyl-sidebar.is-collapsed .vyl-sidebar-collapse-control {
    margin-right: 0;
    margin-left: 0;
    align-self: center;
}

/* El icono del broker vive en una rejilla de 3 columnas que cambia a 1 al
   contraer. Cambiar la plantilla de golpe descolocaba el icono; centrarlo por
   `justify-self` da el mismo resultado sin ese salto. */
.vyl-sidebar.is-collapsed .vyl-broker-status-button {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
}

/* Quien tenga el sistema configurado para reducir movimiento (y tambien quien
   trabaje en un equipo lento con esa opcion activada) no deberia pagar ninguna
   animacion de layout: se aplica el estado final directamente. */
@media (prefers-reduced-motion: reduce) {
    .vyl-sidebar,
    .vyl-sidebar-option,
    .vyl-sidebar-option-label,
    .vyl-sidebar-brand,
    .vyl-sidebar-brand-mark,
    .vyl-sidebar-icon-button,
    .vyl-broker-status-button,
    .vyl-sidebar-collapse-control,
    .vyl-sidebar-collapse-control b {
        transition-duration: 1ms !important;
    }
}

/* --- Historial: esqueleto de carga ------------------------------------- */

/* Antes se pintaba una linea de texto centrada y, al llegar la respuesta, la
   tabla la sustituia de golpe: la pagina daba un salto. El esqueleto ocupa
   aproximadamente el sitio de la tabla, asi que no hay salto. */
.history-skeleton {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
}

.history-skeleton-row {
    height: 26px;
    display: block;
    border-radius: 4px;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, .035) 0%,
        rgba(255, 255, 255, .075) 50%,
        rgba(255, 255, 255, .035) 100%
    );
    background-size: 300% 100%;
    /* Solo se anima `background-position`: no toca layout ni provoca repintado
       del resto de la pagina. */
    animation: vylSkeletonSweep 1.5s ease-in-out infinite;
    animation-delay: calc(var(--history-skeleton-index, 0) * 70ms);
    opacity: calc(1 - var(--history-skeleton-index, 0) * 0.06);
}

@keyframes vylSkeletonSweep {
    from { background-position: 150% 0; }
    to { background-position: -150% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .history-skeleton-row {
        animation: none;
    }
}

/* --- Configuracion: cambio de pestana ---------------------------------- */

/* La animacion de entrada del panel incluia `filter: blur(2px)` animado sobre
   TODO el contenido de la pestana. Un blur animado obliga a la GPU a rehacer
   el desenfoque en cada fotograma sobre un area de pantalla completa, y es lo
   primero que se atasca en un equipo con grafica debil. La entrada se conserva
   igual (misma duracion, misma curva, mismo desplazamiento) pero con opacity y
   transform, que el compositor resuelve sin repintar. */
.configuration-panel-enter {
    animation: configurationPanelInFluid 0.34s cubic-bezier(0.16, 1, 0.3, 1) both;
    will-change: opacity, transform;
}

@keyframes configurationPanelInFluid {
    from { opacity: 0; transform: translate3d(0, 8px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* El panel activo es la unica parte que se re-dibuja al cambiar de pestana;
   contenerlo evita que su layout propague hacia arriba. */
.configuration-content {
    contain: layout paint;
}

@media (prefers-reduced-motion: reduce) {
    .configuration-panel-enter {
        animation-duration: 1ms;
    }
}

/* --- Sidebar: congelar el ancho del contenido durante el plegado --------- */

/* Ver el comentario largo de `useFrozenMainWidthDuringSidebarToggle` en
   src/index.js. Resumen: el contenido toma su ancho definitivo en el primer
   fotograma y el sidebar se desliza por encima, asi el navegador hace UN
   layout+pintado en vez de uno por fotograma. Medido en produccion: los
   fotogramas de mas de 32 ms bajan del 48% al 6%, y el p95 de 50 a 33 ms.
   Los dos degradados de profundidad del `main` van en `position:absolute`
   y por eso quedan excluidos: no deben quedarse con un ancho fijo. */
.app-main-surface.is-sidebar-animating > *:not(.absolute) {
    width: var(--vyl-main-frozen-width);
    max-width: var(--vyl-main-frozen-width);
}

/* =========================================================================
   VENTANAS EMERGENTES — estilo tomado de la ventana de salidas (2026-08-27)
   Prueba sobre la ventana de Eventos. Si convence, las demas (Cuenta,
   Terminal) pasan a usar las mismas clases: `vyl-popover-v2` en la seccion,
   `vyl-popover-overlay` como fondo y `vyl-popover-heading` en la cabecera.
   Los valores estan copiados de los estilos calculados del dialogo real
   (`Configuración de salidas` en Nueva Chart), no aproximados a ojo.
   ========================================================================= */

/* El fondo oscurecido es la mitad del efecto: sin el, la ventana parece un
   trozo mas de la interfaz; con el, se lee como una capa por encima. */
/* CAPA DE ANCLAJE de las ventanas emergentes.
   Ojo al nombre: NO es un velo. Es transparente y no captura clics; existe solo
   para sacar la ventana del sidebar y darle un fondo real que desenfocar.

   Esa es toda la razon de que exista: el sidebar tiene `backdrop-filter` y forma
   un grupo de composicion propio, asi que una ventana colgada de el no tiene
   nada detras que desenfocar y el cristal desaparece. Colgandola de aqui, su
   fondo es la plataforma entera y el cristal funciona.

   Al principio esta capa si oscurecia la plataforma (como hace la ventana de
   salidas). Se quito por decision del dueno: la plataforma no debe apagarse al
   abrir una ventana, y sin `pointer-events` se puede seguir trabajando con la
   ventana abierta. El cristal no se pierde -- lo que se desenfoca ahora es el
   contenido real en vez del contenido oscurecido. */
.vyl-popover-layer {
    position: fixed;
    z-index: 70;
    inset: 0;
    background: transparent;
    /* Nunca captura clics: los hijos los reciben con `pointer-events: auto`. */
    pointer-events: none;
    /* Sin opacity ni visibility a proposito. La capa es transparente, asi que no
       tiene nada que ocultar -- y como la ventana es HIJA suya, cualquier
       opacidad aqui la apagaria tambien a ella. Quien aparece y desaparece es la
       ventana, con su propia transicion. */
}

/* Cristal de la ventana de salidas: plano (sin degradado), desenfoque mas
   suave que el del popover antiguo y, en vez de borde + sombra enorme, un
   unico anillo interior. Se apoya en el fondo oscurecido para separarse. */
.vyl-sidebar-popover.vyl-popover-v2,
body.vyl-visual-v2 .vyl-sidebar-popover.vyl-popover-v2 {
    border: 0;
    border-radius: 6px;
    /* CRISTAL DE VERDAD, el mismo que la ventana de salidas: un velo blanco
       casi transparente (`--vyl-v2-glass`, 5,2% de blanco) y el desenfoque
       haciendo todo el trabajo. Nada de color solido debajo.

       La clave es la linea de `isolation` de aqui abajo. `.vyl-sidebar-popover`
       trae `isolation: isolate`, que crea un grupo de composicion aislado y deja
       al `backdrop-filter` sin nada que muestrear: el panel salia translucido y
       plano en vez de esmerilado. El dialogo de salidas no lo lleva, y por eso
       su cristal si se ve. Se anula aqui. */
    isolation: auto;
    background: var(--vyl-v2-glass, rgba(255, 255, 255, .052));
    -webkit-backdrop-filter: blur(24px) saturate(118%);
    backdrop-filter: blur(24px) saturate(118%);
    /* Solo el anillo interior, como el dialogo de salidas. Se probo anadir una
       sombra exterior para despegarlo del fondo, pero entonces ya no era el
       mismo cristal: el velo oscuro de detras es lo que lo separa. */
    box-shadow: inset 0 0 0 1px var(--vyl-v2-glass-line, rgba(255, 255, 255, .075));
    transition:
        opacity 140ms var(--vyl-sidebar-ease),
        transform 140ms var(--vyl-sidebar-ease),
        visibility 0s linear 140ms;
}

.vyl-sidebar-popover.vyl-popover-v2.is-open,
body.vyl-visual-v2 .vyl-sidebar-popover.vyl-popover-v2.is-open {
    transition-delay: 0s;
}

/* Cabecera de dos lineas: antetitulo en cian + titulo, igual que
   "Entrada manual · SPY / Configuración de salidas". */
.vyl-sidebar-popover.vyl-popover-v2 .vyl-sidebar-popover-header,
body.vyl-visual-v2 .vyl-sidebar-popover.vyl-popover-v2 .vyl-sidebar-popover-header {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    background: transparent;
}

.vyl-popover-heading {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.vyl-popover-eyebrow,
body.vyl-visual-v2 .vyl-popover-eyebrow {
    color: #00d2ff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1.2;
    text-transform: uppercase;
}

.vyl-sidebar-popover.vyl-popover-v2 .vyl-sidebar-popover-header h2,
body.vyl-visual-v2 .vyl-sidebar-popover.vyl-popover-v2 .vyl-sidebar-popover-header h2 {
    margin-top: 1px;
    color: #ffffff;
    font-family: var(--font-display, 'Outfit', sans-serif);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

/* La ventana de salidas es bastante mas ancha que el popover antiguo, y esa
   amplitud es parte de lo que la hace comoda de leer. */
.vyl-sidebar-popover.vyl-popover-v2.vyl-events-popover,
body.vyl-visual-v2 .vyl-sidebar-popover.vyl-popover-v2.vyl-events-popover {
    width: 400px;
    max-width: calc(100vw - 2.5rem);
}

/* El panel ya no cuelga del sidebar, asi que
   `.vyl-sidebar.is-collapsed .vyl-sidebar-popover` -que es un selector
   descendiente- dejo de alcanzarlo. El estado viaja ahora como clase propia. */
.vyl-sidebar-popover.vyl-popover-v2.is-sidebar-collapsed,
body.vyl-visual-v2 .vyl-sidebar-popover.vyl-popover-v2.is-sidebar-collapsed {
    left: calc(var(--vyl-sidebar-collapsed-width) + 4px);
}

@media (prefers-reduced-motion: reduce) {
    .vyl-popover-layer,
    .vyl-popover-v2 {
        transition-duration: 1ms;
    }
}

/* --- Nueva Chart: recuperar trabajo tras un conflicto ------------------- */

/* Solo se pinta cuando existe una copia (el componente devuelve null si no la
   hay), asi que no ocupa sitio en el dia a dia. Se coloca a la izquierda de la
   fila de botones de la derecha, sin invadir su zona. */
.nvc-recover-wrap {
    position: absolute;
    top: 6px;
    right: 190px;
    z-index: 37;
}

.nvc-recover-btn {
    height: 26px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 9px;
    border: 0;
    border-radius: 4px;
    /* Ambar, no rojo: hay trabajo esperando, no hay nada roto. */
    color: #ffd479;
    background: rgba(255, 196, 84, .13);
    box-shadow: inset 0 0 0 1px rgba(255, 196, 84, .3);
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .03em;
    cursor: pointer;
    white-space: nowrap;
}

.nvc-recover-btn:hover {
    background: rgba(255, 196, 84, .2);
}

.nvc-recover-count {
    min-width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border-radius: 7px;
    color: #1a1206;
    background: #ffd479;
    font-size: 9px;
    font-weight: 800;
}

/* Mismo cristal que las ventanas emergentes nuevas (ver la receta del estandar
   mas arriba en este archivo): fondo translucido, anillo interior, radio 6. */
.nvc-recover-panel {
    position: absolute;
    top: 32px;
    right: 0;
    z-index: 38;
    width: 300px;
    padding: 11px;
    border-radius: 6px;
    color: #e8edf5;
    background: rgba(19, 19, 23, .97);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .075),
        0 18px 44px rgba(0, 0, 0, .5);
}

.nvc-recover-intro {
    margin: 0 0 9px;
    color: #a9b6c6;
    font-size: 10.5px;
    line-height: 1.45;
}

.nvc-recover-intro strong {
    color: #e8edf5;
}

.nvc-recover-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 0;
    border-top: 1px solid rgba(255, 255, 255, .07);
}

.nvc-recover-row strong {
    display: block;
    font-size: 11px;
}

.nvc-recover-row small {
    color: #8d9aab;
    font-size: 9.5px;
}

.nvc-recover-actions {
    display: flex;
    gap: 5px;
}

.nvc-recover-actions button {
    height: 24px;
    padding: 0 9px;
    border: 0;
    border-radius: 4px;
    color: #1a1206;
    background: #ffd479;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
}

.nvc-recover-actions button:disabled {
    opacity: .4;
    cursor: default;
}

.nvc-recover-actions button.is-ghost {
    color: #a9b6c6;
    background: rgba(255, 255, 255, .06);
}

.nvc-recover-actions button.is-ghost:hover {
    color: #e8edf5;
    background: rgba(255, 255, 255, .1);
}
/*
 * VylMoon Visual V2
 *
 * A reversible presentation layer inspired by the React visual prototype.
 * It is intentionally scoped to body.vyl-visual-v2 so the public pages and
 * operational JavaScript remain independent from this visual migration.
 */

body.vyl-visual-v2 {
    --vyl-v2-accent: #895cf6;
    --vyl-v2-accent-soft: rgba(137, 92, 246, 0.14);
    --vyl-v2-accent-line: rgba(169, 136, 255, 0.3);
    --vyl-v2-surface: rgba(31, 31, 33, 0.66);
    --vyl-v2-surface-soft: rgba(255, 255, 255, 0.035);
    --vyl-v2-surface-hover: rgba(255, 255, 255, 0.065);
    --vyl-v2-surface-active: rgba(255, 255, 255, 0.115);
    --vyl-v2-border: rgba(255, 255, 255, 0.055);
    --vyl-v2-border-strong: rgba(255, 255, 255, 0.1);
    --vyl-v2-text: rgb(245, 245, 245);
    --vyl-v2-muted: rgb(166, 166, 174);
    --vyl-v2-subtle: rgb(126, 126, 136);
    --vyl-v2-gap: 5px;
    --vyl-sidebar-width: 208px;
    --vyl-sidebar-collapsed-width: 58px;
    --vyl-v2-background:
        radial-gradient(
            179.87% 100% at 48.85% 0%,
            rgba(149, 150, 164, 0.6) 0%,
            rgba(69, 70, 80, 0.6) 23.92%,
            rgba(42, 42, 44, 0.24) 54.5%,
            rgba(18, 18, 18, 0.12) 80.41%,
            rgba(0, 0, 0, 0) 100%
        ),
        #000;
    color-scheme: dark;
    color: var(--vyl-v2-text);
    background: var(--vyl-v2-background) !important;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 13px;
    text-rendering: optimizeLegibility;
}

body.vyl-visual-v2.vyl-bg-cosmic {
    --vyl-v2-background:
        radial-gradient(circle at 18% 12%, rgba(184, 166, 255, 0.2), transparent 30%),
        radial-gradient(circle at 86% 18%, rgba(76, 212, 148, 0.08), transparent 32%),
        radial-gradient(179.87% 100% at 48.85% 0%, rgba(149, 150, 164, 0.42) 0%, rgba(42, 42, 44, 0.2) 54.5%, rgba(0, 0, 0, 0) 100%),
        #000;
}

body.vyl-visual-v2.vyl-bg-eclipse {
    --vyl-v2-background:
        radial-gradient(circle at 72% 8%, rgba(184, 166, 255, 0.28), transparent 28%),
        radial-gradient(circle at 16% 80%, rgba(255, 255, 255, 0.04), transparent 26%),
        linear-gradient(155deg, #030304 0%, #08080b 52%, #121018 100%);
}

body.vyl-visual-v2.vyl-bg-aurora {
    --vyl-v2-background:
        radial-gradient(circle at 12% 22%, rgba(76, 212, 148, 0.24), transparent 31%),
        radial-gradient(circle at 80% 14%, rgba(184, 166, 255, 0.17), transparent 29%),
        linear-gradient(145deg, #060809 0%, #0a1010 54%, #0d1015 100%);
}

body.vyl-visual-v2.vyl-bg-steel {
    --vyl-v2-background:
        radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.12), transparent 31%),
        radial-gradient(circle at 8% 72%, rgba(135, 149, 169, 0.09), transparent 27%),
        linear-gradient(145deg, #08090d 0%, #0d0f14 50%, #121318 100%);
}

body.vyl-visual-v2.vyl-bg-pearl {
    --vyl-v2-background:
        radial-gradient(circle at 12% 8%, rgba(93, 191, 232, 0.24), transparent 31%),
        radial-gradient(circle at 88% 18%, rgba(138, 214, 246, 0.18), transparent 29%),
        radial-gradient(circle at 62% 88%, rgba(96, 137, 205, 0.18), transparent 34%),
        linear-gradient(145deg, #183246 0%, #254f68 48%, #2d6880 100%);
}

body.vyl-visual-v2.vyl-bg-mist {
    --vyl-v2-background:
        radial-gradient(circle at 74% 2%, rgba(91, 214, 232, 0.2), transparent 31%),
        radial-gradient(circle at 8% 76%, rgba(120, 154, 255, 0.16), transparent 30%),
        radial-gradient(circle at 36% 24%, rgba(255, 255, 255, 0.08), transparent 28%),
        linear-gradient(145deg, #1b3343 0%, #24495b 52%, #2f6070 100%);
}

body.vyl-visual-v2.vyl-bg-daybreak {
    --vyl-v2-background:
        radial-gradient(circle at 16% 13%, rgba(255, 193, 104, 0.24), transparent 33%),
        radial-gradient(circle at 84% 9%, rgba(113, 188, 228, 0.18), transparent 31%),
        radial-gradient(circle at 70% 82%, rgba(255, 143, 112, 0.14), transparent 34%),
        linear-gradient(145deg, #3a2d1f 0%, #544127 50%, #285064 100%);
}

body.vyl-visual-v2.vyl-bg-solstice {
    --vyl-v2-background:
        radial-gradient(circle at 15% 12%, rgba(255, 128, 139, 0.22), transparent 32%),
        radial-gradient(circle at 86% 12%, rgba(111, 206, 255, 0.18), transparent 32%),
        radial-gradient(circle at 42% 86%, rgba(255, 178, 126, 0.16), transparent 34%),
        linear-gradient(145deg, #402a32 0%, #5a3c45 48%, #2d5267 100%);
}

body.vyl-visual-v2 #root {
    min-width: 0;
    padding: 4px;
    gap: var(--vyl-v2-gap);
    background: transparent;
}

body.vyl-visual-v2 .app-main-surface,
body.vyl-visual-v2 .dashboard-page,
body.vyl-visual-v2 .dashboard-workspace {
    background: transparent !important;
}

body.vyl-visual-v2 .dashboard-page {
    padding: 0 !important;
    color: var(--vyl-v2-text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.vyl-visual-v2 .history-page {
    --history-accent: rgba(142, 211, 255, 0.78);
    --history-accent-soft: rgba(142, 211, 255, 0.11);
    --history-line: rgba(255, 255, 255, 0.08);
    --history-line-strong: rgba(255, 255, 255, 0.14);
    --history-panel: rgba(24, 25, 29, 0.58);
    --history-panel-soft: rgba(255, 255, 255, 0.034);
    color: var(--vyl-v2-text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.vyl-visual-v2 .history-header {
    position: relative;
    overflow: visible;
    border: 0 !important;
    border-radius: 7px !important;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.018)),
        rgba(20, 21, 25, 0.68) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.075),
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 16px 42px rgba(0, 0, 0, 0.16) !important;
}

body.vyl-visual-v2 .history-header::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.42), transparent);
    opacity: 0.5;
    pointer-events: none;
}

body.vyl-visual-v2 .history-header span,
body.vyl-visual-v2 .history-header select,
body.vyl-visual-v2 .history-header button {
    font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
}

body.vyl-visual-v2 .history-header select {
    min-height: 34px;
    border-color: var(--history-line-strong) !important;
    border-radius: 6px !important;
    color: #edf3fb !important;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.018)),
        rgba(4, 7, 12, 0.34) !important;
    font-size: 12px !important;
}

body.vyl-visual-v2 .history-header button {
    min-height: 34px;
    border-color: rgba(255, 255, 255, 0.12) !important;
    border-radius: 6px !important;
    background: rgba(255, 255, 255, 0.042) !important;
    color: #dbeafe !important;
    font-size: 11px !important;
    font-weight: 650 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

body.vyl-visual-v2 .history-header button:hover {
    border-color: rgba(142, 211, 255, 0.38) !important;
    background: rgba(142, 211, 255, 0.11) !important;
    color: #f4fbff !important;
}

body.vyl-visual-v2 .history-stats {
    gap: 8px !important;
}

body.vyl-visual-v2 .history-stat {
    position: relative;
    min-height: 66px;
    border: 0 !important;
    border-radius: 7px !important;
    background:
        linear-gradient(150deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.016)),
        rgba(20, 21, 25, 0.6) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
}

body.vyl-visual-v2 .history-ledger thead tr {
    border-bottom-color: rgba(255, 255, 255, 0.11) !important;
}

body.vyl-visual-v2 .history-ledger td {
    padding: 8px !important;
    border-bottom-color: rgba(255, 255, 255, 0.045) !important;
}

body.vyl-visual-v2 .history-ledger tbody tr {
    transition: background-color 140ms ease, box-shadow 140ms ease;
}

body.vyl-visual-v2 .history-ledger input[type="checkbox"] {
    accent-color: #8ed3ff;
}

body.vyl-visual-v2 .history-mobile-trade {
    background: rgba(255, 255, 255, 0.018);
}

body.vyl-visual-v2 .history-mobile-trade:hover {
    background: rgba(142, 211, 255, 0.055) !important;
}

body.vyl-visual-v2 .vyl-sidebar {
    border-color: transparent;
    background: var(--vyl-v2-surface);
    -webkit-backdrop-filter: blur(24px) saturate(118%);
    backdrop-filter: blur(24px) saturate(118%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.045);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

body.vyl-visual-v2 .vyl-sidebar::before {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 30%),
        linear-gradient(115deg, rgba(255, 255, 255, 0.02), transparent 44%);
}

body.vyl-visual-v2 .vyl-sidebar-brand {
    height: 50px;
    min-height: 50px;
    padding: 0 8px 0 12px;
}

body.vyl-visual-v2 .vyl-sidebar-brand-mark {
    width: auto;
    min-width: 0;
    height: 36px;
    justify-content: flex-start;
    gap: 7px;
    padding: 0 3px;
}

body.vyl-visual-v2 .vyl-sidebar-logo-icon {
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
}

body.vyl-visual-v2 .vyl-sidebar-logo-full {
    width: 88px;
    max-height: 22px;
    display: block;
    opacity: 0.9;
}

body.vyl-visual-v2 .vyl-sidebar-header-actions {
    margin-left: auto;
}

body.vyl-visual-v2 .vyl-sidebar-icon-button {
    width: 32px;
    height: 32px;
    color: rgb(174, 174, 182);
    background: transparent;
}

body.vyl-visual-v2 .vyl-sidebar-icon-button:hover,
body.vyl-visual-v2 .vyl-sidebar-icon-button[aria-expanded="true"] {
    color: var(--vyl-v2-text);
    background: rgba(255, 255, 255, 0.07);
}

body.vyl-visual-v2 .vyl-sidebar-navigation,
body.vyl-visual-v2 .vyl-sidebar-utility-navigation {
    gap: 2px;
    padding: 4px;
}

body.vyl-visual-v2 .vyl-sidebar-option {
    height: 38px;
    gap: 10px;
    padding: 0 13px;
    color: #a9a9b1;
    border-radius: 4px;
}

body.vyl-visual-v2 .vyl-sidebar-option:hover {
    color: var(--vyl-v2-text);
    background: var(--vyl-v2-surface-hover);
}

body.vyl-visual-v2 .vyl-sidebar-option.is-active {
    color: #fff;
    background: var(--vyl-v2-surface-active);
    box-shadow: inset 2px 0 0 rgba(169, 136, 255, 0.72);
}

body.vyl-visual-v2 .vyl-sidebar-option-label {
    font-size: 13px;
    font-weight: 620;
}

body.vyl-visual-v2 .vyl-sidebar-footer {
    border-top-color: var(--vyl-v2-border);
}

body.vyl-visual-v2 .vyl-broker-status-button {
    background: rgba(0, 0, 0, 0.16);
    outline-color: rgba(255, 255, 255, 0.04);
}

body.vyl-visual-v2 .vyl-sidebar-system-state,
body.vyl-visual-v2 .vyl-sidebar-collapse-control {
    color: var(--vyl-v2-subtle);
    font-size: 11px;
}

body.vyl-visual-v2 .vyl-sidebar.is-collapsed .vyl-sidebar-brand {
    height: 190px;
    min-height: 190px;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 4px 0;
}

body.vyl-visual-v2 .vyl-sidebar.is-collapsed .vyl-sidebar-brand-mark {
    width: 40px;
    min-width: 40px;
    height: 40px;
    flex: 0 0 40px;
    justify-content: center;
    padding: 0;
}

body.vyl-visual-v2 .vyl-sidebar.is-collapsed .vyl-sidebar-logo-icon {
    width: 26px;
    height: 26px;
}

body.vyl-visual-v2 .vyl-sidebar.is-collapsed .vyl-sidebar-header-actions {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
}

body.vyl-visual-v2 .vyl-sidebar.is-collapsed .vyl-sidebar-icon-button {
    width: 36px;
    height: 32px;
    flex: 0 0 32px;
}

body.vyl-visual-v2 .vyl-sidebar.is-collapsed .vyl-sidebar-navigation,
body.vyl-visual-v2 .vyl-sidebar.is-collapsed .vyl-sidebar-utility-navigation {
    padding: 4px;
}

body.vyl-visual-v2 .vyl-sidebar.is-collapsed .vyl-sidebar-option {
    width: 40px;
    height: 40px;
    margin: 0 auto;
    justify-content: center;
    gap: 0;
    padding: 0;
}

body.vyl-visual-v2 .dashboard-page header.dashboard-topbar.glass-hud,
body.vyl-visual-v2 .dashboard-page header.dashboard-topbar.glass-hud[class*="border-cyber-blue"] {
    min-height: 50px;
    margin-bottom: var(--vyl-v2-gap) !important;
    padding: 0 9px !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: var(--vyl-v2-surface-soft) !important;
    -webkit-backdrop-filter: blur(24px) saturate(118%) !important;
    backdrop-filter: blur(24px) saturate(118%) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.045) !important;
}

body.vyl-visual-v2 .dashboard-info-layout {
    width: 100%;
    min-width: 0;
    gap: 16px !important;
}

body.vyl-visual-v2 .dashboard-info-metrics {
    min-width: 0;
    gap: 20px !important;
    font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
}

body.vyl-visual-v2 .dashboard-account-metrics {
    gap: 22px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

body.vyl-visual-v2 .dashboard-account-metrics > div,
body.vyl-visual-v2 .dashboard-performance-metric {
    align-items: flex-start !important;
}

body.vyl-visual-v2 .dashboard-account-metrics > div:nth-child(even),
body.vyl-visual-v2 .dashboard-info-metrics > .h-6,
body.vyl-visual-v2 .dashboard-info-metrics > .h-8 {
    display: none;
}

body.vyl-visual-v2 .dashboard-topbar .text-\[10px\] {
    color: #92929b !important;
    font-size: 11px !important;
    font-weight: 520 !important;
    line-height: 13px;
    text-transform: none !important;
}

body.vyl-visual-v2 .dashboard-topbar .text-sm {
    margin-top: 2px;
    font-size: 13px !important;
    line-height: 16px;
    font-variant-numeric: tabular-nums;
}

body.vyl-visual-v2 .dashboard-info-actions {
    flex: 0 0 auto;
    gap: 8px !important;
}

body.vyl-visual-v2 .dashboard-info-actions > button,
body.vyl-visual-v2 .dashboard-connection-status {
    min-height: 34px;
    padding: 0 13px !important;
    border-color: transparent !important;
    border-radius: 4px !important;
    background: rgba(255, 255, 255, 0.055) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035);
    font-size: 12px !important;
    letter-spacing: 0 !important;
}

body.vyl-visual-v2 .dashboard-info-actions > button:first-child {
    color: #a98cff !important;
    background: var(--vyl-v2-accent-soft) !important;
}

body.vyl-visual-v2 .dashboard-info-actions > button:hover {
    filter: brightness(1.12);
    transform: translateY(-1px);
}

body.vyl-visual-v2 .dashboard-connection-status {
    color: #ff6f55;
}

body.vyl-visual-v2 .dashboard-tickerbar {
    min-height: 44px;
    margin-bottom: var(--vyl-v2-gap) !important;
    padding: 5px !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: var(--vyl-v2-surface-soft) !important;
    -webkit-backdrop-filter: blur(24px) saturate(118%) !important;
    backdrop-filter: blur(24px) saturate(118%) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.045) !important;
}

body.vyl-visual-v2 .dashboard-workspace {
    gap: var(--vyl-v2-gap) !important;
    border-radius: 0 !important;
}

body.vyl-visual-v2 .dashboard-monitor,
body.vyl-visual-v2 .positions-orders-panel,
body.vyl-visual-v2 .dashboard-dock-panel,
body.vyl-visual-v2 .dashboard-panel-rail {
    border: 0 !important;
    border-radius: 6px !important;
    background: var(--vyl-v2-surface-soft) !important;
    -webkit-backdrop-filter: blur(24px) saturate(118%) !important;
    backdrop-filter: blur(24px) saturate(118%) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.045) !important;
}

body.vyl-visual-v2 .dashboard-monitor {
    padding: 0 !important;
    overflow: hidden;
}

body.vyl-visual-v2 .positions-orders-panel {
    margin-top: var(--vyl-v2-gap) !important;
}

body.vyl-visual-v2 .dashboard-dock-panels {
    gap: var(--vyl-v2-gap) !important;
}

body.vyl-visual-v2 .dashboard-dock-panel {
    position: relative;
    overflow: hidden;
}

body.vyl-visual-v2 .dashboard-dock-panel::before {
    content: "";
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    width: 3px;
    height: 50px;
    border-radius: 0 2px 2px 0;
    background: var(--vyl-v2-accent);
    box-shadow: 0 0 14px rgba(137, 92, 246, 0.28);
    pointer-events: none;
}

body.vyl-visual-v2 .dashboard-dock-panel.vylmoon-config-panel::before {
    background: #ff914b;
    box-shadow: 0 0 14px rgba(255, 145, 75, 0.24);
}

body.vyl-visual-v2 .dashboard-dock-panel > div > div:first-child {
    min-height: 50px;
    padding: 0 14px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    background: rgba(255, 255, 255, 0.012) !important;
}

body.vyl-visual-v2 .dashboard-dock-panel h2,
body.vyl-visual-v2 .dashboard-dock-panel h3,
body.vyl-visual-v2 .positions-orders-panel h3 {
    font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
    font-weight: 620 !important;
    letter-spacing: 0 !important;
}

body.vyl-visual-v2 .dashboard-dock-panel h3 {
    font-size: 15px !important;
}

body.vyl-visual-v2 .dashboard-dock-panel p,
body.vyl-visual-v2 .positions-orders-panel p {
    color: #85858d !important;
}

body.vyl-visual-v2 .dashboard-panel-rail {
    padding: 5px !important;
}

body.vyl-visual-v2 .dashboard-panel-rail button {
    border-color: rgba(255, 255, 255, 0.07) !important;
    border-radius: 4px !important;
    background: rgba(0, 0, 0, 0.18) !important;
    box-shadow: none !important;
}

body.vyl-visual-v2 .dashboard-panel-rail button:hover,
body.vyl-visual-v2 .dashboard-dock-panel button:not(:disabled):hover {
    filter: brightness(1.1);
}

body.vyl-visual-v2 .dashboard-dock-panel input:not([type="checkbox"]):not([type="range"]),
body.vyl-visual-v2 .dashboard-dock-panel select,
body.vyl-visual-v2 .dashboard-dock-panel textarea {
    border-color: rgba(255, 255, 255, 0.06) !important;
    border-radius: 4px !important;
    background: rgba(0, 0, 0, 0.22) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025) !important;
}

body.vyl-visual-v2 .dashboard-dock-panel input:focus,
body.vyl-visual-v2 .dashboard-dock-panel select:focus,
body.vyl-visual-v2 .dashboard-dock-panel textarea:focus {
    border-color: var(--vyl-v2-accent-line) !important;
    box-shadow: 0 0 0 2px var(--vyl-v2-accent-soft) !important;
}

/* Phase 3: compact controls and configuration surfaces */
body.vyl-visual-v2 .vyl-config-meta {
    min-height: 35px;
    padding: 0 12px !important;
    border-bottom-color: rgba(255, 255, 255, 0.05) !important;
    background: rgba(0, 0, 0, 0.09);
}

body.vyl-visual-v2 .vyl-config-meta > span:first-child {
    color: #85858e !important;
    font-size: 9px !important;
    font-weight: 610;
    letter-spacing: 0.055em !important;
}

body.vyl-visual-v2 .vyl-config-meta .ui-caption {
    color: #74747d !important;
    font-size: 8px !important;
    letter-spacing: 0.045em !important;
}

body.vyl-visual-v2 .vyl-config-scroll {
    padding: 9px !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.17) transparent;
}

body.vyl-visual-v2 .vyl-config-scroll::-webkit-scrollbar {
    width: 4px;
}

body.vyl-visual-v2 .vyl-config-scroll::-webkit-scrollbar-track {
    background: transparent;
}

body.vyl-visual-v2 .vyl-config-scroll::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.17);
}

body.vyl-visual-v2 .vyl-manual-entry-card,
body.vyl-visual-v2 .vyl-config-card,
body.vyl-visual-v2 .vyl-exit-mode-panel,
body.vyl-visual-v2 .vyl-exit-workspace {
    border: 0 !important;
    border-radius: 4px !important;
    background: rgba(255, 255, 255, 0.035) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025);
}

body.vyl-visual-v2 .vyl-manual-entry-card,
body.vyl-visual-v2 .vyl-config-card {
    padding: 12px !important;
    transition: background-color 140ms ease, box-shadow 140ms ease, transform 120ms ease;
}

body.vyl-visual-v2 .vyl-manual-entry-card:hover,
body.vyl-visual-v2 .vyl-config-card:hover {
    background: rgba(255, 255, 255, 0.052) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035), 0 10px 24px rgba(0, 0, 0, 0.12);
    transform: translateY(-1px);
}

body.vyl-visual-v2 .vyl-manual-entry-card h4,
body.vyl-visual-v2 .vyl-config-card h3,
body.vyl-visual-v2 .vyl-config-card h4 {
    color: #e5e5e8 !important;
    font-size: 10px !important;
    font-weight: 680 !important;
    line-height: 14px;
    letter-spacing: 0.035em !important;
}

body.vyl-visual-v2 .vyl-manual-entry-card > div:first-child > p:last-child {
    color: #b9b9c0 !important;
    font-size: 22px !important;
    font-weight: 650 !important;
    letter-spacing: -0.025em !important;
}

body.vyl-visual-v2 .vyl-entry-lock {
    height: 34px !important;
    padding: 3px !important;
    border: 0 !important;
    border-radius: 17px !important;
    color: #7c7c85 !important;
    background: rgba(0, 0, 0, 0.34) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025) !important;
}

body.vyl-visual-v2 .vyl-entry-lock > div {
    top: 3px !important;
    bottom: 3px !important;
    left: auto !important;
    right: 3px !important;
    width: calc(50% - 4px) !important;
    border-radius: 14px !important;
    background: #4f5869 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22) !important;
}

body.vyl-visual-v2 .vyl-entry-lock[aria-pressed="true"] > div {
    right: auto !important;
    left: 3px !important;
    background: #ff586f !important;
    box-shadow: 0 0 18px rgba(255, 88, 111, 0.22) !important;
}

body.vyl-visual-v2 .vyl-entry-lock > span {
    font-size: 9px !important;
    font-weight: 680 !important;
    letter-spacing: 0.07em !important;
}

body.vyl-visual-v2 .vyl-entry-lock[aria-pressed="false"] > span:last-child,
body.vyl-visual-v2 .vyl-entry-lock[aria-pressed="true"] > span:nth-of-type(1) {
    color: #fff !important;
}

body.vyl-visual-v2 .vyl-direction-actions,
body.vyl-visual-v2 .vyl-sell-row {
    gap: 6px !important;
}

body.vyl-visual-v2 .vyl-direction-actions button,
body.vyl-visual-v2 .vyl-sell-action,
body.vyl-visual-v2 .vyl-sell-row select {
    min-height: 42px;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border: 0 !important;
    border-radius: 4px !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035) !important;
}

body.vyl-visual-v2 .vyl-direction-actions button:disabled,
body.vyl-visual-v2 .vyl-sell-action:disabled,
body.vyl-visual-v2 .vyl-sell-row select:disabled {
    color: #56565f !important;
    background: rgba(0, 0, 0, 0.24) !important;
    box-shadow: none !important;
}

body.vyl-visual-v2 .vyl-call-action:not(:disabled) {
    color: #00c805 !important;
    background: rgba(0, 200, 5, 0.08) !important;
}

body.vyl-visual-v2 .vyl-put-action:not(:disabled) {
    color: #ff5a36 !important;
    background: rgba(255, 90, 54, 0.08) !important;
}

body.vyl-visual-v2 .vyl-sell-action:not(:disabled) {
    color: #00c805 !important;
    background: rgba(0, 200, 5, 0.09) !important;
}

body.vyl-visual-v2 .vyl-section-divider {
    padding: 1px 0 !important;
}

body.vyl-visual-v2 .vyl-section-divider h4 {
    color: #d2d2d7 !important;
    font-size: 9px !important;
    font-weight: 720 !important;
    letter-spacing: 0.085em !important;
}

body.vyl-visual-v2 .vyl-order-card > h3 {
    margin-bottom: 10px !important;
}

body.vyl-visual-v2 .vyl-quantity-row {
    padding: 9px !important;
    border: 0 !important;
    border-radius: 4px !important;
    background: rgba(0, 0, 0, 0.2) !important;
}

body.vyl-visual-v2 .vyl-quantity-control {
    height: 38px;
    border: 0 !important;
    border-radius: 4px !important;
    background: rgba(0, 0, 0, 0.28) !important;
}

body.vyl-visual-v2 .vyl-quantity-control input {
    height: 38px !important;
    border: 0 !important;
    background: transparent !important;
    font-size: 13px !important;
}

body.vyl-visual-v2 .vyl-quantity-control button {
    color: #96969e !important;
    background: rgba(255, 255, 255, 0.035) !important;
}

body.vyl-visual-v2 .vyl-quantity-control button:hover {
    color: #f0f0f2 !important;
    background: rgba(255, 255, 255, 0.09) !important;
}

body.vyl-visual-v2 .vyl-filter-card > div:first-child {
    gap: 10px;
}

body.vyl-visual-v2 .vyl-filter-card > div:first-child > div:first-child {
    min-width: 0;
}

body.vyl-visual-v2 .vyl-filter-card p {
    color: #74747c !important;
    font-size: 9px !important;
    line-height: 13px;
}

body.vyl-visual-v2 .vyl-filter-card [class*="bg-primary/20"],
body.vyl-visual-v2 .vyl-filter-card [class*="bg-gray-600/20"] {
    min-width: 28px;
    padding: 3px 6px !important;
    border-radius: 10px !important;
    font-size: 8px !important;
    letter-spacing: 0.04em;
}

body.vyl-visual-v2 .vyl-mini-switch {
    width: 34px !important;
    height: 18px !important;
    flex: 0 0 34px;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: #484850 !important;
    box-shadow: none !important;
}

body.vyl-visual-v2 .vyl-mini-switch > div {
    top: 3px !important;
    left: 3px !important;
    width: 12px !important;
    height: 12px !important;
    background: #e1e1e4 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    transform: translateX(0);
}

body.vyl-visual-v2 .vyl-mini-switch.is-on {
    background: var(--vyl-v2-accent) !important;
    box-shadow: 0 0 13px rgba(137, 92, 246, 0.24) !important;
}

body.vyl-visual-v2 .vyl-mini-switch.is-on > div {
    left: 3px !important;
    transform: translateX(16px);
}

body.vyl-visual-v2 .vyl-mini-switch:hover {
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.045) !important;
}

body.vyl-visual-v2 .vyl-mini-switch.is-on:hover {
    box-shadow: 0 0 0 4px rgba(137, 92, 246, 0.11), 0 0 15px rgba(137, 92, 246, 0.22) !important;
}

body.vyl-visual-v2 .vyl-segmented-control {
    gap: 2px !important;
    padding: 3px !important;
    border: 0 !important;
    border-radius: 4px !important;
    background: rgba(0, 0, 0, 0.28) !important;
}

body.vyl-visual-v2 .vyl-segmented-control button {
    min-height: 28px !important;
    padding: 0 8px !important;
    border: 0 !important;
    border-radius: 3px !important;
    color: #82828c !important;
    background: transparent !important;
    font-size: 9px !important;
    font-weight: 650 !important;
    box-shadow: none !important;
}

body.vyl-visual-v2 .vyl-segmented-control button:hover {
    color: #ebebee !important;
    background: rgba(255, 255, 255, 0.055) !important;
}

body.vyl-visual-v2 .vyl-segmented-control button.is-active {
    color: #fff !important;
    background: rgba(137, 92, 246, 0.72) !important;
    box-shadow: 0 0 14px rgba(137, 92, 246, 0.16) !important;
}

body.vyl-visual-v2 .vylmoon-config-panel input:not([type="checkbox"]):not([type="range"]),
body.vyl-visual-v2 .vylmoon-config-panel select {
    min-height: 34px;
    outline: 1px solid rgba(255, 255, 255, 0.045) !important;
    outline-offset: -1px;
    color: #efeff1 !important;
    background: rgba(0, 0, 0, 0.27) !important;
    font-variant-numeric: tabular-nums;
    transition: background-color 130ms ease, outline-color 130ms ease, box-shadow 130ms ease;
}

body.vyl-visual-v2 .vylmoon-config-panel input:not([type="checkbox"]):not([type="range"]):hover,
body.vyl-visual-v2 .vylmoon-config-panel select:hover {
    background: rgba(0, 0, 0, 0.36) !important;
    outline-color: rgba(255, 255, 255, 0.09) !important;
}

body.vyl-visual-v2 .vylmoon-config-panel input:not([type="checkbox"]):not([type="range"]):focus,
body.vyl-visual-v2 .vylmoon-config-panel select:focus {
    border-color: transparent !important;
    outline-color: rgba(137, 92, 246, 0.65) !important;
    box-shadow: 0 0 0 2px rgba(137, 92, 246, 0.11) !important;
}

body.vyl-visual-v2 .vylmoon-config-panel input[type="range"] {
    --vyl-v2-range: #895cf6;
    height: 18px;
    margin: 0;
    accent-color: var(--vyl-v2-range);
}

body.vyl-visual-v2 .vylmoon-config-panel input[type="range"][class*="accent-cyber-green"] {
    --vyl-v2-range: #00c805;
}

body.vyl-visual-v2 .vylmoon-config-panel input[type="range"][class*="accent-cyber-red"] {
    --vyl-v2-range: #ff5a36;
}

body.vyl-visual-v2 .vylmoon-config-panel input[type="range"][class*="accent-cyber-orange"] {
    --vyl-v2-range: #ff914b;
}

body.vyl-visual-v2 .vylmoon-config-panel input[type="range"]::-webkit-slider-runnable-track {
    height: 3px;
    border: 0;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.13);
}

body.vyl-visual-v2 .vylmoon-config-panel input[type="range"]::-webkit-slider-thumb {
    width: 12px;
    height: 12px;
    margin-top: -4.5px;
    border: 2px solid rgba(255, 255, 255, 0.82);
    background: var(--vyl-v2-range);
    box-shadow: 0 1px 5px color-mix(in srgb, var(--vyl-v2-range) 45%, transparent);
}

body.vyl-visual-v2 .vyl-exit-workspace {
    padding: 11px !important;
}

body.vyl-visual-v2 .vyl-exit-presets button {
    min-height: 31px !important;
    padding: 0 7px !important;
    border: 0 !important;
    border-radius: 3px !important;
    color: #a8a8b0 !important;
    background: rgba(0, 0, 0, 0.22) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04) !important;
    font-size: 8px !important;
    letter-spacing: 0.035em !important;
}

body.vyl-visual-v2 .vyl-exit-presets button:hover {
    color: #fff !important;
    background: rgba(137, 92, 246, 0.16) !important;
    box-shadow: inset 0 0 0 1px rgba(169, 136, 255, 0.25) !important;
}

body.vyl-visual-v2 .vyl-exit-mode-selector {
    gap: 3px !important;
    padding: 3px !important;
    border: 0 !important;
    border-radius: 4px !important;
    background: rgba(0, 0, 0, 0.28) !important;
}

body.vyl-visual-v2 .vyl-exit-mode-selector button {
    min-height: 34px !important;
    padding: 4px !important;
    border: 0 !important;
    border-radius: 3px !important;
    color: #80808a !important;
    background: transparent !important;
    font-size: 8px !important;
    line-height: 11px !important;
    box-shadow: none !important;
}

body.vyl-visual-v2 .vyl-exit-mode-selector button:hover {
    color: #eeeef0 !important;
    background: rgba(255, 255, 255, 0.065) !important;
}

body.vyl-visual-v2 .vyl-exit-mode-selector button.is-active {
    color: #fff !important;
    background: rgba(137, 92, 246, 0.72) !important;
    box-shadow: 0 0 14px rgba(137, 92, 246, 0.16) !important;
}

body.vyl-visual-v2 .vyl-exit-mode-panel {
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.vyl-visual-v2 .vyl-exit-mode-banner {
    border: 0 !important;
    border-radius: 4px !important;
    background: rgba(115, 168, 255, 0.065) !important;
    box-shadow: inset 0 0 0 1px rgba(115, 168, 255, 0.13);
}

body.vyl-visual-v2 .vylmoon-config-panel button:active {
    transform: scale(0.97);
}

body.vyl-visual-v2 .vyl-entry-lock:focus-visible,
body.vyl-visual-v2 .vyl-mini-switch:focus-visible,
body.vyl-visual-v2 .vyl-segmented-control button:focus-visible,
body.vyl-visual-v2 .vyl-exit-presets button:focus-visible,
body.vyl-visual-v2 .vyl-exit-mode-selector button:focus-visible,
body.vyl-visual-v2 .vylmoon-config-panel input:focus-visible,
body.vyl-visual-v2 .vylmoon-config-panel select:focus-visible {
    outline: 2px solid rgba(197, 176, 255, 0.82) !important;
    outline-offset: 2px;
}

/* Ticker selector as a floating glass utility window */
body.vyl-visual-v2 .ticker-search-popover {
    top: 103px;
    left: calc(var(--vyl-sidebar-width) + 14px);
    width: min(360px, calc(100vw - var(--vyl-sidebar-width) - 28px));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(45, 45, 48, 0.91), rgba(22, 22, 25, 0.88));
    -webkit-backdrop-filter: blur(30px) saturate(130%);
    backdrop-filter: blur(30px) saturate(130%);
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.62), inset 0 1px rgba(255, 255, 255, 0.08), inset 0 -1px rgba(255, 255, 255, 0.025);
    animation: vyl-v2-popover-in 170ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

body.vyl-visual-v2 .vyl-sidebar.is-collapsed ~ .main-content .ticker-search-popover,
body.vyl-visual-v2 .vyl-sidebar.is-collapsed ~ * .ticker-search-popover {
    left: calc(var(--vyl-sidebar-collapsed-width) + 14px);
}

body.vyl-visual-v2 .ticker-search-popover header {
    min-height: 56px;
    padding: 10px 11px 9px 14px;
    border-bottom-color: rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.012);
}

body.vyl-visual-v2 .ticker-search-popover header strong {
    font-size: 13px;
    font-weight: 640;
}

body.vyl-visual-v2 .ticker-search-popover header span {
    color: #828289;
    font-size: 9px;
}

body.vyl-visual-v2 .ticker-search-close {
    width: 30px;
    height: 30px;
    color: #85858d;
}

body.vyl-visual-v2 .ticker-search-field {
    height: 34px;
    margin: 10px;
    border: 0;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.24);
    outline: 1px solid rgba(255, 255, 255, 0.06);
}

body.vyl-visual-v2 .ticker-search-field:focus-within {
    outline-color: var(--vyl-v2-accent-line);
    box-shadow: 0 0 0 3px var(--vyl-v2-accent-soft);
}

body.vyl-visual-v2 .ticker-search-field input {
    font-size: 11px;
}

body.vyl-visual-v2 .ticker-search-list {
    padding: 0 7px 9px;
}

body.vyl-visual-v2 .ticker-search-row {
    min-height: 36px;
    border-radius: 4px;
}

body.vyl-visual-v2 .ticker-search-row:hover {
    background: rgba(255, 255, 255, 0.055);
}

body.vyl-visual-v2 .ticker-search-row strong {
    font-size: 11px;
}

body.vyl-visual-v2 .ticker-search-row span {
    color: #85858d;
    font-size: 9px;
}

body.vyl-visual-v2 .ticker-search-row.is-active {
    color: #a98cff;
    background: rgba(137, 92, 246, 0.11);
    box-shadow: inset 0 0 0 1px rgba(169, 136, 255, 0.12);
}

body.vyl-visual-v2 .ticker-search-row.is-active i {
    border-color: rgba(169, 136, 255, 0.72);
    background: radial-gradient(circle at center, #a98cff 0 38%, transparent 42%);
}

/* Phase 4: secondary windows, broker selector, toasts and confirmations */
body.vyl-visual-v2 .vyl-sidebar-popover {
    top: 54px;
    left: calc(var(--vyl-sidebar-width) + var(--vyl-v2-gap));
    border-color: rgba(255, 255, 255, 0.09);
    border-radius: 10px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.014) 48%, rgba(0, 0, 0, 0.09)),
        #141419;
    -webkit-backdrop-filter: blur(30px) saturate(130%);
    backdrop-filter: blur(30px) saturate(130%);
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.58), inset 0 1px rgba(255, 255, 255, 0.075), inset 0 -1px rgba(255, 255, 255, 0.025);
    isolation: isolate;
}

body.vyl-visual-v2 .vyl-sidebar.is-collapsed .vyl-sidebar-popover {
    left: calc(var(--vyl-sidebar-collapsed-width) + var(--vyl-v2-gap));
}

body.vyl-visual-v2 .vyl-events-popover {
    width: 332px;
    height: min(480px, calc(100vh - 62px));
}

body.vyl-visual-v2 .vyl-user-popover {
    width: 318px;
}

body.vyl-visual-v2 .vyl-sidebar-popover-header {
    height: 46px;
    min-height: 46px;
    padding: 0 11px 0 13px;
    border-bottom-color: rgba(255, 255, 255, 0.055);
    background: rgba(255, 255, 255, 0.025);
}

body.vyl-visual-v2 .vyl-sidebar-popover-header h2 {
    font-size: 12px;
    font-weight: 640;
}

body.vyl-visual-v2 .vyl-sidebar-popover-status {
    padding: 3px 6px;
    color: #9f8be1;
    background: rgba(137, 92, 246, 0.1);
    font-size: 8px;
    letter-spacing: 0.06em;
}

body.vyl-visual-v2 .vyl-events-header-glyph {
    background: #895cf6;
    box-shadow: 0 0 9px rgba(137, 92, 246, 0.24);
}

body.vyl-visual-v2 .vyl-events-empty-state {
    background: rgba(0, 0, 0, 0.08);
}

body.vyl-visual-v2 .vyl-events-empty-glyph {
    color: #73737c;
    transform: scale(0.88);
}

body.vyl-visual-v2 .vyl-events-empty-state h3 {
    color: #e0e0e4;
    font-size: 13px;
    font-weight: 640;
}

body.vyl-visual-v2 .vyl-events-empty-state p {
    max-width: 220px;
    margin-top: 5px;
    color: #808089;
    font-size: 9px;
    line-height: 13px;
}

body.vyl-visual-v2 .vyl-events-live-body {
    padding: 7px;
    background: rgba(0, 0, 0, 0.11);
}

body.vyl-visual-v2 .vyl-event-row {
    padding: 8px;
    border: 0;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.032);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025);
}

body.vyl-visual-v2 .vyl-event-row p {
    color: #dddddf;
    font-size: 10px;
    line-height: 14px;
}

body.vyl-visual-v2 .vyl-event-row time {
    color: #74747d;
    font-size: 8px;
}

body.vyl-visual-v2 .vyl-user-profile-summary {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 10px;
    padding: 14px;
    background: rgba(0, 0, 0, 0.11);
}

body.vyl-visual-v2 .vyl-user-avatar {
    width: 42px;
    height: 42px;
    background: linear-gradient(145deg, rgba(137, 92, 246, 0.9), rgba(91, 72, 170, 0.8));
    box-shadow: 0 8px 22px rgba(71, 45, 145, 0.2);
    font-size: 11px;
}

body.vyl-visual-v2 .vyl-user-profile-summary h3 {
    font-size: 13px;
    font-weight: 650;
}

body.vyl-visual-v2 .vyl-user-profile-summary p {
    color: #84848d;
    font-size: 9px;
}

body.vyl-visual-v2 .vyl-user-online-state {
    right: 14px;
    bottom: 8px;
    font-size: 8px;
}

body.vyl-visual-v2 .vyl-user-information-list {
    padding: 5px 14px 8px;
    background: rgba(0, 0, 0, 0.07);
}

body.vyl-visual-v2 .vyl-user-information-list > div {
    min-height: 34px;
    border-bottom-color: rgba(255, 255, 255, 0.05);
}

body.vyl-visual-v2 .vyl-user-information-list dt {
    color: #7e7e87;
    font-size: 9px;
}

body.vyl-visual-v2 .vyl-user-information-list dd {
    color: #dadade;
    font-size: 10px;
}

body.vyl-visual-v2 .vyl-user-session-note {
    padding: 0 14px 13px;
    color: #7e7e87;
    background: rgba(0, 0, 0, 0.07);
    font-size: 9px;
    line-height: 13px;
}

body.vyl-visual-v2 .broker-selector-overlay {
    padding: 24px;
    background: rgba(0, 0, 0, 0.44);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

body.vyl-visual-v2 .broker-selector-modal {
    --broker-modal-panel: rgba(37, 37, 40, 0.92);
    --broker-modal-soft: rgba(0, 0, 0, 0.2);
    --broker-modal-raised: rgba(255, 255, 255, 0.055);
    --broker-modal-border: rgba(255, 255, 255, 0.085);
    --broker-modal-border-soft: rgba(255, 255, 255, 0.055);
    --broker-modal-text: #f2f2f4;
    --broker-modal-muted: #a2a2aa;
    --broker-modal-subtle: #73737c;
    --broker-modal-accent: #a98cff;
    width: min(640px, calc(100vw - 80px)) !important;
    max-width: 640px !important;
    max-height: min(640px, calc(100vh - 48px)) !important;
    margin: 0 !important;
    padding: 14px !important;
    border-color: var(--broker-modal-border);
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(45, 45, 48, 0.94), rgba(25, 25, 28, 0.92));
    -webkit-backdrop-filter: blur(30px) saturate(130%);
    backdrop-filter: blur(30px) saturate(130%);
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.62), inset 0 1px rgba(255, 255, 255, 0.08), inset 0 -1px rgba(255, 255, 255, 0.025);
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

body.vyl-visual-v2 .broker-selector-modal::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
}

body.vyl-visual-v2 .broker-selector-heading {
    min-height: 48px;
    margin: -4px 0 10px;
    padding: 0 0 10px;
    border-bottom-color: var(--broker-modal-border-soft);
}

body.vyl-visual-v2 .broker-selector-heading-icon {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 6px;
    color: #a98cff;
    background: rgba(137, 92, 246, 0.12);
    box-shadow: inset 0 0 0 1px rgba(169, 136, 255, 0.18);
}

body.vyl-visual-v2 .broker-selector-title {
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
    font-size: 14px;
    font-weight: 650;
}

body.vyl-visual-v2 .broker-selector-heading p {
    color: #73737c;
    font-size: 8px;
}

body.vyl-visual-v2 .broker-selector-close {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 4px;
    color: #8b8b94;
    background: rgba(255, 255, 255, 0.035);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.045);
}

body.vyl-visual-v2 .broker-selector-close:hover {
    color: #fff;
    border-color: transparent;
    background: rgba(255, 255, 255, 0.075);
}

body.vyl-visual-v2 .broker-selector-delay {
    margin-bottom: 12px !important;
    padding: 8px 10px !important;
    border: 0;
    border-radius: 4px !important;
    color: #a89a73;
    background: rgba(217, 174, 69, 0.075);
    box-shadow: inset 0 0 0 1px rgba(217, 174, 69, 0.14);
    font-size: 9px !important;
}

body.vyl-visual-v2 .broker-selector-grid {
    gap: 5px !important;
    margin-bottom: 8px !important;
}

body.vyl-visual-v2 .broker-selector-grid .ui-caption {
    margin: 0 0 5px !important;
    color: #85858d !important;
    font-size: 8px !important;
    letter-spacing: 0.065em;
}

body.vyl-visual-v2 .broker-selector-grid .space-y-2 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 5px !important;
}

body.vyl-visual-v2 .broker-selector-option {
    min-height: 44px;
    padding: 7px 9px !important;
    border: 0 !important;
    border-radius: 4px !important;
    color: #a2a2aa !important;
    background: rgba(0, 0, 0, 0.2) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04) !important;
}

body.vyl-visual-v2 .broker-selector-option:hover {
    color: #ededf0 !important;
    border-color: transparent !important;
    background: rgba(255, 255, 255, 0.055) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.065) !important;
}

body.vyl-visual-v2 .broker-selector-option.is-selected {
    color: #f6f2ff !important;
    border-color: transparent !important;
    background: rgba(137, 92, 246, 0.13) !important;
    box-shadow: inset 0 0 0 1px rgba(169, 136, 255, 0.25), 0 0 16px rgba(137, 92, 246, 0.08) !important;
}

body.vyl-visual-v2 .broker-selector-option .broker-brand-logo {
    border-radius: 6px;
}

body.vyl-visual-v2 .broker-selector-current {
    border: 0;
    color: #8be7b2;
    background: rgba(0, 200, 5, 0.08);
    box-shadow: inset 0 0 0 1px rgba(0, 200, 5, 0.16);
    font-size: 7px;
}

body.vyl-visual-v2 .broker-selector-details {
    padding-top: 12px !important;
    border-color: var(--broker-modal-border-soft) !important;
}

body.vyl-visual-v2 .broker-selector-note,
body.vyl-visual-v2 .broker-selector-modal [class*="bg-dark/30"],
body.vyl-visual-v2 .broker-selector-modal [class*="bg-dark/40"],
body.vyl-visual-v2 .broker-selector-modal [class*="bg-dark/50"],
body.vyl-visual-v2 .broker-selector-modal [class*="bg-black/"] {
    border-color: transparent !important;
    border-radius: 4px !important;
    color: #92929a !important;
    background: rgba(0, 0, 0, 0.2) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04) !important;
}

body.vyl-visual-v2 .broker-selector-modal input,
body.vyl-visual-v2 .broker-selector-modal select,
body.vyl-visual-v2 .broker-selector-modal textarea {
    min-height: 34px;
    border: 0 !important;
    border-radius: 4px !important;
    color: #efeff1 !important;
    background: rgba(0, 0, 0, 0.27) !important;
    outline: 1px solid rgba(255, 255, 255, 0.055);
}

body.vyl-visual-v2 .broker-selector-modal input:focus,
body.vyl-visual-v2 .broker-selector-modal select:focus,
body.vyl-visual-v2 .broker-selector-modal textarea:focus {
    border-color: transparent !important;
    outline-color: rgba(137, 92, 246, 0.65);
    box-shadow: 0 0 0 3px rgba(137, 92, 246, 0.11) !important;
}

body.vyl-visual-v2 .broker-selector-primary {
    min-height: 38px;
    border: 0;
    border-radius: 4px;
    color: #fff;
    background: #895cf6;
    box-shadow: 0 8px 22px rgba(137, 92, 246, 0.15);
    font-size: 10px;
}

body.vyl-visual-v2 .broker-selector-primary:hover:not(:disabled) {
    border-color: transparent;
    background: #976bfa;
    filter: brightness(1.06);
}

body.vyl-visual-v2 .vyl-toast-stack {
    top: 10px !important;
    right: 10px !important;
    width: min(340px, calc(100vw - 20px));
}

body.vyl-visual-v2 .vyl-toast {
    --vyl-toast-accent: #895cf6;
    position: relative;
    min-height: 44px;
    padding: 10px 10px 10px 12px !important;
    overflow: hidden;
    border: 0 !important;
    border-radius: 8px !important;
    color: #dedee2 !important;
    background: linear-gradient(145deg, rgba(45, 45, 48, 0.94), rgba(23, 23, 26, 0.92)) !important;
    -webkit-backdrop-filter: blur(24px) saturate(125%);
    backdrop-filter: blur(24px) saturate(125%);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.48), inset 0 0 0 1px rgba(255, 255, 255, 0.07) !important;
    font-size: 10px !important;
}

body.vyl-visual-v2 .vyl-toast::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--vyl-toast-accent);
    box-shadow: 0 0 12px color-mix(in srgb, var(--vyl-toast-accent) 40%, transparent);
}

body.vyl-visual-v2 .vyl-toast-success { --vyl-toast-accent: #00c805; }
body.vyl-visual-v2 .vyl-toast-error { --vyl-toast-accent: #ff586f; }
body.vyl-visual-v2 .vyl-toast-warning { --vyl-toast-accent: #d9ae45; }
body.vyl-visual-v2 .vyl-toast-info { --vyl-toast-accent: #895cf6; }

body.vyl-visual-v2 .vyl-toast-icon {
    width: 20px !important;
    height: 20px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--vyl-toast-accent);
    background: color-mix(in srgb, var(--vyl-toast-accent) 11%, transparent);
}

body.vyl-visual-v2 .vyl-toast-message {
    padding-top: 2px;
    line-height: 15px !important;
}

body.vyl-visual-v2 .vyl-toast > button {
    width: 24px;
    height: 24px;
    margin: -1px 0 0 4px !important;
    padding: 0;
    border: 0;
    border-radius: 4px;
    color: #8c8c94;
    background: transparent;
}

body.vyl-visual-v2 .vyl-toast > button:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
}

body.vyl-visual-v2 .vyl-confirm-overlay {
    background: rgba(0, 0, 0, 0.48) !important;
    -webkit-backdrop-filter: blur(7px) saturate(112%) !important;
    backdrop-filter: blur(7px) saturate(112%) !important;
}

body.vyl-visual-v2 .vyl-confirm-dialog {
    position: relative;
    max-width: 420px !important;
    padding: 18px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: linear-gradient(145deg, rgba(45, 45, 48, 0.96), rgba(22, 22, 25, 0.95)) !important;
    -webkit-backdrop-filter: blur(30px) saturate(125%);
    backdrop-filter: blur(30px) saturate(125%);
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.62), inset 0 0 0 1px rgba(255, 255, 255, 0.09) !important;
    animation: vyl-v2-confirm-in 170ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

body.vyl-visual-v2 .vyl-confirm-dialog::before {
    content: "?";
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    margin-bottom: 12px;
    border-radius: 50%;
    color: #cbbcff;
    background: rgba(137, 92, 246, 0.13);
    box-shadow: inset 0 0 0 1px rgba(169, 136, 255, 0.2);
    font-size: 13px;
    font-weight: 720;
}

body.vyl-visual-v2 .vyl-confirm-danger::before {
    content: "!";
    color: #ff8798;
    background: rgba(255, 88, 111, 0.11);
    box-shadow: inset 0 0 0 1px rgba(255, 88, 111, 0.2);
}

body.vyl-visual-v2 .vyl-confirm-warning::before {
    content: "!";
    color: #e4c46f;
    background: rgba(217, 174, 69, 0.11);
    box-shadow: inset 0 0 0 1px rgba(217, 174, 69, 0.2);
}

body.vyl-visual-v2 .vyl-confirm-message {
    margin: 0;
    color: #dedee2 !important;
    font-size: 11px !important;
    line-height: 17px !important;
}

body.vyl-visual-v2 .vyl-confirm-actions {
    gap: 6px !important;
    margin-top: 18px !important;
}

body.vyl-visual-v2 .vyl-confirm-actions button {
    min-height: 34px;
    padding: 0 13px !important;
    border: 0 !important;
    border-radius: 4px !important;
    font-size: 9px !important;
    font-weight: 680 !important;
}

body.vyl-visual-v2 .vyl-confirm-cancel {
    color: #aaaab2 !important;
    background: rgba(255, 255, 255, 0.055) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.045);
}

body.vyl-visual-v2 .vyl-confirm-primary {
    color: #fff !important;
    background: #895cf6 !important;
    box-shadow: 0 7px 20px rgba(137, 92, 246, 0.16) !important;
}

body.vyl-visual-v2 .vyl-confirm-danger .vyl-confirm-primary {
    background: #d9475c !important;
    box-shadow: 0 7px 20px rgba(217, 71, 92, 0.16) !important;
}

body.vyl-visual-v2 .vyl-confirm-warning .vyl-confirm-primary {
    color: #1b170c !important;
    background: #d9ae45 !important;
    box-shadow: 0 7px 20px rgba(217, 174, 69, 0.16) !important;
}

@keyframes vyl-v2-confirm-in {
    from { opacity: 0; transform: translateY(7px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes vyl-v2-popover-in {
    from { opacity: 0; transform: translateY(-5px) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    body.vyl-visual-v2 .ticker-search-popover {
        animation: none;
    }
}

/* Welcome dashboard v3: inherit VylMoon's transparent crystal language. */
body.vyl-visual-v2 .welcome-page {
    --welcome-surface: rgba(27, 27, 31, 0.42);
    --welcome-surface-hover: rgba(34, 34, 39, 0.52);
    --welcome-border: rgba(255, 255, 255, 0.085);
    --welcome-border-hover: rgba(255, 255, 255, 0.145);
    --welcome-muted: #a7a7b0;
    --welcome-dim: #85858f;
    background: transparent;
}

body.vyl-visual-v2 .welcome-stat,
body.vyl-visual-v2 .welcome-panel {
    border-color: var(--welcome-border) !important;
    border-radius: 6px !important;
    background: var(--welcome-surface) !important;
    box-shadow:
        0 18px 46px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.085),
        inset 0 0 0 1px rgba(255, 255, 255, 0.018) !important;
    -webkit-backdrop-filter: blur(30px) saturate(132%) !important;
    backdrop-filter: blur(30px) saturate(132%) !important;
}

body.vyl-visual-v2 .welcome-stat:hover,
body.vyl-visual-v2 .welcome-panel:hover {
    border-color: var(--welcome-border-hover) !important;
    background: var(--welcome-surface-hover) !important;
    box-shadow:
        0 22px 55px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.11),
        inset 0 0 0 1px rgba(255, 255, 255, 0.025) !important;
}

body.vyl-visual-v2 .welcome-panel::before {
    top: 14px;
    left: -1px;
    width: 3px;
    height: 36px;
    border-radius: 0 2px 2px 0;
    background: var(--vyl-v2-accent);
    box-shadow: 0 0 14px rgba(137, 92, 246, 0.3);
}

body.vyl-visual-v2 .welcome-stat::before {
    top: -1px;
    left: 18px;
    width: 48px;
    height: 2px;
}
body.vyl-visual-v2 .welcome-stat-head { font-size: 10px; }
body.vyl-visual-v2 .welcome-stat > small { font-size: 10px; }
body.vyl-visual-v2 .welcome-panel-title-wrap p { font-size: 10px; }
body.vyl-visual-v2 .welcome-pulse-item > div > strong { font-size: 13px; }
body.vyl-visual-v2 .welcome-pulse-item > div > span { font-size: 10px; }
body.vyl-visual-v2 .welcome-agenda-row time { font-size: 9px; }
body.vyl-visual-v2 .welcome-agenda-row small { font-size: 9px; }
body.vyl-visual-v2 .welcome-news-row small { font-size: 9px; }
body.vyl-visual-v2 .welcome-watch-price span { font-size: 10px; }
body.vyl-visual-v2 .welcome-watch-price b { font-size: 9px; }
body.vyl-visual-v2 .welcome-position-symbol strong { font-size: 11px; }
body.vyl-visual-v2 .welcome-position-symbol span,
body.vyl-visual-v2 .welcome-position-contract strong,
body.vyl-visual-v2 .welcome-position-contract span,
body.vyl-visual-v2 .welcome-position-value span,
body.vyl-visual-v2 .welcome-position-value b { font-size: 9px; }
body.vyl-visual-v2 .welcome-empty-state strong { font-size: 11px; }
body.vyl-visual-v2 .welcome-empty-state span { font-size: 9px; }

body.vyl-visual-v2 .welcome-stat.accent-cyan .welcome-stat-icon { border-color: rgba(115, 168, 255, 0.2); color: #8fb9ff; background: rgba(115, 168, 255, 0.08); }
body.vyl-visual-v2 .welcome-stat.accent-green .welcome-stat-icon { border-color: rgba(53, 212, 154, 0.2); color: #63deb1; background: rgba(53, 212, 154, 0.08); }
body.vyl-visual-v2 .welcome-stat.accent-gold .welcome-stat-icon { border-color: rgba(240, 189, 99, 0.2); color: #f0c778; background: rgba(240, 189, 99, 0.08); }

@media (max-width: 1400px) {
}

/* Keep the dashboard controls visible after the generic visual-v2 action rule. */
body.vyl-visual-v2 .dashboard-page .dashboard-system-button,
body.vyl-visual-v2 .dashboard-page .dashboard-panic-button {
    border-style: solid !important;
    border-width: 1px !important;
    border-radius: 6px !important;
    background: rgba(255, 255, 255, 0.055) !important;
}

body.vyl-visual-v2 .dashboard-page .dashboard-system-button {
    border-color: rgba(148, 163, 184, 0.28) !important;
}

body.vyl-visual-v2 .dashboard-page .dashboard-system-button.is-on {
    border-color: #00c777 !important;
    color: #00db89 !important;
    background: rgba(255, 255, 255, 0.055) !important;
}

body.vyl-visual-v2 .dashboard-page .dashboard-system-button.is-off {
    border-color: #d94b39 !important;
    color: #e06652 !important;
    background: rgba(255, 255, 255, 0.055) !important;
}

body.vyl-visual-v2 .dashboard-page .dashboard-panic-button {
    border: 1px solid #ff5a36 !important;
    color: #ff6f55 !important;
    background: rgba(255, 90, 54, 0.09) !important;
}

body.vyl-visual-v2 .dashboard-page .dashboard-panic-button:hover,
body.vyl-visual-v2 .dashboard-page .dashboard-panic-button.is-active {
    border: 1px solid #ff4b55 !important;
    color: #ffffff !important;
    background: #ff4b55 !important;
    box-shadow: 0 0 16px rgba(255, 75, 85, 0.25) !important;
}

/* Final priority for compact-page contrast and scrollbars. */
body.vyl-visual-v2 .info-tabs-strip {
    border: 1px solid rgba(255, 255, 255, 0.13) !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.025) 58%, rgba(255, 255, 255, 0.07)), rgba(18, 26, 36, 0.34) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.045), inset 0 1px 0 rgba(255, 255, 255, 0.075), 0 14px 34px rgba(0, 0, 0, 0.1) !important;
}

/* Final priority layer: keep the help center and history surfaces consistent
   with the current glass system after legacy page rules have loaded. */

body.vyl-visual-v2 .history-ledger td [class*="text-gray-400"] {
    color: #c1ceda !important;
}

body.vyl-visual-v2 .history-ledger td [class*="text-gray-300"] {
    color: #d5dfe8 !important;
}

body.vyl-visual-v2 .history-ledger td [class*="text-gray-500"] {
    color: #b5c4d2 !important;
}

/* Contrast pass for the information center and history ledger. The previous
   gray scale was readable only on the darkest background, especially for
   generic exit reasons such as MANUAL_TV_CLOSE. */
body.vyl-visual-v2 .info-page {
    --info-muted: #c1ceda;
    --info-subtle: #a5b5c4;
}

body.vyl-visual-v2 .info-tabs-strip {
    border: 1px solid rgba(255, 255, 255, 0.13) !important;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.025) 58%, rgba(255, 255, 255, 0.07)),
        rgba(18, 26, 36, 0.34) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.045),
        inset 0 1px 0 rgba(255, 255, 255, 0.075),
        0 14px 34px rgba(0, 0, 0, 0.1) !important;
}

body.vyl-visual-v2 .info-tab-wide {
    color: #c1ceda !important;
}

body.vyl-visual-v2 .info-tab-wide-icon {
    color: #9eb1c3 !important;
}

body.vyl-visual-v2 .info-tab-wide:hover,
body.vyl-visual-v2 .info-tab-wide.is-active {
    color: #f3f7fb !important;
}

body.vyl-visual-v2 .info-content .glass-hud,
body.vyl-visual-v2 .info-content [class*="bg-dark/30"],
body.vyl-visual-v2 .info-content [class*="bg-dark/40"],
body.vyl-visual-v2 .info-content [class*="bg-dark/50"],
body.vyl-visual-v2 .info-content [class*="bg-black/20"],
body.vyl-visual-v2 .info-content [class*="bg-black/30"] {
    border: 1px solid rgba(255, 255, 255, 0.095) !important;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.022) 58%, rgba(255, 255, 255, 0.06)),
        rgba(21, 29, 39, 0.34) !important;
    -webkit-backdrop-filter: blur(24px) saturate(120%) !important;
    backdrop-filter: blur(24px) saturate(120%) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.035),
        inset 0 1px 0 rgba(255, 255, 255, 0.055),
        0 12px 30px rgba(0, 0, 0, 0.08) !important;
}

body.vyl-visual-v2 .info-content .glass-hud p,
body.vyl-visual-v2 .info-content .glass-hud li,
body.vyl-visual-v2 .info-content .glass-hud [class*="text-gray-300"],
body.vyl-visual-v2 .info-content .glass-hud [class*="text-gray-400"] {
    color: #c1ceda !important;
    font-size: 0.9rem !important;
}

body.vyl-visual-v2 .info-content .glass-hud [class*="text-gray-500"] {
    color: #a5b5c4 !important;
}

body.vyl-visual-v2 .info-content .glass-hud [class*="text-gray-600"] {
    color: #93a6b7 !important;
}

body.vyl-visual-v2 .history-header span,
body.vyl-visual-v2 .history-stat > div:first-child,
body.vyl-visual-v2 .history-ledger th {
    color: #bac9d7 !important;
}

body.vyl-visual-v2 .history-ledger thead {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.025)),
        rgba(18, 25, 34, 0.78) !important;
}

body.vyl-visual-v2 .history-ledger td.text-gray-400,
body.vyl-visual-v2 .history-ledger td [class*="text-gray-400"] {
    color: #c1ceda !important;
}

body.vyl-visual-v2 .history-ledger td.text-gray-300,
body.vyl-visual-v2 .history-ledger td [class*="text-gray-300"] {
    color: #d5dfe8 !important;
}

body.vyl-visual-v2 .history-ledger td.text-gray-500,
body.vyl-visual-v2 .history-ledger td [class*="text-gray-500"] {
    color: #b5c4d2 !important;
}

body.vyl-visual-v2 .history-ledger td [class*="text-gray-600"] {
    color: #9eafbe !important;
}

body.vyl-visual-v2 .history-ledger td span[class*="text-gray-500"] {
    border-color: rgba(255, 255, 255, 0.16) !important;
    background: rgba(255, 255, 255, 0.085) !important;
}

/* Shared crystal scrollbar for compact layouts and narrow-window overflow. */
body.vyl-visual-v2 .info-content,
body.vyl-visual-v2 .history-page .table-scroll-wrapper,
body.vyl-visual-v2 .history-page .history-ledger > div,
body.vyl-visual-v2 .configuration-content,
body.vyl-visual-v2 .support-conversation {
    scrollbar-width: thin !important;
    scrollbar-color: rgba(190, 207, 222, 0.46) transparent !important;
}

body.vyl-visual-v2 .info-content::-webkit-scrollbar,
body.vyl-visual-v2 .history-page .table-scroll-wrapper::-webkit-scrollbar,
body.vyl-visual-v2 .history-page .history-ledger > div::-webkit-scrollbar,
body.vyl-visual-v2 .configuration-content::-webkit-scrollbar,
body.vyl-visual-v2 .support-conversation::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

body.vyl-visual-v2 .info-content::-webkit-scrollbar-track,
body.vyl-visual-v2 .history-page .table-scroll-wrapper::-webkit-scrollbar-track,
body.vyl-visual-v2 .history-page .history-ledger > div::-webkit-scrollbar-track,
body.vyl-visual-v2 .configuration-content::-webkit-scrollbar-track,
body.vyl-visual-v2 .support-conversation::-webkit-scrollbar-track {
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.025);
}

body.vyl-visual-v2 .info-content::-webkit-scrollbar-thumb,
body.vyl-visual-v2 .history-page .table-scroll-wrapper::-webkit-scrollbar-thumb,
body.vyl-visual-v2 .history-page .history-ledger > div::-webkit-scrollbar-thumb,
body.vyl-visual-v2 .configuration-content::-webkit-scrollbar-thumb,
body.vyl-visual-v2 .support-conversation::-webkit-scrollbar-thumb {
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(205, 220, 233, 0.52), rgba(135, 158, 180, 0.36));
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.22);
}

body.vyl-visual-v2 .info-content::-webkit-scrollbar-thumb:hover,
body.vyl-visual-v2 .history-page .table-scroll-wrapper::-webkit-scrollbar-thumb:hover,
body.vyl-visual-v2 .history-page .history-ledger > div::-webkit-scrollbar-thumb:hover,
body.vyl-visual-v2 .configuration-content::-webkit-scrollbar-thumb:hover,
body.vyl-visual-v2 .support-conversation::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(225, 237, 247, 0.72), rgba(158, 181, 202, 0.52));
}

/* Final end-of-file override for History after all glass/welcome layers. */
body.vyl-visual-v2 .history-header {
    border: 0 !important;
    border-radius: 7px !important;
    background-color: rgba(20, 21, 25, 0.68) !important;
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.018)) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.075),
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 16px 42px rgba(0, 0, 0, 0.16) !important;
}

body.vyl-visual-v2 .history-header select,
body.vyl-visual-v2 .history-header button {
    min-height: 34px;
    border-color: rgba(255, 255, 255, 0.13) !important;
    border-radius: 6px !important;
    background-color: rgba(255, 255, 255, 0.044) !important;
    color: #dbeafe !important;
    font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
    font-size: 12px !important;
    font-weight: 650 !important;
    letter-spacing: 0 !important;
}

body.vyl-visual-v2 .history-stat {
    min-height: 66px;
    border: 0 !important;
    border-radius: 7px !important;
    background-color: rgba(20, 21, 25, 0.6) !important;
    background-image: linear-gradient(150deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.016)) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
}

body.vyl-visual-v2 .history-ledger {
    border: 0 !important;
    border-radius: 7px !important;
    background-color: rgba(15, 16, 20, 0.62) !important;
    background-image: linear-gradient(145deg, rgba(255, 255, 255, 0.046), rgba(255, 255, 255, 0.012)) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.045),
        0 16px 46px rgba(0, 0, 0, 0.16) !important;
}

body.vyl-visual-v2 .history-ledger thead {
    background-color: rgba(12, 14, 19, 0.9) !important;
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

body.vyl-visual-v2 .history-header.glass-hud {
    background-color: rgba(20, 21, 25, 0.68) !important;
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.018)) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.075),
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 16px 42px rgba(0, 0, 0, 0.16) !important;
}

body.vyl-visual-v2 .history-stat.glass-hud {
    background-color: rgba(20, 21, 25, 0.6) !important;
    background-image: linear-gradient(150deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.016)) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
}

body.vyl-visual-v2 .history-ledger.glass-hud {
    background-color: rgba(15, 16, 20, 0.62) !important;
    background-image: linear-gradient(145deg, rgba(255, 255, 255, 0.046), rgba(255, 255, 255, 0.012)) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.045),
        0 16px 46px rgba(0, 0, 0, 0.16) !important;
}

/* History must win after the global floating-glass rules above. */

body.vyl-visual-v2 .history-header h2 {
    color: #edf7ff !important;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 17px !important;
    font-weight: 680 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

/* Final History polish: this must sit after the global floating-glass layer. */
body.vyl-visual-v2 .history-page {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

body.vyl-visual-v2 .history-header {
    border: 0 !important;
    border-radius: 7px !important;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.018)),
        rgba(20, 21, 25, 0.68) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.075),
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 16px 42px rgba(0, 0, 0, 0.16) !important;
}

body.vyl-visual-v2 .history-header h2 {
    color: #edf7ff !important;
    font-size: 17px !important;
    font-weight: 680 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

body.vyl-visual-v2 .history-header select,
body.vyl-visual-v2 .history-header button {
    min-height: 34px;
    border-color: rgba(255, 255, 255, 0.13) !important;
    border-radius: 6px !important;
    background: rgba(255, 255, 255, 0.044) !important;
    color: #dbeafe !important;
    font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
    font-size: 12px !important;
    font-weight: 650 !important;
    letter-spacing: 0 !important;
}

body.vyl-visual-v2 .history-header button:hover {
    border-color: rgba(142, 211, 255, 0.38) !important;
    background: rgba(142, 211, 255, 0.11) !important;
}

body.vyl-visual-v2 .history-stat {
    min-height: 66px;
    border: 0 !important;
    border-radius: 7px !important;
    background:
        linear-gradient(150deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.016)),
        rgba(20, 21, 25, 0.6) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
}

body.vyl-visual-v2 .history-stat > div:first-child {
    color: #9ba8b9 !important;
    font-size: 10px !important;
    font-weight: 650 !important;
    letter-spacing: 0.04em !important;
}

body.vyl-visual-v2 .history-stat > div:nth-child(2) {
    margin-top: 3px;
    font-size: 18px !important;
    font-weight: 720 !important;
    letter-spacing: 0 !important;
}

body.vyl-visual-v2 .history-ledger {
    border: 0 !important;
    border-radius: 7px !important;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.046), rgba(255, 255, 255, 0.012)),
        rgba(15, 16, 20, 0.62) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.045),
        0 16px 46px rgba(0, 0, 0, 0.16) !important;
}

body.vyl-visual-v2 .history-ledger table {
    font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
    font-size: 12px !important;
}

body.vyl-visual-v2 .history-ledger thead {
    background: rgba(12, 14, 19, 0.9) !important;
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

body.vyl-visual-v2 .history-ledger th {
    padding: 9px 8px !important;
    color: #8fa3b8 !important;
    font-size: 10px !important;
    font-weight: 680 !important;
    letter-spacing: 0.04em !important;
}

body.vyl-visual-v2 .history-ledger td {
    padding: 8px !important;
}

body.vyl-visual-v2 .history-ledger tbody tr:hover {
    background: rgba(142, 211, 255, 0.045) !important;
    box-shadow: inset 2px 0 0 rgba(142, 211, 255, 0.3);
}

/* Keep the clock layout and crystal-only window edges above earlier welcome rules. */

@media (max-width: 1320px) {
}

/* Welcome market clocks and neutral crystal window edges. */
body.vyl-visual-v2 .welcome-heading {
    display: grid;
    grid-template-columns: minmax(300px, 1fr) auto auto;
    align-items: center;
}

body.vyl-visual-v2 .welcome-stat.accent-cyan::before,
body.vyl-visual-v2 .welcome-stat.accent-green::before,
body.vyl-visual-v2 .welcome-stat.accent-purple::before,
body.vyl-visual-v2 .welcome-stat.accent-gold::before {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.12));
    box-shadow: 0 0 13px rgba(255, 255, 255, 0.16);
}

body.vyl-visual-v2 .welcome-market-clock {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 286px;
    min-width: 286px;
    height: 76px;
    padding: 4px 10px;
    color: #f2f2f5;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    animation: welcome-clock-enter 520ms cubic-bezier(.2, .8, .2, 1) both;
}

body.vyl-visual-v2 .welcome-market-clock::after {
    content: "";
    position: absolute;
    right: 4px;
    bottom: 0;
    left: 4px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
}

body.vyl-visual-v2 .welcome-clock-copy {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 108px;
}

body.vyl-visual-v2 .welcome-clock-copy > span {
    color: #9797a0;
    font-size: 10px;
    font-weight: 550;
}

body.vyl-visual-v2 .welcome-clock-copy > strong {
    color: #f4f4f6;
    font-size: 17px;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

body.vyl-visual-v2 .welcome-clock-et {
    display: block;
    margin-bottom: 5px;
    color: #b7b7bf;
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

body.vyl-visual-v2 .clock-orbit,
body.vyl-visual-v2 .clock-constellation,
body.vyl-visual-v2 .clock-eclipse,
body.vyl-visual-v2 .clock-candles {
    gap: 14px;
}

body.vyl-visual-v2 .welcome-clock-orbit-dial,
body.vyl-visual-v2 .welcome-clock-constellation-dial,
body.vyl-visual-v2 .welcome-clock-candle-dial {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 66px;
    height: 66px;
    flex: 0 0 66px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.11), inset 0 0 24px rgba(255, 255, 255, 0.018);
}

body.vyl-visual-v2 .welcome-clock-orbit-dial > b,
body.vyl-visual-v2 .welcome-clock-constellation-dial > b,
body.vyl-visual-v2 .welcome-clock-candle-dial > b {
    position: relative;
    z-index: 3;
    color: #ececef;
    font-size: 10px;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

body.vyl-visual-v2 .welcome-clock-orbit-arm,
body.vyl-visual-v2 .welcome-clock-candle-hand {
    position: absolute;
    inset: 0;
    transition: transform 800ms cubic-bezier(.2, .8, .2, 1);
}

body.vyl-visual-v2 .welcome-clock-orbit-arm i {
    position: absolute;
    top: -4px;
    left: 27px;
    width: 13px;
    height: 13px;
    overflow: hidden;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.84);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.26);
}

body.vyl-visual-v2 .welcome-clock-orbit-arm i::after {
    content: "";
    position: absolute;
    top: -1px;
    left: 5px;
    width: 13px;
    height: 15px;
    border-radius: 50%;
    background: #25262d;
}

body.vyl-visual-v2 .welcome-clock-constellation-dial {
    border-radius: 0;
    box-shadow: none;
}

body.vyl-visual-v2 .welcome-clock-constellation-dial svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

body.vyl-visual-v2 .welcome-clock-constellation-dial path {
    fill: none;
    stroke: rgba(255, 255, 255, 0.18);
    stroke-width: 0.8;
}

body.vyl-visual-v2 .welcome-clock-constellation-dial circle {
    fill: rgba(255, 255, 255, 0.7);
    animation: welcome-star-pulse 3s ease-in-out infinite;
}

body.vyl-visual-v2 .welcome-clock-constellation-dial line {
    stroke: rgba(255, 255, 255, 0.78);
    stroke-width: 1.3;
    stroke-linecap: round;
    transform-origin: 40px 40px;
    transition: transform 800ms cubic-bezier(.2, .8, .2, 1);
}

body.vyl-visual-v2 .welcome-clock-eclipse-disc {
    position: relative;
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    overflow: hidden;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 0 22px rgba(255, 255, 255, 0.12), inset -7px -5px 12px rgba(0, 0, 0, 0.18);
}

body.vyl-visual-v2 .welcome-clock-eclipse-disc i {
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    background: #24252b;
    transition: transform 900ms cubic-bezier(.2, .8, .2, 1);
}

body.vyl-visual-v2 .clock-phases {
    flex-direction: column;
    gap: 8px;
}

body.vyl-visual-v2 .welcome-clock-phase-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

body.vyl-visual-v2 .welcome-clock-phase-row i,
body.vyl-visual-v2 .vyl-clock-preview-phases i {
    position: relative;
    display: block;
    width: 19px;
    height: 19px;
    overflow: hidden;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.06);
    opacity: 0.32;
    transition: opacity 200ms ease, transform 220ms cubic-bezier(.2, .8, .2, 1), box-shadow 200ms ease;
}

body.vyl-visual-v2 .welcome-clock-phase-row i::after,
body.vyl-visual-v2 .vyl-clock-preview-phases i::after {
    content: "";
    position: absolute;
    top: -1px;
    width: 20px;
    height: 21px;
    border-radius: 50%;
    background: #25262c;
}

body.vyl-visual-v2 .welcome-clock-phase-row i:nth-child(1)::after,
body.vyl-visual-v2 .vyl-clock-preview-phases i:nth-child(1)::after { left: 1px; }
body.vyl-visual-v2 .welcome-clock-phase-row i:nth-child(2)::after,
body.vyl-visual-v2 .vyl-clock-preview-phases i:nth-child(2)::after { left: 6px; }
body.vyl-visual-v2 .welcome-clock-phase-row i:nth-child(3)::after,
body.vyl-visual-v2 .vyl-clock-preview-phases i:nth-child(3)::after { left: 12px; }
body.vyl-visual-v2 .welcome-clock-phase-row i:nth-child(4)::after,
body.vyl-visual-v2 .vyl-clock-preview-phases i:nth-child(4)::after { display: none; }
body.vyl-visual-v2 .welcome-clock-phase-row i:nth-child(5)::after,
body.vyl-visual-v2 .vyl-clock-preview-phases i:nth-child(5)::after { right: 12px; }
body.vyl-visual-v2 .welcome-clock-phase-row i:nth-child(6)::after,
body.vyl-visual-v2 .vyl-clock-preview-phases i:nth-child(6)::after { right: 6px; }
body.vyl-visual-v2 .welcome-clock-phase-row i:nth-child(7)::after,
body.vyl-visual-v2 .vyl-clock-preview-phases i:nth-child(7)::after { right: 1px; }

body.vyl-visual-v2 .welcome-clock-phase-row i.is-current,
body.vyl-visual-v2 .vyl-clock-preview-phases i.is-current {
    opacity: 1;
    transform: scale(1.18);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.22);
}

body.vyl-visual-v2 .welcome-clock-phase-data {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
}

body.vyl-visual-v2 .welcome-clock-phase-data > b {
    color: #b8b8c0;
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

body.vyl-visual-v2 .welcome-clock-phase-data .welcome-clock-copy {
    display: grid;
    grid-template-columns: auto auto;
    align-items: baseline;
    gap: 7px;
    min-width: 0;
}

body.vyl-visual-v2 .welcome-clock-phase-data .welcome-clock-copy > strong {
    font-size: 15px;
}

body.vyl-visual-v2 .welcome-clock-candle-dial {
    overflow: hidden;
}

body.vyl-visual-v2 .welcome-clock-candle-hand {
    z-index: 4;
}

body.vyl-visual-v2 .welcome-clock-candle-hand::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 32.5px;
    width: 1px;
    height: 30px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.04));
}

body.vyl-visual-v2 .welcome-clock-candle-dial > i {
    position: relative;
    align-self: flex-end;
    width: 2px;
    margin: 0 1px 8px;
    border-radius: 1px;
    background: rgba(255, 255, 255, 0.38);
}

body.vyl-visual-v2 .welcome-clock-candle-dial > b {
    position: absolute;
}

body.vyl-visual-v2 .vyl-personalization-panel {
    width: min(100%, 1080px);
}

body.vyl-visual-v2 .vyl-personalization-subhead {
    margin-top: 20px;
    padding-top: 17px;
    border-top: 1px solid rgba(255, 255, 255, 0.075);
}

body.vyl-visual-v2 .vyl-personalization-subhead h3 {
    margin: 0;
    color: #edf3fb;
    font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
    font-size: 15px;
    font-weight: 650;
}

body.vyl-visual-v2 .vyl-personalization-subhead p {
    margin: 4px 0 0;
    color: #91919a;
    font-size: 11px;
}

body.vyl-visual-v2 .vyl-clock-style-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
}

body.vyl-visual-v2 .vyl-clock-style-option {
    display: grid;
    grid-template-columns: 126px minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    align-items: center;
    gap: 9px 13px;
    min-height: 106px;
    padding: 11px;
    border: 0;
    border-radius: 6px;
    color: #edf3fb;
    background: rgba(255, 255, 255, 0.032);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.045);
    text-align: left;
    cursor: pointer;
    transition: transform 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

body.vyl-visual-v2 .vyl-clock-style-option:hover,
body.vyl-visual-v2 .vyl-clock-style-option.is-selected {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.052);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 12px 28px rgba(0, 0, 0, 0.14);
}

body.vyl-visual-v2 .vyl-clock-preview {
    position: relative;
    display: flex;
    grid-row: 1 / span 2;
    align-items: center;
    justify-content: center;
    width: 126px;
    height: 80px;
    overflow: hidden;
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.18);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.055);
}

body.vyl-visual-v2 .vyl-clock-preview b,
body.vyl-visual-v2 .vyl-clock-preview small {
    position: relative;
    z-index: 3;
    color: #e8e8ec;
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
    font-size: 10px;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

body.vyl-visual-v2 .vyl-clock-preview-orbit > i {
    position: absolute;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.11);
    animation: vyl-clock-preview-orbit 6s linear infinite;
}

body.vyl-visual-v2 .vyl-clock-preview-orbit > i b {
    position: absolute;
    top: -3px;
    left: 24px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 9px rgba(255, 255, 255, 0.24);
}

body.vyl-visual-v2 .vyl-clock-preview-constellation i {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.26);
}
body.vyl-visual-v2 .vyl-clock-preview-constellation i:nth-child(1) { top: 15px; left: 28px; }
body.vyl-visual-v2 .vyl-clock-preview-constellation i:nth-child(2) { top: 28px; left: 53px; }
body.vyl-visual-v2 .vyl-clock-preview-constellation i:nth-child(3) { top: 13px; right: 28px; }
body.vyl-visual-v2 .vyl-clock-preview-constellation i:nth-child(4) { bottom: 17px; left: 36px; }
body.vyl-visual-v2 .vyl-clock-preview-constellation i:nth-child(5) { right: 35px; bottom: 20px; }

body.vyl-visual-v2 .vyl-clock-preview-eclipse > i {
    position: absolute;
    width: 53px;
    height: 53px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.76);
    box-shadow: 0 0 18px rgba(255, 255, 255, 0.12);
}

body.vyl-visual-v2 .vyl-clock-preview-eclipse > i::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    background: #25262c;
    animation: vyl-clock-preview-eclipse 5s ease-in-out infinite alternate;
}

body.vyl-visual-v2 .vyl-clock-preview-eclipse > b { margin-left: 73px; }

body.vyl-visual-v2 .vyl-clock-preview-phases {
    align-content: center;
    flex-wrap: wrap;
    gap: 5px;
    padding: 12px;
}

body.vyl-visual-v2 .vyl-clock-preview-phases i {
    width: 12px;
    height: 12px;
}

body.vyl-visual-v2 .vyl-clock-preview-phases i::after {
    width: 13px;
    height: 14px;
}

body.vyl-visual-v2 .vyl-clock-preview-phases > b {
    width: 100%;
    margin-top: 3px;
    text-align: center;
}

body.vyl-visual-v2 .vyl-clock-preview-candles {
    align-items: flex-end;
    gap: 4px;
    padding: 12px 15px 17px;
}

body.vyl-visual-v2 .vyl-clock-preview-candles > i {
    width: 3px;
    border-radius: 1px;
    background: rgba(255, 255, 255, 0.44);
}
body.vyl-visual-v2 .vyl-clock-preview-candles > i:nth-child(1) { height: 14px; }
body.vyl-visual-v2 .vyl-clock-preview-candles > i:nth-child(2) { height: 24px; }
body.vyl-visual-v2 .vyl-clock-preview-candles > i:nth-child(3) { height: 18px; }
body.vyl-visual-v2 .vyl-clock-preview-candles > i:nth-child(4) { height: 33px; }
body.vyl-visual-v2 .vyl-clock-preview-candles > i:nth-child(5) { height: 27px; }
body.vyl-visual-v2 .vyl-clock-preview-candles > i:nth-child(6) { height: 39px; }
body.vyl-visual-v2 .vyl-clock-preview-candles > b { position: absolute; top: 12px; right: 12px; }

body.vyl-visual-v2 .vyl-clock-style-copy {
    min-width: 0;
}

body.vyl-visual-v2 .vyl-clock-style-copy strong,
body.vyl-visual-v2 .vyl-clock-style-copy small {
    display: block;
}

body.vyl-visual-v2 .vyl-clock-style-copy strong {
    color: #ededf1;
    font-size: 12px;
    font-weight: 650;
}

body.vyl-visual-v2 .vyl-clock-style-copy small {
    margin-top: 4px;
    color: #8e8e98;
    font-size: 10px;
    line-height: 1.35;
}

body.vyl-visual-v2 .vyl-clock-style-state {
    align-self: end;
    justify-self: start;
    color: #9696a0;
    font-size: 9px;
    font-weight: 650;
    text-transform: uppercase;
}

body.vyl-visual-v2 .vyl-clock-style-option.is-selected .vyl-clock-style-state {
    color: #f0f0f2;
}

@keyframes welcome-clock-enter {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes welcome-star-pulse {
    0%, 100% { opacity: 0.35; }
    50% { opacity: 1; }
}

@keyframes vyl-clock-preview-orbit {
    to { transform: rotate(360deg); }
}

@keyframes vyl-clock-preview-eclipse {
    from { transform: translateX(36%); }
    to { transform: translateX(-36%); }
}

@media (max-width: 1320px) {
}

@media (prefers-reduced-motion: reduce) {
    body.vyl-visual-v2 .welcome-market-clock,
    body.vyl-visual-v2 .welcome-clock-constellation-dial circle,
    body.vyl-visual-v2 .vyl-clock-preview-orbit > i,
    body.vyl-visual-v2 .vyl-clock-preview-eclipse > i::after {
        animation: none;
    }
}

/* Market-aware clocks: open feels liquid and moving, closed feels calm and pending. */
body.vyl-visual-v2 .welcome-market-clock,
body.vyl-visual-v2 .vyl-clock-preview {
    --clock-market-glow: rgba(255, 255, 255, 0.13);
    --clock-market-line: rgba(255, 255, 255, 0.34);
    --clock-market-fill: rgba(255, 255, 255, 0.72);
}

body.vyl-visual-v2 .welcome-market-clock.is-market-open,
body.vyl-visual-v2 .vyl-clock-preview.is-market-open {
    --clock-market-glow: rgba(54, 236, 166, 0.34);
    --clock-market-line: rgba(70, 244, 177, 0.82);
    --clock-market-fill: rgba(211, 255, 236, 0.9);
}

body.vyl-visual-v2 .welcome-market-clock.is-market-closed,
body.vyl-visual-v2 .vyl-clock-preview.is-market-closed {
    --clock-market-glow: rgba(132, 176, 255, 0.2);
    --clock-market-line: rgba(170, 196, 255, 0.48);
    --clock-market-fill: rgba(226, 234, 255, 0.78);
}

body.vyl-visual-v2 .welcome-market-clock::before,
body.vyl-visual-v2 .vyl-clock-preview::before {
    content: none;
}

body.vyl-visual-v2 .welcome-market-clock.is-market-open::before,
body.vyl-visual-v2 .vyl-clock-preview.is-market-open::before {
    animation: none;
}

body.vyl-visual-v2 .welcome-market-clock.is-market-closed::before,
body.vyl-visual-v2 .vyl-clock-preview.is-market-closed::before {
    animation: none;
}

body.vyl-visual-v2 .welcome-market-clock.is-opening-bell .welcome-clock-copy > span,
body.vyl-visual-v2 .welcome-market-clock.is-power-hour .welcome-clock-copy > span {
    color: #dfffee;
}

body.vyl-visual-v2 .welcome-market-clock.is-market-open .welcome-clock-copy > strong {
    text-shadow: 0 0 14px rgba(74, 248, 180, 0.23);
}

body.vyl-visual-v2 .welcome-market-clock.is-market-closed .welcome-clock-copy > strong {
    text-shadow: 0 0 13px rgba(150, 182, 255, 0.14);
}

body.vyl-visual-v2 .welcome-market-clock.is-market-open .welcome-clock-orbit-dial,
body.vyl-visual-v2 .welcome-market-clock.is-market-open .welcome-clock-candle-dial {
    box-shadow:
        inset 0 0 0 1px rgba(199, 255, 232, 0.18),
        inset 0 0 24px rgba(54, 236, 166, 0.045),
        0 0 20px rgba(54, 236, 166, 0.08);
}

body.vyl-visual-v2 .welcome-market-clock.is-market-open .welcome-clock-orbit-arm i,
body.vyl-visual-v2 .welcome-market-clock.is-market-open .welcome-clock-phase-row i.is-current,
body.vyl-visual-v2 .vyl-clock-preview.is-market-open.vyl-clock-preview-phases i.is-current {
    background: var(--clock-market-fill);
    box-shadow: 0 0 16px rgba(70, 244, 177, 0.36);
    animation: vyl-market-pulse-open 1.65s ease-in-out infinite;
}

body.vyl-visual-v2 .welcome-market-clock.is-market-closed .welcome-clock-orbit-arm i,
body.vyl-visual-v2 .welcome-market-clock.is-market-closed .welcome-clock-phase-row i.is-current,
body.vyl-visual-v2 .vyl-clock-preview.is-market-closed.vyl-clock-preview-phases i.is-current {
    background: var(--clock-market-fill);
    box-shadow: 0 0 13px rgba(150, 182, 255, 0.2);
    animation: vyl-market-pulse-closed 3.8s ease-in-out infinite;
}

body.vyl-visual-v2 .welcome-market-clock.is-market-open .welcome-clock-constellation-dial path {
    stroke: rgba(99, 250, 190, 0.35);
    stroke-dasharray: 4 7;
    animation: vyl-market-constellation-flow 3.2s linear infinite;
}

body.vyl-visual-v2 .welcome-market-clock.is-market-open .welcome-clock-constellation-dial circle,
body.vyl-visual-v2 .vyl-clock-preview.is-market-open.vyl-clock-preview-constellation i {
    background: rgba(134, 255, 211, 0.88);
    fill: rgba(134, 255, 211, 0.9);
    box-shadow: 0 0 12px rgba(70, 244, 177, 0.36);
    animation: vyl-market-depth-open 1.8s ease-in-out infinite;
}

body.vyl-visual-v2 .welcome-market-clock.is-market-closed .welcome-clock-constellation-dial circle,
body.vyl-visual-v2 .vyl-clock-preview.is-market-closed.vyl-clock-preview-constellation i {
    animation-duration: 4.6s;
    opacity: 0.46;
}

body.vyl-visual-v2 .welcome-market-clock.is-market-open .welcome-clock-eclipse-disc,
body.vyl-visual-v2 .vyl-clock-preview.is-market-open.vyl-clock-preview-eclipse > i {
    background: rgba(216, 255, 238, 0.86);
    box-shadow: 0 0 22px rgba(70, 244, 177, 0.22), inset -7px -5px 12px rgba(0, 0, 0, 0.16);
    animation: vyl-market-eclipse-open 2.2s ease-in-out infinite;
}

body.vyl-visual-v2 .welcome-market-clock.is-market-closed .welcome-clock-eclipse-disc,
body.vyl-visual-v2 .vyl-clock-preview.is-market-closed.vyl-clock-preview-eclipse > i {
    animation: vyl-market-eclipse-closed 5.2s ease-in-out infinite;
}

body.vyl-visual-v2 .welcome-market-clock.is-market-open .welcome-clock-candle-dial > i,
body.vyl-visual-v2 .vyl-clock-preview.is-market-open.vyl-clock-preview-candles > i {
    background: linear-gradient(180deg, rgba(110, 255, 199, 0.92), rgba(53, 214, 149, 0.36));
    box-shadow: 0 0 9px rgba(70, 244, 177, 0.18);
    transform-origin: bottom;
    animation: vyl-market-candle-open 1.25s ease-in-out infinite;
}

body.vyl-visual-v2 .welcome-market-clock.is-market-closed .welcome-clock-candle-dial > i,
body.vyl-visual-v2 .vyl-clock-preview.is-market-closed.vyl-clock-preview-candles > i {
    background: rgba(196, 210, 255, 0.38);
    transform-origin: bottom;
    animation: vyl-market-candle-closed 3.8s ease-in-out infinite;
}

body.vyl-visual-v2 .welcome-clock-candle-dial > i:nth-of-type(2),
body.vyl-visual-v2 .vyl-clock-preview-candles > i:nth-of-type(2) { animation-delay: -0.22s; }
body.vyl-visual-v2 .welcome-clock-candle-dial > i:nth-of-type(3),
body.vyl-visual-v2 .vyl-clock-preview-candles > i:nth-of-type(3) { animation-delay: -0.44s; }
body.vyl-visual-v2 .welcome-clock-candle-dial > i:nth-of-type(4),
body.vyl-visual-v2 .vyl-clock-preview-candles > i:nth-of-type(4) { animation-delay: -0.66s; }
body.vyl-visual-v2 .welcome-clock-candle-dial > i:nth-of-type(5),
body.vyl-visual-v2 .vyl-clock-preview-candles > i:nth-of-type(5) { animation-delay: -0.88s; }
body.vyl-visual-v2 .welcome-clock-candle-dial > i:nth-of-type(6),
body.vyl-visual-v2 .vyl-clock-preview-candles > i:nth-of-type(6) { animation-delay: -1.1s; }

body.vyl-visual-v2 .vyl-clock-preview em {
    position: absolute;
    top: 7px;
    left: 8px;
    z-index: 4;
    color: rgba(232, 236, 246, 0.62);
    font-size: 8px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

body.vyl-visual-v2 .vyl-clock-preview.is-market-open em {
    color: rgba(202, 255, 231, 0.78);
}

body.vyl-visual-v2 .vyl-clock-preview-phases em {
    top: auto;
    bottom: 7px;
}

@keyframes vyl-market-pulse-open {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.18); }
}

@keyframes vyl-market-pulse-closed {
    0%, 100% { opacity: 0.72; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.08); }
}

@keyframes vyl-market-constellation-flow {
    to { stroke-dashoffset: -22; }
}

@keyframes vyl-market-depth-open {
    0%, 100% { opacity: 0.5; transform: scale(0.92); }
    50% { opacity: 1; transform: scale(1.18); }
}

@keyframes vyl-market-eclipse-open {
    0%, 100% { filter: brightness(1); transform: scale(1); }
    50% { filter: brightness(1.14); transform: scale(1.045); }
}

@keyframes vyl-market-eclipse-closed {
    0%, 100% { filter: brightness(0.86); transform: scale(0.985); }
    50% { filter: brightness(1); transform: scale(1.015); }
}

@keyframes vyl-market-candle-open {
    0%, 100% { transform: scaleY(0.86); opacity: 0.72; }
    50% { transform: scaleY(1.12); opacity: 1; }
}

@keyframes vyl-market-candle-closed {
    0%, 100% { transform: scaleY(0.92); opacity: 0.48; }
    50% { transform: scaleY(1); opacity: 0.72; }
}

@media (prefers-reduced-motion: reduce) {
    body.vyl-visual-v2 .welcome-market-clock::before,
    body.vyl-visual-v2 .vyl-clock-preview::before,
    body.vyl-visual-v2 .welcome-market-clock.is-market-open .welcome-clock-orbit-arm i,
    body.vyl-visual-v2 .welcome-market-clock.is-market-closed .welcome-clock-orbit-arm i,
    body.vyl-visual-v2 .welcome-market-clock.is-market-open .welcome-clock-phase-row i.is-current,
    body.vyl-visual-v2 .welcome-market-clock.is-market-closed .welcome-clock-phase-row i.is-current,
    body.vyl-visual-v2 .welcome-market-clock.is-market-open .welcome-clock-constellation-dial path,
    body.vyl-visual-v2 .welcome-market-clock.is-market-open .welcome-clock-constellation-dial circle,
    body.vyl-visual-v2 .welcome-market-clock.is-market-open .welcome-clock-eclipse-disc,
    body.vyl-visual-v2 .welcome-market-clock.is-market-closed .welcome-clock-eclipse-disc,
    body.vyl-visual-v2 .welcome-market-clock.is-market-open .welcome-clock-candle-dial > i,
    body.vyl-visual-v2 .welcome-market-clock.is-market-closed .welcome-clock-candle-dial > i,
    body.vyl-visual-v2 .vyl-clock-preview.is-market-open *,
    body.vyl-visual-v2 .vyl-clock-preview.is-market-closed * {
        animation: none !important;
    }
}

/* Welcome dashboard v4: same crystal recipe used by VylMoon Signals. */
body.vyl-visual-v2 .welcome-page {
    --welcome-surface: rgba(255, 255, 255, 0.034);
    --welcome-surface-hover: rgba(255, 255, 255, 0.052);
    --welcome-border: rgba(255, 255, 255, 0.055);
    --welcome-border-hover: rgba(255, 255, 255, 0.105);
}

body.vyl-visual-v2 .welcome-stat,
body.vyl-visual-v2 .welcome-panel {
    border: 0 !important;
    background: var(--welcome-surface) !important;
    box-shadow:
        0 15px 38px rgba(0, 0, 0, 0.16),
        inset 0 0 0 1px var(--welcome-border),
        inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
    -webkit-backdrop-filter: blur(24px) saturate(118%) !important;
    backdrop-filter: blur(24px) saturate(118%) !important;
}

body.vyl-visual-v2 .welcome-stat:hover,
body.vyl-visual-v2 .welcome-panel:hover {
    border: 0 !important;
    background: var(--welcome-surface-hover) !important;
    box-shadow:
        0 20px 46px rgba(0, 0, 0, 0.2),
        inset 0 0 0 1px var(--welcome-border-hover),
        inset 0 1px 0 rgba(255, 255, 255, 0.075) !important;
}

body.vyl-visual-v2 .welcome-market-pill {
    border: 0;
    background: rgba(255, 255, 255, 0.038);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.055);
    -webkit-backdrop-filter: blur(24px) saturate(118%);
    backdrop-filter: blur(24px) saturate(118%);
}

body.vyl-visual-v2 .welcome-market-pill:hover {
    border: 0;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.19), inset 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.075);
}

body.vyl-visual-v2 .welcome-privacy-button:hover,
body.vyl-visual-v2 .welcome-icon-button:hover,
body.vyl-visual-v2 .welcome-privacy-button.is-active {
    border: 0;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16), inset 0 0 0 1px rgba(169, 136, 255, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
body.vyl-visual-v2 .welcome-watch-price b { font-size: 10px; }
body.vyl-visual-v2 .welcome-position-symbol span,
body.vyl-visual-v2 .welcome-position-contract strong,
body.vyl-visual-v2 .welcome-position-contract span,
body.vyl-visual-v2 .welcome-position-value span,
body.vyl-visual-v2 .welcome-position-value b { font-size: 10px; }
body.vyl-visual-v2 .welcome-empty-state span { font-size: 10px; }

@media (max-width: 767px) {
    body.vyl-visual-v2 {
        --vyl-sidebar-width: 228px;
    }

    body.vyl-visual-v2 #root {
        padding: 0;
        gap: 0;
    }

    body.vyl-visual-v2 .dashboard-page {
        padding: 0.75rem !important;
    }

    body.vyl-visual-v2 .dashboard-topbar {
        min-height: auto;
        padding: 8px !important;
    }
}


/* ── Selector de cuenta del broker (2026-09-02) ──────────────────────────────
   Vive en la tarjeta "Broker conectado" de Inicio. Se escribe aqui, con los
   mismos tokens que `.welcome-stat`, porque la primera version llevaba colores
   a pelo (#0b1020, #00d2ff) del estilo ANTIGUO y desentonaba con la tarjeta que
   lo contiene.

   El menu se pinta con un portal a `document.body`: la tarjeta tiene
   `overflow:hidden` Y un `transform`, asi que ni `absolute` ni `fixed` escapan
   desde dentro. Por eso estas reglas no pueden colgar de `.welcome-stat`. */
.vyl-acct-btn {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: default;
    border-bottom: 1px dashed transparent;
}
.vyl-acct-btn.is-switchable {
    cursor: pointer;
    border-bottom-color: var(--welcome-border-hover, rgba(255, 255, 255, 0.145));
}
.vyl-acct-btn.is-switchable:hover { color: #fff; }
.vyl-acct-btn[disabled] { opacity: 0.55; }

.vyl-acct-menu {
    display: flex;
    flex-direction: column;
    min-width: 156px;
    padding: 4px 0;
    border-radius: 6px;
    border: 1px solid var(--welcome-border, rgba(255, 255, 255, 0.085));
    background: var(--welcome-surface, rgba(27, 27, 31, 0.42));
    -webkit-backdrop-filter: blur(30px) saturate(132%);
    backdrop-filter: blur(30px) saturate(132%);
    box-shadow:
        0 18px 46px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.085);
}
.vyl-acct-item {
    background: none;
    border: 0;
    text-align: left;
    padding: 7px 12px;
    font-family: inherit;
    font-size: 12px;
    letter-spacing: 0.02em;
    color: var(--welcome-muted, #a7a7b0);
    cursor: pointer;
}
.vyl-acct-item:hover { background: var(--welcome-surface-hover, rgba(34, 34, 39, 0.52)); color: #fff; }
.vyl-acct-item.is-active { color: #fff; font-weight: 600; }
.vyl-acct-mark { display: inline-block; width: 12px; color: var(--welcome-dim, #85858f); }
.vyl-acct-item.is-active .vyl-acct-mark { color: #fff; }
/* Phase 5: one floating-glass system for every application window */
body.vyl-visual-v2 {
    --vyl-v2-glass: rgba(255, 255, 255, 0.052);
    --vyl-v2-glass-hover: rgba(255, 255, 255, 0.076);
    --vyl-v2-glass-inset: rgba(255, 255, 255, 0.045);
    --vyl-v2-glass-deep: rgba(255, 255, 255, 0.058);
    --vyl-v2-glass-line: rgba(255, 255, 255, 0.075);
    --vyl-v2-glass-radius: 6px;
    --vyl-v2-surface: var(--vyl-v2-glass);
    --vyl-v2-surface-soft: var(--vyl-v2-glass);
}

body.vyl-visual-v2 .app-shell-layout {
    min-width: 0;
    gap: var(--vyl-v2-gap);
}

body.vyl-visual-v2 .vyl-sidebar,
body.vyl-visual-v2 .glass-hud,
body.vyl-visual-v2 .configuration-header,
body.vyl-visual-v2 .configuration-tabs-strip,
body.vyl-visual-v2 .configuration-layout,
body.vyl-visual-v2 .info-tabs-strip,
body.vyl-visual-v2 .info-content,
body.vyl-visual-v2 .support-header,
body.vyl-visual-v2 .support-workspace,
body.vyl-visual-v2 .strategy-picker-page .sp-panel,
body.vyl-visual-v2 .strategy-picker-page .sp-quote {
    border: 0 !important;
    border-radius: var(--vyl-v2-glass-radius) !important;
    background: var(--vyl-v2-glass) !important;
    -webkit-backdrop-filter: blur(24px) saturate(118%) !important;
    backdrop-filter: blur(24px) saturate(118%) !important;
    box-shadow: inset 0 0 0 1px var(--vyl-v2-glass-line) !important;
}

body.vyl-visual-v2 .vyl-sidebar {
    border-radius: 2px !important;
}

body.vyl-visual-v2 .configuration-page,
body.vyl-visual-v2 .info-page,
body.vyl-visual-v2 .support-page,
body.vyl-visual-v2 .history-page,
body.vyl-visual-v2 .account-page,
body.vyl-visual-v2 .settings-page,
body.vyl-visual-v2 .subscription-page,
body.vyl-visual-v2 .strategy-picker-page,
body.vyl-visual-v2 .dashboard-primary-column,
body.vyl-visual-v2 .dashboard-workspace {
    background: transparent !important;
}

body.vyl-visual-v2 .dashboard-workspace {
    padding: 0 !important;
    border: 0 !important;
}

body.vyl-visual-v2 .dashboard-primary-column {
    border: 0 !important;
}

body.vyl-visual-v2 .dashboard-monitor,
body.vyl-visual-v2 .positions-orders-panel,
body.vyl-visual-v2 .dashboard-dock-panel,
body.vyl-visual-v2 .dashboard-panel-rail,
body.vyl-visual-v2 .dashboard-tickerbar,
body.vyl-visual-v2 .dashboard-topbar {
    background: var(--vyl-v2-glass) !important;
    -webkit-backdrop-filter: blur(24px) saturate(118%) !important;
    backdrop-filter: blur(24px) saturate(118%) !important;
    box-shadow: inset 0 0 0 1px var(--vyl-v2-glass-line) !important;
}

body.vyl-visual-v2 .vyl-manual-entry-card,
body.vyl-visual-v2 .vyl-config-card,
body.vyl-visual-v2 .vyl-exit-mode-panel,
body.vyl-visual-v2 .vyl-exit-workspace,
body.vyl-visual-v2 .info-content .glass-hud,
body.vyl-visual-v2 .info-content .bg-dark\/30,
body.vyl-visual-v2 .support-report-panel,
body.vyl-visual-v2 .support-conversation,
body.vyl-visual-v2 .support-composer,
body.vyl-visual-v2 .support-case-bar,
body.vyl-visual-v2 .sp-leg,
body.vyl-visual-v2 .sp-control {
    border-color: transparent !important;
    border-radius: 5px !important;
    background: var(--vyl-v2-glass-inset) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035) !important;
}

body.vyl-visual-v2 .vyl-manual-entry-card:hover,
body.vyl-visual-v2 .vyl-config-card:hover,
body.vyl-visual-v2 .info-content .bg-dark\/30:hover {
    background: var(--vyl-v2-glass-hover) !important;
}

body.vyl-visual-v2 .account-page [class*="bg-black/30"],
body.vyl-visual-v2 .settings-page [class*="bg-black/30"],
body.vyl-visual-v2 .subscription-page [class*="bg-black/30"] {
    background: var(--vyl-v2-glass) !important;
}

body.vyl-visual-v2 .strategy-picker-page .sp-panel-2,
body.vyl-visual-v2 .strategy-picker-page .sp-column-config-panel,
body.vyl-visual-v2 .strategy-picker-page .sp-cost {
    background: var(--vyl-v2-glass-inset) !important;
}

@media (min-width: 768px) {
    body.vyl-visual-v2 .configuration-page,
    body.vyl-visual-v2 .info-page,
    body.vyl-visual-v2 .support-page,
    body.vyl-visual-v2 .history-page,
    body.vyl-visual-v2 .account-page,
    body.vyl-visual-v2 .settings-page,
    body.vyl-visual-v2 .subscription-page {
        padding: 0 !important;
    }

    body.vyl-visual-v2 .configuration-header,
    body.vyl-visual-v2 .configuration-tabs-strip,
    body.vyl-visual-v2 .info-tabs-strip,
    body.vyl-visual-v2 .support-header,
    body.vyl-visual-v2 .history-header,
    body.vyl-visual-v2 .account-page > .glass-hud,
    body.vyl-visual-v2 .settings-page > .glass-hud {
        margin-bottom: var(--vyl-v2-gap) !important;
    }

    body.vyl-visual-v2 .configuration-layout,
    body.vyl-visual-v2 .info-content {
        min-height: 0;
        padding: 8px !important;
        overflow-x: hidden;
    }

    body.vyl-visual-v2 .configuration-header,
    body.vyl-visual-v2 .configuration-tabs-strip,
    body.vyl-visual-v2 .configuration-layout,
    body.vyl-visual-v2 .configuration-content-inner {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    body.vyl-visual-v2 .configuration-content {
        padding-right: 0 !important;
    }

    body.vyl-visual-v2 .info-content > * + * {
        margin-top: var(--vyl-v2-gap) !important;
    }

    body.vyl-visual-v2 .account-page > div:last-child,
    body.vyl-visual-v2 .settings-page main > div,
    body.vyl-visual-v2 .subscription-page > div {
        gap: var(--vyl-v2-gap) !important;
    }

    body.vyl-visual-v2 .account-page .space-y-4 > :not([hidden]) ~ :not([hidden]),
    body.vyl-visual-v2 .subscription-page .space-y-4 > :not([hidden]) ~ :not([hidden]),
    body.vyl-visual-v2 .subscription-page .sm\:space-y-5 > :not([hidden]) ~ :not([hidden]) {
        margin-top: var(--vyl-v2-gap) !important;
    }

    body.vyl-visual-v2 .history-stats {
        gap: var(--vyl-v2-gap) !important;
        margin-bottom: var(--vyl-v2-gap) !important;
    }

    body.vyl-visual-v2 .strategy-picker-page .sp-quote {
        margin-bottom: var(--vyl-v2-gap) !important;
    }

    body.vyl-visual-v2 .strategy-picker-page .sp-layout {
        gap: var(--vyl-v2-gap) !important;
    }
}

/* Phase 6: aligned command bars and self-contained trading windows */
@media (min-width: 768px) {
    body.vyl-visual-v2 .dashboard-page header.dashboard-topbar.glass-hud,
    body.vyl-visual-v2 .dashboard-page nav.dashboard-tickerbar.glass-hud {
        border: 0 !important;
        background: var(--vyl-v2-glass) !important;
        box-shadow: inset 0 0 0 1px var(--vyl-v2-glass-line) !important;
    }

    body.vyl-visual-v2 .dashboard-page header.dashboard-topbar.glass-hud {
        height: 50px;
        min-height: 50px;
        padding: 0 9px !important;
    }

    body.vyl-visual-v2 .dashboard-page .dashboard-info-layout {
        width: 100%;
        height: 50px;
        min-height: 50px;
        gap: 14px !important;
        align-items: center !important;
    }

    body.vyl-visual-v2 .dashboard-page .dashboard-info-metrics {
        height: 34px;
        gap: 15px !important;
        align-items: center !important;
    }

    body.vyl-visual-v2 .dashboard-page .dashboard-account-metrics,
    body.vyl-visual-v2 .dashboard-page .dashboard-topbar .dashboard-account-metrics.bg-black\/20 {
        display: grid !important;
        grid-template-columns: 80px 96px 96px;
        height: 34px;
        gap: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        filter: none !important;
    }

    body.vyl-visual-v2 .dashboard-page .dashboard-account-metrics > div,
    body.vyl-visual-v2 .dashboard-page .dashboard-performance-metric {
        min-width: 0;
        height: 34px;
        align-items: flex-start !important;
        justify-content: center;
        text-align: left !important;
    }

    body.vyl-visual-v2 .dashboard-page .dashboard-performance-metric {
        width: 62px;
        flex: 0 0 62px;
    }

    body.vyl-visual-v2 .dashboard-page .dashboard-topbar .text-\[10px\],
    body.vyl-visual-v2 .dashboard-page .dashboard-performance-metric > span:first-child {
        min-height: 13px;
        margin: 0 !important;
        color: #92929b !important;
        font-size: 11px !important;
        font-weight: 520 !important;
        line-height: 13px !important;
        letter-spacing: 0 !important;
        text-align: left !important;
        text-shadow: none !important;
        text-transform: none !important;
    }

    body.vyl-visual-v2 .dashboard-page .dashboard-topbar .text-sm,
    body.vyl-visual-v2 .dashboard-page .dashboard-performance-metric > span:last-child {
        min-height: 16px;
        margin: 2px 0 0 !important;
        font-size: 13px !important;
        line-height: 16px !important;
        letter-spacing: 0 !important;
        text-align: left !important;
        text-shadow: none !important;
    }

    body.vyl-visual-v2 .dashboard-page .dashboard-info-actions {
        height: 34px;
        gap: 7px !important;
        align-items: center !important;
    }

    body.vyl-visual-v2 .dashboard-page .dashboard-info-actions > button,
    body.vyl-visual-v2 .dashboard-page .dashboard-connection-status {
        display: inline-flex;
        height: 34px;
        min-height: 34px;
        align-items: center;
        justify-content: center;
        margin: 0 !important;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035) !important;
        text-shadow: none !important;
    }

    body.vyl-visual-v2 .dashboard-page .dashboard-connection-status {
        min-width: 94px;
    }

    body.vyl-visual-v2 .dashboard-page nav.dashboard-tickerbar.glass-hud {
        height: 44px;
        min-height: 44px;
        padding: 5px !important;
        border-radius: 6px !important;
        align-items: center;
    }
}

body.vyl-visual-v2 .dashboard-panel-rail,
body.vyl-visual-v2 .dashboard-dock-toggle {
    display: none !important;
}

body.vyl-visual-v2 .dashboard-dock-panel {
    transition: flex-basis 180ms ease, width 180ms ease, min-width 180ms ease, background-color 160ms ease;
}

body.vyl-visual-v2 .dashboard-dock-panel-header {
    height: 50px;
    min-height: 50px;
    padding: 0 10px !important;
    background: rgba(255, 255, 255, 0.018) !important;
}

body.vyl-visual-v2 .dashboard-dock-panel-header h3 {
    min-width: 0;
    gap: 8px !important;
    color: #ededf0 !important;
    font-size: 14px !important;
    font-weight: 650 !important;
    letter-spacing: 0 !important;
}

body.vyl-visual-v2 .dashboard-dock-panel-header h3 > svg {
    width: 26px !important;
    height: 26px !important;
    flex: 0 0 26px;
    padding: 6px;
    border-radius: 5px;
    color: #b8a5ff;
    background: rgba(137, 92, 246, 0.14);
    box-shadow: inset 0 0 0 1px rgba(169, 136, 255, 0.18), 0 0 14px rgba(137, 92, 246, 0.08);
}

body.vyl-visual-v2 .dashboard-panel-configSalida .dashboard-dock-panel-header h3 > svg {
    color: #ffad72;
    background: rgba(255, 145, 75, 0.11);
    box-shadow: inset 0 0 0 1px rgba(255, 145, 75, 0.18), 0 0 14px rgba(255, 145, 75, 0.07);
}

body.vyl-visual-v2 .dashboard-panel-minimize-button {
    width: 28px;
    height: 28px;
    display: grid;
    flex: 0 0 28px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 4px;
    color: #85858e;
    background: transparent;
    box-shadow: none !important;
    font-size: 16px;
    line-height: 1;
}

body.vyl-visual-v2 .dashboard-panel-minimize-button:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
}

body.vyl-visual-v2 .dashboard-panel-minimize-button:focus,
body.vyl-visual-v2 .dashboard-panel-minimize-button:focus-visible {
    outline: none !important;
    box-shadow: inset 0 0 0 1px rgba(169, 136, 255, 0.28) !important;
}

body.vyl-visual-v2 .dashboard-dock-panel.is-minimized::before {
    display: none;
}

body.vyl-visual-v2 .dashboard-dock-panel.is-minimized .dashboard-dock-panel-header {
    height: 100%;
    min-height: 100%;
    flex-direction: column;
    justify-content: flex-start;
    gap: 8px;
    padding: 8px 4px !important;
    border: 0 !important;
}

body.vyl-visual-v2 .dashboard-dock-panel.is-minimized .dashboard-dock-panel-header h3 {
    min-width: 26px;
    gap: 0 !important;
}

body.vyl-visual-v2 .dashboard-dock-panel.is-minimized .dashboard-dock-panel-header h3 > span {
    display: none;
}

body.vyl-visual-v2 .dashboard-dock-panel.is-minimized .dashboard-panel-minimize-button {
    color: #cabdff;
    background: rgba(137, 92, 246, 0.12);
    box-shadow: inset 0 0 0 1px rgba(169, 136, 255, 0.32) !important;
}

body.vyl-visual-v2 .dashboard-panel-configSalida.is-minimized .dashboard-panel-minimize-button {
    color: #ffad72;
    background: rgba(255, 145, 75, 0.1);
    box-shadow: inset 0 0 0 1px rgba(255, 145, 75, 0.28) !important;
}

body.vyl-visual-v2 .dashboard-dock-panel.is-minimized .dashboard-dock-panel-body {
    display: none !important;
}

body.vyl-visual-v2 .vyl-sidebar-brand {
    padding-right: 5px;
    padding-left: 7px;
}

body.vyl-visual-v2 .vyl-sidebar-brand-mark {
    width: 40px;
    flex: 0 0 40px;
    gap: 4px;
    padding: 0;
}

body.vyl-visual-v2 .vyl-sidebar-logo-icon {
    width: 28px;
    height: 28px;
}

body.vyl-visual-v2 .vyl-sidebar-logo-full {
    width: 64px;
}

body.vyl-visual-v2 .vyl-sidebar-header-actions {
    gap: 1px;
}

body.vyl-visual-v2 .vyl-sidebar-icon-button {
    width: 27px;
    height: 30px;
    flex: 0 0 27px;
}

body.vyl-visual-v2 .vyl-user-session-note {
    padding-bottom: 9px;
}

body.vyl-visual-v2 .vyl-user-logoff-button {
    width: calc(100% - 28px);
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 14px 14px;
    border: 0;
    border-radius: 5px;
    color: #ff8798;
    background: rgba(255, 88, 111, 0.075);
    box-shadow: inset 0 0 0 1px rgba(255, 88, 111, 0.16);
    font-size: 10px;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

body.vyl-visual-v2 .vyl-user-logoff-button:hover {
    color: #fff;
    background: rgba(255, 88, 111, 0.14);
    box-shadow: inset 0 0 0 1px rgba(255, 88, 111, 0.25), 0 8px 20px rgba(255, 88, 111, 0.08);
}

body.vyl-visual-v2 .vyl-user-logoff-glyph {
    width: 13px;
    height: 13px;
    position: relative;
    border: 1px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
}

body.vyl-visual-v2 .vyl-user-logoff-glyph::after {
    content: "";
    position: absolute;
    top: 2px;
    right: -3px;
    width: 7px;
    height: 1px;
    background: currentColor;
    transform: rotate(45deg);
    transform-origin: right center;
}
/* Welcome dashboard ------------------------------------------------------- */
body.vyl-visual-v2 .welcome-page {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    /* SIN `min-width: 980px`.
       BUG REAL (2026-08-24): ese minimo forzaba la pagina a 980px pasara lo que
       pasara. En un monitor pequeno el contenedor (`.app-main-surface`) tiene
       `overflow-x: hidden`, asi que la parte que sobraba NO se podia ver ni
       alcanzar con scroll: simplemente se recortaba. Medido a 640px de ancho, el
       tablero salia 920px y la columna derecha de widgets quedaba invisible.
       Sin el minimo, la rejilla se adapta y los widgets pasan a una sola columna
       (ver los breakpoints de 160-welcome-widgets.css). */
    color: #edf4fb;
    background: transparent;
}

body.vyl-visual-v2 .welcome-scroll {
    width: 100%;
    height: 100%;
    padding: 24px 28px 36px;
    overflow: auto;
}

body.vyl-visual-v2 .welcome-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    max-width: 1640px;
    margin: 0 auto 18px;
}

body.vyl-visual-v2 .welcome-eyebrow {
    margin: 0 0 5px;
    color: #73a8ff;
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0;
}

body.vyl-visual-v2 .welcome-heading h1 {
    margin: 0;
    color: #f7fbff;
    font-family: "Outfit", sans-serif;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: 0;
}

body.vyl-visual-v2 .welcome-date {
    margin: 5px 0 0;
    color: #7f91a6;
    font-size: 12px;
    text-transform: capitalize;
}

body.vyl-visual-v2 .welcome-heading-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

body.vyl-visual-v2 .welcome-market-pill {
    display: flex;
    align-items: center;
    min-width: 218px;
    height: 54px;
    padding: 0 16px;
    border: 1px solid rgba(126, 151, 184, 0.25);
    border-radius: 6px;
    background: rgba(10, 17, 29, 0.72);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.23), inset 0 0 0 1px rgba(255, 255, 255, 0.025);
    -webkit-backdrop-filter: blur(22px) saturate(118%);
    backdrop-filter: blur(22px) saturate(118%);
}

body.vyl-visual-v2 .welcome-market-dot {
    width: 8px;
    height: 8px;
    margin-right: 11px;
    border-radius: 50%;
    background: #8793a2;
    box-shadow: 0 0 0 5px rgba(135, 147, 162, 0.1);
}

body.vyl-visual-v2 .welcome-market-pill.phase-open .welcome-market-dot {
    background: #33d69f;
    box-shadow: 0 0 0 5px rgba(51, 214, 159, 0.1), 0 0 18px rgba(51, 214, 159, 0.38);
}

body.vyl-visual-v2 .welcome-market-pill.phase-premarket .welcome-market-dot {
    background: #e7ba62;
    box-shadow: 0 0 0 5px rgba(231, 186, 98, 0.1);
}

body.vyl-visual-v2 .welcome-market-pill strong,
body.vyl-visual-v2 .welcome-market-pill small {
    display: block;
}

body.vyl-visual-v2 .welcome-market-pill strong {
    color: #eaf3fb;
    font-size: 12px;
    font-weight: 700;
}

body.vyl-visual-v2 .welcome-market-pill small {
    margin-top: 2px;
    color: #778a9f;
    font-family: "JetBrains Mono", monospace;
    font-size: 9px;
}

body.vyl-visual-v2 .welcome-privacy-button,
body.vyl-visual-v2 .welcome-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border: 1px solid rgba(126, 151, 184, 0.24);
    color: #8fa3b8;
    background: rgba(10, 17, 29, 0.66);
    cursor: pointer;
    transition: color 150ms ease, border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

body.vyl-visual-v2 .welcome-privacy-button {
    width: 54px;
    height: 54px;
    border-radius: 6px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.2);
}

body.vyl-visual-v2 .welcome-icon-button {
    width: 30px;
    height: 30px;
    border-radius: 5px;
}

body.vyl-visual-v2 .welcome-privacy-button:hover,
body.vyl-visual-v2 .welcome-icon-button:hover,
body.vyl-visual-v2 .welcome-privacy-button.is-active {
    border-color: rgba(115, 168, 255, 0.5);
    color: #9ec7ff;
    background: rgba(115, 168, 255, 0.09);
    box-shadow: 0 0 18px rgba(115, 168, 255, 0.09);
}

body.vyl-visual-v2 .welcome-icon-button:disabled,
body.vyl-visual-v2 .welcome-row-remove:disabled {
    opacity: 0.3;
    cursor: default;
}

body.vyl-visual-v2 .welcome-account-strip {
    display: grid;
    /* Antes: `repeat(4, minmax(0, 1fr))` -> cuatro columnas a CUALQUIER ancho.
       Con `minmax(0, ...)` las tarjetas se encogen sin limite: medido a 760px de
       ventana daban 82,5px cada una y "Charles Schwab Live" (175px de texto)
       quedaba recortado a 47px, ilegible y sin scroll que lo rescatara.
       `auto-fit` reacomoda solo -4 -> 2 -> 1- sin puntos de corte inventados,
       el mismo idioma que ya usa el resto de esta hoja. */
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
    max-width: 1640px;
    margin: 0 auto 12px;
}

/* Nombres largos de broker: que envuelvan en vez de cortarse a la mitad. */
body.vyl-visual-v2 .welcome-stat > strong.welcome-stat-broker {
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.15;
}

body.vyl-visual-v2 .welcome-stat,
body.vyl-visual-v2 .welcome-panel {
    position: relative;
    border: 1px solid rgba(104, 130, 160, 0.25) !important;
    border-radius: 6px !important;
    background: rgba(9, 16, 28, 0.71) !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.23), inset 0 0 0 1px rgba(255, 255, 255, 0.018) !important;
    -webkit-backdrop-filter: blur(24px) saturate(118%) !important;
    backdrop-filter: blur(24px) saturate(118%) !important;
}

body.vyl-visual-v2 .welcome-stat::before,
body.vyl-visual-v2 .welcome-panel::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 16px;
    width: 72px;
    height: 1px;
    background: #73a8ff;
    box-shadow: 0 0 13px rgba(115, 168, 255, 0.72);
}

body.vyl-visual-v2 .welcome-stat {
    min-height: 112px;
    padding: 18px 19px 15px;
    overflow: hidden;
}

body.vyl-visual-v2 .welcome-stat.accent-green::before { background: #4cd494; box-shadow: 0 0 13px rgba(76, 212, 148, 0.68); }
body.vyl-visual-v2 .welcome-stat.accent-purple::before { background: #a78bfa; box-shadow: 0 0 13px rgba(167, 139, 250, 0.62); }
body.vyl-visual-v2 .welcome-stat.accent-gold::before { background: #e7ba62; box-shadow: 0 0 13px rgba(231, 186, 98, 0.58); }

body.vyl-visual-v2 .welcome-stat > span,
body.vyl-visual-v2 .welcome-stat > strong,
body.vyl-visual-v2 .welcome-stat > small {
    display: block;
}

body.vyl-visual-v2 .welcome-stat > span {
    color: #73869b;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

body.vyl-visual-v2 .welcome-stat > strong {
    min-height: 34px;
    margin-top: 7px;
    overflow: hidden;
    color: #f1f7fc;
    font-family: "JetBrains Mono", monospace;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.vyl-visual-v2 .welcome-stat > strong.welcome-stat-broker {
    font-family: "Outfit", sans-serif;
    font-size: 18px;
}

body.vyl-visual-v2 .welcome-stat > small {
    margin-top: 4px;
    color: #66798e;
    font-size: 9px;
}

body.vyl-visual-v2 .welcome-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    align-items: start;
    gap: 12px;
    max-width: 1640px;
    margin: 0 auto;
}

body.vyl-visual-v2 .welcome-main-column,
body.vyl-visual-v2 .welcome-side-column {
    display: grid;
    gap: 12px;
    min-width: 0;
}

body.vyl-visual-v2 .welcome-panel {
    overflow: visible;
}

body.vyl-visual-v2 .welcome-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 65px;
    padding: 12px 14px 11px 16px;
    border-bottom: 1px solid rgba(104, 130, 160, 0.16);
}

body.vyl-visual-v2 .welcome-panel.is-collapsed .welcome-panel-header {
    border-bottom: 0;
}

body.vyl-visual-v2 .welcome-panel-title-wrap,
body.vyl-visual-v2 .welcome-panel-actions {
    display: flex;
    align-items: center;
}

body.vyl-visual-v2 .welcome-panel-title-wrap {
    min-width: 0;
    gap: 11px;
}

body.vyl-visual-v2 .welcome-panel-actions {
    gap: 7px;
}

body.vyl-visual-v2 .welcome-panel-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border: 1px solid rgba(115, 168, 255, 0.24);
    border-radius: 5px;
    color: #8ebcff;
    background: rgba(115, 168, 255, 0.07);
}

body.vyl-visual-v2 .welcome-panel-title-wrap h2 {
    margin: 0;
    color: #eaf2f9;
    font-family: "Outfit", sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0;
}

body.vyl-visual-v2 .welcome-panel-title-wrap p {
    margin: 2px 0 0;
    color: #687c91;
    font-size: 9px;
}

body.vyl-visual-v2 .welcome-chevron {
    display: inline-flex;
    transform: rotate(180deg);
    transition: transform 160ms ease;
}

body.vyl-visual-v2 .welcome-chevron.is-closed { transform: rotate(0); }
body.vyl-visual-v2 .welcome-panel-body { min-width: 0; }

body.vyl-visual-v2 .welcome-pulse-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-height: 112px;
}

body.vyl-visual-v2 .welcome-pulse-item {
    display: grid;
    grid-template-columns: minmax(78px, 1fr) 112px auto;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 18px;
    border-right: 1px solid rgba(104, 130, 160, 0.13);
}

body.vyl-visual-v2 .welcome-pulse-item:last-child { border-right: 0; }
body.vyl-visual-v2 .welcome-pulse-item > div > strong,
body.vyl-visual-v2 .welcome-pulse-item > div > span { display: block; }
body.vyl-visual-v2 .welcome-pulse-item > div > strong { color: #f1f6fb; font-family: "JetBrains Mono", monospace; font-size: 14px; }
body.vyl-visual-v2 .welcome-pulse-item > div > span { margin-top: 3px; color: #718499; font-family: "JetBrains Mono", monospace; font-size: 10px; }

body.vyl-visual-v2 .welcome-sparkline {
    display: block;
    width: 112px;
    height: 34px;
    overflow: visible;
}

body.vyl-visual-v2 .welcome-sparkline polyline {
    fill: none;
    stroke: #ff657f;
    stroke-width: 1.8;
    vector-effect: non-scaling-stroke;
}

body.vyl-visual-v2 .welcome-sparkline.is-positive polyline { stroke: #40d89c; }
body.vyl-visual-v2 .welcome-sparkline-base { stroke: rgba(125, 145, 166, 0.16); stroke-width: 1; stroke-dasharray: 2 3; }
body.vyl-visual-v2 .welcome-sparkline-empty { width: 112px; height: 1px; background: rgba(125, 145, 166, 0.16); }

body.vyl-visual-v2 .positive { color: #40d89c !important; }
body.vyl-visual-v2 .negative { color: #ff657f !important; }
body.vyl-visual-v2 .welcome-pulse-item > b { font-family: "JetBrains Mono", monospace; font-size: 11px; text-align: right; }

body.vyl-visual-v2 .welcome-agenda-list { padding: 5px 16px 9px; }
body.vyl-visual-v2 .welcome-agenda-row {
    display: grid;
    grid-template-columns: 74px 9px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-height: 54px;
    border-bottom: 1px solid rgba(104, 130, 160, 0.11);
}
body.vyl-visual-v2 .welcome-agenda-row:last-of-type { border-bottom: 0; }
body.vyl-visual-v2 .welcome-agenda-row time { color: #8da2b7; font-family: "JetBrains Mono", monospace; font-size: 9px; }
body.vyl-visual-v2 .welcome-agenda-row strong,
body.vyl-visual-v2 .welcome-agenda-row small { display: block; }
body.vyl-visual-v2 .welcome-agenda-row strong { color: #dce7f0; font-size: 11px; font-weight: 650; }
body.vyl-visual-v2 .welcome-agenda-row small { margin-top: 2px; color: #64788d; font-size: 9px; text-transform: capitalize; }
body.vyl-visual-v2 .welcome-impact { width: 7px; height: 7px; border-radius: 50%; background: #708196; }
body.vyl-visual-v2 .welcome-impact.high { background: #ff657f; box-shadow: 0 0 12px rgba(255, 101, 127, 0.4); }
body.vyl-visual-v2 .welcome-impact.medium { background: #e7ba62; }
body.vyl-visual-v2 .welcome-impact.low { background: #58a6ff; }
body.vyl-visual-v2 .welcome-provider-note { margin: 8px 0 2px; color: #566b80; font-size: 9px; text-align: center; }

body.vyl-visual-v2 .welcome-news-list { padding: 4px 16px 10px; }
body.vyl-visual-v2 .welcome-news-row {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 13px;
    align-items: start;
    min-height: 72px;
    padding: 13px 0;
    border-bottom: 1px solid rgba(104, 130, 160, 0.11);
}
body.vyl-visual-v2 .welcome-news-row:last-child { border-bottom: 0; }
body.vyl-visual-v2 .welcome-news-index { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid rgba(115, 168, 255, 0.2); border-radius: 5px; color: #79aaf0; background: rgba(115, 168, 255, 0.055); font-family: "JetBrains Mono", monospace; font-size: 9px; }
body.vyl-visual-v2 .welcome-news-row h3 { margin: 0; color: #e2ebf3; font-size: 11px; font-weight: 650; line-height: 1.35; letter-spacing: 0; }
body.vyl-visual-v2 .welcome-news-row p { display: -webkit-box; margin: 4px 0 0; overflow: hidden; color: #71859a; font-size: 9px; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
body.vyl-visual-v2 .welcome-news-row small { display: block; margin-top: 5px; color: #556b81; font-family: "JetBrains Mono", monospace; font-size: 8px; }
body.vyl-visual-v2 .welcome-news-symbol { padding: 4px 6px; border: 1px solid rgba(76, 212, 148, 0.22); border-radius: 4px; color: #74dbad; background: rgba(76, 212, 148, 0.06); font-family: "JetBrains Mono", monospace; font-size: 8px; }

body.vyl-visual-v2 .welcome-watchlist { padding: 4px 0 8px; }
body.vyl-visual-v2 .welcome-watch-row {
    display: grid;
    grid-template-columns: 48px 112px minmax(92px, 1fr) 24px;
    align-items: center;
    gap: 10px;
    min-height: 54px;
    padding: 5px 10px 5px 16px;
    border-bottom: 1px solid rgba(104, 130, 160, 0.1);
}
body.vyl-visual-v2 .welcome-watch-row:last-child { border-bottom: 0; }
body.vyl-visual-v2 .welcome-watch-row > strong { color: #e9f0f7; font-family: "JetBrains Mono", monospace; font-size: 11px; }
body.vyl-visual-v2 .welcome-watch-price { min-width: 0; text-align: right; }
body.vyl-visual-v2 .welcome-watch-price span,
body.vyl-visual-v2 .welcome-watch-price b { display: block; overflow: hidden; font-family: "JetBrains Mono", monospace; text-overflow: ellipsis; white-space: nowrap; }
body.vyl-visual-v2 .welcome-watch-price span { color: #dbe5ee; font-size: 10px; }
body.vyl-visual-v2 .welcome-watch-price b { margin-top: 2px; font-size: 9px; font-weight: 600; }
body.vyl-visual-v2 .welcome-row-remove { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 0; border-radius: 4px; color: transparent; background: transparent; cursor: pointer; }
body.vyl-visual-v2 .welcome-watch-row:hover .welcome-row-remove { color: #64798f; }
body.vyl-visual-v2 .welcome-row-remove:hover { color: #ff7289 !important; background: rgba(255, 101, 127, 0.07); }

body.vyl-visual-v2 .welcome-add-wrap { position: relative; }
body.vyl-visual-v2 .welcome-symbol-menu {
    position: absolute;
    z-index: 20;
    top: 36px;
    right: 0;
    display: grid;
    grid-template-columns: repeat(2, 66px);
    gap: 4px;
    width: 150px;
    padding: 7px;
    border: 1px solid rgba(115, 168, 255, 0.28);
    border-radius: 5px;
    background: rgba(7, 13, 24, 0.97);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.48);
}
body.vyl-visual-v2 .welcome-symbol-menu button { height: 28px; border: 1px solid rgba(104, 130, 160, 0.18); border-radius: 4px; color: #aab9c8; background: rgba(255, 255, 255, 0.025); font-family: "JetBrains Mono", monospace; font-size: 9px; cursor: pointer; }
body.vyl-visual-v2 .welcome-symbol-menu button:hover { border-color: rgba(115, 168, 255, 0.42); color: #a9ceff; background: rgba(115, 168, 255, 0.08); }

body.vyl-visual-v2 .welcome-positions-list { padding: 4px 0 8px; }
body.vyl-visual-v2 .welcome-position-row {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr) 72px;
    align-items: center;
    gap: 10px;
    min-height: 66px;
    padding: 8px 16px;
    border-bottom: 1px solid rgba(104, 130, 160, 0.1);
}
body.vyl-visual-v2 .welcome-position-row:last-child { border-bottom: 0; }
body.vyl-visual-v2 .welcome-position-symbol strong,
body.vyl-visual-v2 .welcome-position-symbol span,
body.vyl-visual-v2 .welcome-position-contract strong,
body.vyl-visual-v2 .welcome-position-contract span,
body.vyl-visual-v2 .welcome-position-value span,
body.vyl-visual-v2 .welcome-position-value b { display: block; }
body.vyl-visual-v2 .welcome-position-symbol strong { color: #e8eff6; font-family: "JetBrains Mono", monospace; font-size: 11px; }
body.vyl-visual-v2 .welcome-position-symbol span { margin-top: 2px; color: #79aaf0; font-size: 8px; }
body.vyl-visual-v2 .welcome-position-contract { min-width: 0; }
body.vyl-visual-v2 .welcome-position-contract strong { overflow: hidden; color: #bdcad7; font-family: "JetBrains Mono", monospace; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
body.vyl-visual-v2 .welcome-position-contract span { margin-top: 4px; color: #5d7288; font-size: 8px; }
body.vyl-visual-v2 .welcome-position-value { text-align: right; }
body.vyl-visual-v2 .welcome-position-value span,
body.vyl-visual-v2 .welcome-position-value b { font-family: "JetBrains Mono", monospace; font-size: 9px; }
body.vyl-visual-v2 .welcome-position-value span { color: #d5e0e9; }
body.vyl-visual-v2 .welcome-position-value b { margin-top: 3px; }

body.vyl-visual-v2 .welcome-empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    min-height: 116px;
    color: #62768b;
}
body.vyl-visual-v2 .welcome-empty-state.compact { min-height: 106px; }
body.vyl-visual-v2 .welcome-empty-state strong,
body.vyl-visual-v2 .welcome-empty-state span { display: block; }
body.vyl-visual-v2 .welcome-empty-state strong { color: #8699ac; font-size: 10px; }
body.vyl-visual-v2 .welcome-empty-state span { margin-top: 2px; color: #5e7287; font-size: 8px; }
body.vyl-visual-v2 .welcome-empty-line { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; min-height: 110px; color: #64778b; font-size: 10px; }

@media (max-width: 1280px) {
    body.vyl-visual-v2 .welcome-scroll { padding-right: 20px; padding-left: 20px; }
    body.vyl-visual-v2 .welcome-layout { grid-template-columns: minmax(0, 1fr) 390px; }
    body.vyl-visual-v2 .welcome-pulse-item { grid-template-columns: minmax(68px, 1fr) 84px auto; padding: 14px; }
    body.vyl-visual-v2 .welcome-pulse-item .welcome-sparkline { width: 84px; }
}

/* Welcome dashboard v2: native-feeling motion and graphite glass surfaces. */
body.vyl-visual-v2 .welcome-page {
    --welcome-surface: rgba(18, 19, 24, 0.76);
    --welcome-surface-strong: rgba(20, 21, 27, 0.91);
    --welcome-border: rgba(255, 255, 255, 0.105);
    --welcome-border-hover: rgba(255, 255, 255, 0.19);
    --welcome-text: #f4f6f8;
    --welcome-muted: #9299a5;
    --welcome-dim: #626a76;
    --welcome-blue: #73a8ff;
    --welcome-green: #35d49a;
    --welcome-red: #ff627d;
    --welcome-gold: #f0bd63;
    isolation: isolate;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: transparent;
}

body.vyl-visual-v2 .welcome-page::before {
    content: none;
}

body.vyl-visual-v2 .welcome-scroll {
    padding: 27px 30px 42px;
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

body.vyl-visual-v2 .welcome-heading {
    margin-bottom: 21px;
    animation: welcome-rise 480ms cubic-bezier(.2, .8, .2, 1) both;
}

body.vyl-visual-v2 .welcome-eyebrow {
    margin-bottom: 7px;
    color: var(--welcome-blue);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
}

body.vyl-visual-v2 .welcome-heading h1 {
    color: var(--welcome-text);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 29px;
    font-weight: 680;
    line-height: 1.12;
}

body.vyl-visual-v2 .welcome-date {
    margin-top: 7px;
    color: var(--welcome-muted);
    font-size: 11px;
    font-weight: 500;
}

body.vyl-visual-v2 .welcome-market-pill {
    height: 52px;
    border-color: var(--welcome-border);
    border-radius: 8px;
    background: rgba(20, 21, 26, 0.68);
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.27), inset 0 1px 0 rgba(255, 255, 255, 0.055);
    backdrop-filter: blur(30px) saturate(145%);
    transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

body.vyl-visual-v2 .welcome-market-pill:hover {
    border-color: var(--welcome-border-hover);
    background: rgba(25, 26, 32, 0.79);
    transform: translateY(-1px);
    box-shadow: 0 19px 48px rgba(0, 0, 0, 0.31), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

body.vyl-visual-v2 .welcome-market-pill strong {
    color: var(--welcome-text);
    font-size: 11px;
    font-weight: 650;
}

body.vyl-visual-v2 .welcome-market-pill small {
    color: var(--welcome-muted);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 9px;
    font-variant-numeric: tabular-nums;
}

body.vyl-visual-v2 .welcome-market-dot {
    width: 7px;
    height: 7px;
    box-shadow: 0 0 0 4px rgba(135, 147, 162, 0.1);
}

body.vyl-visual-v2 .welcome-market-pill.phase-open .welcome-market-dot {
    animation: welcome-status-pulse 2.2s ease-out infinite;
}

body.vyl-visual-v2 .welcome-privacy-button,
body.vyl-visual-v2 .welcome-icon-button {
    border-color: var(--welcome-border);
    color: #a3aab5;
    background: rgba(255, 255, 255, 0.035);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
    transition: color 170ms ease, border-color 170ms ease, background-color 170ms ease, box-shadow 170ms ease, transform 170ms cubic-bezier(.2, .8, .2, 1);
}

body.vyl-visual-v2 .welcome-privacy-button {
    width: 52px;
    height: 52px;
    border-radius: 8px;
}

body.vyl-visual-v2 .welcome-icon-button {
    width: 29px;
    height: 29px;
    border-radius: 6px;
}

body.vyl-visual-v2 .welcome-privacy-button:hover,
body.vyl-visual-v2 .welcome-icon-button:hover,
body.vyl-visual-v2 .welcome-privacy-button.is-active {
    border-color: rgba(115, 168, 255, 0.42);
    color: #bdd5ff;
    background: rgba(115, 168, 255, 0.1);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transform: translateY(-1px);
}

body.vyl-visual-v2 .welcome-privacy-button:active,
body.vyl-visual-v2 .welcome-icon-button:active {
    transform: scale(.94);
    transition-duration: 80ms;
}

body.vyl-visual-v2 .welcome-account-strip {
    gap: 13px;
    margin-bottom: 13px;
}

body.vyl-visual-v2 .welcome-stat,
body.vyl-visual-v2 .welcome-panel {
    border-color: var(--welcome-border) !important;
    border-radius: 8px !important;
    background: var(--welcome-surface) !important;
    box-shadow: 0 17px 46px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(28px) saturate(142%) !important;
    transition: border-color 200ms ease, background-color 200ms ease, box-shadow 200ms ease, transform 200ms cubic-bezier(.2, .8, .2, 1);
}

body.vyl-visual-v2 .welcome-stat:hover,
body.vyl-visual-v2 .welcome-panel:hover {
    border-color: var(--welcome-border-hover) !important;
    background: rgba(22, 23, 29, 0.82) !important;
    box-shadow: 0 21px 55px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.075) !important;
}

body.vyl-visual-v2 .welcome-stat:hover {
    transform: translateY(-2px);
}

body.vyl-visual-v2 .welcome-stat::before,
body.vyl-visual-v2 .welcome-panel::before {
    left: 18px;
    width: 48px;
    height: 2px;
    border-radius: 0 0 3px 3px;
    background: var(--welcome-blue);
    box-shadow: 0 0 16px rgba(115, 168, 255, 0.52);
    opacity: .85;
    transition: width 220ms ease, opacity 220ms ease;
}

body.vyl-visual-v2 .welcome-stat:hover::before,
body.vyl-visual-v2 .welcome-panel:hover::before {
    width: 76px;
    opacity: 1;
}

body.vyl-visual-v2 .welcome-stat {
    min-height: 118px;
    padding: 16px 18px 15px;
    animation: welcome-rise 520ms cubic-bezier(.2, .8, .2, 1) both;
}

body.vyl-visual-v2 .welcome-stat:nth-child(1) { animation-delay: 55ms; }
body.vyl-visual-v2 .welcome-stat:nth-child(2) { animation-delay: 95ms; }
body.vyl-visual-v2 .welcome-stat:nth-child(3) { animation-delay: 135ms; }
body.vyl-visual-v2 .welcome-stat:nth-child(4) { animation-delay: 175ms; }

body.vyl-visual-v2 .welcome-stat.accent-green::before { background: var(--welcome-green); box-shadow: 0 0 16px rgba(53, 212, 154, 0.48); }
body.vyl-visual-v2 .welcome-stat.accent-purple::before { background: #b39bff; box-shadow: 0 0 16px rgba(179, 155, 255, 0.43); }
body.vyl-visual-v2 .welcome-stat.accent-gold::before { background: var(--welcome-gold); box-shadow: 0 0 16px rgba(240, 189, 99, 0.42); }

body.vyl-visual-v2 .welcome-stat-head {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--welcome-muted);
    font-size: 9px;
    font-weight: 650;
    text-transform: uppercase;
}

body.vyl-visual-v2 .welcome-stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    border: 1px solid rgba(115, 168, 255, 0.17);
    border-radius: 6px;
    color: #8ab5f5;
    background: rgba(115, 168, 255, 0.06);
}

body.vyl-visual-v2 .accent-green .welcome-stat-icon { border-color: rgba(53, 212, 154, 0.17); color: #67dcb2; background: rgba(53, 212, 154, 0.06); }
body.vyl-visual-v2 .accent-purple .welcome-stat-icon { border-color: rgba(179, 155, 255, 0.17); color: #c0adff; background: rgba(179, 155, 255, 0.06); }
body.vyl-visual-v2 .accent-gold .welcome-stat-icon { border-color: rgba(240, 189, 99, 0.17); color: #efc87e; background: rgba(240, 189, 99, 0.06); }

body.vyl-visual-v2 .welcome-stat > strong {
    min-height: 29px;
    margin-top: 9px;
    color: var(--welcome-text);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 21px;
    font-weight: 680;
    font-variant-numeric: tabular-nums;
}

body.vyl-visual-v2 .welcome-stat > strong.welcome-stat-broker {
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 17px;
}

body.vyl-visual-v2 .welcome-stat > small {
    margin-top: 4px;
    color: var(--welcome-dim);
    font-size: 9px;
    font-weight: 500;
}

body.vyl-visual-v2 .welcome-layout,
body.vyl-visual-v2 .welcome-main-column,
body.vyl-visual-v2 .welcome-side-column {
    gap: 13px;
}

body.vyl-visual-v2 .welcome-panel {
    animation: welcome-rise 560ms cubic-bezier(.2, .8, .2, 1) both;
}

body.vyl-visual-v2 .welcome-main-column .welcome-panel:nth-child(1) { animation-delay: 210ms; }
body.vyl-visual-v2 .welcome-side-column .welcome-panel:nth-child(1) { animation-delay: 250ms; }
body.vyl-visual-v2 .welcome-main-column .welcome-panel:nth-child(2) { animation-delay: 290ms; }
body.vyl-visual-v2 .welcome-side-column .welcome-panel:nth-child(2) { animation-delay: 330ms; }
body.vyl-visual-v2 .welcome-main-column .welcome-panel:nth-child(3) { animation-delay: 370ms; }

body.vyl-visual-v2 .welcome-panel-header {
    position: relative;
    z-index: 5;
    min-height: 64px;
    padding: 12px 13px 11px 15px;
    border-bottom-color: rgba(255, 255, 255, 0.075);
}

body.vyl-visual-v2 .welcome-panel-icon {
    width: 33px;
    height: 33px;
    flex-basis: 33px;
    border-color: rgba(115, 168, 255, 0.19);
    border-radius: 7px;
    color: #9abfff;
    background: rgba(115, 168, 255, 0.07);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
    transition: color 180ms ease, background-color 180ms ease, transform 200ms cubic-bezier(.2, .8, .2, 1);
}

body.vyl-visual-v2 .welcome-panel:hover .welcome-panel-icon {
    color: #c2d8ff;
    background: rgba(115, 168, 255, 0.11);
    transform: scale(1.035);
}

body.vyl-visual-v2 .welcome-panel-title-wrap h2 {
    color: var(--welcome-text);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 13px;
    font-weight: 650;
}

body.vyl-visual-v2 .welcome-panel-title-wrap p {
    margin-top: 3px;
    color: var(--welcome-dim);
    font-size: 9px;
    font-weight: 500;
}

body.vyl-visual-v2 .welcome-chevron {
    transition: transform 260ms cubic-bezier(.22, 1, .36, 1);
}

body.vyl-visual-v2 .welcome-panel-collapse {
    display: grid;
    grid-template-rows: 1fr;
    opacity: 1;
    transition: grid-template-rows 310ms cubic-bezier(.22, 1, .36, 1), opacity 180ms ease;
}

body.vyl-visual-v2 .welcome-panel-collapse > .welcome-panel-body {
    min-height: 0;
    overflow: hidden;
}

body.vyl-visual-v2 .welcome-panel.is-collapsed .welcome-panel-collapse {
    grid-template-rows: 0fr;
    opacity: 0;
}

body.vyl-visual-v2 .welcome-pulse-item,
body.vyl-visual-v2 .welcome-agenda-row,
body.vyl-visual-v2 .welcome-news-row,
body.vyl-visual-v2 .welcome-watch-row,
body.vyl-visual-v2 .welcome-position-row {
    transition: background-color 160ms ease, transform 180ms cubic-bezier(.2, .8, .2, 1), border-color 160ms ease;
}

body.vyl-visual-v2 .welcome-pulse-item:hover,
body.vyl-visual-v2 .welcome-agenda-row:hover,
body.vyl-visual-v2 .welcome-news-row:hover,
body.vyl-visual-v2 .welcome-watch-row:hover,
body.vyl-visual-v2 .welcome-position-row:hover {
    background: rgba(255, 255, 255, 0.025);
}

body.vyl-visual-v2 .welcome-watch-row:hover,
body.vyl-visual-v2 .welcome-position-row:hover {
    transform: translateX(2px);
}

body.vyl-visual-v2 .welcome-pulse-item > div > strong,
body.vyl-visual-v2 .welcome-pulse-item > div > span,
body.vyl-visual-v2 .welcome-pulse-item > b,
body.vyl-visual-v2 .welcome-agenda-row time,
body.vyl-visual-v2 .welcome-news-index,
body.vyl-visual-v2 .welcome-news-row small,
body.vyl-visual-v2 .welcome-news-symbol,
body.vyl-visual-v2 .welcome-watch-row > strong,
body.vyl-visual-v2 .welcome-watch-price span,
body.vyl-visual-v2 .welcome-watch-price b,
body.vyl-visual-v2 .welcome-position-symbol strong,
body.vyl-visual-v2 .welcome-position-contract strong,
body.vyl-visual-v2 .welcome-position-value span,
body.vyl-visual-v2 .welcome-position-value b {
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-variant-numeric: tabular-nums;
}

body.vyl-visual-v2 .welcome-pulse-item > div > strong { font-size: 13px; font-weight: 700; }
body.vyl-visual-v2 .welcome-pulse-item > div > span { color: var(--welcome-muted); font-size: 9px; }
body.vyl-visual-v2 .welcome-pulse-item > b { font-size: 10px; font-weight: 650; }
body.vyl-visual-v2 .welcome-sparkline polyline { stroke-width: 1.65; stroke-dasharray: 1; stroke-dashoffset: 0; animation: welcome-line-draw 780ms cubic-bezier(.2, .8, .2, 1) both; }
body.vyl-visual-v2 .welcome-sparkline.is-positive polyline { filter: drop-shadow(0 0 4px rgba(53, 212, 154, 0.25)); }
body.vyl-visual-v2 .welcome-sparkline.is-negative polyline { filter: drop-shadow(0 0 4px rgba(255, 98, 125, 0.22)); }

body.vyl-visual-v2 .welcome-agenda-row { min-height: 56px; }
body.vyl-visual-v2 .welcome-agenda-row strong { color: #e4e7eb; font-size: 10px; font-weight: 600; }
body.vyl-visual-v2 .welcome-agenda-row small { color: var(--welcome-dim); font-size: 8px; }
body.vyl-visual-v2 .welcome-agenda-row time { color: #a1a7b1; font-size: 8px; font-weight: 550; }

body.vyl-visual-v2 .welcome-news-row h3 { color: #e9ebef; font-size: 10px; font-weight: 600; line-height: 1.45; }
body.vyl-visual-v2 .welcome-news-index { border-radius: 7px; color: #9abfff; background: rgba(115, 168, 255, 0.07); }
body.vyl-visual-v2 .welcome-news-row small { color: var(--welcome-dim); }

body.vyl-visual-v2 .welcome-watch-row { min-height: 56px; }
body.vyl-visual-v2 .welcome-watch-row > strong { font-size: 10px; font-weight: 700; }
body.vyl-visual-v2 .welcome-watch-price span { color: #e8eaee; font-size: 9px; font-weight: 600; }
body.vyl-visual-v2 .welcome-watch-price b { font-size: 8px; }
body.vyl-visual-v2 .welcome-row-remove { transition: color 150ms ease, background-color 150ms ease, opacity 150ms ease, transform 150ms ease; }
body.vyl-visual-v2 .welcome-row-remove:hover { transform: scale(1.08); }

body.vyl-visual-v2 .welcome-symbol-menu {
    top: 35px;
    border-color: var(--welcome-border-hover);
    border-radius: 8px;
    background: rgba(17, 18, 23, 0.97);
    box-shadow: 0 24px 58px rgba(0, 0, 0, 0.52), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(30px) saturate(150%);
    transform-origin: top right;
    animation: welcome-menu-in 190ms cubic-bezier(.22, 1, .36, 1) both;
}

body.vyl-visual-v2 .welcome-symbol-menu button {
    border-color: rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    color: #b7bdc6;
    background: rgba(255, 255, 255, 0.025);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 9px;
    font-weight: 650;
    transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease, transform 150ms ease;
}

body.vyl-visual-v2 .welcome-symbol-menu button:hover {
    transform: translateY(-1px);
}

body.vyl-visual-v2 .positive { color: var(--welcome-green) !important; }
body.vyl-visual-v2 .negative { color: var(--welcome-red) !important; }

@keyframes welcome-rise {
    from { opacity: 0; transform: translateY(10px) scale(.992); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes welcome-line-draw {
    from { stroke-dashoffset: 1; opacity: .25; }
    to { stroke-dashoffset: 0; opacity: 1; }
}

@keyframes welcome-menu-in {
    from { opacity: 0; transform: translateY(-5px) scale(.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes welcome-status-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(53, 212, 154, 0.1), 0 0 14px rgba(53, 212, 154, 0.28); }
    50% { box-shadow: 0 0 0 7px rgba(53, 212, 154, 0), 0 0 20px rgba(53, 212, 154, 0.4); }
}

@media (prefers-reduced-motion: reduce) {
    body.vyl-visual-v2 .welcome-heading,
    body.vyl-visual-v2 .welcome-stat,
    body.vyl-visual-v2 .welcome-panel,
    body.vyl-visual-v2 .welcome-symbol-menu,
    body.vyl-visual-v2 .welcome-sparkline polyline,
    body.vyl-visual-v2 .welcome-market-pill.phase-open .welcome-market-dot {
        animation: none;
    }

    body.vyl-visual-v2 .welcome-panel-collapse,
    body.vyl-visual-v2 .welcome-chevron {
        transition-duration: 1ms;
    }
}

/* Final Welcome crystal overrides. Keep this block last. */
body.vyl-visual-v2 .welcome-page {
    --welcome-muted: #a7a7b0;
    --welcome-dim: #85858f;
    background: transparent;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.vyl-visual-v2 .welcome-page::before {
    content: none !important;
    background: none !important;
}

body.vyl-visual-v2 .welcome-stat,
body.vyl-visual-v2 .welcome-panel {
    border: 0 !important;
    border-radius: 6px !important;
    background: rgba(255, 255, 255, 0.034) !important;
    box-shadow:
        0 15px 38px rgba(0, 0, 0, 0.16),
        inset 0 0 0 1px rgba(255, 255, 255, 0.065),
        inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
    -webkit-backdrop-filter: blur(24px) saturate(118%) !important;
    backdrop-filter: blur(24px) saturate(118%) !important;
}

body.vyl-visual-v2 .welcome-stat:hover,
body.vyl-visual-v2 .welcome-panel:hover {
    border: 0 !important;
    background: rgba(255, 255, 255, 0.052) !important;
    box-shadow:
        0 20px 46px rgba(0, 0, 0, 0.2),
        inset 0 0 0 1px rgba(255, 255, 255, 0.11),
        inset 0 1px 0 rgba(255, 255, 255, 0.075) !important;
}

body.vyl-visual-v2 .welcome-panel::before {
    top: 14px;
    left: 0;
    width: 3px;
    height: 36px;
    border-radius: 0 2px 2px 0;
    background: var(--vyl-v2-accent);
    box-shadow: 0 0 14px rgba(137, 92, 246, 0.3);
}

body.vyl-visual-v2 .welcome-panel:hover::before {
    width: 3px;
    height: 44px;
}

body.vyl-visual-v2 .welcome-stat::before {
    top: 0;
    left: 18px;
    width: 48px;
    height: 2px;
}

body.vyl-visual-v2 .welcome-stat:hover::before {
    width: 70px;
    height: 2px;
}

body.vyl-visual-v2 .welcome-market-pill {
    border: 0;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.038);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 0.065), inset 0 1px 0 rgba(255, 255, 255, 0.055);
    -webkit-backdrop-filter: blur(24px) saturate(118%);
    backdrop-filter: blur(24px) saturate(118%);
}

body.vyl-visual-v2 .welcome-market-pill:hover {
    border: 0;
    background: rgba(255, 255, 255, 0.06);
}

body.vyl-visual-v2 .welcome-privacy-button,
body.vyl-visual-v2 .welcome-icon-button {
    border: 0;
    background: rgba(255, 255, 255, 0.04);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.065), inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

body.vyl-visual-v2 .welcome-panel-header {
    border-bottom-color: rgba(255, 255, 255, 0.06);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.006));
}

body.vyl-visual-v2 .welcome-heading h1,
body.vyl-visual-v2 .welcome-panel-title-wrap h2,
body.vyl-visual-v2 .welcome-stat > strong,
body.vyl-visual-v2 .welcome-stat > strong.welcome-stat-broker,
body.vyl-visual-v2 .welcome-pulse-item > div > strong,
body.vyl-visual-v2 .welcome-pulse-item > div > span,
body.vyl-visual-v2 .welcome-pulse-item > b,
body.vyl-visual-v2 .welcome-agenda-row time,
body.vyl-visual-v2 .welcome-agenda-row strong,
body.vyl-visual-v2 .welcome-agenda-row small,
body.vyl-visual-v2 .welcome-news-row h3,
body.vyl-visual-v2 .welcome-news-row small,
body.vyl-visual-v2 .welcome-watch-row > strong,
body.vyl-visual-v2 .welcome-watch-price span,
body.vyl-visual-v2 .welcome-watch-price b,
body.vyl-visual-v2 .welcome-position-symbol strong,
body.vyl-visual-v2 .welcome-position-symbol span,
body.vyl-visual-v2 .welcome-position-contract strong,
body.vyl-visual-v2 .welcome-position-contract span,
body.vyl-visual-v2 .welcome-position-value span,
body.vyl-visual-v2 .welcome-position-value b {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

body.vyl-visual-v2 .welcome-eyebrow { font-size: 10px; }
body.vyl-visual-v2 .welcome-date { font-size: 12px; }
body.vyl-visual-v2 .welcome-market-pill strong { font-size: 12px; }
body.vyl-visual-v2 .welcome-market-pill small { font-size: 10px; }
body.vyl-visual-v2 .welcome-stat-head { font-size: 11px; }
body.vyl-visual-v2 .welcome-stat > small { font-size: 11px; }
body.vyl-visual-v2 .welcome-panel-title-wrap h2 { font-size: 14px; }
body.vyl-visual-v2 .welcome-panel-title-wrap p { font-size: 11px; }
body.vyl-visual-v2 .welcome-pulse-item > div > span { font-size: 11px; }
body.vyl-visual-v2 .welcome-pulse-item > b { font-size: 11px; }
body.vyl-visual-v2 .welcome-agenda-row time { font-size: 10px; }
body.vyl-visual-v2 .welcome-agenda-row strong { font-size: 11px; }
body.vyl-visual-v2 .welcome-agenda-row small { font-size: 10px; }
body.vyl-visual-v2 .welcome-news-row h3 { font-size: 11px; }
body.vyl-visual-v2 .welcome-news-row p { font-size: 10px; }
body.vyl-visual-v2 .welcome-news-row small { font-size: 10px; }
body.vyl-visual-v2 .welcome-watch-row > strong { font-size: 11px; }
body.vyl-visual-v2 .welcome-watch-price span,
body.vyl-visual-v2 .welcome-watch-price b { font-size: 10px; }

body.vyl-visual-v2 .welcome-panel-icon,
body.vyl-visual-v2 .welcome-stat-icon {
    border-color: rgba(169, 136, 255, 0.2);
    color: #b39aff;
    background: rgba(137, 92, 246, 0.1);
}

body.vyl-visual-v2 .welcome-panel-icon svg,
body.vyl-visual-v2 .welcome-stat-icon svg {
    width: 18px;
    height: 18px;
}

/* Keep the help-center cards and history headers above legacy late rules. */
body.vyl-visual-v2 .info-content .glass-hud,
body.vyl-visual-v2 .info-content [class*="bg-dark/30"],
body.vyl-visual-v2 .info-content [class*="bg-dark/40"],
body.vyl-visual-v2 .info-content [class*="bg-dark/50"],
body.vyl-visual-v2 .info-content [class*="bg-black/20"],
body.vyl-visual-v2 .info-content [class*="bg-black/30"] {
    border: 1px solid rgba(255, 255, 255, 0.095) !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.022) 58%, rgba(255, 255, 255, 0.06)), rgba(21, 29, 39, 0.34) !important;
    -webkit-backdrop-filter: blur(24px) saturate(120%) !important;
    backdrop-filter: blur(24px) saturate(120%) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035), inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 12px 30px rgba(0, 0, 0, 0.08) !important;
}

body.vyl-visual-v2 .history-ledger thead {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.025)), rgba(18, 25, 34, 0.78) !important;
}

body.vyl-visual-v2 .history-ledger th {
    color: #bac9d7 !important;
}

@media (max-width: 1400px) {
    body.vyl-visual-v2 .welcome-layout { grid-template-columns: minmax(0, 1fr) 390px; }
    body.vyl-visual-v2 .welcome-pulse-item {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto 34px;
        gap: 7px 8px;
        padding: 13px 14px 12px;
    }
    body.vyl-visual-v2 .welcome-pulse-item .welcome-sparkline,
    body.vyl-visual-v2 .welcome-pulse-item .welcome-sparkline-empty {
        grid-column: 1 / -1;
        width: 100%;
    }
    body.vyl-visual-v2 .welcome-pulse-item > b {
        grid-column: 2;
        grid-row: 1;
        align-self: center;
    }
}
/* Final overrides for the Welcome clock layout. Loaded after visual-v2. */
body.vyl-visual-v2 .welcome-heading {
    display: grid;
    grid-template-columns: minmax(300px, 1fr) auto auto;
    align-items: center;
    gap: 20px;
}

body.vyl-visual-v2 .welcome-heading-brand {
    color: rgba(236, 241, 247, 0.28);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 18px rgba(255, 255, 255, 0.045);
}

body.vyl-visual-v2 .welcome-greeting-text {
    animation: welcome-greeting-reveal 980ms cubic-bezier(0.22, 1, 0.36, 1) 180ms both;
}

body.vyl-visual-v2 .welcome-reload-intro {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: grid;
    place-items: center;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.055), transparent 25%),
        rgba(3, 5, 9, 0.62);
    -webkit-backdrop-filter: blur(18px) saturate(120%);
    backdrop-filter: blur(18px) saturate(120%);
    animation: welcome-reload-shell 1700ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

body.vyl-visual-v2 .welcome-reload-glass {
    position: relative;
    display: grid;
    place-items: center;
    width: 228px;
    height: 164px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 8px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.018) 48%, rgba(0, 0, 0, 0.12)),
        rgba(16, 18, 24, 0.68);
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.46), inset 0 1px rgba(255, 255, 255, 0.09);
}

body.vyl-visual-v2 .welcome-reload-glass::after {
    content: "";
    position: absolute;
    inset: -20% auto -20% -46%;
    width: 38%;
    transform: skewX(-14deg);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
    filter: blur(1px);
    animation: welcome-reload-scan 1160ms cubic-bezier(0.22, 1, 0.36, 1) 120ms both;
}

body.vyl-visual-v2 .welcome-reload-glass > span {
    position: absolute;
    bottom: 22px;
    color: rgba(244, 247, 251, 0.54);
    font-size: 10px;
    font-weight: 760;
    letter-spacing: 0;
    text-transform: uppercase;
}

body.vyl-visual-v2 .welcome-reload-constellation {
    width: 132px;
    height: 92px;
}

body.vyl-visual-v2 .welcome-reload-constellation path {
    fill: none;
    stroke: rgba(216, 230, 247, 0.68);
    stroke-width: 1;
    stroke-dasharray: 210;
    animation: welcome-reload-draw 1230ms ease both;
}

body.vyl-visual-v2 .welcome-reload-constellation circle {
    fill: rgba(255, 255, 255, 0.92);
    filter: drop-shadow(0 0 7px rgba(121, 199, 255, 0.52));
    transform-origin: center;
    animation: welcome-reload-star 1230ms ease both;
}

body.vyl-visual-v2 .welcome-reload-candles {
    display: flex;
    align-items: end;
    gap: 9px;
    height: 92px;
}

body.vyl-visual-v2 .welcome-reload-candles i {
    position: relative;
    width: 10px;
    border-radius: 3px;
    background: rgba(63, 221, 153, 0.86);
    box-shadow: 0 0 16px rgba(54, 214, 146, 0.28);
    transform-origin: bottom;
    animation: welcome-reload-candle 1180ms cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: calc(var(--i) * 70ms);
}

body.vyl-visual-v2 .welcome-reload-candles i:nth-child(2n) {
    background: rgba(255, 93, 125, 0.86);
    box-shadow: 0 0 16px rgba(255, 93, 125, 0.23);
}

body.vyl-visual-v2 .welcome-reload-candles i::before {
    content: "";
    position: absolute;
    top: -12px;
    bottom: -12px;
    left: 50%;
    width: 1px;
    background: currentColor;
    opacity: 0.45;
}

@keyframes welcome-greeting-reveal {
    from { opacity: 0; transform: translateY(10px); filter: blur(8px); }
    to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes welcome-reload-shell {
    0% { opacity: 1; }
    72% { opacity: 1; }
    100% { opacity: 0; visibility: hidden; }
}

@keyframes welcome-reload-scan {
    0% { left: -46%; opacity: 0; }
    18%, 70% { opacity: 1; }
    100% { left: 112%; opacity: 0; }
}

@keyframes welcome-reload-draw {
    0% { stroke-dashoffset: 210; opacity: 0; }
    25%, 74% { opacity: 1; }
    100% { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes welcome-reload-star {
    0% { opacity: 0; transform: scale(0.22); }
    34%, 74% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.3); }
}

@keyframes welcome-reload-candle {
    0% { opacity: 0; transform: scaleY(0.1); }
    28%, 74% { opacity: 1; transform: scaleY(1); }
    100% { opacity: 0; transform: scaleY(1.08); }
}

body.vyl-visual-v2 .welcome-heading-actions {
    position: relative;
    z-index: 260;
    justify-content: flex-end;
}

body.vyl-visual-v2 .welcome-heading:has(.welcome-widget-button.is-open) {
    position: relative;
    z-index: 260;
}

body.vyl-visual-v2 .welcome-widget-menu-wrap {
    position: relative;
    z-index: 280;
}

body.vyl-visual-v2 .welcome-widget-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 36px;
    min-width: 96px;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    color: rgba(240, 244, 249, 0.88);
    background: rgba(255, 255, 255, 0.06);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.075), 0 14px 32px rgba(0, 0, 0, 0.16);
    font-size: 11px;
    font-weight: 720;
    letter-spacing: 0;
    cursor: pointer;
    transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

body.vyl-visual-v2 .welcome-widget-button:hover,
body.vyl-visual-v2 .welcome-widget-button.is-open {
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.09);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.09), 0 18px 42px rgba(0, 0, 0, 0.2);
}

body.vyl-visual-v2 .welcome-widget-button:active {
    transform: scale(0.98);
}

body.vyl-visual-v2 .welcome-widget-menu {
    position: absolute;
    top: 44px;
    right: 0;
    z-index: 300;
    width: 258px;
    max-height: min(72vh, 560px);
    overflow-y: auto;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 8px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.028) 48%, rgba(255, 255, 255, 0.075)),
        rgba(18, 25, 34, 0.9);
    -webkit-backdrop-filter: blur(30px) saturate(135%);
    backdrop-filter: blur(30px) saturate(135%);
    box-shadow:
        0 24px 68px rgba(0, 0, 0, 0.34),
        inset 0 0 0 1px rgba(255, 255, 255, 0.055),
        inset 0 1px rgba(255, 255, 255, 0.16);
    animation: welcome-widget-menu-in 160ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

body.vyl-visual-v2 .welcome-widget-board {
    position: relative;
    z-index: 1;
}

body.vyl-visual-v2 .welcome-widget-menu-head {
    padding: 8px 8px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.075);
}

body.vyl-visual-v2 .welcome-widget-menu-head strong,
body.vyl-visual-v2 .welcome-widget-menu-head span {
    display: block;
}

body.vyl-visual-v2 .welcome-widget-menu-head strong {
    color: rgba(244, 247, 251, 0.92);
    font-size: 12px;
    font-weight: 720;
}

body.vyl-visual-v2 .welcome-widget-menu-head span {
    margin-top: 3px;
    color: rgba(224, 230, 239, 0.52);
    font-size: 10px;
}

body.vyl-visual-v2 .welcome-widget-menu-row {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    width: 100%;
    min-height: 43px;
    padding: 7px 8px;
    border: 0;
    border-radius: 6px;
    color: inherit;
    background: transparent;
    text-align: left;
    cursor: pointer;
    transition: background-color 140ms ease;
}

body.vyl-visual-v2 .welcome-widget-menu-row:hover {
    background: rgba(255, 255, 255, 0.06);
}

body.vyl-visual-v2 .welcome-widget-menu-row > span {
    width: 15px;
    height: 15px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.035);
}

body.vyl-visual-v2 .welcome-widget-menu-row > span.is-checked {
    border-color: rgba(64, 216, 156, 0.74);
    background: radial-gradient(circle at center, rgba(64, 216, 156, 0.92) 0 36%, transparent 40%), rgba(64, 216, 156, 0.1);
    box-shadow: 0 0 12px rgba(64, 216, 156, 0.18);
}

body.vyl-visual-v2 .welcome-widget-menu-row strong,
body.vyl-visual-v2 .welcome-widget-menu-row small {
    display: block;
}

body.vyl-visual-v2 .welcome-widget-menu-row strong {
    overflow: hidden;
    color: rgba(239, 244, 249, 0.9);
    font-size: 11px;
    font-weight: 680;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.vyl-visual-v2 .welcome-widget-menu-row small {
    margin-top: 2px;
    color: rgba(224, 230, 239, 0.48);
    font-size: 9px;
}

body.vyl-visual-v2 .welcome-widget-menu-row.is-privacy {
    margin-top: 7px;
}

body.vyl-visual-v2 .welcome-widget-reset {
    width: 100%;
    height: 32px;
    margin-top: 7px;
    border: 1px solid rgba(255, 255, 255, 0.105);
    border-radius: 6px;
    color: rgba(239, 244, 249, 0.76);
    background: rgba(255, 255, 255, 0.045);
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
}

body.vyl-visual-v2 .welcome-widget-reset:hover {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.075);
}

body.vyl-visual-v2 .welcome-widget-board {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-flow: row dense;
    /* `stretch`, NO `start`.
       BUG REAL (2026-08-24, reportado por el dueno: "muchas veces no llena los
       espacios vacios"). Con `start` cada widget usaba solo su altura natural y
       el resto de la fila quedaba en blanco: la altura de fila la marca el widget
       mas alto. Medido a 1181px de ancho eran ~890px de hueco repartidos en
       cuatro filas (294 + 342 + 254 ...). El CSS ya traia
       `.welcome-panel { height: 100% }` esperando estirarse; era este `start`
       quien lo anulaba. Con `stretch` el hueco medido baja a CERO. */
    align-items: stretch;
    gap: 12px;
    min-height: 220px;
    border-radius: 8px;
    transition: background-color 180ms ease, box-shadow 180ms ease;
}

body.vyl-visual-v2 .welcome-widget-board.is-arranging {
    background:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: calc((100% - 132px) / 12 + 12px) 42px;
    background-position: -1px -1px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.055);
}

body.vyl-visual-v2 .welcome-widget-shell {
    min-width: 0;
    transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1), opacity 160ms ease, filter 160ms ease;
}

/* A collapsed widget must size itself to its header. The board normally stretches
   widgets to fill their row, which left a visually cut card after collapsing. */
body.vyl-visual-v2 .welcome-widget-shell.is-collapsed-shell {
    align-self: start;
}

body.vyl-visual-v2 .welcome-widget-shell.is-collapsed-shell .welcome-panel {
    height: auto;
}

body.vyl-visual-v2 .welcome-widget-shell.is-dragging-shell {
    opacity: 0.55;
    filter: saturate(0.72);
    transform: scale(0.992);
}

body.vyl-visual-v2 .welcome-widget-shell.is-drop-before .welcome-panel,
body.vyl-visual-v2 .welcome-widget-shell.is-drop-after .welcome-panel {
    box-shadow:
        0 20px 46px rgba(0, 0, 0, 0.2),
        inset 0 0 0 1px rgba(255, 255, 255, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.11),
        0 0 0 1px rgba(255, 255, 255, 0.12) !important;
}

body.vyl-visual-v2 .welcome-widget-shell.widget-wide {
    grid-column: span 8;
}

body.vyl-visual-v2 .welcome-widget-shell.widget-side {
    grid-column: span 4;
}

body.vyl-visual-v2 .welcome-widget-shell .welcome-panel {
    height: 100%;
}

body.vyl-visual-v2 .welcome-add-form {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

body.vyl-visual-v2 .welcome-add-form input {
    width: 108px;
    height: 29px;
    min-width: 0;
    padding: 0 8px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 6px;
    outline: 0;
    color: rgba(244, 247, 251, 0.92);
    background: rgba(255, 255, 255, 0.04);
    font-size: 10px;
    font-variant-numeric: tabular-nums;
}

body.vyl-visual-v2 .welcome-add-form input::placeholder {
    color: rgba(224, 230, 239, 0.43);
}

body.vyl-visual-v2 .welcome-add-form input:focus {
    border-color: rgba(115, 168, 255, 0.52);
    box-shadow: 0 0 0 3px rgba(115, 168, 255, 0.1);
}

/* Five futures fit as compact quote cards. Their sparkline moves below the
   quote at narrower widths, keeping every value legible instead of clipping. */
body.vyl-visual-v2 .welcome-pulse-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

body.vyl-visual-v2 .welcome-pulse-item {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto 34px;
    gap: 7px 8px;
    padding: 13px 14px 12px;
}

body.vyl-visual-v2 .welcome-pulse-item .welcome-sparkline,
body.vyl-visual-v2 .welcome-pulse-item .welcome-sparkline-empty {
    grid-column: 1 / -1;
    width: 100%;
}

body.vyl-visual-v2 .welcome-pulse-item > b {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
}

body.vyl-visual-v2 .welcome-prep-list,
body.vyl-visual-v2 .welcome-activity-list,
body.vyl-visual-v2 .welcome-corporate-list {
    display: grid;
    gap: 8px;
}

body.vyl-visual-v2 .welcome-prep-row,
body.vyl-visual-v2 .welcome-activity-row,
body.vyl-visual-v2 .welcome-corporate-row {
    display: grid;
    align-items: center;
    min-height: 44px;
    padding: 8px 9px;
    border: 1px solid rgba(255, 255, 255, 0.095);
    border-radius: 6px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.028)),
        rgba(255, 255, 255, 0.04);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.055);
}

body.vyl-visual-v2 .welcome-prep-row {
    grid-template-columns: 12px minmax(0, 1fr);
    gap: 9px;
}

body.vyl-visual-v2 .welcome-prep-row strong,
body.vyl-visual-v2 .welcome-prep-row small,
body.vyl-visual-v2 .welcome-corporate-row span,
body.vyl-visual-v2 .welcome-corporate-row small {
    display: block;
}

body.vyl-visual-v2 .welcome-prep-row strong,
body.vyl-visual-v2 .welcome-corporate-row strong {
    color: rgba(242, 246, 251, 0.9);
    font-size: 11px;
    font-weight: 760;
}

body.vyl-visual-v2 .welcome-prep-row small,
body.vyl-visual-v2 .welcome-corporate-row small {
    margin-top: 2px;
    color: rgba(224, 230, 239, 0.5);
    font-size: 9px;
}

body.vyl-visual-v2 .welcome-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.26);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.035);
}

body.vyl-visual-v2 .welcome-status-dot.is-ready {
    background: rgba(80, 220, 158, 0.86);
    box-shadow: 0 0 0 3px rgba(80, 220, 158, 0.08), 0 0 14px rgba(80, 220, 158, 0.18);
}

body.vyl-visual-v2 .welcome-status-dot.is-waiting {
    background: rgba(244, 193, 91, 0.82);
    box-shadow: 0 0 0 3px rgba(244, 193, 91, 0.08), 0 0 14px rgba(244, 193, 91, 0.14);
}

body.vyl-visual-v2 .welcome-risk-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

body.vyl-visual-v2 .welcome-risk-grid > div,
body.vyl-visual-v2 .welcome-journal-kpis > div {
    min-width: 0;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.095);
    border-radius: 6px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.072), rgba(255, 255, 255, 0.026)),
        rgba(255, 255, 255, 0.038);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.052);
}

body.vyl-visual-v2 .welcome-risk-grid span,
body.vyl-visual-v2 .welcome-journal-kpis span,
body.vyl-visual-v2 .welcome-journal-score span {
    display: block;
    color: rgba(218, 226, 239, 0.48);
    font-size: 9px;
    font-weight: 760;
}

body.vyl-visual-v2 .welcome-risk-grid strong,
body.vyl-visual-v2 .welcome-journal-kpis strong {
    display: block;
    margin-top: 6px;
    overflow: hidden;
    color: rgba(244, 247, 251, 0.9);
    font-size: 16px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.vyl-visual-v2 .welcome-activity-row {
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 8px;
}

body.vyl-visual-v2 .welcome-activity-row time {
    color: rgba(168, 181, 199, 0.72);
    font-family: "JetBrains Mono", monospace;
    font-size: 9px;
}

body.vyl-visual-v2 .welcome-activity-row span {
    overflow: hidden;
    color: rgba(238, 243, 249, 0.82);
    font-size: 10px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.vyl-visual-v2 .welcome-activity-row.is-error {
    border-color: rgba(255, 103, 132, 0.18);
}

body.vyl-visual-v2 .welcome-activity-row.is-success {
    border-color: rgba(80, 220, 158, 0.14);
}

body.vyl-visual-v2 .welcome-journal-lite {
    display: grid;
    grid-template-columns: minmax(210px, 0.8fr) minmax(0, 1.2fr);
    gap: 10px;
}

body.vyl-visual-v2 .welcome-journal-score {
    min-width: 0;
    padding: 13px;
    border: 1px solid rgba(255, 255, 255, 0.105);
    border-radius: 6px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.032)),
        rgba(255, 255, 255, 0.044);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.06);
}

body.vyl-visual-v2 .welcome-journal-score strong {
    display: block;
    margin-top: 5px;
    color: rgba(245, 248, 252, 0.94);
    font-size: 30px;
    font-weight: 820;
    letter-spacing: 0;
}

body.vyl-visual-v2 .welcome-journal-score small,
body.vyl-visual-v2 .welcome-journal-note {
    display: block;
    margin-top: 7px;
    color: rgba(224, 230, 239, 0.5);
    font-size: 10px;
    line-height: 1.45;
}

body.vyl-visual-v2 .welcome-journal-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

body.vyl-visual-v2 .welcome-journal-note {
    grid-column: 1 / -1;
    margin: 0;
    padding: 0 2px;
}

body.vyl-visual-v2 .welcome-corporate-row {
    grid-template-columns: 44px minmax(0, 1fr) 10px;
    gap: 9px;
}

body.vyl-visual-v2 .welcome-corporate-row span {
    overflow: hidden;
    color: rgba(238, 243, 249, 0.82);
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.vyl-visual-v2 .welcome-panel.is-draggable {
    cursor: grab;
}

body.vyl-visual-v2 .welcome-panel.is-draggable:active {
    cursor: grabbing;
}

body.vyl-visual-v2 .welcome-panel.is-dragging {
    opacity: 0.54;
    transform: scale(0.992);
    outline: 1px solid rgba(255, 255, 255, 0.24);
}

body.vyl-visual-v2 .welcome-panel.is-draggable .welcome-panel-header {
    user-select: none;
}

body.vyl-visual-v2 .welcome-widget-grip {
    display: inline-block;
    width: 10px;
    height: 25px;
    flex: 0 0 10px;
    opacity: 0.42;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.62) 1px, transparent 1.7px);
    background-size: 5px 5px;
    transition: opacity 160ms ease;
}

body.vyl-visual-v2 .welcome-panel:hover .welcome-widget-grip {
    opacity: 0.76;
}

body.vyl-visual-v2 .welcome-widgets-empty {
    grid-column: 1 / -1;
    min-height: 180px;
}

@keyframes welcome-widget-menu-in {
    from { opacity: 0; transform: translateY(-7px) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

body.vyl-visual-v2 .welcome-panel::before {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.12));
    box-shadow: 0 0 14px rgba(255, 255, 255, 0.18);
}

body.vyl-visual-v2 .welcome-stat.accent-cyan::before,
body.vyl-visual-v2 .welcome-stat.accent-green::before,
body.vyl-visual-v2 .welcome-stat.accent-purple::before,
body.vyl-visual-v2 .welcome-stat.accent-gold::before {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.12));
    box-shadow: 0 0 13px rgba(255, 255, 255, 0.16);
}

body.vyl-visual-v2 .welcome-stat-head {
    min-height: 26px;
    color: #aaaab3;
}

body.vyl-visual-v2 .welcome-panel-title-wrap {
    gap: 0;
}

@media (max-width: 1320px) {
    body.vyl-visual-v2 .welcome-market-clock {
        width: 252px;
        min-width: 252px;
    }

    body.vyl-visual-v2 .welcome-heading {
        gap: 14px;
    }

    body.vyl-visual-v2 .welcome-widget-shell.widget-wide,
    body.vyl-visual-v2 .welcome-widget-shell.widget-side {
        grid-column: span 6;
    }

    body.vyl-visual-v2 .welcome-journal-lite,
    body.vyl-visual-v2 .welcome-journal-kpis {
        grid-template-columns: 1fr;
    }
}

/* Monitores pequenos: por debajo de 1000px dos widgets por fila dejan cada uno
   en menos de 450px y el contenido se apretuja. Se pasa a una sola columna. */
@media (max-width: 1000px) {
    body.vyl-visual-v2 .welcome-widget-shell.widget-wide,
    body.vyl-visual-v2 .welcome-widget-shell.widget-side {
        grid-column: span 12;
    }

    body.vyl-visual-v2 .welcome-widget-board {
        gap: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.vyl-visual-v2 .welcome-greeting-text,
    body.vyl-visual-v2 .welcome-reload-intro,
    body.vyl-visual-v2 .welcome-reload-glass::after,
    body.vyl-visual-v2 .welcome-reload-constellation path,
    body.vyl-visual-v2 .welcome-reload-constellation circle,
    body.vyl-visual-v2 .welcome-reload-candles i {
        animation: none;
    }

    body.vyl-visual-v2 .welcome-reload-intro {
        display: none;
    }
}

/* Loaded after the main visual sheet: final crystal pass for legacy dark fillers. */
body.vyl-visual-v2 .history-page {
    --history-panel: rgba(255, 255, 255, 0.052);
    --history-panel-soft: rgba(255, 255, 255, 0.038);
    --history-line: rgba(255, 255, 255, 0.09);
    --history-line-strong: rgba(255, 255, 255, 0.15);
}

body.vyl-visual-v2 .history-header,
body.vyl-visual-v2 .history-header.glass-hud,
body.vyl-visual-v2 .history-stat,
body.vyl-visual-v2 .history-stat.glass-hud,
body.vyl-visual-v2 .history-ledger,
body.vyl-visual-v2 .history-ledger.glass-hud {
    border: 0 !important;
    background-color: rgba(255, 255, 255, 0.052) !important;
    background-image:
        linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.035) 54%, rgba(255, 255, 255, 0.062)) !important;
    -webkit-backdrop-filter: blur(26px) saturate(122%) !important;
    backdrop-filter: blur(26px) saturate(122%) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.095),
        0 16px 42px rgba(0, 0, 0, 0.12) !important;
}

body.vyl-visual-v2 .history-stat,
body.vyl-visual-v2 .history-stat.glass-hud {
    background-color: rgba(255, 255, 255, 0.046) !important;
}

body.vyl-visual-v2 .history-ledger,
body.vyl-visual-v2 .history-ledger.glass-hud {
    background-color: rgba(255, 255, 255, 0.044) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.085),
        inset 0 1px 0 rgba(255, 255, 255, 0.085),
        0 16px 42px rgba(0, 0, 0, 0.115) !important;
}

body.vyl-visual-v2 .history-ledger thead {
    background-color: rgba(255, 255, 255, 0.065) !important;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.082), rgba(255, 255, 255, 0.026)) !important;
    -webkit-backdrop-filter: blur(22px) saturate(122%) !important;
    backdrop-filter: blur(22px) saturate(122%) !important;
}

body.vyl-visual-v2 .history-ledger tbody tr:hover {
    background: rgba(255, 255, 255, 0.062) !important;
}

/* Final controls pass: align profile fields and History controls with the
   soft crystal field used by the access-email input. */
body.vyl-visual-v2 .configuration-page .account-profile-field input,
body.vyl-visual-v2 .configuration-page .account-profile-field select {
    height: 38px;
    border: 1px solid rgba(255, 255, 255, 0.106) !important;
    border-radius: 8px !important;
    color: #eeeeF2 !important;
    background: rgba(255, 255, 255, 0.02) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.035),
        0 8px 22px rgba(0, 0, 0, 0.1) !important;
    -webkit-backdrop-filter: blur(16px) saturate(120%) !important;
    backdrop-filter: blur(16px) saturate(120%) !important;
}

body.vyl-visual-v2 .configuration-page .account-profile-field input:hover,
body.vyl-visual-v2 .configuration-page .account-profile-field select:hover {
    border-color: rgba(255, 255, 255, 0.17) !important;
}

body.vyl-visual-v2 .configuration-page .account-profile-field input:focus,
body.vyl-visual-v2 .configuration-page .account-profile-field select:focus {
    border-color: rgba(183, 153, 255, 0.5) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 0 0 2px rgba(154, 112, 255, 0.1) !important;
}

body.vyl-visual-v2 .configuration-page .account-profile-field input[readonly] {
    color: #9999a3 !important;
}

body.vyl-visual-v2 .history-header .history-filter-select {
    min-height: 34px;
    padding-right: 28px !important;
    border: 1px solid rgba(255, 255, 255, 0.13) !important;
    border-radius: 8px !important;
    color: #eaf5ff !important;
    background-color: rgba(255, 255, 255, 0.044) !important;
    background-image:
        linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012)),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='m3 4.5 3 3 3-3' stroke='%23c8d7e7' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-position: 0 0, right 9px center !important;
    background-repeat: no-repeat !important;
    background-size: auto, 12px 12px !important;
    color-scheme: dark;
    -webkit-appearance: none;
    appearance: none;
}

body.vyl-visual-v2 .history-header .history-filter-select:hover,
body.vyl-visual-v2 .history-header .history-filter-select:focus {
    border-color: rgba(183, 153, 255, 0.48) !important;
    background-color: rgba(255, 255, 255, 0.075) !important;
}

body.vyl-visual-v2 .history-header .history-filter-select option {
    color: #eaf5ff !important;
    background: #202a35 !important;
}

body.vyl-visual-v2 .history-ledger thead tr,
body.vyl-visual-v2 .history-ledger tbody tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.075) !important;
    border-color: rgba(255, 255, 255, 0.075) !important;
}

body.vyl-visual-v2 .history-ledger td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.055) !important;
}

body.vyl-visual-v2 .history-ledger .history-checkbox {
    width: 14px !important;
    height: 14px !important;
    margin: 0;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 4px !important;
    outline: none;
    background: rgba(255, 255, 255, 0.045) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 2px 8px rgba(0, 0, 0, 0.12) !important;
    cursor: pointer;
    vertical-align: middle;
    -webkit-appearance: none !important;
    appearance: none !important;
}

body.vyl-visual-v2 .history-ledger .history-checkbox:hover {
    border-color: rgba(183, 153, 255, 0.62) !important;
    background-color: rgba(183, 153, 255, 0.1) !important;
}

body.vyl-visual-v2 .history-ledger .history-checkbox:focus-visible {
    box-shadow:
        0 0 0 2px rgba(183, 153, 255, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

body.vyl-visual-v2 .history-ledger .history-checkbox:checked {
    border-color: rgba(208, 190, 255, 0.8) !important;
    background-color: rgba(183, 153, 255, 0.46) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='m2.4 6.2 2.2 2.2 5-5' stroke='%23ffffff' stroke-width='1.55' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 12px 12px !important;
}

/* Broker and personalization surfaces: keep the content, remove legacy dark
   fills and colored window edges while preserving semantic status colors. */
body.vyl-visual-v2 .configuration-page .broker-security-note,
body.vyl-visual-v2 .configuration-page .broker-active-summary,
body.vyl-visual-v2 .configuration-page .broker-family-card {
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.026) 55%, rgba(255, 255, 255, 0.06)),
        rgba(255, 255, 255, 0.043) !important;
    -webkit-backdrop-filter: blur(24px) saturate(120%) !important;
    backdrop-filter: blur(24px) saturate(120%) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.065),
        0 14px 34px rgba(0, 0, 0, 0.1) !important;
}

body.vyl-visual-v2 .configuration-page .broker-family-card,
body.vyl-visual-v2 .configuration-page .broker-family-card.is-active {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

body.vyl-visual-v2 .configuration-page .broker-family-card::before,
body.vyl-visual-v2 .configuration-page .broker-family-card.is-active::before {
    width: 2px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.12)) !important;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.16) !important;
    opacity: 0.72;
}

body.vyl-visual-v2 .configuration-page .broker-family-card:hover,
body.vyl-visual-v2 .configuration-page .broker-family-card.is-active:hover {
    border-color: rgba(255, 255, 255, 0.17) !important;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.035) 55%, rgba(255, 255, 255, 0.075)),
        rgba(255, 255, 255, 0.058) !important;
}

body.vyl-visual-v2 .configuration-page .broker-active-metrics {
    border-color: rgba(255, 255, 255, 0.09) !important;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.018)),
        rgba(255, 255, 255, 0.038) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
}

body.vyl-visual-v2 .configuration-page .broker-family-footer,
body.vyl-visual-v2 .configuration-page .broker-hub {
    border-color: rgba(255, 255, 255, 0.075) !important;
}

body.vyl-visual-v2 .configuration-page .vyl-personalization-panel {
    border: 0 !important;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.02) 58%, rgba(255, 255, 255, 0.05)),
        rgba(255, 255, 255, 0.045) !important;
    -webkit-backdrop-filter: blur(24px) saturate(120%) !important;
    backdrop-filter: blur(24px) saturate(120%) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.075),
        inset 0 1px 0 rgba(255, 255, 255, 0.065),
        0 16px 42px rgba(0, 0, 0, 0.1) !important;
}

body.vyl-visual-v2 .configuration-page .vyl-background-option,
body.vyl-visual-v2 .configuration-page .vyl-clock-style-option {
    border: 1px solid rgba(255, 255, 255, 0.085) !important;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.095), rgba(255, 255, 255, 0.024) 55%, rgba(255, 255, 255, 0.055)),
        rgba(255, 255, 255, 0.04) !important;
    -webkit-backdrop-filter: blur(20px) saturate(118%) !important;
    backdrop-filter: blur(20px) saturate(118%) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.035),
        inset 0 1px 0 rgba(255, 255, 255, 0.055),
        0 10px 26px rgba(0, 0, 0, 0.08) !important;
}

body.vyl-visual-v2 .configuration-page .vyl-background-option:hover,
body.vyl-visual-v2 .configuration-page .vyl-background-option.is-selected,
body.vyl-visual-v2 .configuration-page .vyl-clock-style-option:hover,
body.vyl-visual-v2 .configuration-page .vyl-clock-style-option.is-selected {
    border-color: rgba(255, 255, 255, 0.18) !important;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.036) 55%, rgba(255, 255, 255, 0.075)),
        rgba(255, 255, 255, 0.06) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.075),
        0 12px 28px rgba(0, 0, 0, 0.11) !important;
}

body.vyl-visual-v2 .configuration-page .vyl-personalization-head,
body.vyl-visual-v2 .configuration-page .vyl-personalization-subhead {
    border-color: rgba(255, 255, 255, 0.075) !important;
}

/* Crystal surfaces need a stable text floor on the lighter background themes. */
body.vyl-visual-v2 .configuration-page .broker-security-note {
    color: #d5e0ea !important;
}

body.vyl-visual-v2 .configuration-page .broker-family-description,
body.vyl-visual-v2 .configuration-page .broker-family-footer {
    color: #c5d2de !important;
}

body.vyl-visual-v2 .configuration-page .broker-family-status {
    color: #b7c6d4 !important;
}

body.vyl-visual-v2 .configuration-page .broker-active-metrics span {
    color: #c0cfdb !important;
}

body.vyl-visual-v2 .configuration-page .broker-hub-permissions,
body.vyl-visual-v2 .configuration-page .broker-active-manage,
body.vyl-visual-v2 .configuration-page .broker-family-action {
    color: #e1ebf3 !important;
}

body.vyl-visual-v2 .configuration-page .vyl-personalization-head p,
body.vyl-visual-v2 .configuration-page .vyl-personalization-subhead p,
body.vyl-visual-v2 .configuration-page .vyl-background-copy small,
body.vyl-visual-v2 .configuration-page .vyl-clock-style-copy small {
    color: #c5d2de !important;
}

body.vyl-visual-v2 .configuration-page .vyl-background-state,
body.vyl-visual-v2 .configuration-page .vyl-clock-style-state {
    color: #d4e0ea !important;
}

/* ── Rango esperado (SPX + VIX1D) ──────────────────────────────────────────
   Sustituye al "Calendario corporativo", cuyas filas estaban escritas a mano.
   Reutiliza el lenguaje visual de .welcome-risk-grid para no introducir un
   estilo nuevo: mismas cajas, mismos tamaños de etiqueta y valor. */
body.vyl-visual-v2 .welcome-expected {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

body.vyl-visual-v2 .welcome-expected-headline {
    padding: 12px;
    border: 1px solid rgba(120, 190, 255, 0.22);
    border-radius: 6px;
    background:
        linear-gradient(145deg, rgba(120, 190, 255, 0.11), rgba(120, 190, 255, 0.035)),
        rgba(255, 255, 255, 0.03);
    text-align: center;
}

body.vyl-visual-v2 .welcome-expected-headline > span {
    display: block;
    color: rgba(218, 226, 239, 0.5);
    font-size: 9px;
    font-weight: 760;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

body.vyl-visual-v2 .welcome-expected-headline > strong {
    display: block;
    margin-top: 4px;
    color: #eaf3ff;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.1;
}

body.vyl-visual-v2 .welcome-expected-headline > small {
    display: block;
    margin-top: 3px;
    color: rgba(218, 226, 239, 0.55);
    font-size: 10px;
}

body.vyl-visual-v2 .welcome-expected-band {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

body.vyl-visual-v2 .welcome-expected-band > div {
    min-width: 0;
    padding: 8px 6px;
    border: 1px solid rgba(255, 255, 255, 0.095);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.035);
    text-align: center;
}

body.vyl-visual-v2 .welcome-expected-band > div.welcome-expected-spot {
    border-color: rgba(120, 190, 255, 0.3);
    background: rgba(120, 190, 255, 0.08);
}

body.vyl-visual-v2 .welcome-expected-band span {
    display: block;
    color: rgba(218, 226, 239, 0.45);
    font-size: 9px;
    font-weight: 760;
}

body.vyl-visual-v2 .welcome-expected-band strong {
    display: block;
    margin-top: 4px;
    overflow: hidden;
    color: rgba(244, 247, 251, 0.92);
    font-size: 13px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.vyl-visual-v2 .welcome-expected-kpis {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

body.vyl-visual-v2 .welcome-expected-kpis > div {
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, 0.095);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.035);
}

body.vyl-visual-v2 .welcome-expected-kpis span {
    display: block;
    color: rgba(218, 226, 239, 0.48);
    font-size: 9px;
    font-weight: 760;
}

body.vyl-visual-v2 .welcome-expected-kpis strong {
    display: block;
    margin-top: 4px;
    color: rgba(244, 247, 251, 0.9);
    font-size: 14px;
    font-weight: 800;
}

body.vyl-visual-v2 .welcome-expected-note {
    margin: 0;
    color: rgba(218, 226, 239, 0.5);
    font-size: 10px;
    line-height: 1.4;
}

body.vyl-visual-v2 .welcome-expected-note em {
    color: rgba(238, 244, 252, 0.75);
    font-style: normal;
    font-weight: 700;
}

/* ===========================================================================
   INICIO - pasada final de legibilidad, tamanos y fondos claros (2026-08-26)

   Esta hoja se carga la ULTIMA (ver index.html), asi que este bloque manda
   sobre los modulos base y visuales sin necesidad de `!important`, salvo
   donde la regla que sustituye ya lo usaba (los fondos de panel).

   Motivo del cambio, reportado por el dueno:
     1. habia texto de 8-9px imposible de leer, que ademas desaparecia del todo
        al cambiar a un fondo claro (pearl / mist / daybreak / solstice);
     2. los numeros de "Review Journal" (P/L neto, trades, senales) y los de
        "Posiciones monitoreadas" quedaban diminutos al lado del win rate;
     3. los widgets con listas largas estiraban su fila y dejaban huecos.
   =========================================================================== */

/* -- 1. Tamanos minimos legibles -------------------------------------------
   Nada por debajo de 11px. Los 8px anteriores eran ilegibles incluso sobre el
   fondo oscuro; sobre uno claro directamente no se veian. */

body.vyl-visual-v2 .welcome-panel-title-wrap h2 { font-size: 15px; }
body.vyl-visual-v2 .welcome-panel-title-wrap p { font-size: 11.5px; }
body.vyl-visual-v2 .welcome-stat-head { font-size: 11.5px; }
body.vyl-visual-v2 .welcome-stat > small { font-size: 11.5px; }
body.vyl-visual-v2 .welcome-provider-note { font-size: 11px; }
body.vyl-visual-v2 .welcome-empty-line { font-size: 12px; }
body.vyl-visual-v2 .welcome-empty-state strong { font-size: 12.5px; }
body.vyl-visual-v2 .welcome-empty-state span { font-size: 11px; }
body.vyl-visual-v2 .welcome-add-form input { font-size: 11px; }

/* Pulso del mercado */
body.vyl-visual-v2 .welcome-pulse-item > div > strong { font-size: 14px; }
body.vyl-visual-v2 .welcome-pulse-item > div > span { font-size: 12.5px; }
body.vyl-visual-v2 .welcome-pulse-item > b { font-size: 13px; }

/* Agenda economica */
body.vyl-visual-v2 .welcome-agenda-row time { font-size: 11px; }
body.vyl-visual-v2 .welcome-agenda-row strong { font-size: 12.5px; }
body.vyl-visual-v2 .welcome-agenda-row small { font-size: 11px; }

/* Watchlist */
body.vyl-visual-v2 .welcome-watch-row > strong { font-size: 13px; }
body.vyl-visual-v2 .welcome-watch-price span { font-size: 13px; }
body.vyl-visual-v2 .welcome-watch-price b { font-size: 11.5px; }

/* Rango esperado */
body.vyl-visual-v2 .welcome-expected-headline > span,
body.vyl-visual-v2 .welcome-expected-band span,
body.vyl-visual-v2 .welcome-expected-kpis span { font-size: 11px; }
body.vyl-visual-v2 .welcome-expected-headline > small { font-size: 11.5px; }
body.vyl-visual-v2 .welcome-expected-band strong { font-size: 17px; }
body.vyl-visual-v2 .welcome-expected-kpis strong { font-size: 18px; }
body.vyl-visual-v2 .welcome-expected-note { font-size: 11.5px; }

/* -- 2. Posiciones monitoreadas --------------------------------------------
   El valor y el P&L son el dato por el que se abre este widget; iban a 9px,
   mas pequenos que la etiqueta de al lado. */
body.vyl-visual-v2 .welcome-position-row {
    grid-template-columns: 74px minmax(0, 1fr) 96px;
    min-height: 72px;
}
body.vyl-visual-v2 .welcome-position-symbol strong { font-size: 14px; }
body.vyl-visual-v2 .welcome-position-symbol span { margin-top: 3px; font-size: 11px; font-weight: 700; }
body.vyl-visual-v2 .welcome-position-contract strong { font-size: 12px; }
body.vyl-visual-v2 .welcome-position-contract span { margin-top: 4px; font-size: 11px; }
body.vyl-visual-v2 .welcome-position-value span { font-size: 15px; font-weight: 750; }
body.vyl-visual-v2 .welcome-position-value b { margin-top: 4px; font-size: 13.5px; font-weight: 800; }

/* -- 3. Review Journal -----------------------------------------------------
   P/L neto, trades y senales estaban a 16px contra los 30px del win rate, lo
   que los hacia parecer notas al pie. Suben a 24px: siguen por debajo del win
   rate (que es el titular del panel) pero ya se leen como cifras. */
body.vyl-visual-v2 .welcome-journal-kpis span,
body.vyl-visual-v2 .welcome-journal-score span {
    font-size: 11px;
    letter-spacing: 0.02em;
}
body.vyl-visual-v2 .welcome-journal-kpis > div { padding: 12px 12px 13px; }
body.vyl-visual-v2 .welcome-journal-kpis strong {
    margin-top: 7px;
    font-size: 24px;
    font-weight: 820;
    line-height: 1.1;
}
body.vyl-visual-v2 .welcome-journal-score strong { font-size: 32px; }
body.vyl-visual-v2 .welcome-journal-score small,
body.vyl-visual-v2 .welcome-journal-note { font-size: 11.5px; }

/* -- 4. Tamano de los widgets ----------------------------------------------
   El tablero estira los widgets para que la fila quede llena (ver el comentario
   de `align-items: stretch` mas arriba). El efecto secundario era que una
   watchlist de 8 simbolos, o una lista de posiciones larga, estiraba SU fila
   entera y dejaba al widget vecino con un hueco muerto debajo. Ahora las listas
   tienen altura maxima y desplazamiento propio, asi que la altura de fila la
   marca el contenido y no el numero de filas de la lista. */
body.vyl-visual-v2 .welcome-widget-shell .welcome-panel {
    display: flex;
    flex-direction: column;
}
body.vyl-visual-v2 .welcome-widget-shell .welcome-panel-collapse {
    flex: 1 1 auto;
    min-height: 0;
}

body.vyl-visual-v2 .welcome-watchlist,
body.vyl-visual-v2 .welcome-positions-list {
    max-height: 336px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}
body.vyl-visual-v2 .welcome-watchlist::-webkit-scrollbar,
body.vyl-visual-v2 .welcome-positions-list::-webkit-scrollbar { width: 7px; }
body.vyl-visual-v2 .welcome-watchlist::-webkit-scrollbar-thumb,
body.vyl-visual-v2 .welcome-positions-list::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
}
body.vyl-visual-v2 .welcome-watchlist::-webkit-scrollbar-track,
body.vyl-visual-v2 .welcome-positions-list::-webkit-scrollbar-track { background: transparent; }

/* Un widget nunca deberia quedar mas bajo que su propia cabecera: por debajo de
   esto el titulo y el cuerpo se pegan y parece un error de render. */
body.vyl-visual-v2 .welcome-widget-shell:not(.is-collapsed-shell) .welcome-panel {
    min-height: 236px;
}

/* -- 5. Fondos claros (pearl / mist / daybreak / solstice) -----------------
   INTENTO ANTERIOR, DESCARTADO (2026-08-26, corregido por el dueno): se le daba
   al panel una base oscura casi opaca `rgba(12,18,28,0.62)` bajo estos cuatro
   fondos. Recuperaba el contraste de una sola vez, si, pero a cambio MATABA el
   cristal: las tarjetas pasaban a leerse como bloques planos. El cristal no es
   un adorno negociable de esta pantalla, asi que se revierte entero.

   El panel vuelve exactamente a como estaba: translucido, con blur y con su
   canto interior claro. La legibilidad se resuelve donde estaba el problema de
   verdad -- el color del texto -- y no tocando la superficie.

   Medido sobre el panel de cristal ya compuesto encima de `pearl` (~rgb 44,85,
   109): un gris apagado al 0.5 de alfa daba contraste 2-3. Subiendo el texto a
   opaco y claro se pasa de 4.5 (WCAG AA para texto pequeno) sin cambiar ni un
   pixel de la superficie. */
body.vyl-visual-v2.vyl-bg-pearl .welcome-page,
body.vyl-visual-v2.vyl-bg-mist .welcome-page,
body.vyl-visual-v2.vyl-bg-daybreak .welcome-page,
body.vyl-visual-v2.vyl-bg-solstice .welcome-page {
    --welcome-muted: #eef3f9;
    --welcome-dim: #dbe4ee;
    /* Verde y rojo de P&L. Medido sobre el cristal compuesto encima de `pearl`
       (~rgb 45,85,109): el verde #35d49a daba 4.19 de contraste y el rojo
       #ff627d 2.77, los dos por debajo del minimo. Sobre el fondo oscuro los
       mismos colores dan 9.32 y 6.16, asi que el problema es exclusivo de los
       fondos claros. Se aclaran conservando el tono; `.positive`/`.negative`
       ya leen de estas variables, no hace falta tocar ninguna regla mas. */
    --welcome-green: #6ce9bb;
    --welcome-red: #ffb0be;
}

/* Etiquetas y textos secundarios dentro de las tarjetas. */
body.vyl-visual-v2.vyl-bg-pearl .welcome-journal-kpis span,
body.vyl-visual-v2.vyl-bg-mist .welcome-journal-kpis span,
body.vyl-visual-v2.vyl-bg-daybreak .welcome-journal-kpis span,
body.vyl-visual-v2.vyl-bg-solstice .welcome-journal-kpis span,
body.vyl-visual-v2.vyl-bg-pearl .welcome-journal-score span,
body.vyl-visual-v2.vyl-bg-mist .welcome-journal-score span,
body.vyl-visual-v2.vyl-bg-daybreak .welcome-journal-score span,
body.vyl-visual-v2.vyl-bg-solstice .welcome-journal-score span,
body.vyl-visual-v2.vyl-bg-pearl .welcome-journal-score small,
body.vyl-visual-v2.vyl-bg-mist .welcome-journal-score small,
body.vyl-visual-v2.vyl-bg-daybreak .welcome-journal-score small,
body.vyl-visual-v2.vyl-bg-solstice .welcome-journal-score small,
body.vyl-visual-v2.vyl-bg-pearl .welcome-journal-note,
body.vyl-visual-v2.vyl-bg-mist .welcome-journal-note,
body.vyl-visual-v2.vyl-bg-daybreak .welcome-journal-note,
body.vyl-visual-v2.vyl-bg-solstice .welcome-journal-note,
body.vyl-visual-v2.vyl-bg-pearl .welcome-expected-headline > span,
body.vyl-visual-v2.vyl-bg-mist .welcome-expected-headline > span,
body.vyl-visual-v2.vyl-bg-daybreak .welcome-expected-headline > span,
body.vyl-visual-v2.vyl-bg-solstice .welcome-expected-headline > span,
body.vyl-visual-v2.vyl-bg-pearl .welcome-expected-headline > small,
body.vyl-visual-v2.vyl-bg-mist .welcome-expected-headline > small,
body.vyl-visual-v2.vyl-bg-daybreak .welcome-expected-headline > small,
body.vyl-visual-v2.vyl-bg-solstice .welcome-expected-headline > small,
body.vyl-visual-v2.vyl-bg-pearl .welcome-expected-band span,
body.vyl-visual-v2.vyl-bg-mist .welcome-expected-band span,
body.vyl-visual-v2.vyl-bg-daybreak .welcome-expected-band span,
body.vyl-visual-v2.vyl-bg-solstice .welcome-expected-band span,
body.vyl-visual-v2.vyl-bg-pearl .welcome-expected-kpis span,
body.vyl-visual-v2.vyl-bg-mist .welcome-expected-kpis span,
body.vyl-visual-v2.vyl-bg-daybreak .welcome-expected-kpis span,
body.vyl-visual-v2.vyl-bg-solstice .welcome-expected-kpis span,
body.vyl-visual-v2.vyl-bg-pearl .welcome-expected-note,
body.vyl-visual-v2.vyl-bg-mist .welcome-expected-note,
body.vyl-visual-v2.vyl-bg-daybreak .welcome-expected-note,
body.vyl-visual-v2.vyl-bg-solstice .welcome-expected-note,
body.vyl-visual-v2.vyl-bg-pearl .welcome-stat > small,
body.vyl-visual-v2.vyl-bg-mist .welcome-stat > small,
body.vyl-visual-v2.vyl-bg-daybreak .welcome-stat > small,
body.vyl-visual-v2.vyl-bg-solstice .welcome-stat > small,
body.vyl-visual-v2.vyl-bg-pearl .welcome-stat-head,
body.vyl-visual-v2.vyl-bg-mist .welcome-stat-head,
body.vyl-visual-v2.vyl-bg-daybreak .welcome-stat-head,
body.vyl-visual-v2.vyl-bg-solstice .welcome-stat-head,
body.vyl-visual-v2.vyl-bg-pearl .welcome-panel-title-wrap p,
body.vyl-visual-v2.vyl-bg-mist .welcome-panel-title-wrap p,
body.vyl-visual-v2.vyl-bg-daybreak .welcome-panel-title-wrap p,
body.vyl-visual-v2.vyl-bg-solstice .welcome-panel-title-wrap p,
body.vyl-visual-v2.vyl-bg-pearl .welcome-position-contract span,
body.vyl-visual-v2.vyl-bg-mist .welcome-position-contract span,
body.vyl-visual-v2.vyl-bg-daybreak .welcome-position-contract span,
body.vyl-visual-v2.vyl-bg-solstice .welcome-position-contract span,
body.vyl-visual-v2.vyl-bg-pearl .welcome-position-contract strong,
body.vyl-visual-v2.vyl-bg-mist .welcome-position-contract strong,
body.vyl-visual-v2.vyl-bg-daybreak .welcome-position-contract strong,
body.vyl-visual-v2.vyl-bg-solstice .welcome-position-contract strong,
body.vyl-visual-v2.vyl-bg-pearl .welcome-agenda-row small,
body.vyl-visual-v2.vyl-bg-mist .welcome-agenda-row small,
body.vyl-visual-v2.vyl-bg-daybreak .welcome-agenda-row small,
body.vyl-visual-v2.vyl-bg-solstice .welcome-agenda-row small,
body.vyl-visual-v2.vyl-bg-pearl .welcome-agenda-row time,
body.vyl-visual-v2.vyl-bg-mist .welcome-agenda-row time,
body.vyl-visual-v2.vyl-bg-daybreak .welcome-agenda-row time,
body.vyl-visual-v2.vyl-bg-solstice .welcome-agenda-row time,
body.vyl-visual-v2.vyl-bg-pearl .welcome-pulse-item > div > span,
body.vyl-visual-v2.vyl-bg-mist .welcome-pulse-item > div > span,
body.vyl-visual-v2.vyl-bg-daybreak .welcome-pulse-item > div > span,
body.vyl-visual-v2.vyl-bg-solstice .welcome-pulse-item > div > span,
body.vyl-visual-v2.vyl-bg-pearl .welcome-empty-state strong,
body.vyl-visual-v2.vyl-bg-mist .welcome-empty-state strong,
body.vyl-visual-v2.vyl-bg-daybreak .welcome-empty-state strong,
body.vyl-visual-v2.vyl-bg-solstice .welcome-empty-state strong,
body.vyl-visual-v2.vyl-bg-pearl .welcome-empty-state span,
body.vyl-visual-v2.vyl-bg-mist .welcome-empty-state span,
body.vyl-visual-v2.vyl-bg-daybreak .welcome-empty-state span,
body.vyl-visual-v2.vyl-bg-solstice .welcome-empty-state span,
body.vyl-visual-v2.vyl-bg-pearl .welcome-provider-note,
body.vyl-visual-v2.vyl-bg-mist .welcome-provider-note,
body.vyl-visual-v2.vyl-bg-daybreak .welcome-provider-note,
body.vyl-visual-v2.vyl-bg-solstice .welcome-provider-note,
body.vyl-visual-v2.vyl-bg-pearl .welcome-empty-line,
body.vyl-visual-v2.vyl-bg-mist .welcome-empty-line,
body.vyl-visual-v2.vyl-bg-daybreak .welcome-empty-line,
body.vyl-visual-v2.vyl-bg-solstice .welcome-empty-line {
    color: #eef3f9;
}

/* Cifras y titulos: blanco puro para que destaquen sobre el cristal claro. */
body.vyl-visual-v2.vyl-bg-pearl .welcome-position-value span,
body.vyl-visual-v2.vyl-bg-mist .welcome-position-value span,
body.vyl-visual-v2.vyl-bg-daybreak .welcome-position-value span,
body.vyl-visual-v2.vyl-bg-solstice .welcome-position-value span,
body.vyl-visual-v2.vyl-bg-pearl .welcome-position-symbol span,
body.vyl-visual-v2.vyl-bg-mist .welcome-position-symbol span,
body.vyl-visual-v2.vyl-bg-daybreak .welcome-position-symbol span,
body.vyl-visual-v2.vyl-bg-solstice .welcome-position-symbol span,
body.vyl-visual-v2.vyl-bg-pearl .welcome-clock-copy > span,
body.vyl-visual-v2.vyl-bg-mist .welcome-clock-copy > span,
body.vyl-visual-v2.vyl-bg-daybreak .welcome-clock-copy > span,
body.vyl-visual-v2.vyl-bg-solstice .welcome-clock-copy > span,
body.vyl-visual-v2.vyl-bg-pearl .welcome-clock-copy > strong,
body.vyl-visual-v2.vyl-bg-mist .welcome-clock-copy > strong,
body.vyl-visual-v2.vyl-bg-daybreak .welcome-clock-copy > strong,
body.vyl-visual-v2.vyl-bg-solstice .welcome-clock-copy > strong {
    color: #ffffff;
}

/* La hora ET del reloj. Cada estilo de reloj (orbit, constellation, eclipse,
   phases, candles) la pinta en su propio elemento, asi que se cubren los cinco:
   el usuario puede elegir cualquiera desde Personalizacion. */
body.vyl-visual-v2.vyl-bg-pearl .welcome-clock-phase-data > b,
body.vyl-visual-v2.vyl-bg-mist .welcome-clock-phase-data > b,
body.vyl-visual-v2.vyl-bg-daybreak .welcome-clock-phase-data > b,
body.vyl-visual-v2.vyl-bg-solstice .welcome-clock-phase-data > b,
body.vyl-visual-v2.vyl-bg-pearl .welcome-clock-orbit-dial > b,
body.vyl-visual-v2.vyl-bg-mist .welcome-clock-orbit-dial > b,
body.vyl-visual-v2.vyl-bg-daybreak .welcome-clock-orbit-dial > b,
body.vyl-visual-v2.vyl-bg-solstice .welcome-clock-orbit-dial > b,
body.vyl-visual-v2.vyl-bg-pearl .welcome-clock-constellation-dial > b,
body.vyl-visual-v2.vyl-bg-mist .welcome-clock-constellation-dial > b,
body.vyl-visual-v2.vyl-bg-daybreak .welcome-clock-constellation-dial > b,
body.vyl-visual-v2.vyl-bg-solstice .welcome-clock-constellation-dial > b,
body.vyl-visual-v2.vyl-bg-pearl .welcome-clock-candle-dial > b,
body.vyl-visual-v2.vyl-bg-mist .welcome-clock-candle-dial > b,
body.vyl-visual-v2.vyl-bg-daybreak .welcome-clock-candle-dial > b,
body.vyl-visual-v2.vyl-bg-solstice .welcome-clock-candle-dial > b,
body.vyl-visual-v2.vyl-bg-pearl .welcome-clock-et,
body.vyl-visual-v2.vyl-bg-mist .welcome-clock-et,
body.vyl-visual-v2.vyl-bg-daybreak .welcome-clock-et,
body.vyl-visual-v2.vyl-bg-solstice .welcome-clock-et {
    color: #ffffff;
}


/* La cabecera (marca, saludo y fecha) vive sobre el fondo desnudo, sin cristal
   detras. Ahi no hay superficie que ajustar: solo texto y una sombra suave que
   lo despega del degradado claro. */
body.vyl-visual-v2.vyl-bg-pearl .welcome-date,
body.vyl-visual-v2.vyl-bg-mist .welcome-date,
body.vyl-visual-v2.vyl-bg-daybreak .welcome-date,
body.vyl-visual-v2.vyl-bg-solstice .welcome-date {
    color: #f1f6fb;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

body.vyl-visual-v2.vyl-bg-pearl .welcome-heading h1,
body.vyl-visual-v2.vyl-bg-mist .welcome-heading h1,
body.vyl-visual-v2.vyl-bg-daybreak .welcome-heading h1,
body.vyl-visual-v2.vyl-bg-solstice .welcome-heading h1,
body.vyl-visual-v2.vyl-bg-pearl .welcome-eyebrow,
body.vyl-visual-v2.vyl-bg-mist .welcome-eyebrow,
body.vyl-visual-v2.vyl-bg-daybreak .welcome-eyebrow,
body.vyl-visual-v2.vyl-bg-solstice .welcome-eyebrow {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.42);
}

/* -- 6. Contraste general de las etiquetas apagadas ------------------------
   Alphas de 0.45-0.5 sobre cristal quedan por debajo del minimo legible.
   Subirlas ayuda tambien en oscuro, no solo en claro. */
body.vyl-visual-v2 .welcome-journal-kpis span,
body.vyl-visual-v2 .welcome-journal-score span,
body.vyl-visual-v2 .welcome-expected-headline > span,
body.vyl-visual-v2 .welcome-expected-band span,
body.vyl-visual-v2 .welcome-expected-kpis span {
    color: rgba(222, 231, 242, 0.72);
}

body.vyl-visual-v2 .welcome-journal-score small,
body.vyl-visual-v2 .welcome-journal-note,
body.vyl-visual-v2 .welcome-expected-note,
body.vyl-visual-v2 .welcome-expected-headline > small {
    color: rgba(226, 234, 243, 0.7);
}

body.vyl-visual-v2 .welcome-position-contract strong { color: #d3dde8; }
body.vyl-visual-v2 .welcome-position-contract span { color: #97a8ba; }
body.vyl-visual-v2 .welcome-position-value span { color: #e7eef5; }
body.vyl-visual-v2 .welcome-empty-state strong { color: #a4b4c5; }
body.vyl-visual-v2 .welcome-empty-state span { color: #8798aa; }
body.vyl-visual-v2 .welcome-provider-note { color: #8496a9; }
body.vyl-visual-v2 .welcome-agenda-row small { color: #9aabbd; }

/* -- 7. Boton de Widgets ---------------------------------------------------
   En pantallas estrechas la cabecera lleva saludo + reloj + boton; sobra antes
   el texto que el icono, asi que se cae el texto y queda el icono solo. */
body.vyl-visual-v2 .welcome-widget-button svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
}

@media (max-width: 1180px) {
    body.vyl-visual-v2 .welcome-widget-button {
        min-width: 0;
        padding: 0 10px;
    }
    body.vyl-visual-v2 .welcome-widget-button-label { display: none; }
}

/* En movil la cabecera pasa a columna: el boton no debe ocupar todo el ancho ni
   abrir el menu fuera de la pantalla por la derecha. */
@media (max-width: 760px) {
    body.vyl-visual-v2 .welcome-heading-actions { justify-content: flex-start; }
    body.vyl-visual-v2 .welcome-widget-menu { right: auto; left: 0; }
    body.vyl-visual-v2 .welcome-watchlist,
    body.vyl-visual-v2 .welcome-positions-list { max-height: 300px; }
    body.vyl-visual-v2 .welcome-journal-kpis strong { font-size: 21px; }
}

/* -- 8. Ultimos textos por debajo del minimo legible ----------------------
   Medidos en el navegador sobre el fondo `pearl` con la formula de contraste
   WCAG, tomando como fondo el panel ya compuesto:

     .welcome-eyebrow ("Vylmoon LLC")  10px  alfa 0.28 -> contraste 1.99
     .welcome-stat > small             11.5px #85858f  -> contraste 4.07
     .welcome-panel-title-wrap p       11.5px #85858f  -> contraste 4.07
     .welcome-clock-copy > span        10px   #979
                                                       -> contraste 5.14

   1.99 es literalmente invisible; 4.07 se queda por debajo del 4.5 que pide
   WCAG AA para texto pequeno. El resto de la pagina ya sale por encima de 6. */

body.vyl-visual-v2 .welcome-eyebrow {
    font-size: 11px;
    color: rgba(240, 245, 250, 0.82);
}

body.vyl-visual-v2 .welcome-heading-brand {
    color: rgba(240, 245, 250, 0.82);
}

body.vyl-visual-v2 .welcome-stat > small,
body.vyl-visual-v2 .welcome-panel-title-wrap p {
    color: #a3aeba;
}

body.vyl-visual-v2 .welcome-clock-copy > span {
    font-size: 11px;
    color: #b3bcc6;
}

/* -- 9. Review Journal en pantallas medianas ------------------------------
   Por debajo de 1320px la regla anterior apilaba TAMBIEN los tres KPIs en una
   sola columna. Medido a 1280px: el widget pasaba a 401px de alto y arrastraba
   a toda su fila (la watchlist de al lado quedaba estirada a 465px). Los tres
   KPIs caben de sobra en tres columnas dentro de un panel de ~590px, asi que
   solo se apila la division exterior (win rate arriba, KPIs abajo). El apilado
   completo se reserva para movil, donde si hace falta. */
@media (max-width: 1320px) {
    body.vyl-visual-v2 .welcome-journal-kpis {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    body.vyl-visual-v2 .welcome-journal-kpis {
        grid-template-columns: 1fr;
    }
}

/* -- 10. Cabecera en pantallas estrechas ----------------------------------
   `.welcome-heading` es una rejilla de tres columnas `minmax(300px,1fr) auto
   auto`. Medido a 375px de ancho, esas columnas resuelven a `300px 252px 59px`
   = 611px dentro de una caja de 312px: el reloj arrancaba en x=343 y el boton
   de Widgets en x=607, los dos fuera de la pantalla. El reloj ya se salia antes
   de este cambio; el boton se sumaba al mismo fallo.
   Por debajo de 900px la cabecera pasa a una sola columna y cada bloque cae
   debajo del anterior. */
@media (max-width: 900px) {
    body.vyl-visual-v2 .welcome-heading {
        grid-template-columns: minmax(0, 1fr);
        justify-items: stretch;
        gap: 14px;
    }

    body.vyl-visual-v2 .welcome-market-clock {
        width: 100%;
        min-width: 0;
        max-width: 340px;
    }

    body.vyl-visual-v2 .welcome-widget-button-label { display: none; }
}