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

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

@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);
    }
}

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

.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 {
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.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: 14px 16px;
    border: 1px solid rgba(148, 163, 184, 0.10);
    border-radius: 16px;
    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: 24px;
    height: 24px;
    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;
}

.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: #111318;
    --sp-panel-2: #0d0f13;
    --sp-line: #252a32;
    --sp-line-2: #1d2128;
    --sp-muted: #98a2b1;
    --sp-green: #17c96d;
    --sp-red: #ff5c72;
    --sp-yellow: #f4c557;
    --sp-violet: #a78bfa;
    position: relative;
    z-index: 1;
    height: 100%;
    overflow-y: auto;
    color: #f5f7fa;
    background: radial-gradient(900px 500px at 0 -10%, rgba(23, 201, 109, .09), transparent 64%), #090b0f;
    font-family: Inter, "Nunito Sans", system-ui, sans-serif;
}
.sp-app { max-width: 1300px; margin: auto; padding: 25px 26px 38px; }
.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; border: 1px solid var(--sp-line); border-radius: 18px; background: rgba(17, 19, 24, .95); box-shadow: 0 24px 70px rgba(0, 0, 0, .28); }

.sp-quote { display: grid; grid-template-columns: 1fr 1.1fr .9fr .9fr auto; overflow: hidden; margin-bottom: 18px; border: 1px solid var(--sp-line); border-radius: 17px; background: rgba(17, 19, 24, .94); box-shadow: 0 24px 70px rgba(0, 0, 0, .28); }
.sp-qitem { min-height: 80px; padding: 14px 16px; 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: 20px; font-weight: 900; }
.sp-qitem select option { background: #12151b; }
.sp-qitem > strong { display: block; margin-top: 6px; font-size: 21px; font-weight: 900; letter-spacing: -.6px; }
.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: 18px; }
.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: 115px; padding: 12px; border: 1px solid #2a3039; border-radius: 13px; color: #f5f7fa; background: #0e1015; 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) 334px; gap: 18px; }
.sp-chain-top { align-items: center; padding: 16px 17px 13px; border-bottom: 1px solid var(--sp-line-2); }
.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-scroll { overflow: auto; }
.sp-chain-scroll table { width: 100%; min-width: 710px; border-spacing: 0; border-collapse: separate; }
.sp-chain-scroll thead th { height: 40px; border-bottom: 1px solid var(--sp-line-2); color: #7d8897; background: #0f1116; font-size: 9px; font-weight: 900; letter-spacing: .85px; text-align: center; text-transform: uppercase; }
.sp-chain-scroll thead th:first-child { color: #80e7b1; }
.sp-chain-scroll thead th:last-child { color: #ff9baa; }
.sp-chain-scroll tbody td { position: relative; height: 64px; border-bottom: 1px solid var(--sp-line-2); text-align: center; }
.sp-contract-cell { width: 39%; padding: 7px 10px; }
.sp-strike-cell { width: 22%; border-right: 1px solid rgba(255,255,255,.024); border-left: 1px solid rgba(255,255,255,.024); }
.sp-contract { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 49px; padding: 0 10px; border: 1px solid transparent; border-radius: 10px; color: #f5f7fa; background: transparent; text-align: left; transition: .15s; }
.sp-contract:hover { transform: translateY(-1px); border-color: #3a4553; background: rgba(255,255,255,.025); }
.sp-contract.eligible { box-shadow: inset 0 0 0 1px rgba(167, 139, 250, .32); }
.sp-contract.selected.call { border-color: rgba(23,201,109,.72); background: rgba(23,201,109,.11); box-shadow: inset 0 0 0 1px rgba(23,201,109,.15); }
.sp-contract.selected.put { border-color: rgba(255,92,114,.72); background: rgba(255,92,114,.10); box-shadow: inset 0 0 0 1px rgba(255,92,114,.15); }
.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-size: 16px; font-weight: 950; letter-spacing: -.3px; }
.sp-zone small { color: #7e8998; font-size: 9px; font-weight: 900; letter-spacing: .7px; }
.sp-row-call-itm .sp-call-cell, .sp-row-put-itm .sp-put-cell { background: rgba(112,130,165,.105); }
.sp-row-call-otm .sp-call-cell { background: rgba(23,201,109,.042); }
.sp-row-put-otm .sp-put-cell { background: rgba(255,92,114,.042); }
.sp-row-atm td { background: rgba(244,197,87,.04); }
.sp-row-atm .sp-strike-cell { background: rgba(244,197,87,.11); }
.sp-row-atm .sp-zone small { color: #f4d181; }
.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: 17px; }
.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: 36px; padding: 0 9px; border: 1px solid var(--sp-line); border-radius: 9px; background: var(--sp-panel-2); font-size: 11px; font-weight: 850; }
.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: 1040px) {
    .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: 18px 12px 30px; }
    .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%; }
}

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