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

.font-ui {
    font-family: 'Nunito Sans', sans-serif !important;
}

.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: 'Outfit', sans-serif !important;
}

p,
li {
    font-family: 'Nunito Sans', sans-serif;
}

/* 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) !important;
    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;
    transition: all 0.2s ease;
    border-radius: 0.5rem;
    margin: 0.25rem 0.5rem;
    color: #8b9bb4;
    font-weight: 500;
    display: flex;
    align-items: center;
}

.sidebar-item:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.03);
}

.sidebar-item.active {
    background: linear-gradient(90deg, rgba(0, 210, 255, 0.1) 0%, rgba(0, 210, 255, 0) 100%);
    color: #00d2ff;
}

.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;
}

/* ============================================================
   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);
}

/* 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 !important;
        min-height: 0 !important;
        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) !important;
}

.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 !important;
    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: ui-monospace, SFMono-Regular, Consolas, monospace;
    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: ui-monospace, SFMono-Regular, Consolas, monospace;
    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: ui-monospace, SFMono-Regular, Consolas, monospace;
    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: ui-monospace, SFMono-Regular, Consolas, monospace;
    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: ui-monospace, SFMono-Regular, Consolas, monospace;
    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: ui-monospace, SFMono-Regular, Consolas, monospace;
    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: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
}

.exit-demo-telemetry strong {
    overflow: hidden;
    margin-top: 4px;
    color: #f7fbff;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    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: ui-monospace, SFMono-Regular, Consolas, monospace;
}

.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: ui-monospace, SFMono-Regular, Consolas, monospace;
    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: ui-monospace, SFMono-Regular, Consolas, monospace;
    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: ui-monospace, SFMono-Regular, Consolas, monospace;
    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: ui-monospace, SFMono-Regular, Consolas, monospace;
    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 !important;
}

.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%) !important;
}

.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 !important;
}

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

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

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

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

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

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

.landing-theme-light h1,
.landing-theme-light h2,
.landing-theme-light h3,
.landing-theme-light h4 {
    color: #07111f !important;
    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 !important;
    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) !important;
    backdrop-filter: blur(18px);
}

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

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

.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) !important;
}

.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) !important;
}

.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: 'Outfit', sans-serif;
    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 !important;
    padding-bottom: 0.66rem !important;
    border-radius: 10px !important;
    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 !important;
    font-size: 0.78rem !important;
}

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

.login-card input:focus {
    border-color: #00d2ff !important;
    box-shadow: 0 0 0 1px rgba(0, 210, 255, 0.24), 0 0 24px rgba(0, 210, 255, 0.08) !important;
    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 !important;
    }

    .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%) !important;
}

.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 !important;
}

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

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

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

.login-theme-light .login-card input {
    background: rgba(248, 250, 252, 0.92) !important;
    border-color: rgba(15, 23, 42, 0.16) !important;
    color: #0f172a !important;
}

.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) !important;
}

.login-theme-light .border-gray-700,
.login-theme-light .border-gray-700\/50 {
    border-color: rgba(15, 23, 42, 0.14) !important;
}

@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: Arial, Helvetica, sans-serif;
}
.sp-app { width: 100%; max-width: none; margin: 0; padding: 16px 18px 30px; }
.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-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) !important; }
.strategy-picker-page .negative { color: var(--sp-red) !important; }
.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: 12px; }
.sp-strategy-head { align-items: flex-start; padding: 16px 17px 13px; border-bottom: 1px solid var(--sp-line-2); }
.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-strategy-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; padding: 12px; }
.sp-strategy-card { min-height: 94px; padding: 10px; border: 1px solid #2a3039; border-radius: 6px; 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: 13px; font-weight: 900; letter-spacing: -.2px; }
.sp-strategy-card b { display: block; margin-top: 6px; color: #b1bac8; font-size: 10px; line-height: 1.4; }
.sp-strategy-card small { display: block; margin-top: 8px; color: #7e8999; font-size: 10px; }
.sp-strategy-helper { align-items: center; padding: 11px 17px; border-top: 1px solid var(--sp-line-2); background: #0d0f13; }
.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: 9px 11px; border: 1px solid rgba(167, 139, 250, .48); border-radius: 10px; color: #dfd5ff; background: rgba(167, 139, 250, .1); font-size: 11px; 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(0, 1fr) minmax(286px, 318px); gap: 12px; align-items: start; }
.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-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; max-width: 100%; }
.sp-chain-scroll table { width: 100%; min-width: 760px; border-spacing: 0; border-collapse: collapse; table-layout: fixed; }
.sp-chain-scroll thead th { height: 27px; border-bottom: 1px solid #334152; color: #8292a5; background: #101721; font-size: 9px; font-weight: 900; letter-spacing: .6px; text-align: center; text-transform: uppercase; }
.sp-chain-scroll thead th.sp-side-head { height: 30px; color: #d8dee7; font-size: 10px; }
.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: 86px; 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: 31px; border-bottom: 1px solid rgba(43, 55, 70, .72); text-align: center; }
.sp-chain-cell { width: calc((100% - 86px) / 8); padding: 0 1px; }
.sp-strike-cell { width: 86px; border-right: 1px solid #384656; border-left: 1px solid #384656; background: #141d28; }
.sp-contract-wrap { position: relative; height: 100%; }
.sp-contract { display: flex; align-items: center; justify-content: center; width: 100%; height: 25px; padding: 0 3px; 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: ui-monospace,SFMono-Regular,Consolas,monospace; font-size: 11.5px; font-weight: 900; letter-spacing: 0; }
.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: 3px; }
.sp-zone strong { font: 900 12.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-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)) !important; 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) !important; 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: 34px !important; 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: 11px 17px; border-top: 1px solid var(--sp-line-2); color: #909aa8; font-size: 11px; line-height: 1.46; }
.sp-note b { color: #dde4ed; }

.sp-ticket { padding: 12px; border-radius: 5px; }
.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: 18px; padding: 15px 17px; }
.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-layout { grid-template-columns: 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: 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: 720px; }
    .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 !important; }
.sp-study-banner { padding: 10px 17px; border: 1px solid rgba(88,166,255,.45); border-radius: 12px; margin-bottom: 18px; color: #cce4ff; background: rgba(88,166,255,.08); font-size: 12px; 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) !important; color: #cce4ff !important; background: rgba(88,166,255,.18) !important; }

/* ── Contract analyze button ── */
.sp-contract-wrap { position: relative; }
.sp-analyze-btn { position: absolute; top: 3px; right: 3px; width: 26px; height: 26px; padding: 0; border: 1px solid rgba(88,166,255,.4); border-radius: 7px; color: #acd4ff; background: rgba(88,166,255,.1); font-size: 12px; line-height: 1; cursor: pointer; transition: .15s; z-index: 2; }
.sp-analyze-btn:hover { background: rgba(88,166,255,.25); border-color: rgba(88,166,255,.7); transform: scale(1.1); }

/* ── Ticket dimmed in study mode ── */
.sp-ticket-dimmed { opacity: .5; pointer-events: none; filter: saturate(.4); }

/* ── Analysis panel ── */
.sp-analysis-panel { margin-top: 18px; }
.sp-an-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 16px 17px 13px; border-bottom: 1px solid #1d2128; }
.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 !important; }
.sp-an-red { color: #ff5c72 !important; }
.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 !important; color: #8d97a6 !important; font-size: 10px !important; }
.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) !important; color: #cce4ff !important; background: rgba(88,166,255,.12) !important; }
.sp-an-act-primary:hover { background: rgba(88,166,255,.22) !important; }

/* ── 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;
    }
}