body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;background-color:#f8fafc}
.faq-item{border-bottom:1px solid #e2e8f0}
.faq-item:last-child{border-bottom:none;padding-bottom:0}
.faq-item summary{cursor:pointer}
.faq-item summary::-webkit-details-marker{display:none}
.video-info{display:none;transition:all .3s ease}
.video-info.active{display:block;animation:fadeIn .4s ease-out}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.loading-indicator{display:none}
.input-container{position:relative;max-width:100%;margin:0 auto;display:flex}
.url-input{flex-grow:1;background-color:#fff;border:2px solid #6366f1;border-radius:6px;padding:.75rem 2.5rem .75rem 1.15rem;font-size:1rem;color:#374151;min-width:0;width:100%;scroll-margin-top:40px}
.url-input:focus{outline:none;box-shadow:none}
.clear-btn{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);background:none;border:none;color:#9ca3af;cursor:pointer;font-size:1.15rem;display:none;align-items:center;justify-content:center;padding:.25rem;transition:color .2s ease;outline:none;-webkit-tap-highlight-color:transparent}
.clear-btn:hover{color:#4b5563}
.convert-btn{background-color:#6366f1;color:#fff;border:none;border-radius:6px;padding:0 1.25rem;font-size:1rem;font-weight:500;margin-left:.5rem;transition:all .2s ease;white-space:nowrap;flex-shrink:0;min-width:100px}
.convert-btn:hover{background-color:#4f46e5}
.alert-message{display:none;margin-top:.75rem;color:#ef4444;text-align:center}
.alert-message.active{display:block}
.video-details{display:flex;background-color:#f9fafb;border-radius:8px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.1)}
.video-thumbnail-container{flex-shrink:0;width:160px;height:90px;overflow:hidden;position:relative}
.video-thumbnail{width:100%;height:100%;object-fit:cover}
.video-info-content{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;flex-grow:1;padding:1rem;overflow:hidden}
.video-title{width:100%;font-weight:500;color:#1f2937;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal;overflow:hidden;text-overflow:ellipsis}
.download-options{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.download-option{background-color:#fff;border-radius:8px;overflow:hidden;transition:all .2s ease;border:1px solid #e5e7eb;display:flex;flex-direction:column}
.download-option-header{padding:.75rem;display:flex;align-items:center;border-bottom:1px solid #f3f4f6}
.download-option-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:8px;margin-right:.75rem;flex-shrink:0}
.download-option-icon.wav{background:linear-gradient(135deg,#818cf8 0%,#6366f1 100%)}
.download-option-icon.flac{background:linear-gradient(135deg,#a78bfa 0%,#8b5cf6 100%)}
.download-option-icon i{color:#fff;font-size:1.25rem}
.download-option-text{flex:1}
.download-option-text h3{font-weight:600;color:#1f2937;font-size:1rem}
.api-button-wrapper{padding:.75rem;height:82px;display:flex;align-items:center;justify-content:center}
.api-button{width:100%;height:100%;border:none;transition:transform .2s ease}
details summary i{transition:transform .3s ease}
details[open] summary i{transform:rotate(180deg)}
@media (max-width:640px){.input-container{flex-direction:column;align-items:stretch}.input-container .convert-btn{padding-top:.75rem;padding-bottom:.75rem;margin-left:0;margin-top:.5rem;width:100%}}
@media (max-width:640px){.download-options{grid-template-columns:1fr}}
@media (min-width:641px) and (max-width:1024px){.download-options{grid-template-columns:1fr}}
@media (min-width:1025px){.download-options{grid-template-columns:1fr 1fr}}
.legal-content{background-color:#fff;border-radius:12px;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);padding:2.5rem;max-width:48rem;margin:0 auto 2.5rem}
.legal-content h1{font-size:1.875rem;font-weight:700;color:#1f2937;margin-bottom:1.5rem;border-bottom:1px solid #e5e7eb;padding-bottom:1rem}
.legal-content h2{font-size:1.25rem;font-weight:600;color:#1f2937;margin-top:2rem;margin-bottom:.75rem}
.legal-content p{font-size:1rem;color:#4b5563;line-height:1.6;margin-bottom:1rem}
.legal-content ul{list-style-type:disc;padding-left:1.5rem;margin-bottom:1.25rem;color:#4b5563}
.legal-content li{font-size:1rem;line-height:1.6;margin-bottom:.5rem}
.legal-content a{color:#4f46e5;text-decoration:none;transition:color .2s ease-in-out}
.legal-content a:hover{color:#4338ca}
@media (max-width:640px){.legal-content{padding:1.5rem}}