.App{min-height:100vh;display:flex;flex-direction:column;background:linear-gradient(135deg,#667eea,#764ba2);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;color:#1f2937}.app-header{padding:2rem 1rem;text-align:center;background:#fffffff2;box-shadow:0 2px 8px #0000001a;border-bottom:1px solid rgba(0,0,0,.05)}.app-header h1{margin:0;font-size:1.8rem;font-weight:700;color:#1f2937}.app-header p{margin:.5rem 0 0;font-size:.9rem;color:#6b7280}.app-main{flex:1;max-width:1000px;width:100%;margin:0 auto;padding:2rem 1rem;display:flex;flex-direction:column;gap:2rem}.upload-section,.controls-section,.status-section{background:#fff;padding:2rem;border-radius:12px;box-shadow:0 4px 12px #0000001a}.upload-section h2,.controls-section h2,.status-section h2{margin-top:0;color:#1f2937;font-size:1.3rem}.upload-placeholder{border:2px dashed #d1d5db;border-radius:8px;padding:2rem;text-align:center;background:#f9fafb;transition:all .3s ease;cursor:pointer}.upload-placeholder:hover{border-color:#667eea;background:#f3f4f6}.upload-placeholder.drag-active{border-color:#667eea;background:#ede9fe;box-shadow:0 0 0 3px #667eea1a}.upload-placeholder p{margin:0;color:#6b7280;font-size:.95rem;font-weight:500}.upload-placeholder small{display:block;margin-top:.5rem;color:#9ca3af;font-size:.85rem}.file-input{margin-top:1rem;padding:.5rem 1rem;border:1px solid #d1d5db;border-radius:6px;cursor:pointer}.file-uploaded{background:#f0fdf4;border:2px solid #10b981;border-radius:8px;padding:1.5rem;animation:slideIn .3s ease}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.file-info{margin-bottom:1rem}.file-info h3{margin:0 0 .5rem;color:#10b981;font-size:1.1rem}.file-info p{margin:.3rem 0;color:#1f2937;font-size:.9rem}.error-message{background:#fee2e2;color:#991b1b;border:1px solid #fca5a5;border-radius:6px;padding:.75rem;margin-top:1rem;font-size:.9rem;animation:slideIn .3s ease}.controls-placeholder{background:#fef3c7;border:1px solid #fcd34d;border-radius:8px;padding:1.5rem}.placeholder-box{background:#fff;border-left:3px solid #f59e0b;padding:1rem;margin-top:.5rem;border-radius:4px}.placeholder-box p{margin:.3rem 0;color:#6b7280;font-size:.9rem;font-family:Courier New,monospace}.btn-secondary{margin-top:1rem;padding:.6rem 1.2rem;background:#fff;color:#10b981;border:2px solid #10b981;border-radius:6px;cursor:pointer;font-weight:500;transition:all .3s ease;font-size:.9rem;min-width:44px;min-height:44px}.btn-secondary:hover{background:#f0fdf4}.btn-secondary:active{transform:scale(.98)}.controls-section p,.status-section p{color:#6b7280;margin:0}.app-footer{padding:1.5rem 1rem;background:#00000014;color:#ffffffe6;font-size:.85rem}.footer-content{max-width:1000px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:.5rem;text-align:center}.footer-privacy{display:flex;align-items:center;gap:.5rem;font-weight:500;font-size:.88rem}.footer-privacy span:first-child{font-size:1.1rem}.footer-built{opacity:.7;font-size:.78rem;display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;justify-content:center}.footer-dot{opacity:.4}.footer-email{color:inherit;text-decoration:none;font-weight:600;border-bottom:1.5px solid rgba(255,255,255,.35);padding-bottom:1px;transition:all .2s ease}.footer-email:hover{color:#fff;border-bottom-color:#ffffffb3}@media (max-width: 480px){.app-header{padding:1rem}.app-header h1{font-size:1.4rem}.app-main{padding:1rem;gap:1rem}.upload-section,.controls-section,.status-section{padding:1.5rem}}@media (prefers-color-scheme: dark){.App{background:linear-gradient(135deg,#1e293b,#0f172a)}.app-header,.upload-section,.controls-section,.status-section{background:#1e293bf2;color:#f1f5f9}.app-header h1{color:#f1f5f9}.upload-placeholder{background:#0f172a80;border-color:#475569}.upload-placeholder p,.controls-section p,.status-section p{color:#cbd5e1}.privacy-notice{background:linear-gradient(135deg,#064e3b80,#04785759);border-color:#34d39940}.privacy-text{color:#a7f3d0}.privacy-text strong{color:#6ee7b7}.privacy-text em{color:#34d399;background:#34d3991f}.app-footer{background:#0003}.footer-email{border-bottom-color:#ffffff4d}.footer-email:hover{color:#fff;border-bottom-color:#ffffffb3}.selected-info{background:#0284c726;border-color:#0ea5e940}.selected-info p{color:#bae6fd!important}.storage-info{background:#04785726;border-color:#34d39933}.loudness-tip{background:#fbbf241a;border-color:#fbbf2433;color:#fcd34d}.detected-loudness{background:#0284c71f;border-color:#0ea5e933}.detected-loudness.analyzing{background:#ffffff0d;border-color:#ffffff1a}.dl-main{color:#e2e8f0}.dl-main strong{color:#7dd3fc}.dl-sub{color:#94a3b8}.dl-spinner{border-color:#ffffff26;border-top-color:#38bdf8}}*{box-sizing:border-box}html,body{margin:0;padding:0;overflow-x:hidden}#root{width:100%}.upload-progress{background:#f0f9ff;border:2px solid #0ea5e9;border-radius:8px;padding:1.5rem;text-align:center}.upload-progress h3{margin:0 0 1rem;color:#0284c7;font-size:1.1rem}.progress-container{margin:1rem 0}.progress-bar{width:100%;height:24px;background:#e0f2fe;border:1px solid #0ea5e9;border-radius:12px;overflow:hidden;margin-bottom:1rem}.progress-fill{height:100%;background:linear-gradient(90deg,#0ea5e9,#0284c7);transition:width .3s ease;display:flex;align-items:center;justify-content:center;font-size:.75rem;color:#fff;font-weight:600}.progress-container p{margin:.5rem 0;color:#0284c7;font-size:.9rem;font-weight:500}.detected-loudness{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;margin-bottom:1rem;background:#f0f9ff;border:1px solid #bae6fd;border-radius:10px;animation:slideIn .35s ease}.detected-loudness.analyzing{background:#f8fafc;border-color:#e2e8f0}.dl-icon{font-size:1.3rem;flex-shrink:0}.dl-values{display:flex;flex-direction:column;gap:.15rem}.dl-main{font-size:.9rem;color:#1e293b}.dl-main strong{color:#0369a1;font-weight:700}.dl-sub{font-size:.76rem;color:#64748b}.dl-spinner{width:16px;height:16px;border:2px solid #e2e8f0;border-top-color:#0ea5e9;border-radius:50%;animation:spin .7s linear infinite;flex-shrink:0}@keyframes spin{to{transform:rotate(360deg)}}.storage-info{background:#f0fdf4;border:1px solid #86efac;border-radius:8px;padding:1rem;margin-top:1rem}.storage-info p{margin:.5rem 0;color:#22c55e;font-size:.9rem;display:flex;align-items:center;gap:.5rem}.storage-info p:first-child{margin-top:0}.storage-info p:last-child{margin-bottom:0}.loudness-controls h3{margin:0 0 1rem;color:#374151;font-size:1.05rem;font-weight:600}.loudness-options{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;margin-bottom:1.25rem}.loudness-option{position:relative;display:flex;flex-direction:column;align-items:center;padding:1.25rem .75rem 1rem;border:2px solid #e5e7eb;border-radius:14px;background:linear-gradient(180deg,#fafbfc,#f3f4f6);cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1);font-family:inherit;outline:none;min-height:44px}.loudness-option:hover{border-color:#a5b4fc;background:linear-gradient(180deg,#eef2ff,#e0e7ff);transform:translateY(-2px);box-shadow:0 4px 16px #667eea2e}.loudness-option:active{transform:translateY(0);box-shadow:0 1px 4px #667eea1f}.loudness-option.active{border-color:#667eea;background:linear-gradient(135deg,#667eea,#764ba2);box-shadow:0 4px 20px #667eea59,0 0 0 4px #667eea1a;transform:translateY(-1px)}.loudness-option.active:hover{box-shadow:0 6px 24px #667eea73,0 0 0 4px #667eea26;background:linear-gradient(135deg,#7c6ff7,#8b5cf6)}.loudness-option:disabled{opacity:.5;cursor:not-allowed;transform:none}.option-label{font-size:1rem;font-weight:700;color:#1f2937;letter-spacing:-.01em;transition:color .2s ease}.loudness-option.active .option-label{color:#fff}.option-desc{font-size:.78rem;color:#9ca3af;margin-top:.25rem;transition:color .2s ease}.loudness-option:hover .option-desc{color:#6b7280}.loudness-option.active .option-desc{color:#ffffffbf}.option-lufs{margin-top:.6rem;padding:.25rem .75rem;font-size:.72rem;font-weight:700;letter-spacing:.04em;color:#667eea;background:#667eea14;border-radius:20px;transition:all .2s ease}.loudness-option.active .option-lufs{color:#fff;background:#ffffff2e;box-shadow:inset 0 1px #ffffff26}.processing-info{margin-bottom:1.25rem}.selected-info{background:#f0f9ff;border:1px solid #bae6fd;border-radius:10px;padding:.75rem 1rem;text-align:center}.selected-info p{margin:0;color:#0369a1!important;font-size:.9rem}.selected-info p small{color:#0284c7;font-size:.8rem}.loudness-tip{display:flex;align-items:flex-start;gap:.5rem;padding:.7rem .9rem;margin-bottom:1.25rem;background:#fffbeb;border:1px solid #fde68a;border-radius:10px;font-size:.8rem;color:#92400e;line-height:1.5}.tip-icon{flex-shrink:0;font-size:1rem}.btn-primary{width:100%;padding:.9rem 1.5rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:12px;font-size:1.05rem;font-weight:700;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);min-height:48px;letter-spacing:.01em;box-shadow:0 4px 16px #667eea4d}.btn-primary:hover{background:linear-gradient(135deg,#7c6ff7,#8b5cf6);transform:translateY(-2px);box-shadow:0 6px 24px #667eea66}.btn-primary:active{transform:translateY(0);box-shadow:0 2px 8px #667eea40}.btn-primary:disabled{opacity:.6;cursor:not-allowed;transform:none}.btn-primary.processing{background:linear-gradient(135deg,#f59e0b,#d97706);box-shadow:0 4px 16px #f59e0b4d;animation:pulse-border 1.5s ease-in-out infinite}@keyframes pulse-border{0%,to{box-shadow:0 4px 16px #f59e0b4d}50%{box-shadow:0 4px 28px #f59e0b80,0 0 0 6px #f59e0b14}}.processing-complete{text-align:center;animation:popIn .4s cubic-bezier(.34,1.56,.64,1)}@keyframes popIn{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}.processing-complete h3{margin:0 0 .5rem;color:#059669;font-size:1.2rem}.processing-complete p{color:#6b7280!important;margin-bottom:1rem;font-size:.9rem}.btn-download{width:100%;padding:.9rem 1.5rem;background:linear-gradient(135deg,#10b981,#059669);color:#fff;border:none;border-radius:12px;font-size:1.05rem;font-weight:700;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);min-height:48px;box-shadow:0 4px 16px #10b9814d}.btn-download:hover{background:linear-gradient(135deg,#34d399,#10b981);transform:translateY(-2px);box-shadow:0 6px 24px #10b98166}.btn-download:active{transform:translateY(0)}.privacy-notice{background:linear-gradient(135deg,#ecfdf5f2,#d1fae5f2);border:1.5px solid #a7f3d0;border-radius:14px;padding:1.25rem 1.5rem;box-shadow:0 2px 12px #10b98114}.privacy-content{display:flex;align-items:flex-start;gap:1rem}.privacy-icon{font-size:1.5rem;flex-shrink:0;margin-top:.1rem}.privacy-text{font-size:.88rem;color:#065f46;line-height:1.6}.privacy-text strong{color:#047857}.privacy-text em{font-style:normal;font-weight:600;color:#059669;background:#10b98114;padding:.1em .4em;border-radius:4px}@media (max-width: 480px){.loudness-options{grid-template-columns:repeat(2,1fr);gap:.5rem}.loudness-option{padding:1rem .5rem .75rem}.option-label{font-size:.9rem}.privacy-notice{padding:1rem 1.25rem}.privacy-content{gap:.75rem}.privacy-text{font-size:.82rem}.footer-content{gap:.35rem}}.install-guide-overlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:1rem;background:#0000008c;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:igFadeIn .25s ease}@keyframes igFadeIn{0%{opacity:0}to{opacity:1}}.install-guide-modal{position:relative;width:100%;max-width:420px;max-height:90vh;overflow-y:auto;background:#fff;border-radius:22px;box-shadow:0 20px 60px #00000040;padding:1.75rem 1.5rem 1.5rem;animation:igSlideUp .35s cubic-bezier(.34,1.56,.64,1)}@keyframes igSlideUp{0%{opacity:0;transform:translateY(30px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.ig-header{text-align:center;margin-bottom:1.25rem}.ig-header h2{margin:0 0 .3rem;font-size:1.25rem;color:#1e293b}.ig-header p{margin:0;font-size:.82rem;color:#64748b}.ig-close{position:absolute;top:.9rem;right:1rem;width:32px;height:32px;border:none;background:#f1f5f9;color:#64748b;border-radius:50%;font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.ig-close:hover{background:#e2e8f0;color:#334155}.ig-steps-indicator{display:flex;justify-content:center;gap:.5rem;margin-bottom:1.25rem}.ig-step-dot{width:10px;height:10px;border-radius:50%;background:#e2e8f0;cursor:pointer;transition:all .3s ease}.ig-step-dot.active{background:#667eea;box-shadow:0 0 0 4px #667eea33;transform:scale(1.2)}.ig-step-dot.done{background:#a5b4fc}.ig-step-card{text-align:center;padding:1.5rem 1rem;background:linear-gradient(135deg,#f8fafc,#f1f5f9);border-radius:16px;margin-bottom:1.25rem;min-height:180px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem}.ig-step-number{font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:#667eea}.ig-step-icon{font-size:3rem;margin:.25rem 0;line-height:1}.ig-step-card h3{margin:0;font-size:1.05rem;color:#1e293b;font-weight:700}.ig-step-detail{margin:.25rem 0 0;font-size:.85rem;color:#475569;line-height:1.5;max-width:320px}.ig-step-subdetail{margin:.5rem 0 0;font-size:.76rem;color:#94a3b8;font-style:italic;max-width:300px}.ig-nav{display:flex;justify-content:space-between;align-items:center;gap:.75rem;margin-bottom:.75rem}.ig-btn-primary,.ig-btn-secondary{flex:1;padding:.7rem 1.25rem;border:none;border-radius:12px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s ease;min-height:44px}.ig-btn-primary{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;box-shadow:0 4px 14px #667eea40}.ig-btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 20px #667eea59}.ig-btn-done{background:linear-gradient(135deg,#10b981,#059669);box-shadow:0 4px 14px #10b9814d}.ig-btn-secondary{background:#f1f5f9;color:#475569}.ig-btn-secondary:hover{background:#e2e8f0}.ig-platform-hint{text-align:center;font-size:.72rem;color:#94a3b8}.install-banner{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-radius:14px;cursor:pointer;transition:all .2s ease;margin-bottom:1rem;box-shadow:0 2px 12px #667eea40}.install-banner:hover{transform:translateY(-1px);box-shadow:0 4px 18px #667eea59}.install-banner-icon{font-size:1.4rem;flex-shrink:0}.install-banner-text{flex:1;font-size:.82rem;font-weight:500;line-height:1.3}.install-banner-arrow{font-size:1rem;opacity:.6;flex-shrink:0}@media (prefers-color-scheme: dark){.install-guide-modal{background:#1e293b}.ig-header h2{color:#f1f5f9}.ig-header p{color:#94a3b8}.ig-close{background:#334155;color:#94a3b8}.ig-close:hover{background:#475569;color:#e2e8f0}.ig-step-dot{background:#475569}.ig-step-dot.active{background:#818cf8;box-shadow:0 0 0 4px #818cf833}.ig-step-dot.done{background:#6366f1}.ig-step-card{background:linear-gradient(135deg,#1e293b,#0f172a)}.ig-step-card h3{color:#f1f5f9}.ig-step-detail{color:#cbd5e1}.ig-step-subdetail{color:#64748b}.ig-btn-secondary{background:#334155;color:#cbd5e1}.ig-btn-secondary:hover{background:#475569}.ig-platform-hint{color:#64748b}}:root{--primary-color: #667eea;--secondary-color: #764ba2;--success-color: #10b981;--warning-color: #f59e0b;--error-color: #ef4444;--gray-50: #f9fafb;--gray-100: #f3f4f6;--gray-200: #e5e7eb;--gray-300: #d1d5db;--gray-400: #9ca3af;--gray-500: #6b7280;--gray-600: #4b5563;--gray-700: #374151;--gray-800: #1f2937;--gray-900: #111827}*{margin:0;padding:0;box-sizing:border-box}html,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-color:#f9fafb;color:#1f2937;line-height:1.6}body{overflow-x:hidden}#root{width:100%;min-height:100vh}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}button,input[type=button],input[type=submit],input[type=file],a{min-width:44px;min-height:44px}@media (prefers-color-scheme: dark){body{background-color:#111827;color:#f1f5f9}}