.tts-field-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}
.tts-field-heading label { color: var(--tw-ink); font-size: 14px; font-weight: 650; }
.tts-field-heading span { color: var(--tw-muted); font-size: 12px; }

#text-input {
    display: block;
    width: 100%;
    min-height: 210px;
    padding: 16px;
    border: 1px solid var(--tw-line);
    border-radius: 12px;
    outline: none;
    resize: vertical;
    background: var(--tw-soft);
    color: var(--tw-ink);
    font: inherit;
    font-size: 15px;
    line-height: 1.6;
}
#text-input::placeholder { color: var(--tw-muted); }
#text-input:focus {
    border-color: transparent;
    outline: 2px solid var(--tw-accent);
    outline-offset: 0;
}

.tts-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; }
.tts-actions button, .tts-download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 48px;
    padding: 0 20px;
    border-radius: 10px;
    font: inherit;
    font-size: 14px;
    font-weight: 650;
    text-decoration: none;
    cursor: pointer;
}
.tts-clear { border: 1px solid var(--tw-line); background: var(--tw-panel); color: var(--tw-ink); }
.tts-clear:hover:not(:disabled) { background: var(--tw-soft); }
.tts-generate, .tts-download { border: 1px solid var(--tw-ink); background: var(--tw-ink); color: var(--tw-panel); }
.tts-generate:hover:not(:disabled), .tts-download:hover { border-color: var(--tw-accent); background: var(--tw-accent); color: #fff; }
.tts-actions button:disabled { opacity: .5; cursor: default; }
.tts-actions button:focus-visible, .tts-download:focus-visible { outline: 2px solid var(--tw-accent); outline-offset: 2px; }
.tts-generate.is-busy i { animation: tts-pulse 1s ease-in-out infinite; }
@keyframes tts-pulse { 50% { opacity: .35; } }

.tts-result { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--tw-line); }
.tts-result[hidden] { display: none; }
.tts-result__heading { display: flex; align-items: center; gap: 9px; margin-bottom: 16px; color: var(--tw-ink); font-size: 15px; }
.tts-result__heading i { color: #4d956b; font-size: 18px; }
.tts-result audio { display: block; width: 100%; margin-bottom: 16px; }
.tts-download { width: fit-content; }

@media (max-width: 600px) {
    .tts-field-heading { display: grid; gap: 4px; }
    .tts-field-heading span { display: none; }
    .tts-actions { flex-direction: column-reverse; }
    .tts-actions button, .tts-download { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .tts-generate.is-busy i { animation: none; } }