/* Shared Mode Studio theme: Premium Dark Navy Education SaaS.
   Loaded after each per-mode stylesheet so all ready V2 modes share one visual system. */
body.index-v2-legacy[class*="studio-v2-"][class*="-route"] {
    --v2-premium-bg-a: #071225;
    --v2-premium-bg-b: #0a1b34;
    --v2-premium-bg-c: #102a51;
    --v2-premium-panel: linear-gradient(180deg, #132b52 0%, #0d2546 100%);
    --v2-premium-panel-glow: radial-gradient(circle at 0% 0%, rgba(59, 130, 246, .18), transparent 38%);
    --v2-premium-inner: linear-gradient(180deg, #263d5b 0%, #122a48 100%);
    --v2-premium-gloss: linear-gradient(180deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .02) 48%, rgba(3, 10, 20, .18));
    --v2-premium-primary: linear-gradient(135deg, #4f7ff7 0%, #06b6d4 100%);
    --v2-premium-primary-strong: linear-gradient(135deg, #2563eb 0%, #0891b2 100%);
    --v2-premium-mint: #8ef3d2;
    --v2-premium-mint-ink: #042f2e;
    --v2-premium-ink: #f8fbff;
    --v2-premium-muted: #cfe0f8;
    --v2-premium-soft-muted: #9fb5d2;
    --v2-premium-panel-border: rgba(59, 130, 246, .58);
    --v2-premium-inner-border: rgba(148, 180, 220, .34);
    --v2-premium-field: #0b1f3c;
    --v2-premium-shadow: 0 22px 48px rgba(2, 8, 23, .3);
    --v2-premium-focus: rgba(56, 189, 248, .42);
    --v2-premium-success-surface: rgba(16, 185, 129, .18);
    --v2-premium-success-border: rgba(142, 243, 210, .72);
    --v2-premium-danger: #fda4af;
    --studio-v3-ink: var(--v2-premium-ink);
    --studio-v3-muted: var(--v2-premium-muted);
    --studio-v3-field: var(--v2-premium-field);
    --arithmetic-primary: var(--v2-premium-primary);
    --arithmetic-primary-strong: var(--v2-premium-primary-strong);
    --arithmetic-mint: var(--v2-premium-mint);
    --arithmetic-mint-ink: var(--v2-premium-mint-ink);
    --arithmetic-panel: var(--v2-premium-panel);
    --arithmetic-inner: var(--v2-premium-inner);
    --arithmetic-inner-gloss: var(--v2-premium-gloss);
    --arithmetic-field: var(--v2-premium-field);
    --arithmetic-ink: var(--v2-premium-ink);
    --arithmetic-muted: var(--v2-premium-muted);
    color: var(--v2-premium-ink);
    background:
        radial-gradient(circle at 18% 0%, rgba(37, 99, 235, .16), transparent 34%),
        radial-gradient(circle at 82% 10%, rgba(6, 182, 212, .11), transparent 30%),
        linear-gradient(180deg, var(--v2-premium-bg-a) 0%, var(--v2-premium-bg-b) 48%, var(--v2-premium-bg-c) 100%) !important;
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"] :where(
    .studio-card,
    .hero-panel,
    .studio-v3-hero,
    .studio-step-card,
    .studio-builder-column,
    .studio-preview-column,
    .studio-output-column
) {
    border-color: var(--v2-premium-panel-border);
    background:
        var(--v2-premium-panel-glow),
        var(--v2-premium-panel);
    color: var(--v2-premium-ink);
    box-shadow:
        var(--v2-premium-shadow),
        inset 0 1px 0 rgba(255, 255, 255, .12);
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"] .studio-v3-hero {
    background:
        radial-gradient(circle at 0% 0%, rgba(20, 184, 166, .14), transparent 36%),
        var(--v2-premium-panel-glow),
        var(--v2-premium-panel);
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"] :where(
    .studio-v3-title h1,
    .studio-section-head h2,
    .studio-preview-head h2,
    .studio-step-head strong,
    .studio-settings-group h3,
    .studio-template-selection-copy strong,
    .studio-template-fallback-copy strong,
    .studio-output-summary-item strong,
    .studio-template-card-title,
    .studio-empty-title,
    .studio-loading-title,
    .studio-template-card-meta,
    .studio-status-title
) {
    color: #ffffff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .22);
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"] :where(
    .studio-v3-title p,
    .studio-section-head p,
    .studio-preview-head p,
    .studio-step-note,
    .studio-preview-summary,
    .studio-field > span,
    .studio-template-selection-copy small,
    .studio-template-fallback-copy small,
    .studio-output-summary-item span,
    .studio-empty-desc,
    .studio-loading-desc,
    .studio-template-card-desc,
    .studio-helper-text,
    .studio-status-desc
) {
    color: var(--v2-premium-muted);
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"] :where(
    .studio-step-head span,
    .studio-v3-title-icon,
    .studio-output-summary-item i,
    .studio-template-selection-icon
) {
    background: linear-gradient(135deg, #3b82f6 0%, #14b8a6 100%);
    color: #06203b;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .24),
        0 14px 28px rgba(20, 184, 166, .22);
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"] :where(
    .studio-template-selection-card,
    .studio-template-fallback-card,
    .studio-template-card,
    .studio-advanced-card,
    .studio-output-summary-item,
    .studio-preview-toolbar,
    .studio-page-input-label,
    .studio-chip,
    .studio-segment-btn,
    .studio-check-row,
    .studio-secondary-btn,
    .studio-icon-btn,
    .studio-ghost-link,
    .studio-mobile-tabs,
    .studio-action-card,
    .studio-trust-strip span,
    .studio-v2-mode-return,
    .studio-empty-card,
    .studio-loading-panel,
    .studio-settings-group,
    .studio-fieldset,
    .studio-template-drawer,
    .studio-template-gallery,
    .studio-output-actions,
    .studio-status-card,
    .studio-alert,
    .studio-toast,
    .studio-progress-card
) {
    border-color: var(--v2-premium-inner-border);
    background:
        var(--v2-premium-gloss),
        var(--v2-premium-inner);
    color: var(--v2-premium-ink);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .14),
        inset 0 -2px 0 rgba(3, 10, 20, .3),
        0 12px 24px rgba(2, 8, 23, .18);
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"] :where(
    input,
    select,
    textarea,
    .studio-template-search input,
    .studio-page-input-label input
) {
    min-height: 44px;
    border-color: rgba(148, 180, 220, .42);
    background: var(--v2-premium-field);
    color: #ffffff;
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"] :where(input[type="checkbox"], input[type="radio"]) {
    min-height: auto;
    accent-color: #8ef3d2;
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"] .studio-check-row input[type="checkbox"],
body.index-v2-legacy[class*="studio-v2-"][class*="-route"] .studio-check-row input[type="radio"] {
    flex: 0 0 16px;
    width: 16px;
    inline-size: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    appearance: auto;
    -webkit-appearance: auto;
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"] :where(input, select, textarea)::placeholder {
    color: rgba(207, 224, 248, .68);
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"] :where(
    .studio-chip:has(input:checked),
    .studio-check-row:has(input:checked),
    .studio-segment-btn.is-active,
    .studio-segment-btn[aria-pressed="true"],
    .studio-template-card.is-selected,
    .studio-template-card[aria-selected="true"],
    .studio-template-selection-card.is-selected,
    .studio-mobile-tab.is-active,
    .studio-mobile-tab[aria-selected="true"]
) {
    border-color: var(--v2-premium-success-border);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, .045) 42%),
        linear-gradient(135deg, rgba(20, 184, 166, .72), rgba(37, 99, 235, .72));
    color: #ffffff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .28),
        inset 0 -2px 0 rgba(4, 47, 46, .42),
        0 16px 30px rgba(20, 184, 166, .24);
}

html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"] .studio-chip:has(input:checked),
html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"] .studio-check-row:has(input:checked),
html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"] .studio-segment-btn.is-active,
body.index-v2-legacy[class*="studio-v2-"][class*="-route"] .studio-template-card.is-selected,
body.index-v2-legacy[class*="studio-v2-"][class*="-route"] .studio-template-card[aria-selected="true"],
body.index-v2-legacy[class*="studio-v2-"][class*="-route"] .studio-template-selection-card.is-selected {
    border-color: var(--v2-premium-success-border) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, .045) 42%),
        linear-gradient(135deg, rgba(20, 184, 166, .72), rgba(37, 99, 235, .72)) !important;
    color: #ffffff !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .28),
        inset 0 -2px 0 rgba(4, 47, 46, .42),
        0 16px 30px rgba(20, 184, 166, .24) !important;
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"] :where(
    .studio-chip:has(input:checked),
    .studio-check-row:has(input:checked),
    .studio-segment-btn.is-active,
    .studio-mobile-tab.is-active
) span {
    color: #ffffff;
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"] :where(
    .studio-cta,
    .studio-output-btn--primary,
    #studioExportBtn.studio-output-btn--primary
) {
    min-height: 58px;
    border-color: rgba(96, 165, 250, .78);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .22), transparent 44%),
        var(--v2-premium-primary);
    color: #ffffff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .28),
        inset 0 -2px 0 rgba(3, 38, 91, .34),
        0 18px 34px rgba(37, 99, 235, .28);
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"] .studio-cta,
body.index-v2-legacy[class*="studio-v2-"][class*="-route"] .studio-output-btn--primary,
body.index-v2-legacy[class*="studio-v2-"][class*="-route"] #studioExportBtn.studio-output-btn--primary {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .22), transparent 44%),
        var(--v2-premium-primary) !important;
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"] :where(
    .studio-template-selection-action,
    .studio-template-access-badge,
    .studio-ready-badge,
    .studio-status-badge--ready,
    .studio-badge--success,
    .studio-pill--success,
    .studio-state-ready,
    .studio-state-success
) {
    min-height: 44px;
    padding: 10px 18px;
    border-color: rgba(101, 229, 191, .78);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .08)),
        var(--v2-premium-mint);
    color: var(--v2-premium-mint-ink);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .42),
        0 12px 24px rgba(20, 184, 166, .18);
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"] .studio-preview-workspace {
    border-color: rgba(148, 180, 220, .28);
    background:
        linear-gradient(rgba(125, 211, 252, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(125, 211, 252, .045) 1px, transparent 1px),
        #071a32;
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"] :where(.studio-action-status, #studioStatus) {
    border-color: rgba(148, 180, 220, .34);
    background: rgba(96, 125, 166, .22);
    color: #ffffff;
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"] :where(
    .studio-action-status.is-success,
    #studioStatus.is-success,
    .studio-alert--success,
    .studio-toast--success
) {
    border-color: var(--v2-premium-success-border);
    background: var(--v2-premium-success-surface);
    color: #dcfff7;
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"] :where(
    .studio-action-status.is-error,
    #studioStatus.is-error,
    .studio-alert--error,
    .studio-toast--error
) {
    border-color: rgba(253, 164, 175, .56);
    background: rgba(244, 63, 94, .14);
    color: #ffe4e8;
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"] :where(
    .studio-secondary-btn,
    .studio-icon-btn,
    .studio-v2-mode-return,
    .studio-template-selection-action,
    .studio-template-access-badge,
    .studio-chip,
    .studio-segment-btn,
    .studio-check-row,
    .studio-mobile-tab
) {
    min-height: 44px;
    touch-action: manipulation;
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"] :where(
    .studio-segment-btn,
    .studio-secondary-btn--compact,
    .studio-icon-btn
) {
    min-width: 44px;
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"] :where(
    .studio-v2-mode-return
) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #f8fbff;
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"] :where(
    .studio-cta,
    .studio-secondary-btn,
    .studio-ghost-link,
    .studio-icon-btn,
    .studio-chip,
    .studio-segment-btn,
    .studio-check-row,
    .studio-template-selection-card,
    .studio-template-fallback-card,
    .studio-template-card,
    .studio-mobile-tab
):hover {
    border-color: rgba(96, 165, 250, .74);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .025) 48%, rgba(3, 10, 20, .16)),
        linear-gradient(180deg, #2b4567 0%, #143052 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .18),
        0 16px 30px rgba(37, 99, 235, .18);
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"] :where(
    .studio-cta,
    .studio-secondary-btn,
    .studio-ghost-link,
    .studio-icon-btn,
    .studio-chip,
    .studio-segment-btn,
    .studio-check-row,
    .studio-template-selection-card,
    .studio-template-fallback-card,
    .studio-template-card
):focus-visible,
body.index-v2-legacy[class*="studio-v2-"][class*="-route"] :where(input, select, textarea):focus-visible {
    outline: 3px solid var(--v2-premium-focus);
    outline-offset: 3px;
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"] :where([disabled], .is-disabled, [aria-disabled="true"]) {
    cursor: not-allowed;
    opacity: .58;
    filter: saturate(.78);
    box-shadow: none;
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"] .studio-loading-overlay {
    background: rgba(3, 10, 24, .62);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"] .studio-loading-spinner {
    border-color: rgba(207, 224, 248, .22);
    border-top-color: #8ef3d2;
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"] .studio-empty-card {
    min-height: 148px;
}

