/* =====================================================================
   studio-light.css — pastel-B LIGHT theme accents for Mode Studio app pages
   (arithmetic.html etc.). Makes the mode page match the index/modes-studio
   pastel look: multi-glow background, gradient hero title, colored step badges.

   SAFETY
   - Gated behind [data-v2-mode-theme="light"] (and the legacy
     [data-arithmetic-theme="light"]) → DARK is never touched.
   - Selectors match the existing route-class pattern
     (body.index-v2-legacy[class*="studio-v2-"][class*="-route"]) so they reach
     the same specificity as premium-dark-navy.css's light rules; this file is
     loaded LAST so it wins on equal specificity.
   - ONLY background, hero title, hero icon and step-number badges are themed.
     The worksheet preview (#studioPreviewStage), form controls, template
     gallery and output panel are deliberately left to the existing theme.
   ===================================================================== */

/* ---- 1. page background: pastel multi-glow (overrides .studio-bg) ---- */
html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="light"] .studio-bg,
html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-arithmetic-theme="light"] .studio-bg {
    background-color: #dcecff !important;
    background-image:
        radial-gradient(circle at 12% 16%, rgba(56, 189, 248, 0.40), transparent 42%),
        radial-gradient(circle at 88% 14%, rgba(251, 146, 160, 0.36), transparent 42%),
        radial-gradient(circle at 86% 88%, rgba(110, 231, 183, 0.40), transparent 46%),
        radial-gradient(circle at 12% 86%, rgba(167, 139, 250, 0.34), transparent 44%),
        linear-gradient(140deg, #dcecff 0%, #ffe7df 50%, #dcf5ec 100%) !important;
    background-size: auto !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
    opacity: 1 !important;
}

/* soften decorative blobs to pastel */
html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="light"] .background-scene .blob,
html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-arithmetic-theme="light"] .background-scene .blob {
    opacity: 0.26 !important;
    mix-blend-mode: multiply !important;
}
html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="light"] .background-scene .blob-a { background: #38bdf8 !important; }
html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="light"] .background-scene .blob-b { background: #34d399 !important; }
html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="light"] .background-scene .blob-c { background: #fb9da0 !important; }

/* ---- 2. hero title → gradient text ---- */
html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="light"] .studio-v3-title h1,
html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-arithmetic-theme="light"] .studio-v3-title h1 {
    background: linear-gradient(120deg, #0ea5e9 0%, #10b981 52%, #f97362 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
}

/* ---- 3. hero icon → vivid gradient chip ---- */
html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="light"] .studio-v3-title-icon {
    background: linear-gradient(135deg, #0ea5e9, #22c1a6) !important;
    color: #ffffff !important;
}
html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="light"] .studio-v3-title-icon svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

/* ---- 4. step-number badges → gradient (Step 1=sky, 2=mint, 3=violet) ---- */
html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="light"] .studio-step-head > span {
    background: linear-gradient(135deg, #0ea5e9, #38bdf8) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 0 !important;
}
html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="light"] .studio-shared-card .studio-step-head > span {
    background: linear-gradient(135deg, #10b981, #34d399) !important;
}
html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="light"] .studio-action-card .studio-step-head > span {
    background: linear-gradient(135deg, #8b5cf6, #a78bfa) !important;
}

/* =====================================================================
   5. BUTTONS / CONTROLS — pastel-B (cosmetic only, states preserved)
   ===================================================================== */

/* primary CTA "สร้าง PDF" (id-based existing rule → match id to win) */
html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="light"] .studio-output-btn--primary,
html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="light"] #studioExportBtn.studio-output-btn--primary {
    background: linear-gradient(135deg, #0ea5e9 0%, #22c1a6 60%, #10b981 100%) !important;
    border: 0 !important;
    color: #ffffff !important;
    box-shadow: 0 14px 30px rgba(20, 160, 160, 0.32) !important;
}
html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="light"] .studio-output-btn--primary span,
html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="light"] .studio-output-btn--primary svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* active segment pills (difficulty / layout) → sky→teal */
html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="light"] .studio-segment-btn.is-active {
    background: linear-gradient(135deg, #0ea5e9, #22c1a6) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: transparent !important;
}

/* active mobile view tab → sky→teal */
html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="light"] .studio-mobile-tab.is-active,
html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="light"] .studio-mobile-tab[aria-selected="true"] {
    background: linear-gradient(135deg, #0ea5e9, #22c1a6) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: transparent !important;
}

/* active template source tab → sky tint */
html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="light"] .studio-template-source-tab.is-active {
    background: rgba(14, 165, 233, 0.14) !important;
    color: #0369a1 !important;
    -webkit-text-fill-color: #0369a1 !important;
    border-color: rgba(14, 165, 233, 0.3) !important;
}

