.sidebar-overlay{display:none;position:fixed;top:60px;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);z-index:1040;opacity:0;transition:opacity var(--transition-normal)}.sidebar-overlay.active{display:block;opacity:1}.tts-body{display:flex;gap:0;min-height:calc(100vh - 60px);position:relative}.tts-main{flex:1;padding:var(--spacing-xl);max-width:1200px;margin:0 auto;width:100%;display:flex;flex-direction:row;gap:var(--spacing-lg);align-items:stretch}.tts-sidebar{width:280px;flex-shrink:0;background-color:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-lg);display:flex;flex-direction:column;overflow-y:auto;max-height:none;align-self:stretch}.sidebar-section{display:flex;flex-direction:column;border-bottom:1px solid var(--border-color)}.sidebar-section:last-child{flex:1;border-bottom:none}.sidebar-section-header{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-md);background-color:var(--bg-primary);border-bottom:1px solid var(--border-color);position:sticky;top:0;z-index:10}.sidebar-section-header.collapsible{cursor:pointer;user-select:none;transition:background-color var(--transition-fast)}.sidebar-section-header.collapsible:hover{background-color:var(--bg-tertiary)}.sidebar-section-header i{color:var(--primary-color);font-size:1rem}.sidebar-section-header h3{flex:1;font-size:.875rem;font-weight:600;color:var(--text-primary);margin:0}.sidebar-section-header .toggle-icon{color:var(--text-tertiary);font-size:.875rem;transition:transform var(--transition-fast)}.sidebar-section-header.collapsed .toggle-icon{transform:rotate(-90deg)}.sidebar-section-body{padding:var(--spacing-md);flex:1;overflow-y:auto;max-height:1000px;transition:max-height var(--transition-normal) ease-out,padding var(--transition-normal) ease-out}.sidebar-section-body.collapsed{max-height:0;padding-top:0;padding-bottom:0;overflow:hidden}.tts-content{flex:1;display:flex;flex-direction:column;gap:var(--spacing-lg);min-width:0}.tts-card{background-color:var(--bg-primary);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);overflow:hidden;transition:box-shadow var(--transition-normal)}.tts-card:hover{box-shadow:var(--shadow-lg)}.card-header{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-lg);border-bottom:1px solid var(--border-color);background-color:var(--bg-primary)}.card-header i{color:var(--primary-color);font-size:1.125rem}.card-header h3{flex:1;font-size:1rem;font-weight:600;color:var(--text-primary);margin:0}.card-body{padding:var(--spacing-lg)}.text-count{font-size:.875rem;color:var(--text-tertiary)}#textInput{width:100%;min-height:200px;padding:var(--spacing-md);border:1px solid var(--border-color);border-radius:var(--radius-md);background-color:var(--bg-secondary);color:var(--text-primary);font-family:var(--font-sans);font-size:.9375rem;line-height:1.6;resize:vertical;transition:all var(--transition-fast)}#textInput:focus{outline:0;border-color:var(--primary-color);box-shadow:0 0 0 3px rgba(74,107,255,.1)}#textInput.highlight{animation:2s ease-out highlight}.voice-search{position:relative;margin-bottom:var(--spacing-md)}.voice-search input{width:100%;padding:var(--spacing-sm) var(--spacing-md);padding-right:2.5rem;border:1px solid var(--border-color);border-radius:var(--radius-md);background-color:var(--bg-primary);color:var(--text-primary);font-size:.875rem;transition:border-color var(--transition-fast)}.voice-search input:focus{outline:0;border-color:var(--primary-color);box-shadow:0 0 0 3px rgba(74,107,255,.1)}.voice-search i{position:absolute;right:var(--spacing-md);top:50%;transform:translateY(-50%);color:var(--text-tertiary);pointer-events:none}.voice-filters{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-sm);margin-bottom:var(--spacing-md)}.voice-filters select{padding:var(--spacing-sm) var(--spacing-md);border:1px solid var(--border-color);border-radius:var(--radius-md);background-color:var(--bg-primary);color:var(--text-primary);font-size:.875rem;cursor:pointer;transition:border-color var(--transition-fast)}.voice-filters select:focus{outline:0;border-color:var(--primary-color)}.voice-list{max-height:400px;overflow-y:auto;border:1px solid var(--border-color);border-radius:var(--radius-md);background-color:var(--bg-primary)}.voice-loading{display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm);padding:var(--spacing-xl);color:var(--text-secondary)}.voice-item{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-md);border-bottom:1px solid var(--border-color);cursor:pointer;transition:all var(--transition-normal)}.voice-item:last-child{border-bottom:none}.voice-item:hover{background-color:var(--bg-tertiary)}.voice-item.selected{background-color:rgba(74,107,255,.1);border-left:3px solid var(--primary-color);padding-left:calc(var(--spacing-md) - 3px)}.voice-avatar{width:36px;height:36px;border-radius:50%;background:var(--primary-gradient);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:.875rem;flex-shrink:0}.voice-info{flex:1;min-width:0}.voice-name{font-weight:600;font-size:.875rem;color:var(--text-primary);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.voice-meta{font-size:.75rem;color:var(--text-tertiary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.voice-empty{padding:var(--spacing-xl);text-align:center;color:var(--text-secondary)}.history-count{font-size:.75rem;padding:.25rem .5rem;background-color:var(--bg-tertiary);color:var(--text-secondary);border-radius:var(--radius-full);font-weight:600}[data-section-body=history]{display:flex;flex-direction:column;flex:1}.history-list{display:flex;flex-direction:column;gap:var(--spacing-sm);flex:1}.history-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-xl);color:var(--text-tertiary);flex:1}.history-empty i{font-size:2rem;margin-bottom:var(--spacing-sm);opacity:.5}.history-item{background-color:var(--bg-primary);border-radius:var(--radius-md);padding:var(--spacing-sm);border:1px solid var(--border-color);transition:all var(--transition-fast);cursor:pointer}.history-item:hover{background-color:var(--bg-tertiary);transform:translateY(-1px);box-shadow:var(--shadow-sm)}.history-item-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-xs)}.history-voice{font-weight:600;color:var(--text-primary);font-size:.8125rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}.history-time{font-size:.6875rem;color:var(--text-tertiary);white-space:nowrap;margin-left:var(--spacing-xs)}.history-text{font-size:.8125rem;color:var(--text-secondary);margin-bottom:var(--spacing-sm);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.4;min-height:2.2em}.history-actions{display:flex;gap:var(--spacing-xs)}.history-actions .btn{flex:1;font-size:.6875rem;padding:.25rem .375rem;min-height:28px}.params-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--spacing-lg)}.param-group{display:flex;flex-direction:column}.param-group label{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-sm);font-size:.875rem;font-weight:500;color:var(--text-primary)}.param-value{font-weight:600;color:var(--primary-color)}.param-group input[type=range]{width:100%;height:6px;border-radius:3px;background:var(--bg-tertiary);outline:0;-webkit-appearance:none}.param-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--primary-color);cursor:pointer;transition:transform var(--transition-fast)}.param-group input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}.param-group input[type=range]::-moz-range-thumb{width:18px;height:18px;border:none;border-radius:50%;background:var(--primary-color);cursor:pointer;transition:transform var(--transition-fast)}.param-group input[type=range]::-moz-range-thumb:hover{transform:scale(1.2)}.param-marks{display:flex;justify-content:space-between;margin-top:12px;font-size:.75rem;color:var(--text-tertiary);position:relative}.param-marks span:nth-child(2){position:absolute;transform:translateX(-50%)}#rateSlider+.param-marks span:nth-child(2){left:34%}#pitchSlider+.param-marks span:nth-child(2){left:50%}.btn-generate{display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm);width:100%;min-height:80px;padding:var(--spacing-lg);background:var(--primary-gradient);color:#fff;border:none;border-radius:var(--radius-lg);font-size:1.125rem;font-weight:600;cursor:pointer;transition:all var(--transition-fast);box-shadow:var(--shadow-md)}.btn-generate:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.btn-generate:active{transform:translateY(0)}.btn-generate:disabled{opacity:.6;cursor:not-allowed;transform:none}.btn-generate i{font-size:1.25rem}.audio-player{min-height:150px}.audio-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:150px;color:var(--text-tertiary)}.audio-placeholder i{font-size:3rem;margin-bottom:var(--spacing-md);opacity:.5}.audio-controls{display:flex;flex-direction:column;gap:var(--spacing-md)}.audio-controls audio{width:100%;border-radius:var(--radius-md)}.audio-actions{display:flex;gap:var(--spacing-sm)}.audio-actions .btn{flex:1}@keyframes highlight{0%,100%{background-color:var(--bg-secondary)}50%{background-color:rgba(74,107,255,.1)}}@keyframes slideInLeft{from{transform:translateX(-100%)}to{transform:translateX(0)}}@keyframes slideOutLeft{from{transform:translateX(0)}to{transform:translateX(-100%)}}.toast-container{position:fixed;top:80px;right:var(--spacing-lg);z-index:var(--z-modal);display:flex;flex-direction:column;gap:var(--spacing-sm)}.toast{min-width:300px;padding:var(--spacing-md);background-color:var(--bg-primary);border-radius:var(--radius-md);box-shadow:var(--shadow-xl);display:flex;align-items:center;gap:var(--spacing-sm);animation:.3s ease-out slideIn}@keyframes slideIn{from{transform:translateX(400px);opacity:0}to{transform:translateX(0);opacity:1}}.toast.toast-success{border-left:4px solid var(--success-color)}.toast.toast-error{border-left:4px solid var(--error-color)}.toast.toast-warning{border-left:4px solid var(--warning-color)}.toast i{font-size:1.25rem}.toast.toast-success i{color:var(--success-color)}.toast.toast-error i{color:var(--error-color)}.toast.toast-warning i{color:var(--warning-color)}.toast-message{flex:1;color:var(--text-primary);font-size:.875rem}@media (min-width:768px) and (max-width:1023px){.tts-sidebar{width:220px}.tts-main{padding:var(--spacing-lg)}.sidebar-section-body{padding:var(--spacing-sm)}.voice-list{max-height:300px}.params-grid{gap:var(--spacing-md)}}@media (max-width:767px){.tts-body{flex-direction:column}.tts-sidebar{position:fixed;top:60px;left:0;bottom:0;width:85vw;max-width:320px;z-index:1050;transform:translateX(-100%);transition:transform var(--transition-normal);box-shadow:var(--shadow-xl);border-radius:0;max-height:none}.tts-sidebar.active{transform:translateX(0)}.tts-main{flex-direction:column;padding:var(--spacing-md);gap:var(--spacing-md)}.tts-content{gap:var(--spacing-md)}.card-body,.card-header{padding:var(--spacing-md)}#textInput{min-height:120px}.params-grid{grid-template-columns:1fr;gap:var(--spacing-md)}.btn-generate{min-height:60px;font-size:1rem}.voice-list{max-height:calc(100vh - 300px)}.toast-container{right:var(--spacing-md);left:var(--spacing-md)}.toast{min-width:auto}}@media (max-width:480px){.card-body,.card-header,.sidebar-section-body,.tts-main{padding:var(--spacing-sm)}}