@media (max-width: 720px) {
    body.index-v2-legacy[class*="studio-v2-"][class*="-route"] :where(
        .studio-template-selection-card,
        .studio-template-fallback-card,
        .studio-template-card,
        .studio-output-summary-item,
        .studio-preview-toolbar,
        .studio-mobile-tabs
    ) {
        width: 100%;
        max-width: 100%;
    }
}

/* Arithmetic keeps a local two-mode switch. The shared dark theme is the default,
   while this override lets the "สว่าง" choice become a real light SaaS surface. */
body.studio-v2-arithmetic-route[data-arithmetic-theme="light"] {
    --v2-premium-bg-a: #f6f9ff;
    --v2-premium-bg-b: #eef5ff;
    --v2-premium-bg-c: #e8f7fb;
    --v2-premium-panel: linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%);
    --v2-premium-panel-glow: radial-gradient(circle at 0% 0%, rgba(37, 99, 235, .11), transparent 40%);
    --v2-premium-inner: linear-gradient(180deg, #ffffff 0%, #edf4ff 100%);
    --v2-premium-gloss: linear-gradient(180deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .22) 55%, rgba(37, 99, 235, .045));
    --v2-premium-primary: linear-gradient(135deg, #3f7df7 0%, #0ea5e9 100%);
    --v2-premium-primary-strong: linear-gradient(135deg, #2563eb 0%, #0284c7 100%);
    --v2-premium-mint: #c8f3e8;
    --v2-premium-mint-ink: #064236;
    --v2-premium-ink: #10233f;
    --v2-premium-muted: #53657f;
    --v2-premium-soft-muted: #6b7c96;
    --v2-premium-panel-border: rgba(58, 89, 140, .18);
    --v2-premium-inner-border: rgba(58, 89, 140, .18);
    --v2-premium-field: #ffffff;
    --v2-premium-shadow: 0 22px 48px rgba(41, 73, 125, .14);
    --arithmetic-bg-a: var(--v2-premium-bg-a);
    --arithmetic-bg-b: var(--v2-premium-bg-b);
    --arithmetic-bg-c: var(--v2-premium-bg-c);
    --arithmetic-panel: var(--v2-premium-panel);
    --arithmetic-panel-glow: var(--v2-premium-panel-glow);
    --arithmetic-inner: var(--v2-premium-inner);
    --arithmetic-inner-gloss: var(--v2-premium-gloss);
    --arithmetic-primary: var(--v2-premium-primary);
    --arithmetic-primary-strong: var(--v2-premium-primary-strong);
    --arithmetic-mint: var(--v2-premium-mint);
    --arithmetic-mint-ink: var(--v2-premium-mint-ink);
    --arithmetic-panel-border: var(--v2-premium-panel-border);
    --arithmetic-inner-border: var(--v2-premium-inner-border);
    --arithmetic-ink: var(--v2-premium-ink);
    --arithmetic-muted: var(--v2-premium-muted);
    --arithmetic-soft-muted: var(--v2-premium-soft-muted);
    --arithmetic-field: var(--v2-premium-field);
    --arithmetic-shadow: var(--v2-premium-shadow);
    --studio-v3-ink: var(--v2-premium-ink);
    --studio-v3-muted: var(--v2-premium-muted);
    --studio-v3-field: var(--v2-premium-field);
    color: var(--v2-premium-ink);
    background:
        radial-gradient(circle at 16% 0%, rgba(37, 99, 235, .13), transparent 34%),
        radial-gradient(circle at 82% 8%, rgba(14, 165, 233, .12), transparent 30%),
        linear-gradient(180deg, var(--v2-premium-bg-a) 0%, var(--v2-premium-bg-b) 48%, var(--v2-premium-bg-c) 100%) !important;
}

body.studio-v2-arithmetic-route[data-arithmetic-theme="light"] :where(
    .studio-card,
    .hero-panel,
    .studio-v3-hero,
    .studio-step-card,
    .studio-builder-column,
    .studio-preview-column,
    .studio-output-column
) {
    border-color: var(--v2-premium-panel-border);
    background:
        var(--v2-premium-panel-glow),
        var(--v2-premium-panel);
    color: var(--v2-premium-ink);
    box-shadow:
        var(--v2-premium-shadow),
        inset 0 1px 0 rgba(255, 255, 255, .9);
}

body.studio-v2-arithmetic-route[data-arithmetic-theme="light"] :where(
    .studio-template-selection-card,
    .studio-template-fallback-card,
    .studio-template-card,
    .studio-advanced-card,
    .studio-output-summary-item,
    .studio-preview-toolbar,
    .studio-page-input-label,
    .studio-chip,
    .studio-segment-btn,
    .studio-check-row,
    .studio-secondary-btn,
    .studio-icon-btn,
    .studio-ghost-link,
    .studio-mobile-tabs,
    .studio-action-card,
    .studio-trust-strip span,
    .studio-v2-mode-return
) {
    border-color: var(--v2-premium-inner-border);
    background:
        var(--v2-premium-gloss),
        var(--v2-premium-inner);
    color: var(--v2-premium-ink);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .9),
        0 12px 24px rgba(41, 73, 125, .1);
}

