.app{min-height:100vh;display:flex;flex-direction:column;background-color:#fff;color:#333;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif}.app-nav{background-color:#fff;color:#333;padding:1rem 1.5rem;border-bottom:1px solid #f0f0f0;box-shadow:0 1px 3px #0000000d;position:sticky;top:0;z-index:100}.about-logo-container{text-align:center;margin:2rem 0}.about-logo{width:200px;height:auto;border-radius:12px;box-shadow:0 4px 12px #0000001a}.nav-content{display:flex;justify-content:space-between;align-items:center;max-width:800px;margin:0 auto}.nav-title{font-size:1.8rem;margin:0;font-weight:600;color:#2c3e50;cursor:pointer;transition:color .2s ease}.nav-title:hover{color:#3498db}.nav-logo{height:1.8rem;width:auto;margin-right:.8rem;vertical-align:middle}.nav-links{display:flex;gap:1.5rem}.nav-link{background:none;border:none;font-size:1rem;font-weight:500;color:#7f8c8d;cursor:pointer;padding:.5rem 0;position:relative;transition:color .2s ease}.nav-link:hover,.nav-link.active{color:#3498db}.nav-link.active:after{content:"";position:absolute;bottom:0;left:0;width:100%;height:2px;background-color:#3498db;border-radius:1px}.app-main{flex:1;padding:2rem 1rem;max-width:800px;width:100%;margin:0 auto}.upload-section{margin-bottom:1.25rem;text-align:center;padding:2rem}.upload-area{display:inline-block;position:relative;border:2px dashed #d0d0d0;border-radius:12px;padding:1.5rem 1rem;text-align:center;background-color:#f9f9f9;transition:all .3s ease;cursor:pointer;overflow:hidden}.upload-area:hover{border-color:#3498db;background-color:#f5f7fa;transform:translateY(-2px);box-shadow:0 4px 12px #3498db1a}.upload-area input[type=file],.file-input{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer;z-index:10}.upload-content{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-width:300px}.filename-display{flex:1;text-align:left;font-weight:500;color:#333;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.upload-button{padding:.75rem 1.5rem;background-color:#4caf50;color:#fff;border:none;border-radius:4px;cursor:pointer;font-weight:500;transition:background-color .3s}.upload-button:hover{background-color:#45a049}.upload-button.center{margin:0 auto;display:block}.home-intro-section{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:2rem;border-radius:12px;margin-bottom:2rem;box-shadow:0 8px 32px #0000001a}.intro-content{max-width:800px;margin:0 auto}.intro-content h1{font-size:2.5rem;margin-bottom:.5rem;text-align:center}.intro-tagline{font-size:1.2rem;text-align:center;margin-bottom:2rem;opacity:.9;font-weight:500}.intro-description{font-size:1.1rem;line-height:1.6;margin-bottom:2rem}.intro-description p{margin-bottom:1rem}.features-section,.how-to-section{background:#ffffff1a;padding:1.5rem;border-radius:8px;margin-bottom:1.5rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.features-section h3,.how-to-section h3{font-size:1.3rem;margin-bottom:1rem;border-bottom:2px solid rgba(255,255,255,.2);padding-bottom:.5rem}.features-list,.how-to-list{padding-left:1.5rem}.features-list li,.how-to-list li{margin-bottom:.8rem;line-height:1.5;color:#333}.feature-icon{color:#4caf50;font-weight:700;margin-right:.5rem}.privacy-note{text-align:center;margin-top:2rem;padding:1rem;background:#ffffff26;border-radius:8px;border-left:4px solid #4CAF50}.upload-section{text-align:center;margin-bottom:2rem}.upload-section-with-file{margin-top:1rem}.simple-upload-container{display:inline-block;position:relative;margin-bottom:1rem}.simple-upload-container-right{text-align:right}.simple-file-input{position:absolute;width:100%;height:100%;opacity:0;cursor:pointer;top:0;left:0}.simple-upload-button{background:#2196f3;color:#fff;border:none;padding:1rem 2rem;font-size:1.1rem;font-weight:500;border-radius:8px;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px #2196f34d}.simple-upload-button:hover:not(:disabled){background:#1976d2;transform:translateY(-2px);box-shadow:0 6px 16px #2196f366}.simple-upload-button:disabled{background:#ccc;cursor:not-allowed;transform:none;box-shadow:none}.metadata-section{margin-bottom:2rem;background-color:#fff;border-radius:12px;padding:2rem;border:1px solid #f0f0f0;box-shadow:0 2px 8px #0000000d}.metadata-section h2{margin-bottom:1.5rem;color:#2c3e50;font-size:1.5rem;font-weight:600;border-bottom:1px solid #f0f0f0;padding-bottom:.8rem}.metadata-form{margin-bottom:2rem}.form-group{margin-bottom:1.2rem}.form-group label{display:block;margin-bottom:.5rem;font-weight:600;color:#555;font-size:.95rem}.form-group input{width:100%;padding:.9rem 1rem;border:1px solid #e0e0e0;border-radius:8px;font-size:1rem;transition:all .2s ease;background-color:#fff}.form-group input:focus{outline:none;border-color:#3498db;box-shadow:0 0 0 3px #3498db1a}.form-group input:disabled{background-color:#f8f8f8;color:#999;cursor:not-allowed}.cover-section{margin-bottom:2rem;padding-top:1rem}.cover-section h3{margin-bottom:.5rem;color:#333;font-size:1.1rem;font-weight:600}.cover-recommendation{margin-bottom:1rem;color:#666;font-size:.85rem;font-style:italic;background-color:#f8f9fa;padding:.5rem 1rem;border-radius:6px;border:1px solid #e0e0e0}.cover-input{display:none}.cover-label{display:inline-block;cursor:pointer;font-size:1rem;color:#555;font-weight:500;padding:.7rem 1.2rem;background-color:#f8f9fa;border-radius:6px;border:1px solid #e0e0e0;transition:all .2s ease}.cover-label:hover{background-color:#e9ecef;border-color:#3498db;color:#3498db}.cover-info{margin-top:1rem;padding:1rem;background-color:#f8f9fa;border-radius:8px;border:1px solid #e0e0e0}.cover-info p{margin:.3rem 0;color:#666;font-size:.9rem}.cover-preview{margin-top:1rem;text-align:center}.cover-preview-image{max-width:200px;max-height:200px;border-radius:8px;box-shadow:0 4px 12px #0000001a;object-fit:contain;background-color:#fff;border:1px solid #e0e0e0}.audio-waveform-container{width:100%;background-color:#fff;padding:1rem 2rem;border-radius:12px;border:1px solid #e0e0e0;cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden;box-shadow:0 2px 8px #0000000d}.audio-waveform-container:hover{border-color:#3498db;box-shadow:0 4px 16px #3498db1a}.metadata-section .audio-player-section{margin-top:1.5rem;background-color:#f8f9fa;padding:1.5rem;border-radius:12px;display:block;border:1px solid #e0e0e0;box-shadow:0 2px 8px #0000000d}.metadata-section .audio-player-section h3{margin-bottom:1rem;color:#2c3e50;font-size:1.1rem;font-weight:600;text-align:left;width:100%}.metadata-section .audio-waveform{margin-top:1.5rem;background-color:transparent;padding:0;border-radius:0;display:block;border:none}.metadata-section .audio-waveform h3{margin-bottom:1rem;color:#2c3e50;font-size:1.1rem;font-weight:600;text-align:center;width:100%}.waveform-canvas{display:block;width:100%;border-radius:8px;transition:all .3s ease}@media (max-width: 768px){.metadata-section .audio-player-section{padding:1rem;margin-top:1rem}.metadata-section .audio-player-section h3{margin-bottom:.8rem;font-size:1rem}.audio-waveform-container{padding:.8rem 1rem}.metadata-section .audio-waveform h3{margin-bottom:.8rem;font-size:1rem}}@media (max-width: 480px){.audio-waveform-container{padding:.5rem .8rem}}.file-info-display{margin-bottom:2rem}.info-item{display:flex;margin-bottom:.8rem;padding:.5rem 0;border-bottom:1px solid #f0f0f0}.info-item strong{min-width:100px;color:#333;font-weight:600;margin-right:.5rem}.info-item:last-child{border-bottom:none}.album-cover-preview{margin-bottom:2rem;padding-top:1.5rem;border-top:1px solid #f0f0f0}.album-cover-preview h3{margin-bottom:1.2rem;color:#2c3e50;font-size:1.1rem;font-weight:600}.cover-container{display:flex;justify-content:center;align-items:center;min-height:200px}.cover-wrapper{text-align:center}.cover-image{max-width:200px;max-height:200px;border-radius:8px;box-shadow:0 4px 12px #0000001a;object-fit:contain;background-color:#f8f9fa}.cover-filename{margin-top:.8rem;font-size:.95rem;color:#666;font-weight:500;word-break:break-word;max-width:200px}.cover-placeholder{width:200px;height:200px;display:flex;justify-content:center;align-items:center;background-color:#f8f9fa;border-radius:8px;border:2px dashed #d0d0d0;text-align:center;padding:1rem}.cover-placeholder p{color:#999;font-size:.95rem;margin:0}.action-section{margin:2rem 0;text-align:center;display:flex;flex-direction:column;gap:1rem}.action-section button{margin:0 .5rem}.save-button{background-color:#3498db;color:#fff;border:none;border-radius:8px;padding:1rem 2rem;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .3s ease;min-width:150px}.edit-button{background-color:#2ecc71;color:#fff;border:none;border-radius:8px;padding:1rem 2rem;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .3s ease;min-width:150px}.edit-button:hover:not(:disabled){background-color:#27ae60;transform:translateY(-2px);box-shadow:0 4px 12px #2ecc714d}.edit-button:disabled{background-color:#bdc3c7;cursor:not-allowed;transform:none;box-shadow:none}.cancel-button{background-color:#95a5a6;color:#fff;border:none;border-radius:8px;padding:1rem 2rem;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .3s ease;min-width:150px}.cancel-button:hover:not(:disabled){background-color:#7f8c8d;transform:translateY(-2px);box-shadow:0 4px 12px #95a5a64d}.cancel-button:disabled{background-color:#bdc3c7;cursor:not-allowed;transform:none;box-shadow:none}.edit-button-container{text-align:center;margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid #f0f0f0}.save-button:hover:not(:disabled){background-color:#2980b9;transform:translateY(-2px);box-shadow:0 4px 12px #3498db4d}.save-button:disabled{background-color:#bdc3c7;cursor:not-allowed;transform:none;box-shadow:none}.progress-bar{margin-top:1rem;width:100%;height:6px;background-color:#ecf0f1;border-radius:3px;overflow:hidden}.progress-fill{height:100%;background-color:#3498db;border-radius:3px;transition:width .3s ease}.status-section{margin-top:2rem;text-align:center;padding:1rem;background-color:#f8f9fa;border-radius:8px;border:1px solid #e0e0e0}.status-message{font-size:.95rem;color:#666;margin-bottom:.8rem;line-height:1.5}.retry-button{background-color:#2ecc71;color:#fff;border:none;border-radius:6px;padding:.7rem 1.2rem;font-size:.95rem;font-weight:500;cursor:pointer;transition:all .2s ease}.retry-button:hover:not(:disabled){background-color:#27ae60}.retry-button:disabled{background-color:#bdc3c7;cursor:not-allowed}.about-page{max-width:800px;margin:0 auto;padding:2rem 0}.about-page h2{color:#2c3e50;font-size:1.8rem;margin-bottom:1.5rem;font-weight:600;text-align:center}.about-content,.features-section,.tech-section,.contact-section{margin-bottom:2rem;padding:1.5rem;background-color:#fff;border-radius:12px;border:1px solid #f0f0f0;box-shadow:0 2px 8px #0000000d}.about-page h3{color:#3498db;font-size:1.3rem;margin-bottom:1rem;font-weight:600}.about-page p{color:#666;line-height:1.6;margin-bottom:1rem;text-align:justify}.feature-list{list-style-type:none;padding:0}.feature-list li{padding:.8rem 0 .8rem 1.5rem;position:relative;border-bottom:1px solid #f0f0f0;color:#555}.feature-list li:last-child{border-bottom:none}.feature-list li:before{content:"✓";color:#2ecc71;position:absolute;left:0;font-weight:700}.app-footer{background-color:#f8f9fa;color:#666;text-align:center;padding:2rem 1rem;border-top:1px solid #e0e0e0;margin-top:auto}.footer-content{max-width:800px;margin:0 auto}.footer-content p{margin:.5rem 0;font-size:.95rem;line-height:1.5}.footer-links{margin-top:.8rem}.footer-link{color:#3498db;text-decoration:none;margin:0 .5rem;font-size:.9rem;transition:color .2s ease}.footer-link:hover{color:#2980b9;text-decoration:underline}@media (max-width: 768px){.nav-content{flex-direction:column;gap:1rem;text-align:center}.nav-title{font-size:1.6rem}.nav-links{gap:1rem}.app-main{padding:1.5rem 1rem}.upload-area{padding:2rem 1rem}.metadata-section{padding:1.5rem}.save-button,.edit-button,.cancel-button{padding:.9rem 1.5rem;font-size:1rem}.info-item strong{min-width:70px}}@media (max-width: 480px){.nav-title{font-size:1.4rem}.nav-links{gap:.8rem}.nav-link{font-size:.9rem}.app-header p{font-size:1rem}.metadata-section h2{font-size:1.3rem}.footer-content{padding:0 1rem}.footer-links{display:flex;flex-direction:column;align-items:center}.footer-link{margin:.3rem 0}.about-page{padding:1rem 0}.about-content,.features-section,.tech-section,.contact-section{padding:1.2rem}.about-page h2{font-size:1.6rem}.about-page h3{font-size:1.2rem}}.ffmpeg-status-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#fffffff2;display:flex;align-items:center;justify-content:center;z-index:1000;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.ffmpeg-status-content{text-align:center;padding:2rem;border-radius:12px;background-color:#fff;box-shadow:0 10px 30px #0000001a;max-width:400px;width:90%}.loading-spinner{width:60px;height:60px;border:4px solid #f3f3f3;border-top:4px solid #3498db;border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 1.5rem}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.ffmpeg-status-content p{font-size:1.1rem;color:#333;margin-bottom:1.5rem;line-height:1.5}.retry-button{padding:.75rem 1.5rem;background-color:#3498db;color:#fff;border:none;border-radius:6px;font-size:1rem;font-weight:500;cursor:pointer;transition:background-color .3s ease}.retry-button:hover{background-color:#2980b9;transform:translateY(-1px)}.loading-tips{margin-top:1rem;color:#7f8c8d;font-size:.9rem}.loading-tips small{opacity:.8}.ad-container{margin:20px auto;padding:10px;border-radius:8px;background-color:#f8f9fa;max-width:800px;width:100%;box-sizing:border-box}.top-ad{margin-top:30px;margin-bottom:30px}@media (max-width: 768px){.ad-container{margin:15px auto;padding:5px}}@media (max-height: 480px){.ad-container{display:none}}.rhap_container{box-sizing:border-box;display:flex;flex-direction:column;line-height:1;font-family:inherit;width:100%;padding:10px 15px;background-color:#fff;box-shadow:0 0 3px #0003}.rhap_container:focus:not(:focus-visible){outline:0}.rhap_container svg{vertical-align:initial}.rhap_header{margin-bottom:10px}.rhap_footer{margin-top:5px}.rhap_main{display:flex;flex-direction:column;flex:1 1 auto}.rhap_stacked .rhap_controls-section{margin-top:8px}.rhap_horizontal{flex-direction:row}.rhap_horizontal .rhap_controls-section{margin-left:8px}.rhap_horizontal-reverse{flex-direction:row-reverse}.rhap_horizontal-reverse .rhap_controls-section{margin-right:8px}.rhap_stacked-reverse{flex-direction:column-reverse}.rhap_stacked-reverse .rhap_controls-section{margin-bottom:8px}.rhap_progress-section{display:flex;flex:3 1 auto;align-items:center}.rhap_progress-container{display:flex;align-items:center;height:20px;flex:1 0 auto;align-self:center;margin:0 calc(10px + 1%);cursor:pointer;user-select:none;-webkit-user-select:none}.rhap_progress-container:focus:not(:focus-visible){outline:0}.rhap_time{color:#333;font-size:16px;user-select:none;-webkit-user-select:none}.rhap_progress-bar{box-sizing:border-box;position:relative;z-index:0;width:100%;height:5px;background-color:#ddd;border-radius:2px}.rhap_progress-filled{height:100%;position:absolute;z-index:2;background-color:#868686;border-radius:2px}.rhap_progress-bar-show-download{background-color:#dddddd80}.rhap_download-progress{height:100%;position:absolute;z-index:1;background-color:#ddd;border-radius:2px}.rhap_progress-indicator{box-sizing:border-box;position:absolute;z-index:3;width:20px;height:20px;margin-left:-10px;top:-8px;background:#868686;border-radius:50px;box-shadow:#86868680 0 0 5px}.rhap_controls-section{display:flex;flex:1 1 auto;justify-content:space-between;align-items:center}.rhap_additional-controls{display:flex;flex:1 0 auto;align-items:center}.rhap_repeat-button{font-size:26px;width:26px;height:26px;color:#868686;margin-right:6px}.rhap_main-controls{flex:0 1 auto;display:flex;justify-content:center;align-items:center}.rhap_main-controls-button{margin:0 3px;color:#868686;font-size:35px;width:35px;height:35px}.rhap_play-pause-button{font-size:40px;width:40px;height:40px}.rhap_volume-controls{display:flex;flex:1 0 auto;justify-content:flex-end;align-items:center}.rhap_volume-button{flex:0 0 26px;font-size:26px;width:26px;height:26px;color:#868686;margin-right:6px}.rhap_volume-container{display:flex;align-items:center;flex:0 1 100px;user-select:none;-webkit-user-select:none}.rhap_volume-bar-area{display:flex;align-items:center;width:100%;height:14px;cursor:pointer}.rhap_volume-bar-area:focus:not(:focus-visible){outline:0}.rhap_volume-bar{box-sizing:border-box;position:relative;width:100%;height:4px;background:#ddd;border-radius:2px}.rhap_volume-indicator{box-sizing:border-box;position:absolute;width:12px;height:12px;margin-left:-6px;left:0;top:-4px;background:#868686;opacity:.9;border-radius:50px;box-shadow:#86868680 0 0 3px;cursor:pointer}.rhap_volume-indicator:hover{opacity:.9}.rhap_volume-filled{height:100%;position:absolute;z-index:2;background-color:#868686;border-radius:2px}.rhap_button-clear{background-color:transparent;border:none;padding:0;overflow:hidden;cursor:pointer}.rhap_button-clear:hover{opacity:.9;transition-duration:.2s}.rhap_button-clear:active{opacity:.95}.rhap_button-clear:focus:not(:focus-visible){outline:0}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#f9f9f9;color:#333;line-height:1.5}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}button{cursor:pointer;border:none;border-radius:3px;padding:8px 16px;font-size:14px;font-weight:500;transition:all .2s ease}button:hover{opacity:.9;transform:translateY(-.5px)}input{padding:8px 12px;border:1px solid #ccc;border-radius:3px;font-size:14px;transition:all .2s ease}input:focus{outline:none;border-color:#36c;box-shadow:0 0 0 2px #3366cc1a}