.app{min-height:100vh;display:flex;flex-direction:column;background:linear-gradient(135deg,#667eea,#764ba2)}.header{background:#fffffffa;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:2rem 1.5rem;box-shadow:0 4px 20px #0000001a}.header-content{max-width:1200px;margin:0 auto;text-align:center}.logo-container{display:flex;align-items:center;justify-content:center;gap:1.5rem;margin-bottom:1rem}.logo-image{width:80px;height:80px;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(74,144,226,.2))}.logo-text h1{font-size:3rem;font-weight:800;background:linear-gradient(135deg,#4a90e2,#667eea);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin:0;letter-spacing:-1px}.tagline{font-size:.95rem;color:#6b7280;font-weight:500;margin:.25rem 0 0;letter-spacing:.5px}.subtitle{font-size:1.15rem;color:#4b5563;font-weight:400;max-width:600px;margin:0 auto}.quota-info{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-top:1rem;padding:.75rem 1.5rem;background:linear-gradient(135deg,#dbeafe,#bfdbfe);border-radius:12px;color:#1e40af;font-size:.95rem;font-weight:600;max-width:500px;margin-left:auto;margin-right:auto}.quota-info svg{flex-shrink:0}.main{flex:1;padding:3rem 1.5rem}.container{max-width:1200px;margin:0 auto}.alert{display:flex;align-items:center;gap:.75rem;padding:1.25rem 1.5rem;border-radius:16px;margin-bottom:2rem;font-weight:500;animation:slideDown .3s ease-out;box-shadow:0 4px 12px #0000001a}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.alert-error{background:linear-gradient(135deg,#fee,#fdd);color:#c00;border:2px solid #fcc}.alert-success{background:linear-gradient(135deg,#efe,#dfd);color:#060;border:2px solid #cfc}.alert svg{flex-shrink:0}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:2.5rem;margin-bottom:3rem}.card{background:#fff;padding:2.5rem;border-radius:24px;box-shadow:0 10px 40px #0000001f;transition:all .3s cubic-bezier(.4,0,.2,1);border:2px solid transparent}.card:hover{transform:translateY(-8px);box-shadow:0 20px 60px #00000026;border-color:#4a90e2}.card-icon{display:flex;justify-content:center;margin-bottom:1.5rem;color:#4a90e2}.card h2{font-size:1.75rem;font-weight:700;color:#1f2937;margin-bottom:.75rem;text-align:center}.card-description{color:#6b7280;text-align:center;margin-bottom:2rem;font-size:1.05rem}.recording-display{margin:2rem 0;min-height:70px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem}.recording-indicator{display:flex;align-items:center;gap:.75rem;color:#ef4444;font-weight:700;font-size:1.1rem}.recording-dot{width:14px;height:14px;background:#ef4444;border-radius:50%;animation:pulse 1.5s ease-in-out infinite;box-shadow:0 0 #ef4444b3}.recording-dot.paused{background:#f59e0b;animation:none;box-shadow:none}@keyframes pulse{0%,to{opacity:1;box-shadow:0 0 #ef4444b3}50%{opacity:.5;box-shadow:0 0 0 8px #ef444400}}.recording-time{font-size:2.5rem;font-weight:700;color:#1f2937;font-family:Courier New,monospace;letter-spacing:2px}.dropzone{border:3px dashed #cbd5e1;border-radius:16px;padding:3rem 2rem;margin:2rem 0;text-align:center;cursor:pointer;transition:all .3s;background:linear-gradient(135deg,#f9fafb,#f3f4f6)}.dropzone:hover{border-color:#4a90e2;background:linear-gradient(135deg,#eef2ff,#e0e7ff);transform:scale(1.02)}.dropzone.active{border-color:#4a90e2;background:linear-gradient(135deg,#dbeafe,#bfdbfe);transform:scale(1.02)}.dropzone.has-file{cursor:default;background:linear-gradient(135deg,#f0f9ff,#e0f2fe);border-color:#0ea5e9}.dropzone svg{margin-bottom:1.5rem;color:#94a3b8}.dropzone-text{color:#475569;font-size:1.1rem;margin-bottom:.75rem;font-weight:500}.dropzone-link{color:#4a90e2;font-weight:700}.dropzone-hint{color:#94a3b8;font-size:.95rem}.file-info{display:flex;align-items:center;gap:1.5rem}.file-info svg{color:#0ea5e9;flex-shrink:0;margin:0}.file-details{text-align:left;flex:1}.file-name{font-weight:700;color:#1f2937;word-break:break-word;margin-bottom:.5rem;font-size:1.05rem}.file-size{color:#6b7280;font-size:.95rem}.button-group{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;gap:.75rem;padding:1rem 2rem;border:none;border-radius:12px;font-size:1.05rem;font-weight:700;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);font-family:inherit;letter-spacing:.3px}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}.btn-primary{background:linear-gradient(135deg,#4a90e2,#667eea);color:#fff;box-shadow:0 4px 15px #4a90e266}.btn-primary:hover:not(:disabled){transform:translateY(-3px);box-shadow:0 8px 25px #4a90e280}.btn-secondary{background:linear-gradient(135deg,#e5e7eb,#d1d5db);color:#374151;box-shadow:0 4px 15px #0000001a}.btn-secondary:hover:not(:disabled){background:linear-gradient(135deg,#d1d5db,#c4c8cd);transform:translateY(-2px)}.btn-danger{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;box-shadow:0 4px 15px #ef444466}.btn-danger:hover:not(:disabled){transform:translateY(-3px);box-shadow:0 8px 25px #ef444480}.progress-container{background:#fff;padding:2.5rem;border-radius:20px;box-shadow:0 10px 40px #0000001f;margin-bottom:3rem}.progress-header{display:flex;align-items:center;gap:.75rem;margin-bottom:1.5rem;color:#4a90e2;font-weight:600;font-size:1.1rem}.progress-header svg{flex-shrink:0}.processing-icon{animation:spin 2s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.progress-bar{width:100%;height:16px;background:#e5e7eb;border-radius:8px;overflow:hidden;margin-bottom:1.5rem;box-shadow:inset 0 2px 4px #0000001a}.progress-fill{height:100%;background:linear-gradient(90deg,#4a90e2,#667eea,#764ba2);transition:width .3s ease;border-radius:8px;box-shadow:0 2px 8px #4a90e280}.progress-text{text-align:center;color:#4b5563;font-weight:700;font-size:1.1rem}.error-message{background:linear-gradient(135deg,#fee,#fdd);color:#c00;padding:1rem 1.25rem;border-radius:12px;margin:1.5rem 0;font-size:.95rem;border:2px solid #fcc;font-weight:500}.info-section{background:#fff;padding:3rem;border-radius:24px;box-shadow:0 10px 40px #0000001f;margin-top:3rem}.info-section h2{font-size:2.25rem;font-weight:800;color:#1f2937;margin-bottom:3rem;text-align:center}.info-section h3{font-size:1.5rem;font-weight:700;color:#1f2937;margin-bottom:1.5rem}.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2.5rem;margin-bottom:4rem}.step{display:flex;gap:1.5rem}.step-number{width:50px;height:50px;background:linear-gradient(135deg,#4a90e2,#667eea);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.5rem;flex-shrink:0;box-shadow:0 4px 15px #4a90e266}.step-content h3{font-size:1.25rem;margin-bottom:.75rem}.step-content p{color:#6b7280;font-size:1rem;line-height:1.6}.features{background:linear-gradient(135deg,#f9fafb,#f3f4f6);padding:2.5rem;border-radius:20px}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.25rem}.feature-item{display:flex;align-items:center;gap:1rem;color:#374151;font-size:1.05rem;padding:.75rem;background:#fff;border-radius:12px;transition:all .3s}.feature-item:hover{transform:translate(8px);box-shadow:0 4px 15px #0000001a}.feature-item svg{color:#22c55e;flex-shrink:0}.footer{background:#fffffff2;padding:2rem 1.5rem;text-align:center;color:#6b7280;margin-top:auto;box-shadow:0 -2px 10px #0000000d}.footer-content p{margin:.5rem 0}.footer a{color:#4a90e2;text-decoration:none;font-weight:600;transition:color .3s}.footer a:hover{color:#667eea;text-decoration:underline}.footer-links{margin-top:1rem}@media (max-width: 768px){.logo-image{width:60px;height:60px}.logo-text h1{font-size:2.25rem}.tagline{font-size:.85rem}.subtitle{font-size:1rem}.quota-info{font-size:.85rem;padding:.625rem 1.25rem}.cards{grid-template-columns:1fr;gap:2rem}.card{padding:2rem}.steps,.features-grid{grid-template-columns:1fr}.info-section{padding:2rem}.info-section h2{font-size:1.75rem}}@media (max-width: 480px){.header{padding:1.5rem 1rem}.logo-container{gap:1rem}.logo-image{width:50px;height:50px}.logo-text h1{font-size:1.75rem}.tagline{font-size:.75rem}.subtitle{font-size:.9rem}.quota-info{font-size:.8rem;padding:.5rem 1rem}.main{padding:2rem 1rem}.card{padding:1.5rem}.card h2{font-size:1.5rem}.btn{padding:.875rem 1.5rem;font-size:.95rem}.info-section{padding:1.5rem}.info-section h2{font-size:1.5rem}}*{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,#667eea,#764ba2);min-height:100vh}#root{min-height:100vh}