body.studio-v2-arithmetic-route[data-arithmetic-theme="light"] :where(
    .studio-v3-title h1,
    .studio-section-head h2,
    .studio-preview-head h2,
    .studio-step-head strong,
    .studio-settings-group h3,
    .studio-template-selection-copy strong,
    .studio-template-fallback-copy strong,
    .studio-output-summary-item strong
) {
    color: #10233f;
    text-shadow: none;
}

body.studio-v2-arithmetic-route[data-arithmetic-theme="light"] :where(
    .studio-v3-title p,
    .studio-section-head p,
    .studio-preview-head p,
    .studio-step-note,
    .studio-preview-summary,
    .studio-field > span,
    .studio-template-selection-copy small,
    .studio-template-fallback-copy small,
    .studio-output-summary-item span
) {
    color: #53657f;
}

body.studio-v2-arithmetic-route[data-arithmetic-theme="light"] :where(input, select, textarea),
body.studio-v2-arithmetic-route[data-arithmetic-theme="light"] .studio-field :where(input, select, textarea),
body.studio-v2-arithmetic-route[data-arithmetic-theme="light"] .studio-template-search input,
body.studio-v2-arithmetic-route[data-arithmetic-theme="light"] .studio-page-input-label input {
    border-color: rgba(58, 89, 140, .22);
    background: #ffffff;
    color: #10233f;
}

body.studio-v2-arithmetic-route[data-arithmetic-theme="light"] .studio-preview-workspace {
    border-color: rgba(58, 89, 140, .18);
    background:
        linear-gradient(rgba(37, 99, 235, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37, 99, 235, .045) 1px, transparent 1px),
        #f7fbff;
}

body.studio-v2-arithmetic-route[data-arithmetic-theme="light"] :where(.studio-action-status, #studioStatus) {
    border-color: rgba(58, 89, 140, .18);
    background: rgba(37, 99, 235, .08);
    color: #10233f;
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-arithmetic-theme="light"][class*="-route"] {
    color: #10233f !important;
    background:
        radial-gradient(circle at 16% 0%, rgba(37, 99, 235, .13), transparent 34%),
        radial-gradient(circle at 82% 8%, rgba(14, 165, 233, .12), transparent 30%),
        linear-gradient(180deg, #f6f9ff 0%, #eef5ff 48%, #e8f7fb 100%) !important;
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-arithmetic-theme="light"][class*="-route"] :where(
    .studio-card,
    .hero-panel,
    .studio-v3-hero,
    .studio-step-card,
    .studio-builder-column,
    .studio-preview-column,
    .studio-output-column
) {
    border-color: rgba(58, 89, 140, .18) !important;
    background:
        radial-gradient(circle at 0% 0%, rgba(37, 99, 235, .11), transparent 40%),
        linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%) !important;
    color: #10233f !important;
    box-shadow:
        0 22px 48px rgba(41, 73, 125, .14),
        inset 0 1px 0 rgba(255, 255, 255, .9) !important;
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-arithmetic-theme="light"][class*="-route"] :where(
    .studio-template-selection-card,
    .studio-template-fallback-card,
    .studio-template-card,
    .studio-advanced-card,
    .studio-output-summary-item,
    .studio-preview-toolbar,
    .studio-page-input-label,
    .studio-chip,
    .studio-segment-btn,
    .studio-check-row,
    .studio-secondary-btn,
    .studio-icon-btn,
    .studio-ghost-link,
    .studio-mobile-tabs,
    .studio-action-card,
    .studio-trust-strip span,
    .studio-v2-mode-return
) {
    border-color: rgba(58, 89, 140, .18) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .22) 55%, rgba(37, 99, 235, .045)),
        linear-gradient(180deg, #ffffff 0%, #edf4ff 100%) !important;
    color: #10233f !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .9),
        0 12px 24px rgba(41, 73, 125, .1) !important;
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-arithmetic-theme="light"][class*="-route"] :where(
    .studio-v3-title h1,
    .studio-section-head h2,
    .studio-preview-head h2,
    .studio-step-head strong,
    .studio-settings-group h3,
    .studio-template-selection-copy strong,
    .studio-template-fallback-copy strong,
    .studio-output-summary-item strong
) {
    color: #10233f !important;
    text-shadow: none !important;
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-arithmetic-theme="light"][class*="-route"] :where(
    .studio-v3-title p,
    .studio-section-head p,
    .studio-preview-head p,
    .studio-step-note,
    .studio-preview-summary,
    .studio-field > span,
    .studio-template-selection-copy small,
    .studio-template-fallback-copy small,
    .studio-output-summary-item span
) {
    color: #53657f !important;
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-arithmetic-theme="light"][class*="-route"] :where(input, select, textarea),
body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-arithmetic-theme="light"][class*="-route"] .studio-field :where(input, select, textarea),
body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-arithmetic-theme="light"][class*="-route"] .studio-template-search input,
body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-arithmetic-theme="light"][class*="-route"] .studio-page-input-label input {
    border-color: rgba(58, 89, 140, .22) !important;
    background: #ffffff !important;
    color: #10233f !important;
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-arithmetic-theme="light"][class*="-route"] .studio-preview-workspace {
    border-color: rgba(58, 89, 140, .18) !important;
    background:
        linear-gradient(rgba(37, 99, 235, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37, 99, 235, .045) 1px, transparent 1px),
        #f7fbff !important;
}

