:root {
                --main: #6c57d6;
                --main-dark: #3a256c;
                --bg: #f8f7fe;
            }
            body {
                background: var(--bg);
                margin: 0;
                font-family: "Segoe UI", Arial, sans-serif;
                color: #24234a;
            }
            .container {
                max-width: 430px;
                margin: 36px auto 0 auto;
                background: #fff;
                border-radius: 18px;
                box-shadow: 0 4px 26px #6c57d620;
                padding: 30px 18px 22px 18px;
                min-height: 540px;
                position: relative;
            }
            .logo {
                font-size: 1.33em;
                font-weight: bold;
                text-align: center;
                color: var(--main-dark);
                margin-bottom: 9px;
                letter-spacing: -1px;
            }
            .desc {
                text-align: center;
                color: #4b4699;
                margin-bottom: 18px;
                font-size: 1.05em;
            }
            .form-row {
                margin-bottom: 12px;
            }
            .form-row label {
                font-size: 1em;
                color: #4a399e;
                margin-bottom: 4px;
                display: block;
                font-weight: 500;
            }
            textarea {
                width: 100%;
                min-height: 110px;
                border: 1.3px solid #bcb6f3;
                border-radius: 8px;
                padding: 12px;
                font-size: 1.07em;
                background: #fafdff;
                color: #25235c;
                resize: vertical;
                font-family: inherit;
            }
            .options-row {
                display: flex;
                gap: 8px;
                margin-bottom: 8px;
            }
            .options-row label {
                font-size: 0.98em;
                color: #6c57d6;
                font-weight: 500;
            }
            select,
            input[type="range"] {
                padding: 6px 8px;
                font-size: 1em;
                border-radius: 6px;
                border: 1.1px solid #bcb6f3;
                background: #fafdff;
                color: #25235c;
            }
            .slider-label {
                margin-left: 7px;
                font-size: 0.96em;
                color: #4b4699;
            }
            .action-btn {
                background: var(--main);
                color: #fff;
                border: none;
                border-radius: 8px;
                padding: 14px 0;
                width: 100%;
                font-size: 1.13em;
                font-weight: bold;
                cursor: pointer;
                margin-top: 12px;
                margin-bottom: 13px;
                box-shadow: 0 2px 12px #6c57d622;
                transition: background 0.15s;
            }
            .action-btn:active {
                background: var(--main-dark);
            }
            .footer {
                color: #7c7c92;
                text-align: center;
                font-size: 0.96em;
                margin-top: 18px;
                opacity: 0.92;
                line-height: 1.6;
            }
            #backBtn {
                position: fixed;
                left: 50%;
                bottom: 32px;
                transform: translateX(-50%);
                background: #6c57d6;
                color: #fff;
                font-weight: 700;
                border: none;
                border-radius: 2rem;
                padding: 0.58em 1.5em;
                box-shadow: 0 4px 16px #6c57d666;
                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: #3a256c;
                transform: translateX(-50%) scale(1.04);
            }
            @media (max-width: 600px) {
                .container {
                    max-width: 99vw;
                    padding: 12px 2vw 14px 2vw;
                }
                #backBtn {
                    bottom: 18px;
                    font-size: 0.98em;
                    padding: 0.48em 1em;
                }
            }
            .tts-audio {
                display: block;
                margin: 18px auto 0 auto;
                width: 100%;
                max-width: 370px;
            }
            .msg-error {
                color: #ba2b3b;
                font-size: 0.97em;
                text-align: center;
                margin-top: 9px;
            }
            .msg-success {
                color: #169e60;
                font-size: 0.97em;
                text-align: center;
                margin-top: 9px;
            }