:root{--primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--primary-gradient-hover: linear-gradient(135deg, #5568d3 0%, #6a3d8f 100%);--secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);--success-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);--danger-color: #ef4444;--danger-hover: #dc2626;--bg-primary: #ffffff;--bg-secondary: #f8fafc;--bg-tertiary: #f1f5f9;--text-primary: #1e293b;--text-secondary: #64748b;--text-tertiary: #94a3b8;--border-color: #e2e8f0;--border-hover: #cbd5e1;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--transition: all .3s cubic-bezier(.4, 0, .2, 1)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(135deg,#667eea15,#764ba215);background-attachment:fixed;color:var(--text-primary);line-height:1.6;min-height:100vh}.app{max-width:100%;margin:0 auto;padding:2rem;width:100%}.app-header{background:var(--primary-gradient);color:#fff;padding:1.5rem 2rem;border-radius:var(--radius-lg);margin-bottom:2rem;box-shadow:var(--shadow-xl);position:relative;overflow:hidden}.app-header:before{content:"";position:absolute;top:-50%;right:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(255,255,255,.1) 0%,transparent 70%);animation:pulse 20s ease-in-out infinite}@keyframes pulse{0%,to{transform:scale(1);opacity:.5}50%{transform:scale(1.1);opacity:.8}}.app-header h1{font-size:1.75rem;margin-bottom:.5rem;font-weight:700;position:relative;z-index:1;letter-spacing:-.02em}.app-header p{font-size:.9375rem;opacity:.95;position:relative;z-index:1;font-weight:400}.app-main{display:flex;flex-direction:column;gap:2rem}.main-grid{display:grid;grid-template-columns:1fr;gap:2rem;align-items:start}.error-message{background:linear-gradient(135deg,#fee2e2,#fecaca);color:#991b1b;padding:1.25rem 1.5rem;border-radius:var(--radius-md);border-left:4px solid var(--danger-color);margin-bottom:1.5rem;display:flex;align-items:center;gap:.75rem;box-shadow:var(--shadow-md);animation:slideIn .3s ease-out}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.error-icon{width:24px;height:24px;flex-shrink:0}.generate-section,.list-section{background:var(--bg-primary);padding:1.5rem;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);border:1px solid var(--border-color);transition:var(--transition)}.generate-section{align-self:start;position:sticky;top:2rem;max-height:calc(100vh - 4rem);overflow-y:auto}.generate-section:hover,.list-section:hover{box-shadow:var(--shadow-xl);transform:translateY(-2px)}.generate-section:hover{transform:none}.section-header{margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:2px solid var(--bg-tertiary)}.section-header h2{display:flex;align-items:center;gap:.75rem;font-size:1.5rem;font-weight:700;color:var(--text-primary);margin:0}.section-icon{width:28px;height:28px;stroke-width:2;color:#667eea}.language-filter-badge{margin-left:auto;padding:.375rem .75rem;background:var(--primary-gradient);color:#fff;border-radius:var(--radius-sm);font-size:.875rem;font-weight:600}.generate-content{display:flex;flex-direction:column;gap:1.5rem}.language-selector{margin-bottom:0}.language-selector label{display:block;margin-bottom:.5rem;font-weight:600;color:var(--text-primary);font-size:.875rem;text-transform:uppercase;letter-spacing:.05em}.language-select{width:100%;padding:.875rem 1rem;font-size:1rem;border:2px solid var(--border-color);border-radius:var(--radius-md);background-color:var(--bg-primary);color:var(--text-primary);cursor:pointer;transition:var(--transition);font-weight:500}.language-select:hover{border-color:#667eea;box-shadow:var(--shadow-sm)}.language-select:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 4px #667eea1a}.language-select optgroup{font-weight:600;color:var(--text-primary);padding:.5rem 0;background-color:var(--bg-primary)}.language-select option{color:var(--text-primary);background-color:var(--bg-primary);font-weight:400;padding:.5rem}.language-select optgroup option{margin-left:1rem}.text-input{margin-bottom:0}.text-input label{display:block;margin-bottom:.5rem;font-weight:600;color:var(--text-primary);font-size:.875rem;text-transform:uppercase;letter-spacing:.05em}.text-area{width:100%;padding:1rem;font-size:1rem;border:2px solid var(--border-color);border-radius:var(--radius-md);resize:vertical;font-family:inherit;transition:var(--transition);min-height:150px;background:var(--bg-secondary);color:var(--text-primary)}.text-area:hover{border-color:#667eea;background:var(--bg-primary)}.text-area:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 4px #667eea1a;background:var(--bg-primary)}.text-area:disabled{background-color:var(--bg-tertiary);cursor:not-allowed;opacity:.6}.text-length{text-align:right;margin-top:.5rem;font-size:.875rem;color:var(--text-tertiary);font-weight:500}.generate-button{width:100%;padding:1rem 1.5rem;font-size:1.125rem;font-weight:600;color:#fff;background:var(--primary-gradient);border:none;border-radius:var(--radius-md);cursor:pointer;transition:var(--transition);display:flex;align-items:center;justify-content:center;gap:.5rem;box-shadow:var(--shadow-md);position:relative;overflow:hidden}.generate-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s}.generate-button:hover:not(:disabled):before{left:100%}.generate-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-xl);background:var(--primary-gradient-hover)}.generate-button:active:not(:disabled){transform:translateY(0)}.generate-button:disabled{opacity:.6;cursor:not-allowed;transform:none}.button-icon,.button-spinner{width:20px;height:20px}.button-spinner{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.tts-list h3{margin-bottom:0;color:var(--text-primary)}.tts-list.empty{text-align:center;padding:4rem 2rem;color:var(--text-tertiary)}.tts-list.empty p{font-size:1.125rem;font-weight:500}.tts-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem}.tts-item{background:var(--bg-secondary);border:2px solid var(--border-color);border-radius:var(--radius-md);padding:1rem;position:relative;overflow:hidden}.tts-item-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:.75rem;gap:.75rem}.tts-item-info{display:flex;gap:.75rem;flex-wrap:wrap;align-items:center;flex:1}.tts-language{font-weight:700;color:#667eea;padding:.375rem .75rem;background:linear-gradient(135deg,#667eea1a,#764ba21a);border-radius:var(--radius-sm);font-size:.875rem;border:1px solid rgba(102,126,234,.2)}.tts-date{color:var(--text-secondary);font-size:.875rem;font-weight:500}.tts-size{color:var(--text-tertiary);font-size:.875rem;font-weight:500;padding:.25rem .5rem;background:var(--bg-tertiary);border-radius:var(--radius-sm)}.delete-button{padding:.5rem 1rem;background:var(--danger-color);color:#fff;border:none;border-radius:var(--radius-md);cursor:pointer;font-size:.875rem;font-weight:600;transition:var(--transition);box-shadow:var(--shadow-sm);white-space:nowrap}.delete-button:hover{background:var(--danger-hover);transform:translateY(-2px);box-shadow:var(--shadow-md)}.delete-button:active{transform:translateY(0)}.tts-text{margin-bottom:.75rem;padding:.75rem;background:var(--bg-primary);border-radius:var(--radius-md);color:var(--text-primary);word-wrap:break-word;line-height:1.5;border:1px solid var(--border-color);font-size:.875rem;max-height:4.5em;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}.tts-audio{margin-top:.5rem}.audio-player-wrapper{width:100%;margin-top:.5rem}.audio-player{width:100%;border-radius:var(--radius-sm);background:transparent}.audio-error{padding:.75rem 1rem;background:linear-gradient(135deg,#fee2e2,#fecaca);color:#991b1b;border-radius:var(--radius-md);font-size:.875rem;margin-top:.5rem;border:1px solid #fca5a5;font-weight:500}.loading{text-align:center;padding:4rem 2rem;color:var(--text-secondary);display:flex;flex-direction:column;align-items:center;gap:1rem}.loading-spinner{width:48px;height:48px;color:#667eea;animation:spin 2s linear infinite}.loading p{font-size:1.125rem;font-weight:500}@media (min-width: 1024px){.main-grid{grid-template-columns:1fr 2fr}.app{padding:2rem;max-width:95%}.app-header{padding:2rem 2.5rem}.app-header h1{font-size:2rem}.app-header p{font-size:1rem}.generate-section,.list-section{padding:2rem}.generate-section{top:2.5rem;max-height:calc(100vh - 5rem)}.tts-items{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem}}@media (min-width: 1400px){.app{padding:2.5rem;max-width:98%}.main-grid{grid-template-columns:1fr 2.5fr}.tts-items{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem}}@media (min-width: 1920px){.app{padding:3rem;max-width:100%}.main-grid{grid-template-columns:1fr 3fr}.tts-items{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:.875rem}.tts-item{padding:.875rem}}@media (max-width: 768px){.app{padding:1rem}.app-header{padding:1.25rem 1.5rem}.app-header h1{font-size:1.5rem}.app-header p{font-size:.875rem}.generate-section,.list-section{padding:1.5rem}.tts-items{grid-template-columns:1fr}.tts-item-header{flex-direction:column;align-items:flex-start;gap:.75rem}.tts-item-info{flex-direction:column;gap:.5rem;align-items:flex-start}.delete-button{width:100%}.section-header h2{font-size:1.25rem}}.tab-buttons{display:flex;gap:.5rem;margin-bottom:1.5rem;border-bottom:2px solid var(--bg-tertiary)}.tab-button{padding:.75rem 1.5rem;background:transparent;border:none;border-bottom:3px solid transparent;color:var(--text-secondary);font-weight:600;font-size:.9375rem;cursor:pointer;transition:var(--transition);margin-bottom:-2px}.tab-button:hover{color:var(--text-primary);background:var(--bg-secondary)}.tab-button.active{color:#667eea;border-bottom-color:#667eea;background:transparent}.audio-upload{display:flex;flex-direction:column;gap:1.5rem}.upload-header{margin-bottom:0}.upload-label{display:block;margin-bottom:.5rem;font-weight:600;color:var(--text-primary);font-size:.875rem;text-transform:uppercase;letter-spacing:.05em}.file-upload-section{display:flex;flex-direction:column;gap:.75rem}.file-upload-wrapper{display:flex;gap:.75rem;align-items:center}.file-input{display:none}.file-select-button-label{display:inline-block;cursor:pointer}.file-select-button{padding:.875rem 1.5rem;background:var(--bg-secondary);border:2px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-primary);font-weight:600;font-size:.9375rem;cursor:pointer;transition:var(--transition);display:flex;align-items:center;gap:.5rem;width:100%;justify-content:center}.file-select-button:hover:not(:disabled){border-color:#667eea;background:var(--bg-primary);box-shadow:var(--shadow-sm)}.file-select-button:disabled{opacity:.6;cursor:not-allowed}.file-select-button-label:has(.file-select-button:disabled){cursor:not-allowed}.file-info{margin-top:.25rem}.file-hint{font-size:.875rem;color:var(--text-tertiary);margin:0}.selected-file-info{display:flex;align-items:center;gap:.75rem;padding:1rem;background:var(--bg-secondary);border:2px solid var(--border-color);border-radius:var(--radius-md);border-color:#667eea}.file-icon{width:32px;height:32px;color:#667eea;flex-shrink:0}.file-details{flex:1;min-width:0}.file-name{font-weight:600;color:var(--text-primary);font-size:.9375rem;margin-bottom:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-size{font-size:.875rem;color:var(--text-secondary)}html{scroll-behavior:smooth}::selection{background:#667eea33;color:var(--text-primary)}