body.index-v2-legacy[data-v2-mode-theme="light"][class*="studio-v2-"][class*="-route"] {
    --v2-premium-bg-a: #f6f9ff;
    --v2-premium-bg-b: #eef5ff;
    --v2-premium-bg-c: #e8f7fb;
    --v2-premium-panel: linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%);
    --v2-premium-panel-glow: radial-gradient(circle at 0% 0%, rgba(37, 99, 235, .11), transparent 40%);
    --v2-premium-inner: linear-gradient(180deg, #ffffff 0%, #edf4ff 100%);
    --v2-premium-gloss: linear-gradient(180deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .22) 55%, rgba(37, 99, 235, .045));
    --v2-premium-primary: linear-gradient(135deg, #3f7df7 0%, #0ea5e9 100%);
    --v2-premium-primary-strong: linear-gradient(135deg, #2563eb 0%, #0284c7 100%);
    --v2-premium-mint: #c8f3e8;
    --v2-premium-mint-ink: #064236;
    --v2-premium-ink: #10233f;
    --v2-premium-muted: #53657f;
    --v2-premium-soft-muted: #6b7c96;
    --v2-premium-panel-border: rgba(58, 89, 140, .18);
    --v2-premium-inner-border: rgba(58, 89, 140, .18);
    --v2-premium-field: #ffffff;
    --v2-premium-shadow: 0 22px 48px rgba(41, 73, 125, .14);
    --studio-v3-ink: #10233f;
    --studio-v3-muted: #53657f;
    --studio-v3-field: #ffffff;
    color: #10233f !important;
    background:
        radial-gradient(circle at 16% 0%, rgba(37, 99, 235, .13), transparent 34%),
        radial-gradient(circle at 82% 8%, rgba(14, 165, 233, .12), transparent 30%),
        linear-gradient(180deg, #f6f9ff 0%, #eef5ff 48%, #e8f7fb 100%) !important;
}

body.index-v2-legacy[data-v2-mode-theme="light"][class*="studio-v2-"][class*="-route"] :where(
    .studio-card,
    .hero-panel,
    .studio-v3-hero,
    .studio-step-card,
    .studio-builder-column,
    .studio-preview-column,
    .studio-output-column
) {
    border-color: rgba(58, 89, 140, .18) !important;
    background:
        radial-gradient(circle at 0% 0%, rgba(37, 99, 235, .11), transparent 40%),
        linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%) !important;
    color: #10233f !important;
    box-shadow:
        0 22px 48px rgba(41, 73, 125, .14),
        inset 0 1px 0 rgba(255, 255, 255, .9) !important;
}

body.index-v2-legacy[data-v2-mode-theme="light"][class*="studio-v2-"][class*="-route"] :where(
    .studio-template-selection-card,
    .studio-template-fallback-card,
    .studio-template-card,
    .studio-advanced-card,
    .studio-output-summary-item,
    .studio-preview-toolbar,
    .studio-page-input-label,
    .studio-chip,
    .studio-segment-btn,
    .studio-check-row,
    .studio-secondary-btn,
    .studio-icon-btn,
    .studio-ghost-link,
    .studio-mobile-tabs,
    .studio-action-card,
    .studio-trust-strip span,
    .studio-v2-mode-return
) {
    border-color: rgba(58, 89, 140, .18) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .22) 55%, rgba(37, 99, 235, .045)),
        linear-gradient(180deg, #ffffff 0%, #edf4ff 100%) !important;
    color: #10233f !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .9),
        0 12px 24px rgba(41, 73, 125, .1) !important;
}

body.index-v2-legacy[data-v2-mode-theme="light"][class*="studio-v2-"][class*="-route"] :where(
    .studio-v3-title h1,
    .studio-section-head h2,
    .studio-preview-head h2,
    .studio-step-head strong,
    .studio-settings-group h3,
    .studio-template-selection-copy strong,
    .studio-template-fallback-copy strong,
    .studio-output-summary-item strong,
    .sgv2-brand-name,
    .sgv2-brand-tagline
) {
    color: #10233f !important;
    text-shadow: none !important;
}

body.index-v2-legacy[data-v2-mode-theme="light"][class*="studio-v2-"][class*="-route"] :where(
    .studio-v3-title p,
    .studio-section-head p,
    .studio-preview-head p,
    .studio-step-note,
    .studio-preview-summary,
    .studio-field > span,
    .studio-template-selection-copy small,
    .studio-template-fallback-copy small,
    .studio-output-summary-item span
) {
    color: #53657f !important;
}

body.index-v2-legacy[data-v2-mode-theme="light"][class*="studio-v2-"][class*="-route"] :where(input, select, textarea),
body.index-v2-legacy[data-v2-mode-theme="light"][class*="studio-v2-"][class*="-route"] .studio-field :where(input, select, textarea),
body.index-v2-legacy[data-v2-mode-theme="light"][class*="studio-v2-"][class*="-route"] .studio-template-search input,
body.index-v2-legacy[data-v2-mode-theme="light"][class*="studio-v2-"][class*="-route"] .studio-page-input-label input {
    border-color: rgba(58, 89, 140, .22) !important;
    background: #ffffff !important;
    color: #10233f !important;
}

body.index-v2-legacy[data-v2-mode-theme="light"][class*="studio-v2-"][class*="-route"] .studio-preview-workspace {
    border-color: rgba(58, 89, 140, .18) !important;
    background:
        linear-gradient(rgba(37, 99, 235, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37, 99, 235, .045) 1px, transparent 1px),
        #f7fbff !important;
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"] .studio-settings-panel > .studio-settings-group,
body.index-v2-legacy[class*="studio-v2-"][class*="-route"] .studio-settings-panel .studio-fieldset {
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"] .studio-settings-panel > .studio-settings-group {
    margin-top: 18px;
    padding-top: 20px;
    border-top: 1px solid rgba(148, 180, 220, .18) !important;
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"] .studio-settings-panel > .studio-settings-group:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0 !important;
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"] .studio-settings-group h3,
body.index-v2-legacy[class*="studio-v2-"][class*="-route"] .studio-fieldset > legend {
    margin-bottom: 12px;
    color: var(--arithmetic-ink, var(--v2-premium-ink)) !important;
    text-shadow: none !important;
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"] .studio-action-card .studio-output-actions {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"] .studio-action-card .studio-export-rng-check,
body.index-v2-legacy[class*="studio-v2-"][class*="-route"] .studio-action-card #studioRefreshBtn,
body.index-v2-legacy[class*="studio-v2-"][class*="-route"] .studio-action-card #studioStatus {
    border-color: rgba(148, 180, 220, .2) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015)),
        rgba(255, 255, 255, .035) !important;
    box-shadow: none !important;
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"] .studio-action-card .studio-export-rng-check:has(input:checked) {
    border-color: rgba(20, 184, 166, .42) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)),
        color-mix(in srgb, var(--arithmetic-good, #10b981) 18%, transparent) !important;
    color: var(--arithmetic-ink, var(--v2-premium-ink)) !important;
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"] .studio-action-card .studio-export-rng-check:has(input:checked) span {
    color: var(--arithmetic-ink, var(--v2-premium-ink)) !important;
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"] .studio-action-card #studioRefreshBtn {
    color: var(--arithmetic-ink, var(--v2-premium-ink)) !important;
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"] .studio-action-card #studioStatus {
    color: var(--arithmetic-muted, var(--v2-premium-muted)) !important;
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"] .studio-action-card #studioExportBtn.studio-output-btn--primary {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .22),
        0 10px 22px rgba(37, 99, 235, .2) !important;
}

/* Arithmetic light mode: smoother surfaces with softer control elevation. */
html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"]:is([data-v2-mode-theme="light"], [data-arithmetic-theme="light"]) {
    --arithmetic-ink: #10233f;
    --arithmetic-muted: #53657f;
    --arithmetic-light-border: rgba(58, 89, 140, .105);
    --arithmetic-light-border-strong: rgba(37, 99, 235, .24);
    --arithmetic-light-panel: linear-gradient(180deg, rgba(255, 255, 255, .86) 0%, rgba(246, 250, 255, .76) 100%);
    --arithmetic-light-control: linear-gradient(180deg, rgba(255, 255, 255, .94) 0%, rgba(244, 249, 255, .86) 100%);
    --arithmetic-light-active: linear-gradient(135deg, #7ad9df 0%, #5f96ef 100%);
    --arithmetic-light-shadow: 0 14px 34px rgba(41, 73, 125, .075);
    --arithmetic-light-control-shadow: 0 5px 12px rgba(41, 73, 125, .055);
    background:
        radial-gradient(circle at 14% 0%, rgba(14, 165, 233, .11), transparent 33%),
        radial-gradient(circle at 82% 8%, rgba(37, 99, 235, .085), transparent 30%),
        linear-gradient(180deg, #f9fbff 0%, #f0f7ff 52%, #eef9fb 100%) !important;
}

html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"]:is([data-v2-mode-theme="light"], [data-arithmetic-theme="light"]) .studio-bg {
    background:
        linear-gradient(rgba(37, 99, 235, .032) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37, 99, 235, .028) 1px, transparent 1px) !important;
    background-size: 36px 36px !important;
    opacity: .24 !important;
}

