:root{--tts-bg: #f5f4ff;--tts-panel: #ffffff;--text-primary: #0f172a;--text-muted: rgba(15, 23, 42, 0.6);--accent: #7c3aed;--accent-strong: #5b21b6}*{box-sizing:border-box}body{font-family:"Be Vietnam Pro",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:radial-gradient(circle at top, rgba(124, 58, 237, 0.15), transparent 45%),#eef2ff;margin:0;padding:24px}.tts-page{max-width:1180px;margin:0 auto 80px;display:flex;flex-direction:column;gap:32px}.hero{background:linear-gradient(135deg, rgba(124, 58, 237, 0.15), rgba(99, 102, 241, 0.08));border:1px solid rgba(124,58,237,.25);border-radius:32px;padding:40px;box-shadow:0 30px 60px rgba(91,33,182,.15)}.hero .eyebrow{text-transform:uppercase;letter-spacing:.22em;font-size:.75rem;color:var(--accent-strong);margin-bottom:10px}.hero h1{font-size:clamp(2rem,3vw,3rem);margin:0 0 16px;color:var(--text-primary)}.hero .subtitle{max-width:720px;color:var(--text-muted);margin-bottom:20px}.hero .hero-badges{display:flex;gap:12px;flex-wrap:wrap}.hero .hero-badges .badge{background:hsla(0,0%,100%,.95);padding:10px 18px;border-radius:999px;border:1px solid rgba(124,58,237,.2);color:var(--accent-strong);font-weight:600}.tts-grid{display:grid;grid-template-columns:minmax(0, 1.1fr) minmax(0, 0.9fr);gap:24px}.panel{background:var(--tts-panel);border-radius:28px;border:1px solid rgba(15,23,42,.08);padding:28px;display:flex;flex-direction:column;gap:24px;box-shadow:0 25px 50px rgba(15,23,42,.12)}.panel-heading{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}.panel-heading h2{margin:0 0 6px}.panel-heading p{margin:0;color:var(--text-muted)}.panel-heading button.secondary{border:1px solid rgba(15,23,42,.15);background:rgba(15,23,42,.03);border-radius:14px;padding:10px 16px;font-weight:600;cursor:pointer;transition:background .2s ease}.panel-heading button.secondary:hover{background:rgba(15,23,42,.08)}.editor-card{background:rgba(124,58,237,.04);border-radius:24px;padding:18px;border:1px solid rgba(124,58,237,.15);display:flex;flex-direction:column;gap:12px}.editor-card textarea{border:none;border-radius:18px;padding:18px;min-height:180px;font-size:1rem;line-height:1.5;resize:vertical;background:#fff;border:1px solid rgba(15,23,42,.08);font-family:inherit}.editor-toolbar{display:flex;justify-content:space-between;align-items:center;font-size:.95rem;color:var(--text-muted)}.editor-toolbar .char-count strong{color:var(--accent-strong)}.editor-toolbar .char-count.is-warning strong{color:#dc2626}.quick-actions{display:flex;flex-wrap:wrap;gap:10px}.quick-actions .btn-template{border:1px solid rgba(124,58,237,.3);background:#fff;padding:8px 14px;border-radius:999px;cursor:pointer;font-size:.9rem;transition:all .2s ease}.quick-actions .btn-template:hover{background:rgba(124,58,237,.08)}.options-card{background:rgba(15,23,42,.02);border-radius:20px;padding:20px;border:1px solid rgba(15,23,42,.08);display:flex;flex-direction:column;gap:18px}.options-card .option{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}.options-card .option span{font-weight:600}.options-card .option small{display:block;color:var(--text-muted);font-weight:400}.options-card .option select{min-width:260px;padding:12px 16px;border-radius:14px;border:1px solid rgba(15,23,42,.15);font-size:1rem;background:#fff;font-family:inherit}.options-card .sliders{display:grid;grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));gap:16px}.options-card .slider{background:#fff;border:1px solid rgba(15,23,42,.08);border-radius:16px;padding:14px 16px}.options-card .slider .slider-head{display:flex;justify-content:space-between;margin-bottom:10px;color:var(--text-muted)}.options-card .slider .slider-head span{font-weight:600;color:var(--text-primary)}.options-card .slider .slider-head strong{color:var(--accent-strong)}.options-card .slider input[type=range]{width:100%;accent-color:var(--accent)}.action-buttons{display:flex;gap:16px;flex-wrap:wrap}.action-buttons button{flex:1;border:none;border-radius:16px;padding:16px;font-size:1rem;font-weight:600;cursor:pointer;transition:transform .2s ease,opacity .2s ease}.action-buttons button:hover:not(:disabled){transform:translateY(-2px)}.action-buttons button:disabled{opacity:.5;cursor:not-allowed}.action-buttons #ttsSpeak{background:linear-gradient(135deg, #7c3aed, #5b21b6);color:#fff}.action-buttons #ttsDownload{background:rgba(124,58,237,.08);color:var(--accent-strong);border:1px solid rgba(124,58,237,.2)}.status-card{background:rgba(124,58,237,.08);border-radius:18px;padding:14px 18px;border:1px solid rgba(124,58,237,.2);font-weight:600;color:var(--accent-strong)}.status-card.is-error{background:rgba(220,38,38,.12);border-color:rgba(220,38,38,.3);color:#b91c1c}.preview-card{background:hsla(0,0%,100%,.95);border-radius:24px;padding:24px;border:1px solid rgba(124,58,237,.15);display:flex;flex-direction:column;gap:18px}.preview-card audio{width:100%;border-radius:16px}.preview-card .preview-wave{background:rgba(124,58,237,.08);border-radius:20px;padding:24px;display:flex;flex-direction:column;gap:12px;align-items:center;border:1px dashed rgba(124,58,237,.35)}.preview-card .wave{display:grid;grid-template-columns:repeat(10, 1fr);gap:4px;width:100%}.preview-card .wave span{display:block;height:32px;border-radius:4px;background:rgba(124,58,237,.6);animation:pulse 1.2s ease-in-out infinite}.preview-card .wave span:nth-child(odd){animation-delay:.15s}.preview-card .preview-label{margin:0;color:var(--text-muted);font-size:.95rem}.preview-card .meta{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));gap:10px}.preview-card .meta li{background:rgba(15,23,42,.03);border-radius:14px;padding:10px 12px;border:1px solid rgba(15,23,42,.08);font-size:.95rem}.preview-card .meta li span{color:var(--text-muted)}@keyframes pulse{0%,100%{transform:scaleY(0.6)}50%{transform:scaleY(1)}}.faq{background:hsla(0,0%,100%,.9);border-radius:28px;border:1px solid rgba(15,23,42,.08);padding:24px 28px;box-shadow:0 20px 40px rgba(15,23,42,.08)}.faq h2{margin-top:0}.faq ul{padding-left:20px;color:var(--text-muted);margin-bottom:0}.article-section{background:hsla(0,0%,100%,.95);border-radius:28px;padding:28px;border:1px solid rgba(15,23,42,.08);box-shadow:0 24px 50px rgba(15,23,42,.08);display:flex;flex-direction:column;gap:18px}.article-section .article-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}.article-section .article-heading h2{margin:0 0 6px}.article-section .article-heading p{margin:0;color:var(--text-muted)}.article-section .article-heading .btn-toggle{border:1px solid rgba(124,58,237,.25);background:rgba(124,58,237,.08);border-radius:999px;padding:10px 18px;font-weight:600;color:var(--accent-strong);cursor:pointer;transition:background .2s ease,transform .2s ease}.article-section .article-heading .btn-toggle:hover{transform:translateY(-1px);background:rgba(124,58,237,.15)}.article-section .article-content{position:relative;max-height:360px;overflow:hidden;transition:max-height .3s ease}.article-section .article-content.is-expanded{max-height:none}.article-section .article-content.is-expanded .article-fade{opacity:0;pointer-events:none}.article-section .article-content__inner{color:var(--text-primary)}.article-section .article-content__inner p{line-height:1.6;color:var(--text-muted)}.article-section .article-content__inner h3,.article-section .article-content__inner h4{color:var(--text-primary)}.article-section .article-content .article-fade{position:absolute;left:0;right:0;bottom:0;height:120px;background:linear-gradient(0deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0));transition:opacity .3s ease}@media(max-width: 960px){body{padding:16px}.tts-grid{grid-template-columns:1fr}.action-buttons{flex-direction:column}.action-buttons button{width:100%}}