*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:linear-gradient(135deg,#667eea,#764ba2);color:#333;line-height:1.6;min-height:100vh}.container{max-width:1200px;margin:0 auto;padding:20px}header{text-align:center;margin-bottom:30px;color:#fff}header h1{font-size:2.5rem;margin-bottom:10px;text-shadow:2px 2px 4px rgba(0,0,0,.3)}header p{font-size:1.2rem;opacity:.9}.test-section{background:#fff;border-radius:12px;padding:25px;margin-bottom:20px;box-shadow:0 4px 15px #0000001a;transition:transform .2s ease}.test-section:hover{transform:translateY(-2px)}.test-section h2{color:#4a5568;margin-bottom:20px;font-size:1.5rem;border-bottom:2px solid #e2e8f0;padding-bottom:10px}#textInput{width:100%;min-height:100px;padding:15px;border:2px solid #e2e8f0;border-radius:8px;font-size:16px;resize:vertical;transition:border-color .3s ease}#textInput:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.config-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}.config-item{display:flex;flex-direction:column}.config-item label{font-weight:600;margin-bottom:8px;color:#4a5568}.config-item select{padding:10px;border:2px solid #e2e8f0;border-radius:6px;font-size:14px;background:#fff;transition:border-color .3s ease}.config-item select:focus{outline:none;border-color:#667eea}.controls{display:flex;flex-wrap:wrap;gap:15px;justify-content:center}.btn{padding:12px 24px;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease;text-decoration:none;display:inline-flex;align-items:center;gap:8px}.btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00000026}.btn-primary{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.btn-secondary{background:linear-gradient(135deg,#f093fb,#f5576c);color:#fff}.btn-info{background:linear-gradient(135deg,#4facfe,#00f2fe);color:#fff}.btn-warning{background:linear-gradient(135deg,#ffecd2,#fcb69f);color:#8b4513}.btn-danger{background:linear-gradient(135deg,#ff9a9e,#fecfef);color:#8b0000}.btn-small{padding:6px 12px;font-size:12px;background:#e2e8f0;color:#4a5568;border:none;border-radius:4px;cursor:pointer}.status-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px}.status-item{text-align:center;padding:20px;background:#f7fafc;border-radius:8px;border:1px solid #e2e8f0}.status-item h3{color:#4a5568;margin-bottom:10px;font-size:1rem}.status-indicator{padding:8px 16px;border-radius:20px;font-weight:600;font-size:14px;background:#e2e8f0;color:#4a5568;display:inline-block}.status-indicator.loading{background:#fef5e7;color:#d69e2e;animation:pulse 2s infinite}.status-indicator.success{background:#f0fff4;color:#38a169}.status-indicator.error{background:#fed7d7;color:#e53e3e}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}#audioPlayer{width:100%;margin:15px 0}.audio-info{text-align:center;color:#718096;font-style:italic}.log-container{background:#1a202c;border-radius:8px;overflow:hidden}.log-header{background:#2d3748;padding:12px 20px;display:flex;justify-content:space-between;align-items:center;color:#fff;font-weight:600}.log-output{height:300px;overflow-y:auto;padding:15px;font-family:Courier New,monospace;font-size:13px;line-height:1.4;color:#e2e8f0;background:#1a202c}.log-entry{margin-bottom:8px;padding:4px 0}.log-entry.info{color:#63b3ed}.log-entry.success{color:#68d391}.log-entry.warning{color:#fbb6ce}.log-entry.error{color:#fc8181}.log-timestamp{color:#a0aec0;font-size:11px}.metrics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:15px}.metric-item{display:flex;justify-content:space-between;align-items:center;padding:15px;background:#f7fafc;border-radius:8px;border-left:4px solid #667eea}.metric-label{font-weight:600;color:#4a5568}.metric-value{font-weight:700;color:#667eea;font-size:1.1rem}.info-grid{display:grid;gap:15px}.info-item{padding:15px;background:#f7fafc;border-radius:8px;border-left:4px solid #38a169}.info-item strong{color:#2d3748}.progress-container{width:100%;background:#e2e8f0;border-radius:10px;overflow:hidden;margin:10px 0}.progress-bar{height:8px;background:linear-gradient(90deg,#667eea,#764ba2);width:0%;transition:width .3s ease}.progress-text{text-align:center;margin-top:5px;font-size:14px;color:#4a5568}@media (max-width: 768px){.container{padding:15px}header h1{font-size:2rem}.controls{flex-direction:column;align-items:stretch}.btn{justify-content:center}.config-grid,.status-grid,.metrics-grid{grid-template-columns:1fr}}.loading-spinner{display:inline-block;width:20px;height:20px;border:3px solid #f3f3f3;border-top:3px solid #667eea;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}