html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"]:is([data-v2-mode-theme="light"], [data-arithmetic-theme="light"]) :where(
    .studio-card,
    .hero-panel,
    .studio-v3-hero,
    .studio-builder-column,
    .studio-preview-column,
    .studio-output-column
) {
    border-color: var(--arithmetic-light-border) !important;
    background: var(--arithmetic-light-panel) !important;
    color: var(--arithmetic-ink) !important;
    box-shadow:
        var(--arithmetic-light-shadow),
        inset 0 1px 0 rgba(255, 255, 255, .86) !important;
}

html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"]:is([data-v2-mode-theme="light"], [data-arithmetic-theme="light"]) .studio-step-card {
    border-color: rgba(58, 89, 140, .045) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .62), rgba(245, 250, 255, .36)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .72),
        0 7px 18px rgba(41, 73, 125, .04) !important;
}

html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"]:is([data-v2-mode-theme="light"], [data-arithmetic-theme="light"]) .studio-settings-panel > .studio-settings-group {
    margin-top: 14px !important;
    padding-top: 14px !important;
    border-top-color: rgba(58, 89, 140, .08) !important;
    background: transparent !important;
    box-shadow: none !important;
}

html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"]:is([data-v2-mode-theme="light"], [data-arithmetic-theme="light"]) .studio-settings-panel > .studio-settings-group:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

html[data-index-v2-theme] body.has-site-topbar-v2.index-v2-legacy.studio-v2-arithmetic-route:is([data-v2-mode-theme="light"], [data-arithmetic-theme="light"]) .studio-settings-panel .studio-field {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"]:is([data-v2-mode-theme="light"], [data-arithmetic-theme="light"]) :where(
    .studio-template-selection-card,
    .studio-template-fallback-card,
    .studio-template-card,
    .studio-advanced-card,
    .studio-output-summary-item,
    .studio-preview-toolbar,
    .studio-page-input-label,
    .studio-chip,
    .studio-segment-btn,
    .studio-check-row,
    .studio-secondary-btn,
    .studio-icon-btn,
    .studio-ghost-link,
    .studio-mobile-tabs,
    .studio-action-card,
    .studio-trust-strip span,
    .studio-v2-mode-return
) {
    border-color: var(--arithmetic-light-border) !important;
    background: var(--arithmetic-light-control) !important;
    color: var(--arithmetic-ink) !important;
    box-shadow:
        var(--arithmetic-light-control-shadow),
        inset 0 1px 0 rgba(255, 255, 255, .86) !important;
}

html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"]:is([data-v2-mode-theme="light"], [data-arithmetic-theme="light"]) :where(
    .studio-chip,
    .studio-segment-btn,
    .studio-check-row
) {
    border-radius: 9px !important;
    transform: none;
}

html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"]:is([data-v2-mode-theme="light"], [data-arithmetic-theme="light"]) :where(
    .studio-chip:hover,
    .studio-segment-btn:hover,
    .studio-check-row:hover
) {
    border-color: rgba(37, 99, 235, .18) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .98) 0%, rgba(238, 247, 255, .9) 100%) !important;
    box-shadow:
        0 9px 18px rgba(41, 73, 125, .09),
        inset 0 1px 0 rgba(255, 255, 255, .9) !important;
    transform: translateY(-1px);
}

html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"]:is([data-v2-mode-theme="light"], [data-arithmetic-theme="light"]) :where(
    .studio-chip:has(input:checked),
    .studio-check-row:has(input:checked),
    .studio-segment-btn.is-active,
    .studio-segment-btn[aria-pressed="true"],
    .studio-mobile-tab.is-active,
    .studio-mobile-tab[aria-selected="true"]
) {
    border-color: rgba(14, 165, 233, .22) !important;
    background: var(--arithmetic-light-active) !important;
    color: #ffffff !important;
    box-shadow:
        0 7px 14px rgba(37, 99, 235, .13),
        inset 0 1px 0 rgba(255, 255, 255, .28) !important;
}

html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"]:is([data-v2-mode-theme="light"], [data-arithmetic-theme="light"]) :where(
    .studio-chip:has(input:checked),
    .studio-check-row:has(input:checked),
    .studio-segment-btn.is-active,
    .studio-segment-btn[aria-pressed="true"]
) span {
    color: #ffffff !important;
    text-shadow: none !important;
}

html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"]:is([data-v2-mode-theme="light"], [data-arithmetic-theme="light"]) .studio-chip-grid--operations .studio-chip--operation-symbol {
    min-height: 64px;
    border-radius: 10px !important;
}

html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"]:is([data-v2-mode-theme="light"], [data-arithmetic-theme="light"]) .studio-operation-symbol {
    filter: drop-shadow(0 1px 2px rgba(15, 35, 63, .14));
}

html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"]:is([data-v2-mode-theme="light"], [data-arithmetic-theme="light"]) .studio-operation-caption {
    font-weight: 800;
}

html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"]:is([data-v2-mode-theme="light"], [data-arithmetic-theme="light"]) :where(input, select, textarea),
html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"]:is([data-v2-mode-theme="light"], [data-arithmetic-theme="light"]) .studio-field :where(input, select, textarea),
html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"]:is([data-v2-mode-theme="light"], [data-arithmetic-theme="light"]) .studio-page-input-label input {
    border-color: rgba(58, 89, 140, .14) !important;
    background: rgba(255, 255, 255, .92) !important;
    color: var(--arithmetic-ink) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .86) !important;
}

html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"]:is([data-v2-mode-theme="light"], [data-arithmetic-theme="light"]) .studio-preview-workspace {
    border-color: rgba(58, 89, 140, .09) !important;
    background:
        linear-gradient(rgba(37, 99, 235, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37, 99, 235, .03) 1px, transparent 1px),
        #f8fbff !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .82) !important;
}

html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"]:is([data-v2-mode-theme="light"], [data-arithmetic-theme="light"]) .studio-v2-mode-return {
    color: var(--arithmetic-ink) !important;
}

