:root {
                --bg: #f8fafc;
                --card: #fff;
                --text: #0f172a;
                --muted: #64748b;
                --border: #e2e8f0;
                --soft: #f1f5f9;
                --dark: #020617;
                --darkText: #e2e8f0;
                --danger: #dc2626;
                --dangerBg: #fee2e2;
                --ok: #16a34a;
                --radius: 18px;
                --shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
                color-scheme: light;
            }

            html[data-theme='dark'] {
                color-scheme: dark;
            }

            * {
                box-sizing: border-box;
            }
            body {
                margin: 0;
                font-family:
                    Inter,
                    system-ui,
                    -apple-system,
                    BlinkMacSystemFont,
                    'Segoe UI',
                    sans-serif;
                background: linear-gradient(#fff, var(--bg));
                color: var(--text);
            }
            button,
            input,
            select,
            textarea {
                font: inherit;
            }
            code {
                font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
                background: #f1f5f9;
                border-radius: 6px;
                padding: 1px 5px;
            }
            .page {
                max-width: 1800px;
                margin: 0 auto;
                padding: 24px;
            }
            .hero {
                display: flex;
                justify-content: space-between;
                gap: 24px;
                align-items: flex-end;
                margin-bottom: 32px;
            }
            .hero-text {
                max-width: 780px;
            }
            .kicker,
            .badge {
                display: inline-flex;
                align-items: center;
                border-radius: 999px;
                padding: 5px 10px;
                font-size: 13px;
                font-weight: 700;
                background: #0f172a;
                color: #fff;
            }
            .badge.outline {
                background: #fff;
                color: #0f172a;
                border: 1px solid var(--border);
            }
            .badge.soft {
                background: var(--soft);
                color: #334155;
            }
            .badge.danger {
                background: var(--danger);
                color: #fff;
            }
            h1 {
                font-size: clamp(32px, 4vw, 56px);
                line-height: 1.05;
                margin: 18px 0 12px;
            }
            p {
                margin: 0;
            }
            .muted {
                color: var(--muted);
            }
            .actions {
                display: flex;
                flex-wrap: wrap;
                gap: 10px;
            }
            .grid {
                display: grid;
                grid-template-columns: minmax(700px, 1.25fr) minmax(420px, 0.75fr);
                gap: 24px;
                align-items: start;
            }
            .left,
            .right {
                display: grid;
                gap: 24px;
            }
            .right {
                position: sticky;
                top: 24px;
                min-width: 0;
            }
            .card {
                background: var(--card);
                border: 1px solid var(--border);
                border-radius: var(--radius);
                box-shadow: var(--shadow);
                overflow: hidden;
                min-width: 0;
            }
            .card-h {
                padding: 18px 20px;
                border-bottom: 1px solid var(--border);
                background: #f8fafc;
            }
            .card-b {
                padding: 20px;
            }
            .row {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 14px;
            }
            .wrap {
                flex-wrap: wrap;
            }
            .stack {
                display: grid;
                gap: 14px;
            }
            .stack-lg {
                display: grid;
                gap: 20px;
            }
            .cols2 {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 14px;
            }
            .cols-flex {
                display: grid;
                grid-template-columns: minmax(240px, 320px) 1fr;
                gap: 14px;
            }
            .media-grid {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 16px;
            }
            label {
                display: block;
                font-size: 14px;
                font-weight: 700;
                margin-bottom: 7px;
            }
            .input,
            select,
            textarea {
                width: 100%;
                border: 1px solid var(--border);
                border-radius: 12px;
                padding: 11px 12px;
                background: #fff;
                color: var(--text);
                outline: none;
            }
            textarea {
                resize: vertical;
                min-height: 120px;
            }
            .input:focus,
            select:focus,
            textarea:focus {
                border-color: #94a3b8;
                box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.2);
            }
            .btn {
                border: 1px solid var(--border);
                background: #fff;
                color: #0f172a;
                border-radius: 12px;
                padding: 10px 13px;
                cursor: pointer;
                font-weight: 700;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
                min-height: 40px;
            }
            .btn:hover {
                background: #f8fafc;
            }
            .btn.primary {
                background: #0f172a;
                color: #fff;
                border-color: #0f172a;
            }
            .btn.danger {
                background: var(--danger);
                border-color: var(--danger);
                color: #fff;
            }
            .btn.small {
                padding: 7px 10px;
                min-height: 34px;
                font-size: 14px;
            }
            .btn.icon {
                width: 40px;
                padding: 0;
            }
            .btn:disabled {
                opacity: 0.45;
                cursor: not-allowed;
            }
            .add-grid {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 10px;
            }
            .empty {
                border: 2px dashed #cbd5e1;
                border-radius: 32px;
                padding: 54px 24px;
                text-align: center;
                color: #64748b;
                /* font-size: clamp(22px, 3vw, 34px); */
                background: rgba(255, 255, 255, 0.5);
            }
            .switch {
                position: relative;
                width: 46px;
                height: 26px;
                display: inline-block;
                flex: 0 0 auto;
                justify-self: end;
            }
            .switch input {
                display: none;
            }
            .slider {
                position: absolute;
                inset: 0;
                border-radius: 999px;
                background: #cbd5e1;
                cursor: pointer;
                transition: 0.2s;
            }
            .slider:before {
                content: '';
                position: absolute;
                width: 20px;
                height: 20px;
                left: 3px;
                top: 3px;
                background: #fff;
                border-radius: 50%;
                transition: 0.2s;
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
            }
            .switch input:checked + .slider {
                background: #0f172a;
            }
            .switch input:checked + .slider:before {
                transform: translateX(20px);
            }
            .theme-toggle i {
                width: min-content;
            }
            .block {
                animation: fade 0.18s ease-out;
            }
            .block-title {
                display: flex;
                gap: 10px;
                align-items: center;
                flex-wrap: wrap;
            }
            .field-card {
                border: 1px solid var(--border);
                border-radius: 18px;
                padding: 16px;
                background: #fff;
            }
            .soft-box {
                border: 1px solid var(--border);
                border-radius: 14px;
                padding: 14px;
                margin: 1rem 0;
                background: #fff;
            }
            .summary-box {
                border: 1px solid var(--border);
                border-radius: 14px;
                padding: 16px;
            }
            .summary-box .num {
                font-size: 28px;
                font-weight: 800;
                margin-top: 4px;
            }
            .pre-wrap {
                position: relative;
            }
            .copy-btn {
                position: absolute;
                top: 14px;
                right: 14px;
                z-index: 1;
            }
            pre {
                margin: 0;
                background: var(--dark);
                color: var(--darkText);
                padding: 66px 18px 20px;
                min-height: 420px;
                overflow: auto;
                white-space: pre-wrap;
                word-break: break-word;
                font-size: 14px;
                line-height: 1.5;
            }
            .tabs {
                display: flex;
                gap: 8px;
                border-bottom: 1px solid var(--border);
                padding: 10px;
            }
            .tab {
                border: 0;
                background: transparent;
                border-radius: 10px;
                padding: 9px 12px;
                font-weight: 800;
                cursor: pointer;
            }
            .tab.active {
                background: #0f172a;
                color: #fff;
            }
            .hidden {
                display: none !important;
            }
            .modal {
                position: fixed;
                inset: 0;
                background: rgba(0, 0, 0, 0.45);
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 18px;
                z-index: 50;
            }
            .modal .card {
                max-width: 900px;
                width: 100%;
                max-height: 90vh;
                overflow: auto;
            }
            .test-ok {
                color: var(--ok);
            }
            .test-bad {
                color: var(--danger);
            }
            @keyframes fade {
                from {
                    opacity: 0;
                    transform: translateY(8px);
                }
                to {
                    opacity: 1;
                    transform: none;
                }
            }
            @media (max-width: 1100px) {
                .grid {
                    grid-template-columns: 1fr;
                }
                .right {
                    position: static;
                }
                .hero {
                    display: grid;
                }
                .cols-flex,
                .media-grid {
                    grid-template-columns: 1fr;
                }
            }
            @media (max-width: 640px) {
                .page {
                    padding: 16px;
                }
                .cols2,
                .add-grid {
                    grid-template-columns: 1fr;
                }
                .card-b {
                    padding: 16px;
                }
                .card-h {
                    padding: 16px;
                }
                .btn {
                    width: 100%;
                }
                .row {
                    align-items: flex-start;
                }
                .actions {
                    width: 100%;
                }
            }

            .code-output,
            pre,
            code {
                color: #e2e8f0 !important;
                opacity: 1 !important;
            }

            .code-output {
                background: #020617 !important;
                font-family: monospace;
                padding: 16px;
                border-radius: 12px;
                overflow-x: auto;
            }

            /* ==========================================================
   Tailwind-inspired original styling layer
   Self-contained: no CDN, no build step, no external assets.
   ========================================================== */

            :root {
                --tw-bg: #f8fafc;
                --tw-card: #ffffff;
                --tw-ink: #0f172a;
                --tw-muted: #64748b;
                --tw-border: #e2e8f0;
                --tw-border-strong: #cbd5e1;
                --tw-primary: #0f172a;
                --tw-primary-hover: #1e293b;
                --tw-ring: rgba(15, 23, 42, 0.12);
                --tw-code-bg: #020617;
                --tw-code-text: #e2e8f0;
            }

            * {
                box-sizing: border-box;
            }

            html {
                background: var(--tw-bg);
            }

            body {
                margin: 0;
                min-height: 100vh;
                background: radial-gradient(circle at top left, rgba(226, 232, 240, 0.95), transparent 28rem), linear-gradient(180deg, #ffffff 0%, var(--tw-bg) 42%, #f1f5f9 100%);
                color: var(--tw-ink);
                font-family:
                    Inter,
                    ui-sans-serif,
                    system-ui,
                    -apple-system,
                    BlinkMacSystemFont,
                    'Segoe UI',
                    sans-serif;
                -webkit-font-smoothing: antialiased;
                text-rendering: optimizeLegibility;
            }

            button,
            input,
            select,
            textarea {
                font: inherit;
            }

            button {
                cursor: pointer;
            }

            input,
            select,
            textarea {
                width: 100%;
                min-height: 2.75rem;
                border: 1px solid var(--tw-border);
                border-radius: 0.875rem;
                background: #ffffff;
                color: var(--tw-ink);
                padding: 0.65rem 0.85rem;
                outline: none;
                transition:
                    border-color 160ms ease,
                    box-shadow 160ms ease,
                    background-color 160ms ease;
            }

            textarea {
                min-height: 7.5rem;
                resize: vertical;
            }

            input:focus,
            select:focus,
            textarea:focus {
                border-color: var(--tw-primary);
                box-shadow: 0 0 0 4px var(--tw-ring);
            }

            label {
                display: block;
                margin-bottom: 0.45rem;
                color: #334155;
                font-size: 0.875rem;
                font-weight: 700;
            }

            small,
            .help,
            .hint,
            .description {
                color: var(--tw-muted);
            }

            .app,
            .container,
            .page,
            .wrapper,
            main {
                max-width: 1800px;
                margin-inline: auto;
            }

            .app,
            .container,
            .page,
            .wrapper {
                padding: 1.5rem;
            }

            .card,
            .panel,
            .section,
            .accordion,
            .generator-card,
            .config-card,
            .output-card,
            [class*='card'],
            [class*='panel'] {
                background: rgba(255, 255, 255, 0.96);
                border: 1px solid var(--tw-border);
                border-radius: 1.5rem;
                corner-shape: bevel;
                box-shadow:
                    0 20px 45px rgba(15, 23, 42, 0.08),
                    0 2px 8px rgba(15, 23, 42, 0.04);
            }

            .header,
            .topbar,
            .toolbar,
            .actions {
                display: flex;
                justify-content: end;
                align-items: center;
                gap: 0.75rem;
                flex-wrap: wrap;
            }

            .grid,
            .content-grid {
                display: grid;
                gap: 1.25rem;
            }

            @media (min-width: 1024px) {
                .grid,
                .content-grid {
                    grid-template-columns: minmax(0, 1fr) minmax(420px, 0.9fr);
                    align-items: start;
                }
            }

            button,
            .btn,
            .button,
            [role='button'] {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 0.5rem;
                min-height: 2.75rem;
                border: 1px solid var(--tw-border);
                border-radius: 1rem;
                background: #ffffff;
                color: var(--tw-ink);
                padding: 0.65rem 1rem;
                font-weight: 800;
                line-height: 1;
                text-decoration: none;
                transition:
                    transform 140ms ease,
                    background-color 160ms ease,
                    border-color 160ms ease,
                    box-shadow 160ms ease;
            }

            button:hover,
            .btn:hover,
            .button:hover,
            [role='button']:hover {
                transform: translateY(-1px);
                border-color: var(--tw-border-strong);
                box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
            }

            button:active,
            .btn:active,
            .button:active,
            [role='button']:active {
                transform: translateY(0);
            }

            button.primary,
            .btn-primary,
            .button-primary,
            .active,
            [aria-selected='true'] {
                border-color: var(--tw-primary) !important;
                background: var(--tw-primary) !important;
                color: #ffffff !important;
                box-shadow: 0 12px 26px rgba(15, 23, 42, 0.18);
            }

            button.primary:hover,
            .btn-primary:hover,
            .button-primary:hover {
                background: var(--tw-primary-hover) !important;
            }

            .tabs,
            .tab-list,
            .platform-tabs {
                display: flex;
                align-items: center;
                gap: 0.75rem;
                border-bottom: 1px solid var(--tw-border);
                background: #ffffff;
                padding: 1rem 1.25rem;
            }

            .tab,
            .tabs button,
            .tab-list button,
            .platform-tabs button {
                border-color: transparent;
                border-radius: 1rem;
                background: transparent;
                padding-inline: 1.25rem;
                font-size: 1rem;
            }

            .tab.active,
            .tabs button.active,
            .tab-list button.active,
            .platform-tabs button.active {
                background: var(--tw-primary) !important;
                color: #ffffff !important;
            }

            h1,
            h2,
            h3 {
                color: var(--tw-ink);
                letter-spacing: -0.035em;
                line-height: 1.1;
            }

            h1 {
                font-size: clamp(2rem, 4vw, 3.75rem);
                margin: 0 0 0.75rem;
                font-weight: 900;
            }

            h2 {
                font-size: clamp(1.35rem, 2vw, 2rem);
                margin: 0;
                font-weight: 900;
            }

            h3 {
                font-size: 1.125rem;
                margin: 0;
                font-weight: 850;
            }

            p {
                color: #475569;
                line-height: 1.65;
            }

            .field,
            .form-field,
            .input-group {
                margin-bottom: 1rem;
            }

            .form-row,
            .row {
                display: grid;
                gap: 1rem;
            }

            @media (min-width: 768px) {
                .form-row,
                .row {
                    grid-template-columns: repeat(2, minmax(0, 1fr));
                }
            }

            .badge,
            .tag,
            .pill {
                display: inline-flex;
                align-items: center;
                min-height: 1.75rem;
                border: 1px solid var(--tw-border);
                border-radius: 999px;
                background: #f8fafc;
                color: #334155;
                padding: 0.25rem 0.7rem;
                font-size: 0.75rem;
                font-weight: 800;
            }

            pre,
            code,
            .code-output,
            .generated-code,
            .output-code,
            #generatedCode,
            #codeOutput {
                color: var(--tw-code-text) !important;
                opacity: 1 !important;
                text-shadow: none !important;
                -webkit-text-fill-color: var(--tw-code-text) !important;
                font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace !important;
            }

            pre,
            .code-output,
            .generated-code,
            .output-code,
            #generatedCode,
            #codeOutput {
                width: 100%;
                margin: 0;
                border-radius: 0 0 1.5rem 1.5rem;
                background: var(--tw-code-bg) !important;
                padding: 1.5rem;
                overflow: auto;
                font-size: 0.875rem;
                line-height: 1.65;
                white-space: pre;
                tab-size: 2;
            }

            pre *,
            code * {
                color: inherit !important;
                opacity: 1 !important;
                text-shadow: none !important;
                -webkit-text-fill-color: currentColor !important;
            }

            .collapse-trigger,
            .accordion-trigger,
            .summary,
            .output-header {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 1rem;
                width: 100%;
                border: 1px solid var(--tw-border);
                border-radius: 1.25rem;
                background: #ffffff;
                padding: 1rem 1.25rem;
                font-size: 1.125rem;
                font-weight: 900;
                box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
            }

            .copy-button,
            .download-button,
            .export-button {
                white-space: nowrap;
            }

            hr {
                border: 0;
                border-top: 1px solid var(--tw-border);
            }

            ::-webkit-scrollbar {
                width: 12px;
                height: 12px;
            }

            ::-webkit-scrollbar-thumb {
                background: #cbd5e1;
                border: 3px solid transparent;
                border-radius: 999px;
                background-clip: padding-box;
            }

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

            @media (max-width: 640px) {
                .app,
                .container,
                .page,
                .wrapper {
                    padding: 1rem;
                }

                button,
                .btn,
                .button,
                input,
                select,
                textarea {
                    border-radius: 0.875rem;
                }

                pre,
                .code-output,
                .generated-code,
                .output-code,
                #generatedCode,
                #codeOutput {
                    padding: 1rem;
                    font-size: 0.8125rem;
                }
            }

            /* ==========================================================
   Contrast/accessibility patch
   Corrige chips inline demasiado claros e texto do código gerado.
   ========================================================== */

            p code,
            small code,
            label code,
            .help code,
            .hint code,
            .description code,
            .inline-code,
            code.inline,
            :not(pre) > code {
                display: inline-flex !important;
                align-items: center !important;
                border: 1px solid #cbd5e1 !important;
                border-radius: 0.375rem !important;
                background: #e2e8f0 !important;
                color: #0f172a !important;
                opacity: 1 !important;
                padding: 0.05rem 0.35rem !important;
                font-size: 0.92em !important;
                font-weight: 700 !important;
                line-height: 1.35 !important;
                text-shadow: none !important;
                -webkit-text-fill-color: #0f172a !important;
            }

            pre,
            pre code,
            .code-output,
            .code-output code,
            .generated-code,
            .generated-code code,
            .output-code,
            .output-code code,
            #generatedCode,
            #generatedCode code,
            #codeOutput,
            #codeOutput code {
                background: #020617 !important;
                color: #e5e7eb !important;
                opacity: 1 !important;
                text-shadow: none !important;
                -webkit-text-fill-color: #e5e7eb !important;
            }

            pre *,
            .code-output *,
            .generated-code *,
            .output-code *,
            #generatedCode *,
            #codeOutput * {
                color: #e5e7eb !important;
                opacity: 1 !important;
                text-shadow: none !important;
                -webkit-text-fill-color: #e5e7eb !important;
            }

            .line,
            .code-line,
            .token,
            .code-token {
                opacity: 1 !important;
            }

            pre .token,
            code .token,
            .code-output .token,
            .generated-code .token,
            .output-code .token,
            #generatedCode .token,
            #codeOutput .token {
                color: #e5e7eb !important;
                -webkit-text-fill-color: #e5e7eb !important;
            }

            pre button,
            .code-output button,
            .generated-code button,
            .output-code button,
            #generatedCode button,
            #codeOutput button {
                background: #ffffff !important;
                color: #0f172a !important;
                border-color: #e2e8f0 !important;
                -webkit-text-fill-color: #0f172a !important;
            }

            button:disabled,
            .disabled {
                color: #94a3b8 !important;
                opacity: 1 !important;
                -webkit-text-fill-color: #94a3b8 !important;
            }

            input::placeholder,
            textarea::placeholder {
                color: #94a3b8 !important;
                opacity: 1 !important;
            }

            #webCode,
            #webCode *,
            [data-type='web'] pre,
            [data-type='web'] pre * {
                color: #e5e7eb !important;
                opacity: 1 !important;
                -webkit-text-fill-color: #e5e7eb !important;
                visibility: visible !important;
            }

            [style*='opacity'],
            [style*='color: rgba'] {
                opacity: 1 !important;
                color: #e5e7eb !important;
            }

            /* ==========================================================
   Definitive generated-code rendering fix
   Usa texto puro no código gerado para evitar caracteres soltos.
   ========================================================== */

            pre,
            pre code,
            .code-output,
            .code-output code,
            .generated-code,
            .generated-code code,
            .output-code,
            .output-code code,
            #generatedCode,
            #generatedCode code,
            #codeOutput,
            #codeOutput code,
            #webCode,
            #webCode code,
            #appCode,
            #appCode code {
                display: block !important;
                width: 100% !important;
                margin: 0 !important;
                background: #020617 !important;
                color: #e5e7eb !important;
                opacity: 1 !important;
                visibility: visible !important;
                -webkit-text-fill-color: #e5e7eb !important;
                text-shadow: none !important;
                font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace !important;
                font-size: 14px !important;
                line-height: 1.7 !important;
                white-space: pre !important;
                word-break: normal !important;
                overflow-wrap: normal !important;
                letter-spacing: 0 !important;
                word-spacing: 0 !important;
                text-align: left !important;
                direction: ltr !important;
                unicode-bidi: normal !important;
            }

            pre,
            .code-output,
            .generated-code,
            .output-code,
            #generatedCode,
            #codeOutput,
            #webCode,
            #appCode {
                overflow: auto !important;
                padding: 24px !important;
            }

            pre *,
            .code-output *,
            .generated-code *,
            .output-code *,
            #generatedCode *,
            #codeOutput *,
            #webCode *,
            #appCode * {
                color: #e5e7eb !important;
                opacity: 1 !important;
                visibility: visible !important;
                -webkit-text-fill-color: #e5e7eb !important;
                text-shadow: none !important;
                letter-spacing: 0 !important;
                word-spacing: 0 !important;
                white-space: pre !important;
            }

            /* ==========================================================
            Dark mode verde manual
            ========================================================== */
            .plus-color {
                color: #afca75;
            }

            html[data-theme='dark'] .plus-color {
                color: #c7f464;
            }

            html[data-theme='dark'] {
                --bg: #07130d;
                --card: #0d1f16;
                --text: #ecfdf5;
                --muted: #9fb8aa;
                --border: #244235;
                --soft: #132b1f;
                --dark: #030807;
                --darkText: #d9f99d;
                --shadow: 0 18px 45px rgba(0, 0, 0, 0.38);

                --tw-bg: #07130d;
                --tw-card: #0d1f16;
                --tw-ink: #ecfdf5;
                --tw-muted: #9fb8aa;
                --tw-border: #244235;
                --tw-border-strong: #3f6f57;
                --tw-primary: #c7f464;
                --tw-primary-hover: #a3e635;
                --tw-ring: rgba(199, 244, 100, 0.2);
                --tw-code-bg: #030807;
                --tw-code-text: #d9f99d;
                background: #07130d;
            }

            html[data-theme='dark'] body {
                background: radial-gradient(circle at top left, rgba(199, 244, 100, 0.18), transparent 30rem), radial-gradient(circle at bottom right, rgba(34, 197, 94, 0.12), transparent 32rem), linear-gradient(180deg, #07130d 0%, #0d1f16 48%, #030807 100%);
                color: var(--text);
            }

            html[data-theme='dark'] .card,
            html[data-theme='dark'] .panel,
            html[data-theme='dark'] .section,
            html[data-theme='dark'] .accordion,
            html[data-theme='dark'] .generator-card,
            html[data-theme='dark'] .config-card,
            html[data-theme='dark'] .output-card,
            html[data-theme='dark'] [class*='card'],
            html[data-theme='dark'] [class*='panel'],
            html[data-theme='dark'] .field-card,
            html[data-theme='dark'] .soft-box,
            html[data-theme='dark'] .summary-box,
            html[data-theme='dark'] .card-h,
            html[data-theme='dark'] .tabs,
            html[data-theme='dark'] .tab-list,
            html[data-theme='dark'] .platform-tabs,
            html[data-theme='dark'] .collapse-trigger,
            html[data-theme='dark'] .accordion-trigger,
            html[data-theme='dark'] .summary,
            html[data-theme='dark'] .output-header {
                background: rgba(13, 31, 22, 0.96) !important;
                border-color: var(--border) !important;
                color: var(--text) !important;
            }

            html[data-theme='dark'] h1,
            html[data-theme='dark'] h2,
            html[data-theme='dark'] h3,
            html[data-theme='dark'] strong,
            html[data-theme='dark'] label {
                color: #ecfdf5 !important;
            }

            html[data-theme='dark'] p,
            html[data-theme='dark'] small,
            html[data-theme='dark'] .help,
            html[data-theme='dark'] .hint,
            html[data-theme='dark'] .description,
            html[data-theme='dark'] .muted {
                color: var(--muted) !important;
            }

            html[data-theme='dark'] input,
            html[data-theme='dark'] select,
            html[data-theme='dark'] textarea,
            html[data-theme='dark'] .input {
                background: #07130d !important;
                color: #ecfdf5 !important;
                border-color: #244235 !important;
            }

            html[data-theme='dark'] input:focus,
            html[data-theme='dark'] select:focus,
            html[data-theme='dark'] textarea:focus {
                border-color: #c7f464 !important;
                box-shadow: 0 0 0 4px rgba(199, 244, 100, 0.18) !important;
            }

            html[data-theme='dark'] button,
            html[data-theme='dark'] .btn,
            html[data-theme='dark'] .button,
            html[data-theme='dark'] [role='button'] {
                background: #10291c !important;
                color: #ecfdf5 !important;
                border-color: #315844 !important;
            }

            html[data-theme='dark'] button:hover,
            html[data-theme='dark'] .btn:hover,
            html[data-theme='dark'] .button:hover,
            html[data-theme='dark'] [role='button']:hover {
                background: #173a28 !important;
                border-color: #c7f464 !important;
                box-shadow: 0 10px 24px rgba(199, 244, 100, 0.12) !important;
            }

            html[data-theme='dark'] .btn.primary,
            html[data-theme='dark'] button.primary,
            html[data-theme='dark'] .tab.active,
            html[data-theme='dark'] .tabs button.active,
            html[data-theme='dark'] .tab-list button.active,
            html[data-theme='dark'] .platform-tabs button.active,
            html[data-theme='dark'] .active,
            html[data-theme='dark'] [aria-selected='true'] {
                background: #c7f464 !important;
                color: #07130d !important;
                border-color: #c7f464 !important;
            }

            html[data-theme='dark'] .btn.danger,
            html[data-theme='dark'] .badge.danger {
                background: #ef4444 !important;
                color: #fff !important;
                border-color: #ef4444 !important;
            }

            html[data-theme='dark'] .kicker,
            html[data-theme='dark'] .badge {
                background: #c7f464 !important;
                color: #07130d !important;
                border-color: #c7f464 !important;
            }

            html[data-theme='dark'] .badge.outline,
            html[data-theme='dark'] .badge.soft,
            html[data-theme='dark'] .tag,
            html[data-theme='dark'] .pill {
                background: #132b1f !important;
                color: #d9f99d !important;
                border-color: #315844 !important;
            }

            html[data-theme='dark'] .empty {
                background: rgba(13, 31, 22, 0.65) !important;
                color: var(--muted) !important;
                border-color: #315844 !important;
            }

            html[data-theme='dark'] .slider {
                background: #315844;
            }

            html[data-theme='dark'] .switch input:checked + .slider {
                background: #c7f464;
            }

            html[data-theme='dark'] .switch input:checked + .slider:before {
                background: #07130d;
            }

            html[data-theme='dark'] p code,
            html[data-theme='dark'] small code,
            html[data-theme='dark'] label code,
            html[data-theme='dark'] .help code,
            html[data-theme='dark'] .hint code,
            html[data-theme='dark'] .description code,
            html[data-theme='dark'] .inline-code,
            html[data-theme='dark'] code.inline,
            html[data-theme='dark'] :not(pre) > code {
                background: #132b1f !important;
                color: #d9f99d !important;
                border-color: #315844 !important;
                -webkit-text-fill-color: #d9f99d !important;
            }

            html[data-theme='dark'] pre,
            html[data-theme='dark'] pre code,
            html[data-theme='dark'] .code-output,
            html[data-theme='dark'] .code-output code,
            html[data-theme='dark'] .generated-code,
            html[data-theme='dark'] .generated-code code,
            html[data-theme='dark'] .output-code,
            html[data-theme='dark'] .output-code code,
            html[data-theme='dark'] #generatedCode,
            html[data-theme='dark'] #generatedCode code,
            html[data-theme='dark'] #codeOutput,
            html[data-theme='dark'] #codeOutput code,
            html[data-theme='dark'] #webCode,
            html[data-theme='dark'] #webCode code,
            html[data-theme='dark'] #appCode,
            html[data-theme='dark'] #appCode code {
                background: #030807 !important;
                color: #d9f99d !important;
                -webkit-text-fill-color: #d9f99d !important;
            }

            html[data-theme='dark'] .modal {
                background: rgba(3, 8, 7, 0.82);
            }

            html[data-theme='dark'] ::-webkit-scrollbar-thumb {
                background: #315844;
            }

            /* ==========================================================
   Light mode verde
   ========================================================== */

            html[data-theme='light'] {
                --bg: #f7fbf4;
                --card: #ffffff;
                --text: #102116;
                --muted: #5f7465;
                --border: #dbe8d2;
                --soft: #eef7e8;
                --dark: #07130d;
                --darkText: #d9f99d;
                --shadow: 0 18px 42px rgba(34, 84, 49, 0.08);

                --tw-bg: #f7fbf4;
                --tw-card: #ffffff;
                --tw-ink: #102116;
                --tw-muted: #5f7465;
                --tw-border: #dbe8d2;
                --tw-border-strong: #bfd7af;
                --tw-primary: #6f9f2f;
                --tw-primary-hover: #5f8f26;
                --tw-ring: rgba(111, 159, 47, 0.18);
                --tw-code-bg: #07130d;
                --tw-code-text: #d9f99d;
            }

            html[data-theme='light'] body {
                background: radial-gradient(circle at top left, rgba(175, 202, 117, 0.28), transparent 30rem), radial-gradient(circle at bottom right, rgba(34, 197, 94, 0.1), transparent 32rem), linear-gradient(180deg, #ffffff 0%, #f7fbf4 48%, #eef7e8 100%);
            }

            html[data-theme='light'] .kicker,
            html[data-theme='light'] .badge,
            html[data-theme='light'] .btn.primary,
            html[data-theme='light'] button.primary,
            html[data-theme='light'] .tab.active,
            html[data-theme='light'] .tabs button.active,
            html[data-theme='light'] .tab-list button.active,
            html[data-theme='light'] .platform-tabs button.active,
            html[data-theme='light'] .active,
            html[data-theme='light'] [aria-selected='true'] {
                background: #6f9f2f !important;
                color: #ffffff !important;
                border-color: #6f9f2f !important;
            }

            html[data-theme='light'] .btn.primary:hover,
            html[data-theme='light'] button.primary:hover {
                background: #5f8f26 !important;
                border-color: #5f8f26 !important;
            }

            html[data-theme='light'] button,
            html[data-theme='light'] .btn,
            html[data-theme='light'] .button,
            html[data-theme='light'] [role='button'] {
                border-color: #dbe8d2;
            }

            html[data-theme='light'] button:hover,
            html[data-theme='light'] .btn:hover,
            html[data-theme='light'] .button:hover,
            html[data-theme='light'] [role='button']:hover {
                border-color: #6f9f2f !important;
                box-shadow: 0 10px 24px rgba(111, 159, 47, 0.12) !important;
            }

            html[data-theme='light'] input:focus,
            html[data-theme='light'] select:focus,
            html[data-theme='light'] textarea:focus {
                border-color: #6f9f2f !important;
                box-shadow: 0 0 0 4px rgba(111, 159, 47, 0.16) !important;
            }

            html[data-theme='light'] .badge.outline,
            html[data-theme='light'] .badge.soft,
            html[data-theme='light'] .tag,
            html[data-theme='light'] .pill {
                background: #eef7e8 !important;
                color: #40631f !important;
                border-color: #bfd7af !important;
            }

            html[data-theme='light'] .card-h,
            html[data-theme='light'] .tabs,
            html[data-theme='light'] .tab-list,
            html[data-theme='light'] .platform-tabs {
                background: #f4faef !important;
            }

            html[data-theme='light'] .field-card,
            html[data-theme='light'] .soft-box,
            html[data-theme='light'] .summary-box {
                background: #ffffff !important;
                border-color: #dbe8d2 !important;
            }

            html[data-theme='light'] .empty {
                background: rgba(238, 247, 232, 0.65) !important;
                color: #5f7465 !important;
                border-color: #bfd7af !important;
            }

            html[data-theme='light'] .slider {
                background: #bfd7af;
            }

            html[data-theme='light'] .switch input:checked + .slider {
                background: #6f9f2f;
            }

            html[data-theme='light'] .plus-color {
                color: #6f9f2f;
            }

            html[data-theme='light'] p code,
            html[data-theme='light'] small code,
            html[data-theme='light'] label code,
            html[data-theme='light'] .help code,
            html[data-theme='light'] .hint code,
            html[data-theme='light'] .description code,
            html[data-theme='light'] .inline-code,
            html[data-theme='light'] code.inline,
            html[data-theme='light'] :not(pre) > code {
                background: #eef7e8 !important;
                color: #315414 !important;
                border-color: #bfd7af !important;
                -webkit-text-fill-color: #315414 !important;
            }

            html[data-theme='light'] ::-webkit-scrollbar-thumb {
                background: #bfd7af;
            }