:root{--primary-pink: #FF6B9D;--primary-blue: #4ECDC4;--primary-yellow: #FFE66D;--primary-purple: #A8E6CF;--accent-orange: #FFB347;--accent-green: #95E1D3;--bg-dark: #1a1a2e;--bg-card: #2d2d44;--bg-light: #f8f9fa;--text-primary: #2d3436;--text-secondary: #636e72;--text-light: #ffffff;--shadow-sm: 0 2px 8px rgba(0, 0, 0, .1);--shadow-md: 0 4px 16px rgba(0, 0, 0, .15);--shadow-lg: 0 8px 32px rgba(0, 0, 0, .2)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Nunito,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;color:var(--text-primary);line-height:1.6}.app-wrapper{min-height:100vh;display:flex;flex-direction:column}.app-header{display:flex;justify-content:space-between;align-items:center;padding:20px 40px;background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:var(--shadow-sm);position:sticky;top:0;z-index:100}.logo{display:flex;align-items:center;gap:12px}.logo-icon{font-size:32px;animation:bounce 2s infinite}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}.logo-text{font-family:Fredoka One,cursive;font-size:28px;background:linear-gradient(135deg,var(--primary-pink),var(--primary-blue));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.header-badge{display:flex;align-items:center;gap:8px;padding:8px 16px;background:linear-gradient(135deg,var(--primary-yellow),var(--accent-orange));border-radius:20px;font-size:14px;font-weight:600;color:var(--text-primary);box-shadow:var(--shadow-sm)}.badge-icon{font-size:18px}.app-main{flex:1;max-width:1200px;width:100%;margin:0 auto;padding:40px 20px}.hero-section{text-align:center;margin-bottom:40px}.hero-title{font-family:Fredoka One,cursive;font-size:48px;color:var(--text-light);margin-bottom:20px;text-shadow:2px 2px 4px rgba(0,0,0,.2);line-height:1.2}.hero-description{font-size:18px;color:#ffffffe6;max-width:700px;margin:0 auto 30px;line-height:1.8}.action-buttons{display:flex;gap:16px;justify-content:center;margin-bottom:40px}.action-btn{display:flex;align-items:center;gap:10px;padding:16px 32px;border:none;border-radius:50px;font-family:Nunito,sans-serif;font-size:18px;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:var(--shadow-md)}.action-btn.primary{background:linear-gradient(135deg,var(--primary-pink),#ff8fab);color:#fff}.action-btn.primary.active{background:linear-gradient(135deg,#ff4d7a,var(--primary-pink));transform:scale(1.05);box-shadow:var(--shadow-lg)}.action-btn.secondary{background:#fff3;color:#fff;border:2px solid rgba(255,255,255,.3)}.action-btn.secondary:disabled{opacity:.5;cursor:not-allowed}.action-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-lg)}.btn-icon{font-size:24px}.recorder{background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:24px;padding:40px;box-shadow:var(--shadow-lg);margin-top:20px}.recording-box{background:linear-gradient(135deg,#f5f7fa,#c3cfe2);border-radius:20px;padding:60px 40px;text-align:center;margin-bottom:30px;border:3px dashed var(--primary-blue);transition:all .3s ease}.recording-box.recording{background:linear-gradient(135deg,#ffeef4,#ffd6e8);border-color:var(--primary-pink);animation:pulse 2s infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}.mic-icon-large{font-size:80px;margin-bottom:20px;display:block}.recording-box h2{font-family:Fredoka One,cursive;font-size:32px;color:var(--text-primary);margin-bottom:10px}.recording-box p{font-size:16px;color:var(--text-secondary)}.controls{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:20px}.controls .btn{padding:14px 28px;border:none;border-radius:50px;font-family:Nunito,sans-serif;font-size:16px;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:var(--shadow-md);display:flex;align-items:center;gap:8px}.btn.start{background:linear-gradient(135deg,var(--primary-blue),var(--accent-green));color:#fff}.btn.stop{background:linear-gradient(135deg,#ff6b6b,#ee5a6f);color:#fff}.btn.pause{background:linear-gradient(135deg,var(--primary-yellow),var(--accent-orange));color:#fff}.btn.resume{background:linear-gradient(135deg,var(--accent-green),#4ecdc4);color:#fff}.btn.download{background:linear-gradient(135deg,#a8e6cf,#88d8a3);color:#fff}.btn.csv-download{background:linear-gradient(135deg,var(--accent-green),var(--primary-blue));color:#fff;width:100%}.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.btn:active{transform:translateY(0)}.status,.duration{text-align:center;font-size:18px;font-weight:600;color:var(--text-primary);margin:10px 0}.status strong,.duration strong{color:var(--primary-pink)}.subtitle-container{margin-top:30px;padding:24px;background:linear-gradient(135deg,#f0f9ff,#e0f2fe);border-radius:16px;border:2px solid var(--primary-blue)}.subtitle-container strong{font-family:Fredoka One,cursive;font-size:20px;color:var(--text-primary);display:block;margin-bottom:12px}.subtitle-info{margin:12px 0;padding:12px 16px;background:#4ecdc433;border-radius:12px;color:#0d9488;font-size:14px;font-weight:600;border-left:4px solid var(--primary-blue)}.subtitle-text{margin-top:12px;padding:20px;background:#fff;border-radius:12px;min-height:80px;max-height:250px;overflow-y:auto;font-size:18px;line-height:1.8;color:var(--text-primary);white-space:pre-wrap;word-wrap:break-word;border:2px solid #e0f2fe}.subtitle-placeholder{color:var(--text-secondary);font-style:italic;font-size:16px}.subtitle-warning{margin-top:12px;padding:16px;background:linear-gradient(135deg,#fef3c7,#fde68a);border-radius:12px;color:#92400e;font-weight:600;border-left:4px solid var(--primary-yellow)}.api-status{margin-top:12px;padding:12px 16px;border-radius:12px;font-size:15px;font-weight:600}.api-status.loading{background:linear-gradient(135deg,#dbeafe,#bfdbfe);color:#1e40af;border-left:4px solid #3b82f6}.api-status.success{background:linear-gradient(135deg,#d1fae5,#a7f3d0);color:#065f46;border-left:4px solid #10b981}.api-status.error{background:linear-gradient(135deg,#fee2e2,#fecaca);color:#991b1b;border-left:4px solid #ef4444}.api-response-container{margin-top:20px;padding:20px;background:linear-gradient(135deg,#f0f9ff,#e0f2fe);border-radius:16px;border:2px solid var(--primary-blue)}.api-response-container strong{font-family:Fredoka One,cursive;font-size:18px;color:var(--text-primary);display:block;margin-bottom:12px}.api-response-content{margin-top:12px;padding:16px;background:#fff;border-radius:12px;max-height:350px;overflow-y:auto;font-size:14px;line-height:1.6;color:var(--text-primary);border:2px solid #e0f2fe}.api-response-content pre{margin:0;font-family:Courier New,Courier,monospace;white-space:pre-wrap;word-wrap:break-word}.transcript-recap-container{margin-top:30px;padding:24px;background:linear-gradient(135deg,#f0fdf4,#dcfce7);border-radius:16px;border:2px solid var(--accent-green)}.transcript-recap-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.transcript-recap-header strong{font-family:Fredoka One,cursive;font-size:20px;color:var(--text-primary)}.transcript-count{padding:8px 16px;background:linear-gradient(135deg,var(--accent-green),var(--primary-blue));color:#fff;border-radius:20px;font-size:16px;font-weight:700;box-shadow:var(--shadow-sm)}.playback{margin-top:30px;text-align:center}.playback audio{width:100%;max-width:500px;border-radius:12px}.actions{margin-top:16px}.note{margin-top:20px;padding:16px;background:#ffffffb3;border-radius:12px;color:var(--text-secondary);font-size:14px;line-height:1.6}.app-footer{background:#1a1a2ee6;color:#fffc;padding:30px 40px;text-align:center;font-size:13px;line-height:1.8;margin-top:auto}.app-footer p{margin-bottom:12px;max-width:800px;margin-left:auto;margin-right:auto}.app-footer p:last-child{margin-bottom:0}.upload-box{background:linear-gradient(135deg,#f5f7fa,#c3cfe2);border-radius:20px;padding:60px 40px;text-align:center;margin-bottom:30px;border:3px dashed var(--primary-blue);transition:all .3s ease;cursor:pointer}.upload-box:hover{background:linear-gradient(135deg,#ffeef4,#ffd6e8);border-color:var(--primary-pink);transform:scale(1.01)}.upload-box.has-file{background:linear-gradient(135deg,#d1fae5,#a7f3d0);border-color:var(--accent-green)}.upload-box.processing{background:linear-gradient(135deg,#dbeafe,#bfdbfe);border-color:var(--primary-blue);animation:pulse 2s infinite}.upload-icon-large{font-size:80px;margin-bottom:20px;display:block}.upload-box h2{font-family:Fredoka One,cursive;font-size:32px;color:var(--text-primary);margin-bottom:10px}.upload-box p{font-size:16px;color:var(--text-secondary);margin-bottom:20px}.file-name{font-size:18px;font-weight:700;color:var(--text-primary);margin:10px 0;word-break:break-all}.file-size{font-size:14px;color:var(--text-secondary);margin-bottom:20px}.upload-hint{font-size:14px;color:var(--text-secondary);margin-top:16px;font-style:italic}.upload-btn{background:linear-gradient(135deg,var(--primary-pink),#ff8fab);color:#fff;padding:16px 32px;border:none;border-radius:50px;font-family:Nunito,sans-serif;font-size:18px;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:var(--shadow-md);display:inline-flex;align-items:center;gap:10px;margin-top:10px}.upload-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.upload-btn:disabled{opacity:.6;cursor:not-allowed}.convert-btn{background:linear-gradient(135deg,var(--primary-pink),#ff8fab);color:#fff;padding:14px 28px;border:none;border-radius:50px;font-family:Nunito,sans-serif;font-size:18px;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:var(--shadow-md);display:inline-flex;align-items:center;gap:10px;margin-right:12px}.convert-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-lg)}.convert-btn:disabled{opacity:.6;cursor:not-allowed}.analyze-btn{background:linear-gradient(135deg,var(--primary-blue),var(--accent-green));color:#fff;padding:14px 28px;border:none;border-radius:50px;font-family:Nunito,sans-serif;font-size:18px;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:var(--shadow-md);display:inline-flex;align-items:center;gap:10px}.analyze-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-lg)}.analyze-btn:disabled{opacity:.6;cursor:not-allowed}.remove-btn{background:linear-gradient(135deg,#ff6b6b,#ee5a6f);color:#fff;padding:12px 24px;border:none;border-radius:50px;font-family:Nunito,sans-serif;font-size:16px;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:var(--shadow-md);display:inline-flex;align-items:center;gap:8px}.remove-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-lg)}.remove-btn:disabled{opacity:.6;cursor:not-allowed}.upload-actions{margin-top:20px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.processing-indicator{margin:20px 0}.spinner{font-size:40px;display:block;margin-bottom:10px;animation:spin 2s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.processing-indicator p{font-size:16px;font-weight:600;color:var(--primary-blue)}.upload-box.has-file .upload-icon-large{animation:bounce 1s infinite}.upload-box.processing .upload-icon-large{animation:spin 2s linear infinite}@media (max-width: 768px){.app-header{padding:16px 20px;flex-direction:column;gap:12px}.logo-text{font-size:24px}.hero-title{font-size:32px}.hero-description{font-size:16px}.action-buttons{flex-direction:column;align-items:stretch}.action-btn{width:100%;justify-content:center}.recorder{padding:24px}.recording-box{padding:40px 20px}.mic-icon-large{font-size:60px}.recording-box h2{font-size:24px}.controls{flex-direction:column}.controls .btn{width:100%;justify-content:center}}