html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"]:is([data-v2-mode-theme="light"], [data-arithmetic-theme="light"]) .studio-chip:has(input:checked),
html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"]:is([data-v2-mode-theme="light"], [data-arithmetic-theme="light"]) .studio-check-row:has(input:checked),
html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"]:is([data-v2-mode-theme="light"], [data-arithmetic-theme="light"]) .studio-segment-btn.is-active,
html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"]:is([data-v2-mode-theme="light"], [data-arithmetic-theme="light"]) .studio-segment-btn[aria-pressed="true"],
html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"]:is([data-v2-mode-theme="light"], [data-arithmetic-theme="light"]) .studio-mobile-tab.is-active,
html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"]:is([data-v2-mode-theme="light"], [data-arithmetic-theme="light"]) .studio-mobile-tab[aria-selected="true"] {
    border-color: rgba(14, 165, 233, .22) !important;
    background: var(--arithmetic-light-active) !important;
    color: #ffffff !important;
    box-shadow:
        0 7px 14px rgba(37, 99, 235, .13),
        inset 0 1px 0 rgba(255, 255, 255, .28) !important;
}

html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"]:is([data-v2-mode-theme="light"], [data-arithmetic-theme="light"]) .studio-chip:has(input:checked) span,
html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"]:is([data-v2-mode-theme="light"], [data-arithmetic-theme="light"]) .studio-check-row:has(input:checked) span,
html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"]:is([data-v2-mode-theme="light"], [data-arithmetic-theme="light"]) .studio-segment-btn.is-active span,
html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"]:is([data-v2-mode-theme="light"], [data-arithmetic-theme="light"]) .studio-segment-btn[aria-pressed="true"] span {
    color: #ffffff !important;
    text-shadow: none !important;
}

/* Shared Mode Studio light mode smoothing across every worksheet mode. */
html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="light"],
html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-arithmetic-theme="light"] {
    --mode-light-smooth-ink: #10233f;
    --mode-light-smooth-muted: #53657f;
    --mode-light-smooth-border: rgba(58, 89, 140, .105);
    --mode-light-smooth-panel: linear-gradient(180deg, rgba(255, 255, 255, .86) 0%, rgba(246, 250, 255, .76) 100%);
    --mode-light-smooth-control: linear-gradient(180deg, rgba(255, 255, 255, .94) 0%, rgba(244, 249, 255, .86) 100%);
    --mode-light-smooth-hover: linear-gradient(180deg, rgba(255, 255, 255, .98) 0%, rgba(238, 247, 255, .9) 100%);
    --mode-light-smooth-active: linear-gradient(135deg, #7ad9df 0%, #5f96ef 100%);
    --mode-light-smooth-panel-shadow: 0 14px 34px rgba(41, 73, 125, .075);
    --mode-light-smooth-control-shadow: 0 5px 12px rgba(41, 73, 125, .055);
    --arithmetic-ink: var(--mode-light-smooth-ink);
    --arithmetic-muted: var(--mode-light-smooth-muted);
    background:
        radial-gradient(circle at 14% 0%, rgba(14, 165, 233, .11), transparent 33%),
        radial-gradient(circle at 82% 8%, rgba(37, 99, 235, .085), transparent 30%),
        linear-gradient(180deg, #f9fbff 0%, #f0f7ff 52%, #eef9fb 100%) !important;
}

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:
        linear-gradient(rgba(37, 99, 235, .032) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37, 99, 235, .028) 1px, transparent 1px) !important;
    background-size: 36px 36px !important;
    opacity: .24 !important;
}

html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="light"] :where(
    .studio-card,
    .hero-panel,
    .studio-v3-hero,
    .studio-builder-column,
    .studio-preview-column,
    .studio-output-column
),
html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-arithmetic-theme="light"] :where(
    .studio-card,
    .hero-panel,
    .studio-v3-hero,
    .studio-builder-column,
    .studio-preview-column,
    .studio-output-column
) {
    border-color: var(--mode-light-smooth-border) !important;
    background: var(--mode-light-smooth-panel) !important;
    color: var(--mode-light-smooth-ink) !important;
    box-shadow:
        var(--mode-light-smooth-panel-shadow),
        inset 0 1px 0 rgba(255, 255, 255, .86) !important;
}

html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="light"] .studio-step-card,
html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-arithmetic-theme="light"] .studio-step-card {
    border-color: rgba(58, 89, 140, .045) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .62), rgba(245, 250, 255, .36)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .72),
        0 7px 18px rgba(41, 73, 125, .04) !important;
}

html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="light"] .studio-settings-panel > .studio-settings-group,
html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-arithmetic-theme="light"] .studio-settings-panel > .studio-settings-group {
    margin-top: 14px !important;
    padding-top: 14px !important;
    border-top-color: rgba(58, 89, 140, .08) !important;
    background: transparent !important;
    box-shadow: none !important;
}

html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="light"] .studio-settings-panel > .studio-settings-group:first-child,
html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-arithmetic-theme="light"] .studio-settings-panel > .studio-settings-group:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

html[data-index-v2-theme] body.has-site-topbar-v2.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="light"] .studio-settings-panel .studio-field,
html[data-index-v2-theme] body.has-site-topbar-v2.index-v2-legacy.studio-v2-arithmetic-route[data-arithmetic-theme="light"] .studio-settings-panel .studio-field {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="light"] :where(
    .studio-template-selection-card,
    .studio-template-fallback-card,
    .studio-template-card,
    .studio-advanced-card,
    .studio-output-summary-item,
    .studio-preview-toolbar,
    .studio-page-input-label,
    .studio-chip,
    .studio-segment-btn,
    .studio-check-row,
    .studio-secondary-btn,
    .studio-icon-btn,
    .studio-ghost-link,
    .studio-mobile-tabs,
    .studio-action-card,
    .studio-trust-strip span,
    .studio-v2-mode-return
),
html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-arithmetic-theme="light"] :where(
    .studio-template-selection-card,
    .studio-template-fallback-card,
    .studio-template-card,
    .studio-advanced-card,
    .studio-output-summary-item,
    .studio-preview-toolbar,
    .studio-page-input-label,
    .studio-chip,
    .studio-segment-btn,
    .studio-check-row,
    .studio-secondary-btn,
    .studio-icon-btn,
    .studio-ghost-link,
    .studio-mobile-tabs,
    .studio-action-card,
    .studio-trust-strip span,
    .studio-v2-mode-return
) {
    border-color: var(--mode-light-smooth-border) !important;
    background: var(--mode-light-smooth-control) !important;
    color: var(--mode-light-smooth-ink) !important;
    box-shadow:
        var(--mode-light-smooth-control-shadow),
        inset 0 1px 0 rgba(255, 255, 255, .86) !important;
}

html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="light"] :where(
    .studio-chip,
    .studio-segment-btn,
    .studio-check-row
),
html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-arithmetic-theme="light"] :where(
    .studio-chip,
    .studio-segment-btn,
    .studio-check-row
) {
    border-radius: 9px !important;
    transform: none;
}

html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="light"] :where(
    .studio-chip:hover,
    .studio-segment-btn:hover,
    .studio-check-row:hover
),
html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-arithmetic-theme="light"] :where(
    .studio-chip:hover,
    .studio-segment-btn:hover,
    .studio-check-row:hover
) {
    border-color: rgba(37, 99, 235, .18) !important;
    background: var(--mode-light-smooth-hover) !important;
    box-shadow:
        0 9px 18px rgba(41, 73, 125, .09),
        inset 0 1px 0 rgba(255, 255, 255, .9) !important;
    transform: translateY(-1px);
}