/* secondary / output / edit buttons → soft sky outline */
html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="light"] .studio-secondary-btn,
html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="light"] .studio-template-edit-btn,
html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="light"] .studio-preview-edit-template-btn {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(14, 165, 233, 0.3) !important;
    color: #0369a1 !important;
    -webkit-text-fill-color: #0369a1 !important;
}
html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="light"] .studio-secondary-btn svg {
    color: #0369a1 !important;
    stroke: #0369a1 !important;
}

/* zoom icon buttons → soft sky outline */
html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="light"] .studio-icon-btn {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(14, 165, 233, 0.28) !important;
    color: #0369a1 !important;
    -webkit-text-fill-color: #0369a1 !important;
}

/* =====================================================================
   6. BACKGROUND SHAPES — match index 1:1 (geometry/position/animation)
   Mode pages already ship the .background-scene markup; studio.css positions
   them faintly. Override to the index pastel scene + animations (light only).
   ===================================================================== */
html[lang][data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="light"] .background-scene .blob { opacity: 0.30 !important; mix-blend-mode: multiply !important; filter: blur(80px) !important; }
html[lang][data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="light"] .blob-a { width: 260px !important; height: 260px !important; left: 8% !important; right: auto !important; top: 6% !important; bottom: auto !important; background: #38bdf8 !important; }
html[lang][data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="light"] .blob-b { width: 320px !important; height: 320px !important; right: 10% !important; left: auto !important; bottom: 6% !important; top: auto !important; background: #34d399 !important; animation: msBlobDrift 14s ease-in-out infinite !important; }
html[lang][data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="light"] .blob-c { width: 190px !important; height: 190px !important; left: 52% !important; right: auto !important; top: 50% !important; bottom: auto !important; background: #fb9da0 !important; animation: msBlobDrift 16s ease-in-out infinite reverse !important; }

html[lang][data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="light"] .curve { border-radius: 999px !important; border: 1px solid rgba(56, 189, 248, 0.32) !important; opacity: 0.85 !important; }
html[lang][data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="light"] .curve-a { width: 720px !important; height: 720px !important; left: -320px !important; right: auto !important; top: 120px !important; bottom: auto !important; transform: rotate(-20deg) !important; }
html[lang][data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="light"] .curve-b { width: 900px !important; height: 540px !important; right: -420px !important; left: auto !important; top: 240px !important; bottom: auto !important; transform: rotate(8deg) !important; }

html[lang][data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="light"] .geo { opacity: 0.85 !important; }
html[lang][data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="light"] .geo-ring { border-radius: 50% !important; border: 1px solid rgba(14, 165, 233, 0.45) !important; }
html[lang][data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="light"] .geo-ring-a { width: 120px !important; height: 120px !important; top: 16% !important; bottom: auto !important; left: 54% !important; right: auto !important; --geo-rot: 0deg; animation: msGeoFloat 12s ease-in-out infinite !important; }
html[lang][data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="light"] .geo-ring-b { width: 80px !important; height: 80px !important; bottom: 18% !important; top: auto !important; left: 12% !important; right: auto !important; --geo-rot: 0deg; animation: msGeoPulse 9s ease-in-out infinite !important; }
html[lang][data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="light"] .geo-square { border-radius: 14px !important; border: 1px solid rgba(167, 139, 250, 0.5) !important; }
html[lang][data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="light"] .geo-square-a { width: 72px !important; height: 72px !important; top: 30% !important; bottom: auto !important; right: 34% !important; left: auto !important; transform: rotate(16deg); animation: msGeoSpinA 13s linear infinite !important; }
html[lang][data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="light"] .geo-square-b { width: 46px !important; height: 46px !important; bottom: 31% !important; top: auto !important; right: 10% !important; left: auto !important; --geo-rot: -22deg; transform: rotate(var(--geo-rot)); animation: msGeoFloat 11s ease-in-out infinite reverse !important; }
html[lang][data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="light"] .geo-triangle { width: 0 !important; height: 0 !important; border-left: 18px solid transparent !important; border-right: 18px solid transparent !important; border-bottom: 30px solid rgba(251, 146, 160, 0.55) !important; }
html[lang][data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="light"] .geo-triangle-a { top: 18% !important; bottom: auto !important; right: 16% !important; left: auto !important; transform: rotate(8deg); animation: msGeoSpinB 14s linear infinite !important; }
html[lang][data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="light"] .geo-triangle-b { bottom: 24% !important; top: auto !important; left: 44% !important; right: auto !important; transform: rotate(-14deg); animation: msGeoPulse 10s ease-in-out infinite !important; }
html[lang][data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="light"] .geo-line { height: 1px !important; border-radius: 999px !important; background: rgba(16, 185, 129, 0.5) !important; }
html[lang][data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="light"] .geo-line-a { width: 180px !important; top: 22% !important; bottom: auto !important; left: 22% !important; right: auto !important; --geo-rot: 26deg; transform: rotate(var(--geo-rot)); animation: msGeoFloat 10s ease-in-out infinite !important; }
html[lang][data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="light"] .geo-line-b { width: 140px !important; bottom: 20% !important; top: auto !important; right: 28% !important; left: auto !important; --geo-rot: -20deg; transform: rotate(var(--geo-rot)); animation: msGeoFloat 12s ease-in-out infinite reverse !important; }

@keyframes msBlobDrift { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(16px, -18px, 0); } }
@keyframes msGeoFloat { 0%, 100% { transform: translate3d(0, 0, 0) rotate(var(--geo-rot, 0deg)); } 50% { transform: translate3d(0, -12px, 0) rotate(var(--geo-rot, 0deg)); } }
@keyframes msGeoSpinA { from { transform: rotate(16deg); } to { transform: rotate(376deg); } }
@keyframes msGeoSpinB { from { transform: rotate(8deg); } to { transform: rotate(-352deg); } }
@keyframes msGeoPulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 0.85; } }

