.tts-page { color: #26364d; }
.tts-heading { margin-bottom: 28px; }
.tts-heading h1 { margin: 5px 0 14px; color: #101828; font-size: 2.35rem; letter-spacing: 0; }
.tts-heading > p:last-child { max-width: 760px; margin: 0; color: #5f6f86; line-height: 1.8; }
.tts-eyebrow,.tts-step { margin: 0; color: #087f73; font-size: .85rem; font-weight: 800; }
.tts-tool,.tts-guide { border: 1px solid #d9e2ec; border-radius: 8px; background: #fff; }
.tts-tool { padding: 28px; }
.tts-editor-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.tts-editor-head h2,.tts-guide h2 { margin: 4px 0 0; color: #172033; font-size: 1.45rem; letter-spacing: 0; }
.tts-text-button { width: auto; min-height: 40px; margin: 0; padding: 0 15px; border: 1px solid #cbd7e3; border-radius: 8px; background: #fff; color: #34445b; font-size: .85rem; }
.tts-text-field textarea { width: 100%; min-height: 210px; resize: vertical; margin: 0; padding: 18px; border: 1px solid #cad6e2; border-radius: 8px; background: #fbfcfe; color: #1f2c3f; line-height: 1.7; }
.tts-text-field textarea:focus { border-color: #0f8b7d; box-shadow: 0 0 0 3px rgba(15,139,125,.12); }
.tts-editor-meta { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; color: #718096; font-size: .78rem; }
.tts-settings { margin-top: 24px; padding: 22px; border-radius: 8px; background: #f4f7fa; }
.tts-select-field > span,.tts-range-grid label > span { display: flex; justify-content: space-between; margin-bottom: 8px; color: #25364d; font-weight: 800; }
.tts-select-field select { width: 100%; height: 52px; margin: 0; border: 1px solid #cad6e2; border-radius: 8px; background-color: #fff; }
.tts-select-field small,.tts-range-grid small { display: block; margin-top: 7px; color: #7a899c; font-size: .76rem; line-height: 1.45; }
.tts-range-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; margin-top: 22px; }
.tts-range-grid output { color: #087f73; font-weight: 800; }
.tts-range-grid input[type="range"] { width: 100%; accent-color: #087f73; }
.tts-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
.tts-actions button { width: auto; min-height: 48px; margin: 0; padding: 0 18px; border-radius: 8px; background: #087f73; color: #fff; font-weight: 800; }
.tts-actions button.secondary { border: 1px solid #cbd7e3; background: #fff; color: #34445b; }
.tts-actions button.quiet { margin-left: auto; background: #e8eef4; color: #34445b; }
.tts-actions button:disabled { cursor: not-allowed; opacity: .45; }
.tts-progress { overflow: hidden; height: 6px; margin-top: 20px; border-radius: 6px; background: #e5ebf1; }
.tts-progress span { display: block; width: 0; height: 100%; background: #087f73; transition: width .2s ease; }
.tts-progress span.is-speaking { width: 100%; animation: tts-pulse 1.8s ease-in-out infinite alternate; }
@keyframes tts-pulse { from { opacity: .45; } to { opacity: 1; } }
.tts-status { margin: 12px 0 0; color: #64748b; font-size: .9rem; }
.tts-status.is-error { color: #b42318; }
.tts-guide { margin-top: 24px; padding: 28px; }
.tts-guide header > p:last-child { margin: 10px 0 0; color: #64748b; line-height: 1.75; }
.tts-guide-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; margin-top: 24px; }
.tts-guide-grid section { padding-top: 18px; border-top: 2px solid #dce9e6; }
.tts-guide-grid h3 { margin: 0 0 8px; color: #1b2a3e; font-size: 1.05rem; letter-spacing: 0; }
.tts-guide-grid p { margin: 0; color: #5d6d82; line-height: 1.75; }
.tts-note { margin: 24px 0 0; padding: 14px 16px; border-left: 4px solid #087f73; background: #f2f8f6; color: #53677a; line-height: 1.65; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
@media screen and (max-width:736px) {
 .tts-heading h1 { font-size: 1.9rem; }
 .tts-tool,.tts-guide { padding: 20px; }
 .tts-range-grid,.tts-guide-grid { grid-template-columns: 1fr; }
 .tts-editor-meta { flex-direction: column; }
 .tts-actions { display: grid; grid-template-columns: 1fr 1fr; }
 .tts-actions button,.tts-actions button.quiet { width: 100%; margin: 0; }
 #speak-button { grid-column: 1 / -1; }
}