html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="light"] .studio-chip:has(input:checked),
html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="light"] .studio-check-row:has(input:checked),
html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="light"] .studio-segment-btn.is-active,
html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="light"] .studio-segment-btn[aria-pressed="true"],
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"],
html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-arithmetic-theme="light"] .studio-chip:has(input:checked),
html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-arithmetic-theme="light"] .studio-check-row:has(input:checked),
html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-arithmetic-theme="light"] .studio-segment-btn.is-active,
html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-arithmetic-theme="light"] .studio-segment-btn[aria-pressed="true"],
html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-arithmetic-theme="light"] .studio-mobile-tab.is-active,
html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-arithmetic-theme="light"] .studio-mobile-tab[aria-selected="true"] {
    border-color: rgba(14, 165, 233, .22) !important;
    background: var(--mode-light-smooth-active) !important;
    color: #ffffff !important;
    box-shadow:
        0 7px 14px rgba(37, 99, 235, .13),
        inset 0 1px 0 rgba(255, 255, 255, .28) !important;
}

html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="light"] .studio-chip:has(input:checked) span,
html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="light"] .studio-check-row:has(input:checked) span,
html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="light"] .studio-segment-btn.is-active span,
html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="light"] .studio-segment-btn[aria-pressed="true"] span,
html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-arithmetic-theme="light"] .studio-chip:has(input:checked) span,
html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-arithmetic-theme="light"] .studio-check-row:has(input:checked) span,
html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-arithmetic-theme="light"] .studio-segment-btn.is-active span,
html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-arithmetic-theme="light"] .studio-segment-btn[aria-pressed="true"] span {
    color: #ffffff !important;
    text-shadow: none !important;
}

html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="light"] :where(input, select, textarea),
html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="light"] .studio-field :where(input, select, textarea),
html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="light"] .studio-page-input-label input,
html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-arithmetic-theme="light"] :where(input, select, textarea),
html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-arithmetic-theme="light"] .studio-field :where(input, select, textarea),
html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-arithmetic-theme="light"] .studio-page-input-label input {
    border-color: rgba(58, 89, 140, .14) !important;
    background: rgba(255, 255, 255, .92) !important;
    color: var(--mode-light-smooth-ink) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .86) !important;
}

html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="light"] .studio-preview-workspace,
html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-arithmetic-theme="light"] .studio-preview-workspace {
    border-color: rgba(58, 89, 140, .09) !important;
    background:
        linear-gradient(rgba(37, 99, 235, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37, 99, 235, .03) 1px, transparent 1px),
        #f8fbff !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .82) !important;
}

