/* Estilos heredados sin cambio */
            :root {
                --main: #3977bc;
                --main-dark: #1c4274;
                --bg: #f8fbff;
            }
            body {
                background: var(--bg);
                margin: 0;
                font-family: "Segoe UI", Arial, sans-serif;
                color: #234;
            }
            .container {
                max-width: 600px;
                margin: 38px auto 0 auto;
                background: #fff;
                border-radius: 18px;
                box-shadow: 0 4px 22px #3977bc24;
                padding: 28px 18px 22px 18px;
            }
            .logo {
                font-size: 1.19em;
                font-weight: bold;
                text-align: center;
                color: var(--main-dark);
                margin-bottom: 10px;
            }
            .desc {
                text-align: center;
                color: #19788a;
                margin-bottom: 15px;
                font-size: 1.03em;
            }
            .format-select {
                display: flex;
                gap: 9px;
                justify-content: center;
                margin-bottom: 7px;
            }
            .format-btn {
                padding: 7px 15px;
                border: none;
                border-radius: 7px;
                background: #eaf3fa;
                color: var(--main-dark);
                font-weight: 500;
                cursor: pointer;
                font-size: 1.01em;
                transition:
                    background 0.16s,
                    color 0.12s;
            }
            .format-btn.active {
                background: var(--main);
                color: #fff;
                box-shadow: 0 2px 8px #3977bc2a;
            }
            textarea,
            pre {
                width: 100%;
                box-sizing: border-box;
                min-height: 120px;
                font-size: 1.08em;
                font-family: "Fira Mono", "Menlo", monospace;
                border: 1.2px solid #b0c4d5;
                border-radius: 8px;
                padding: 11px;
                margin-bottom: 8px;
                background: #fafdff;
                line-height: 1.62;
                resize: vertical;
                transition: border 0.18s;
            }
            textarea:focus {
                border-color: var(--main);
            }
            pre {
                background: #f4f9fe;
                margin: 0 0 8px 0;
                overflow: auto;
            }
            .convert-btn {
                background: var(--main);
                color: #fff;
                border: none;
                border-radius: 8px;
                padding: 12px 0;
                width: 100%;
                font-size: 1.13em;
                font-weight: bold;
                cursor: pointer;
                margin: 8px 0 12px 0;
                box-shadow: 0 2px 12px #3977bc16;
                transition: background 0.15s;
            }
            .convert-btn:active {
                background: var(--main-dark);
            }
            .action-row {
                display: flex;
                gap: 9px;
                justify-content: flex-end;
                margin-bottom: 6px;
            }
            .action-mini {
                background: #eaf3fa;
                color: var(--main-dark);
                border: none;
                border-radius: 7px;
                font-size: 1em;
                padding: 4px 12px;
                cursor: pointer;
            }
            .action-mini:active {
                background: var(--main);
                color: #fff;
            }
            .error-msg {
                color: #c12929;
                font-size: 0.97em;
                text-align: center;
                margin-bottom: 8px;
            }
            .footer {
                color: #789;
                text-align: center;
                font-size: 0.93em;
                margin-top: 17px;
            }
            #backBtn {
                position: fixed;
                left: 50%;
                bottom: 32px;
                transform: translateX(-50%);
                background: #3977bc;
                color: #fff;
                font-weight: 700;
                border: none;
                border-radius: 2rem;
                padding: 0.58em 1.5em;
                box-shadow: 0 4px 16px #3977bc33;
                font-size: 1.09em;
                text-decoration: none;
                cursor: pointer;
                letter-spacing: 0.01em;
                transition:
                    background 0.15s,
                    transform 0.12s;
                z-index: 2000;
            }
            #backBtn:hover {
                background: #1c4274;
                transform: translateX(-50%) scale(1.04);
            }
            @media (max-width: 700px) {
                .container {
                    max-width: 99vw;
                    padding: 10px 2vw 12px 2vw;
                }
                textarea,
                pre {
                    font-size: 1em;
                }
                #backBtn {
                    bottom: 18px;
                    font-size: 0.98em;
                    padding: 0.48em 1em;
                }
            }
            section#faq {
                margin-top: 30px;
            }
            section#faq h2 {
                margin-bottom: 13px;
                color: #3977bc;
                font-size: 1.11em;
                text-align: center;
            }
            section#faq dt {
                font-weight: bold;
                margin-top: 8px;
            }
            section#faq dd {
                margin: 0 0 7px 0;
                font-size: 0.99em;
                color: #19788a;
            }