/* =====================================================================
   8. UN-HIDE decorative shapes (mode CSS sets .blob/.curve/.geo display:none).
   Re-show them in LIGHT so the index-style scene actually renders.
   ===================================================================== */
html[lang][data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="light"] .background-scene .blob,
html[lang][data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="light"] .background-scene .curve,
html[lang][data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="light"] .background-scene .geo {
    display: block !important;
}

/* =====================================================================
   10. ROOT CAUSE FIX: the per-mode light theme paints a background on <body>
   itself, which sits ON TOP of .studio-bg (z-index:-1) — hiding BOTH the
   pastel background AND the decorative shapes. Make body transparent in light
   so .studio-bg (pastel + shapes) is actually visible.
   ===================================================================== */
html[lang][data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="light"],
html[lang][data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-arithmetic-theme="light"] {
    background: transparent !important;
}

/* =====================================================================
   11. CARD SURFACES (light) — give the white panels a soft pastel tint +
   sky border + soft colored shadow so they're not flat white (index-like).
   ===================================================================== */
html[lang][data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="light"] .studio-v3-hero,
html[lang][data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="light"] .studio-builder-column,
html[lang][data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="light"] .studio-preview-column,
html[lang][data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="light"] .studio-output-column {
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.9), rgba(235, 246, 255, 0.82)) !important;
    border: 1px solid rgba(56, 189, 248, 0.20) !important;
    box-shadow: 0 18px 44px rgba(60, 110, 140, 0.13) !important;
}
/* hero gets a slightly stronger tint + sky→mint accent feel */
html[lang][data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="light"] .studio-v3-hero {
    background: linear-gradient(135deg, rgba(224, 244, 255, 0.92), rgba(232, 250, 244, 0.86)) !important;
    border: 1px solid rgba(14, 165, 233, 0.24) !important;
}
/* inner step cards — subtle tint instead of flat white */
html[lang][data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="light"] .studio-step-card {
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.94), rgba(240, 249, 255, 0.78)) !important;
    border: 1px solid rgba(56, 189, 248, 0.16) !important;
}
/* trust-strip chips → pastel sky */
html[lang][data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="light"] .studio-trust-strip span {
    background: rgba(56, 189, 248, 0.13) !important;
    color: #0369a1 !important;
    -webkit-text-fill-color: #0369a1 !important;
    border: 1px solid rgba(56, 189, 248, 0.26) !important;
}
/* summary boxes → light pastel tint */
html[lang][data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="light"] .studio-output-summary-item {
    background: rgba(240, 249, 255, 0.72) !important;
    border: 1px solid rgba(56, 189, 248, 0.16) !important;
}