html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-v2-mode-theme="light"] .studio-v2-mode-return,
html[data-index-v2-theme] body.index-v2-legacy[class*="studio-v2-"][class*="-route"][data-arithmetic-theme="light"] .studio-v2-mode-return {
    color: var(--mode-light-smooth-ink) !important;
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"] .studio-template-gallery {
    gap: 12px;
    padding: 4px 2px 10px;
    border: 0;
    background: transparent;
    box-shadow: none;
    max-height: clamp(460px, 62dvh, 580px);
    scrollbar-gutter: stable;
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"] #studioTemplateDrawer,
body.index-v2-legacy[class*="studio-v2-"][class*="-route"] .studio-template-drawer {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    box-shadow: none;
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"] .studio-template-selection {
    margin: 8px 0 14px;
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"] .studio-template-selection-card {
    min-height: 64px;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 12px;
    padding: 10px 14px;
    border: 1px solid rgba(123, 145, 178, .18);
    border-radius: 14px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(248, 251, 255, .94));
    color: #172943;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .96),
        0 8px 18px rgba(42, 72, 120, .06);
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"] .studio-template-selection-card:hover {
    transform: none;
    border-color: rgba(56, 189, 248, .28);
    background:
        linear-gradient(180deg, #ffffff, #f7fbff);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .98),
        0 10px 20px rgba(37, 99, 235, .08);
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"] .studio-template-selection-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background:
        linear-gradient(180deg, rgba(37, 99, 235, .9), rgba(6, 182, 212, .9));
    color: #08213d;
    font-size: .98rem;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .26),
        0 8px 18px rgba(37, 99, 235, .16);
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"] .studio-template-selection-copy {
    gap: 2px;
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"] .studio-template-selection-copy small {
    color: #6a7a92;
    font-size: .68rem;
    font-weight: 800;
    line-height: 1.15;
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"] .studio-template-selection-copy strong {
    color: #172943;
    font-size: .94rem;
    font-weight: 850;
    line-height: 1.16;
    text-shadow: none;
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"] .studio-template-selection-action {
    min-height: 44px;
    padding: 8px 16px;
    border: 1px solid rgba(123, 145, 178, .2);
    border-radius: 999px;
    background: #ffffff;
    color: #172943;
    font-size: .76rem;
    font-weight: 850;
    box-shadow: 0 5px 14px rgba(42, 72, 120, .06);
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"] .studio-step-card .studio-template-selection-card .studio-template-selection-action {
    min-height: 44px !important;
    padding: 8px 14px !important;
    border-radius: 999px !important;
    font-size: .72rem !important;
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"] .studio-template-search {
    gap: 5px;
    margin: 8px 0 12px;
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"] .studio-template-search span {
    color: #52637b;
    font-size: .7rem;
    font-weight: 800;
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"] .studio-template-search input {
    min-height: 44px;
    border: 1px solid rgba(123, 145, 178, .22);
    border-radius: 12px;
    background: #ffffff;
    color: #172943;
    font-size: .82rem;
    font-weight: 750;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .96),
        0 6px 14px rgba(42, 72, 120, .045);
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"] .studio-template-fallback {
    margin-bottom: 14px;
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"] .studio-template-fallback-card {
    min-height: 58px;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid rgba(123, 145, 178, .2);
    border-radius: 12px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(246, 250, 255, .94));
    color: #172943;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .96),
        0 8px 18px rgba(42, 72, 120, .06);
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"] .studio-template-fallback-icon {
    width: 40px;
    height: 40px;
    border-radius: 9px;
    background:
        linear-gradient(180deg, #f6fbff, #e8f2ff);
    color: #172943;
    font-size: .9rem;
    box-shadow:
        inset 0 0 0 1px rgba(37, 99, 235, .22),
        0 6px 14px rgba(37, 99, 235, .08);
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"] .studio-template-fallback-copy strong {
    color: #172943;
    font-size: .82rem;
    font-weight: 850;
    line-height: 1.15;
    text-shadow: none;
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"] .studio-template-fallback-copy small {
    color: #5b6c86;
    font-size: .68rem;
    font-weight: 700;
    line-height: 1.28;
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"] .studio-template-card {
    min-height: 0;
    gap: 0;
    padding: 0;
    border: 1px solid rgba(123, 145, 178, .14);
    border-radius: 12px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .99), rgba(249, 252, 255, .98)),
        #ffffff;
    color: #132642;
    overflow: hidden;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .86),
        0 3px 10px rgba(42, 72, 120, .045);
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"] .studio-template-card:hover:not(.studio-template-card--message),
body.index-v2-legacy[class*="studio-v2-"][class*="-route"] .studio-template-card.is-active {
    transform: translateY(-1px);
    border-color: rgba(56, 189, 248, .5);
    background:
        linear-gradient(180deg, #ffffff, #f3f9ff 72%, #edf7ff),
        #ffffff;
    color: #0f2440;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .9),
        0 8px 18px rgba(37, 99, 235, .1);
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"] .studio-template-thumb {
    width: min(100% - 18px, 222px);
    margin: 9px auto 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    box-shadow: none;
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"] .studio-template-thumb .review-template-page,
body.index-v2-legacy[class*="studio-v2-"][class*="-route"] .studio-template-thumb-page {
    filter: saturate(.94) contrast(.98);
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"] .studio-template-card > .studio-template-access-badge,
body.index-v2-legacy[class*="studio-v2-"][class*="-route"] .studio-template-thumb > .studio-template-access-badge {
    top: 8px;
    right: 8px;
    min-height: 20px;
    padding: 4px 8px;
    border-color: rgba(20, 184, 166, .36);
    background:
        linear-gradient(180deg, rgba(236, 253, 245, .96), rgba(187, 247, 208, .92));
    color: #065f46;
    font-size: .6rem;
    line-height: 1;
    box-shadow: 0 6px 14px rgba(5, 95, 70, .1);
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"] .studio-template-name {
    width: 100%;
    min-height: 1.2em;
    margin: 0;
    padding: 9px 10px 10px;
    border-top: 1px solid rgba(123, 145, 178, .08);
    background:
        linear-gradient(180deg, rgba(248, 251, 255, .24), rgba(241, 247, 255, .48));
    color: #14233c;
    font-size: .72rem;
    font-weight: 850;
    line-height: 1.2;
    text-shadow: none;
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"] .studio-template-compatibility-badge {
    display: none;
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"]:not([data-arithmetic-theme="light"]):not([data-v2-mode-theme="light"]) .studio-template-drawer {
    border: 0;
    background: transparent;
    color: #f8fbff;
    box-shadow: none;
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"]:not([data-arithmetic-theme="light"]):not([data-v2-mode-theme="light"]) .studio-template-selection-card,
body.index-v2-legacy[class*="studio-v2-"][class*="-route"]:not([data-arithmetic-theme="light"]):not([data-v2-mode-theme="light"]) .studio-template-fallback-card,
body.index-v2-legacy[class*="studio-v2-"][class*="-route"]:not([data-arithmetic-theme="light"]):not([data-v2-mode-theme="light"]) .studio-template-card {
    border-color: rgba(148, 180, 220, .24);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .018) 48%, rgba(3, 10, 20, .09)),
        linear-gradient(180deg, rgba(33, 58, 93, .72) 0%, rgba(19, 45, 79, .72) 100%);
    color: #f8fbff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .1),
        0 8px 18px rgba(2, 8, 23, .12);
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"]:not([data-arithmetic-theme="light"]):not([data-v2-mode-theme="light"]) .studio-template-selection-card:hover,
body.index-v2-legacy[class*="studio-v2-"][class*="-route"]:not([data-arithmetic-theme="light"]):not([data-v2-mode-theme="light"]) .studio-template-fallback-card:hover,
body.index-v2-legacy[class*="studio-v2-"][class*="-route"]:not([data-arithmetic-theme="light"]):not([data-v2-mode-theme="light"]) .studio-template-card:hover:not(.studio-template-card--message),
body.index-v2-legacy[class*="studio-v2-"][class*="-route"]:not([data-arithmetic-theme="light"]):not([data-v2-mode-theme="light"]) .studio-template-card.is-active {
    border-color: rgba(96, 165, 250, .76);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .036) 48%, rgba(3, 10, 20, .14)),
        linear-gradient(180deg, #29476c 0%, #16365c 100%);
    color: #ffffff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .14),
        0 10px 22px rgba(37, 99, 235, .14);
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"]:not([data-arithmetic-theme="light"]):not([data-v2-mode-theme="light"]) .studio-template-selection-copy strong,
body.index-v2-legacy[class*="studio-v2-"][class*="-route"]:not([data-arithmetic-theme="light"]):not([data-v2-mode-theme="light"]) .studio-template-fallback-copy strong,
body.index-v2-legacy[class*="studio-v2-"][class*="-route"]:not([data-arithmetic-theme="light"]):not([data-v2-mode-theme="light"]) .studio-template-name {
    color: #ffffff;
    text-shadow: 0 1px 0 rgba(2, 8, 23, .24);
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"]:not([data-arithmetic-theme="light"]):not([data-v2-mode-theme="light"]) .studio-template-selection-copy small,
body.index-v2-legacy[class*="studio-v2-"][class*="-route"]:not([data-arithmetic-theme="light"]):not([data-v2-mode-theme="light"]) .studio-template-fallback-copy small {
    color: #cfe0f8;
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"]:not([data-arithmetic-theme="light"]):not([data-v2-mode-theme="light"]) .studio-template-name {
    border-top-color: rgba(148, 180, 220, .1);
    background:
        linear-gradient(180deg, rgba(8, 24, 48, .04), rgba(8, 24, 48, .18));
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"]:not([data-arithmetic-theme="light"]):not([data-v2-mode-theme="light"]) .studio-template-search span {
    color: #d8e7fb;
    text-shadow: 0 1px 0 rgba(2, 8, 23, .28);
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"]:not([data-arithmetic-theme="light"]):not([data-v2-mode-theme="light"]) .studio-template-search input {
    border-color: rgba(148, 180, 220, .38);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .025)),
        #102846;
    color: #f8fbff;
    caret-color: #8ef3d2;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .1),
        0 8px 18px rgba(2, 8, 23, .12);
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"]:not([data-arithmetic-theme="light"]):not([data-v2-mode-theme="light"]) .studio-template-search input::placeholder {
    color: #b9ccea;
    opacity: 1;
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"]:not([data-arithmetic-theme="light"]):not([data-v2-mode-theme="light"]) .studio-template-search input:focus {
    border-color: rgba(56, 189, 248, .72);
    box-shadow:
        0 0 0 3px rgba(56, 189, 248, .22),
        inset 0 1px 0 rgba(255, 255, 255, .14);
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"]:not([data-arithmetic-theme="light"]):not([data-v2-mode-theme="light"]) .studio-template-card--message {
    color: #d8e7fb;
}

@container (max-width: 250px) {
    body.index-v2-legacy[class*="studio-v2-"][class*="-route"] .studio-template-thumb {
        width: min(100% - 14px, 190px);
    }

    body.index-v2-legacy[class*="studio-v2-"][class*="-route"] .studio-template-name {
        font-size: .66rem;
    }
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"] .studio-field .studio-question-count-slider__range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    min-height: 34px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    -webkit-text-fill-color: currentColor;
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"] .studio-field .studio-question-count-slider__range:focus,
body.index-v2-legacy[class*="studio-v2-"][class*="-route"] .studio-field .studio-question-count-slider__range:focus-visible {
    border: 0;
    box-shadow: none;
    outline: none;
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"] .studio-question-count-slider__range::-webkit-slider-runnable-track {
    height: 7px;
    border-radius: 999px;
    background:
        linear-gradient(90deg,
            var(--studio-v3-accent-2) 0%,
            var(--studio-v3-accent-2) var(--question-count-progress, 0%),
            rgba(255, 255, 255, .16) var(--question-count-progress, 0%),
            rgba(255, 255, 255, .16) 100%);
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"] .studio-question-count-slider__range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 36px;
    height: 24px;
    margin-top: -8.5px;
    border: 1px solid rgba(255, 255, 255, .82);
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 8px 18px rgba(3, 10, 20, .22);
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"] .studio-field .studio-question-count-slider__number {
    appearance: textfield;
    -moz-appearance: textfield;
    padding-right: 11px;
    background: var(--v2-premium-field);
    box-shadow: none;
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"] .studio-field .studio-slider-stepper .studio-question-count-slider__number {
    padding-right: 8px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"] .studio-slider-stepper__button {
    border-color: rgba(87, 153, 244, .72);
    background: linear-gradient(180deg, #5da3ff, #2f7bd8);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24);
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"] .studio-step-card[data-collapsible-step-card] > .studio-step-head::after {
    border-color: rgba(83, 150, 244, .58);
    background: linear-gradient(180deg, rgba(45, 101, 178, .66), rgba(14, 40, 80, .72));
    color: #eaf3ff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
}

body.index-v2-legacy[class*="studio-v2-"][class*="-route"] .studio-field .studio-question-count-slider__number::-webkit-inner-spin-button,
body.index-v2-legacy[class*="studio-v2-"][class*="-route"] .studio-field .studio-question-count-slider__number::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
    display: none;
    margin: 0;
}