/* =====================================================================
   DARK theme: richer multi-glow navy background (was flat navy + faint
   0.16/0.11 glows). Deeper base + 4 stronger colored radials = the dark
   analog of the light vivid scene. Gated to dark; light path untouched.
   High specificity beats the JS blanket's body background rule.
   ===================================================================== */
html[lang][data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="dark"] {
    background-color: #07152c !important;
    background-image:
        radial-gradient(circle at 12% 16%, rgba(56, 189, 248, 0.24), transparent 42%),
        radial-gradient(circle at 88% 14%, rgba(129, 140, 248, 0.20), transparent 42%),
        radial-gradient(circle at 86% 88%, rgba(45, 212, 191, 0.22), transparent 46%),
        radial-gradient(circle at 12% 86%, rgba(59, 130, 246, 0.22), transparent 44%),
        linear-gradient(140deg, #07152c 0%, #0b2143 48%, #0e2a4d 100%) !important;
    background-attachment: fixed !important;
}

/* =====================================================================
   DARK theme: SHOW the decorative shapes too.
   studio.css hides them (.blob{display:none}) and dims .curve/.geo to
   opacity .16, so dark had a flat navy backdrop with no scene. Un-hide
   them and restore a visible opacity — the glowy-blue DARK colours &
   geometry already come from studio.css (its .background-scene .blob/.geo
   block, tuned for the navy background), so no recolouring here.
   Gated to [data-v2-mode-theme="dark"]; light path is unchanged.
   ===================================================================== */
html[lang][data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="dark"] .background-scene .blob,
html[lang][data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="dark"] .background-scene .curve,
html[lang][data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="dark"] .background-scene .geo {
    display: block !important;
}
/* body is position:relative with an opaque navy background, so a z-index:-1
   scene renders BEHIND it (same stacking gotcha as the help page). Lift the
   scene above the body bg and push the content shell above the scene so the
   shapes show through the open areas without covering the UI. */
html[lang][data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="dark"] .studio-bg.background-scene,
html[lang][data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="dark"] .background-scene {
    z-index: 0 !important;
}
html[lang][data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="dark"] .studio-v3-shell {
    position: relative !important;
    z-index: 1 !important;
}
/* prominent: brighter glows + stronger line-art so the scene clearly reads
   on the navy background (user asked for bold, not subtle). */
html[lang][data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="dark"] .background-scene .blob {
    opacity: 0.62 !important;
    filter: blur(76px) !important;
}
html[lang][data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="dark"] .background-scene .blob-a { background: #3b9bff !important; }
html[lang][data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="dark"] .background-scene .blob-b { background: #2fe0c4 !important; }
html[lang][data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="dark"] .background-scene .blob-c { background: #8fc4ff !important; }
html[lang][data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="dark"] .background-scene .curve {
    opacity: 1 !important;
    border: 1px solid rgba(130, 195, 255, 0.5) !important;
}
html[lang][data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="dark"] .background-scene .geo {
    opacity: 0.9 !important;
}
html[lang][data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="dark"] .background-scene .geo-ring {
    border: 1px solid rgba(135, 201, 255, 0.6) !important;
    box-shadow: 0 0 22px rgba(59, 130, 246, 0.35) !important;
}
html[lang][data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="dark"] .background-scene .geo-square {
    border: 1px solid rgba(126, 189, 255, 0.6) !important;
    box-shadow: 0 0 18px rgba(0, 174, 239, 0.28) !important;
}
html[lang][data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="dark"] .background-scene .geo-triangle {
    border-bottom-color: rgba(124, 196, 255, 0.5) !important;
    filter: drop-shadow(0 0 12px rgba(59, 130, 246, 0.4)) !important;
}
html[lang][data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="dark"] .background-scene .geo-line {
    background: linear-gradient(90deg, rgba(0, 174, 239, 0.04), rgba(125, 206, 255, 0.75), rgba(0, 174, 239, 0.04)) !important;
    box-shadow: 0 0 12px rgba(0, 174, 239, 0.35) !important;
}