:root{--background:#fff;--foreground:#171717;--primary:#007bff;--primary-hover:#0056b3;--danger:#dc3545;--danger-hover:#c82333;--success:#28a745;--warning:#ffc107;--info:#17a2b8;--border:#dee2e6;--shadow:#0000001a;--spacing-xs:4px;--spacing-sm:8px;--spacing-md:12px;--spacing-lg:16px;--spacing-xl:20px;--spacing-2xl:24px;--font-xs:12px;--font-sm:12px;--font-base:12px;--font-md:14px;--font-lg:16px;--font-xl:18px;--radius-sm:4px;--radius-md:6px;--radius-lg:8px;--radius-xl:12px;--shadow-sm:0 1px 2px #0000000d;--shadow-md:0 2px 8px #0000001a;--shadow-lg:0 4px 12px #00000026;--shadow-xl:0 10px 25px #0003;--transition-fast:.15s ease;--transition-normal:.2s ease;--transition-slow:.3s ease;--z-dropdown:1000;--z-sticky:1020;--z-fixed:1030;--z-modal-backdrop:1040;--z-modal:1050;--z-popover:1060;--z-tooltip:1070;--z-toast:9999}@media (prefers-color-scheme:dark){:root{--background:#0a0a0a;--foreground:#ededed;--border:#333;--shadow:#ffffff1a}}
:root{text-autospace:normal;-webkit-appearance:normal;-moz-appearance:normal;-ms-text-autospace:normal}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:var(--background);color:var(--foreground);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;line-height:1.6}.main{flex-direction:column;min-height:100vh;display:flex}.main-content{padding:var(--spacing-xl);flex:1;width:100%;max-width:1200px;margin:0 auto}.btn{justify-content:center;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-sm)var(--spacing-lg);border-radius:var(--radius-sm);cursor:pointer;font-size:var(--font-md);transition:var(--transition-normal);-webkit-user-select:none;user-select:none;white-space:nowrap;border:none;font-weight:500;text-decoration:none;display:inline-flex}.btn:disabled{opacity:.6;cursor:not-allowed}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover:not(:disabled){background:var(--primary-hover)}.btn-secondary{color:#fff;background:#6c757d}.btn-secondary:hover:not(:disabled){background:#545b62}.btn-danger{background:var(--danger);color:#fff}.btn-danger:hover:not(:disabled){background:var(--danger-hover)}.btn-success{background:var(--success);color:#fff}.btn-success:hover:not(:disabled){background:#218838}a{color:var(--primary);transition:var(--transition-normal);text-decoration:none}a:hover{color:var(--primary-hover);text-decoration:underline}input,select,textarea{font-family:inherit;font-size:var(--font-md);border:1px solid var(--border);border-radius:var(--radius-sm);padding:var(--spacing-sm)var(--spacing-md);transition:var(--transition-normal)}input:focus,select:focus,textarea:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 2px #007bff40}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{border-radius:var(--radius-sm);background:#f1f1f1}::-webkit-scrollbar-thumb{border-radius:var(--radius-sm);background:#c1c1c1}::-webkit-scrollbar-thumb:hover{background:#a8a8a8}@media (max-width:768px){.main-content{padding:var(--spacing-md)}}@media (max-width:480px){.main-content{padding:var(--spacing-sm)}}
.navbar{background:var(--background);border-bottom:1px solid var(--border);width:100%;box-shadow:var(--shadow-md);padding:var(--spacing-xl)0;z-index:var(--z-sticky);flex-direction:column;align-items:center;display:flex;position:sticky;top:0}.navbar form{width:100%;max-width:800px;padding:0 var(--spacing-xl)}.navbar-search{gap:var(--spacing-md);flex-direction:column;width:100%;display:flex}.searchbar-row{gap:var(--spacing-md);align-items:center;width:100%;display:flex}.searchbar-row-options{flex-wrap:wrap;justify-content:center}.searchbar{gap:var(--spacing-sm);flex:1;display:flex}.searchbar-input{padding:var(--spacing-md)var(--spacing-lg);border:1px solid var(--border);border-radius:var(--radius-md);font-size:var(--font-md);transition:var(--transition-normal);flex:1}.searchbar-input:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 2px #007bff40}.searchbar-input::placeholder{color:#999}.searchbar-btn{padding:var(--spacing-md)var(--spacing-2xl);background:var(--primary);color:#fff;border-radius:var(--radius-md);font-size:var(--font-md);cursor:pointer;transition:var(--transition-normal);white-space:nowrap;border:none;font-weight:500}.searchbar-btn:hover:not(:disabled){background:var(--primary-hover)}.searchbar-btn:disabled{opacity:.6;cursor:not-allowed}.searchbar-label{align-items:center;gap:var(--spacing-xs);font-size:var(--font-sm);color:var(--foreground);white-space:nowrap;display:flex}.searchbar-select{padding:var(--spacing-xs)var(--spacing-sm);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:var(--font-sm);background:var(--background);color:var(--foreground);cursor:pointer;transition:var(--transition-normal)}.searchbar-select:focus{border-color:var(--primary);outline:none}.searchbar-select:disabled{opacity:.6;cursor:not-allowed}@media (max-width:768px){.navbar{padding:var(--spacing-lg)0}.navbar form{padding:0 var(--spacing-lg)}.searchbar-row{gap:var(--spacing-sm);flex-direction:column}.searchbar-row:first-child{flex-direction:row}.searchbar{width:100%}.searchbar-row-options{flex-direction:row;justify-content:space-around;width:100%}.searchbar-label{font-size:var(--font-base)}.searchbar-select{font-size:var(--font-base);padding:var(--spacing-xs)}}@media (max-width:480px){.navbar{padding:var(--spacing-md)0}.navbar form{padding:0 var(--spacing-md)}.searchbar-input{padding:var(--spacing-sm)var(--spacing-md);font-size:var(--font-sm)}.searchbar-btn{padding:var(--spacing-sm)var(--spacing-md);font-size:var(--font-sm);flex-shrink:0}.searchbar-row:first-child{flex-direction:row}.searchbar-row-options{gap:var(--spacing-sm);flex-direction:row;justify-content:space-around}}
.search-tip{text-align:center;padding:var(--spacing-2xl);color:#666;font-size:var(--font-md);line-height:1.8}.search-tip div{margin-bottom:var(--spacing-xs)}.tip-gray{color:#aaa;font-size:var(--font-base)}.musiclist{width:100%;max-width:1000px;margin:0 auto}.musiclist-ul{gap:var(--spacing-sm);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.musicitem{align-items:center;gap:var(--spacing-lg);padding:var(--spacing-lg);background:var(--background);border:1px solid var(--border);border-radius:var(--radius-lg);transition:var(--transition-normal);display:flex;position:relative}.musicitem:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}.musicitem-index{font-size:var(--font-lg);color:#999;text-align:center;min-width:30px;font-weight:600}.musicitem-info{flex:1;min-width:0}.musicitem-title{font-size:var(--font-lg);color:var(--foreground);margin-bottom:var(--spacing-xs);text-overflow:ellipsis;white-space:nowrap;font-weight:600;overflow:hidden}.musicitem-meta{font-size:var(--font-md);color:#666;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.musicitem-artist{color:var(--primary);font-weight:500}.musicitem-separator{color:#ccc;margin:0 var(--spacing-xs)}.musicitem-album{color:#666}.musicitem-source{font-size:var(--font-xs);color:#999;margin-top:var(--spacing-xs)}.musicitem-actions{gap:var(--spacing-sm);flex-shrink:0;display:flex}.musicitem-btn{align-items:center;gap:var(--spacing-xs);padding:var(--spacing-sm)var(--spacing-md);border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--background);color:var(--foreground);font-size:var(--font-sm);cursor:pointer;transition:var(--transition-normal);white-space:nowrap;display:flex}.musicitem-btn:hover:not(:disabled){background:var(--primary);color:#fff;border-color:var(--primary)}.musicitem-btn:disabled{opacity:.6;cursor:not-allowed}.musicitem-btn.loading{opacity:.7;cursor:not-allowed}.musicitem-btn-download:hover:not(:disabled){background:var(--success);border-color:var(--success)}.musicitem-btn-pic:hover:not(:disabled){background:var(--info);border-color:var(--info)}.musicitem-btn-lyric:hover:not(:disabled){background:var(--warning);border-color:var(--warning);color:#000}.btn-icon{font-size:var(--font-md)}.btn-spinner{border:2px solid #0000;border-top-color:currentColor;border-radius:50%;width:12px;height:12px;animation:1s linear infinite spin;display:inline-block}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.musiclist-more{width:100%;padding:var(--spacing-lg);margin-top:var(--spacing-lg);background:var(--background);border:2px dashed var(--border);border-radius:var(--radius-lg);color:var(--foreground);font-size:var(--font-md);cursor:pointer;transition:var(--transition-normal)}.musiclist-more:hover:not(:disabled){border-color:var(--primary);color:var(--primary);background:#007bff0d}.musiclist-more:disabled{opacity:.6;cursor:not-allowed}.enhanced-musicitem{transition:all var(--transition-normal);border-radius:var(--radius-lg);margin-bottom:var(--spacing-sm);padding:var(--spacing-lg);background:var(--background);border:1px solid var(--border)}.enhanced-musicitem:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}.virtualized-container{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--background);overflow:auto}.virtualized-container::-webkit-scrollbar{width:8px}.virtualized-container::-webkit-scrollbar-track{border-radius:var(--radius-sm);background:#f1f1f1}.virtualized-container::-webkit-scrollbar-thumb{border-radius:var(--radius-sm);background:#c1c1c1}.virtualized-container::-webkit-scrollbar-thumb:hover{background:#a8a8a8}@media (max-width:768px){.musicitem{align-items:stretch;gap:var(--spacing-md);padding:var(--spacing-md);flex-direction:column}.musicitem-index{align-self:flex-start;min-width:auto}.musicitem-actions{gap:var(--spacing-sm);flex-direction:column}.musicitem-btn{justify-content:center;width:100%}.enhanced-musicitem{padding:var(--spacing-md)}.virtualized-container{height:400px!important}}@media (max-width:480px){.musicitem{padding:var(--spacing-sm)}.musicitem-title{font-size:var(--font-md)}.musicitem-meta{font-size:var(--font-sm)}.musicitem-btn{padding:var(--spacing-xs)var(--spacing-sm);font-size:var(--font-xs)}}
.footer{text-align:center;width:100%;font-size:var(--font-base);color:#aaa;padding:var(--spacing-lg)var(--spacing-xl);border-top:1px solid var(--border);background:var(--background);z-index:var(--z-sticky);position:sticky;bottom:0;box-shadow:0 -2px 8px #0000000d}.footer-content{justify-content:center;align-items:center;gap:var(--spacing-lg);flex-wrap:wrap;max-width:1200px;margin:0 auto;display:flex}.footer-link{color:#666;transition:var(--transition-normal);font-weight:500;text-decoration:none}.footer-link:hover{color:#333;text-decoration:underline}.footer-author{color:#555;font-weight:600}.footer-author:hover{color:#333}.footer-vercel{color:#666}.footer-vercel:hover{color:#333}.tech-stack{color:#777;font-weight:500}.footer-copyright,.footer-tech,.footer-api,.footer-deploy{align-items:center;gap:var(--spacing-xs);white-space:nowrap;display:inline-flex}.footer-separator{color:#ccc;-webkit-user-select:none;user-select:none;font-weight:400}@media (max-width:768px){.footer{font-size:var(--font-sm);padding:var(--spacing-md)var(--spacing-lg)}.footer-content{gap:var(--spacing-sm);justify-content:center}.footer-copyright,.footer-tech,.footer-api,.footer-deploy{justify-content:center}}@media (max-width:480px){.footer{font-size:var(--font-xs);padding:var(--spacing-sm)var(--spacing-md)}.footer-content{gap:var(--spacing-xs)}.footer-separator{display:none}}
.search-error{color:#721c24;border-radius:var(--radius-md);padding:var(--spacing-lg);margin:var(--spacing-lg)0;font-size:var(--font-md);background:#f8d7da;border:1px solid #f5c6cb;line-height:1.5;position:relative}.error-close-btn{top:var(--spacing-sm);right:var(--spacing-sm);font-size:var(--font-lg);color:#721c24;cursor:pointer;padding:var(--spacing-xs);transition:var(--transition-normal);background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;width:24px;height:24px;display:flex;position:absolute}.error-close-btn:hover{background:#721c241a}.error-boundary{min-height:400px;padding:var(--spacing-2xl);text-align:center;justify-content:center;align-items:center;display:flex}.error-boundary-content{background:var(--background);border:1px solid var(--border);border-radius:var(--radius-lg);max-width:500px;padding:var(--spacing-2xl);box-shadow:var(--shadow-md)}.error-boundary-title{font-size:var(--font-xl);color:var(--danger);margin-bottom:var(--spacing-lg);font-weight:600}.error-boundary-message{font-size:var(--font-md);color:var(--foreground);margin-bottom:var(--spacing-xl);line-height:1.6}.error-boundary-details{border:1px solid var(--border);border-radius:var(--radius-sm);padding:var(--spacing-md);margin-bottom:var(--spacing-xl);font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:var(--font-sm);color:#666;text-align:left;white-space:pre-wrap;word-break:break-word;background:#f8f9fa;overflow-x:auto}.error-boundary-actions{gap:var(--spacing-md);margin-top:var(--spacing-xl);justify-content:center;display:flex}.loading-overlay{z-index:var(--z-modal);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#fffc;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.loading-content{align-items:center;gap:var(--spacing-lg);background:var(--background);padding:var(--spacing-2xl);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);border:1px solid var(--border);flex-direction:column;display:flex}.loading-spinner{border:4px solid #f3f3f3;border-top:4px solid var(--primary);border-radius:50%;width:40px;height:40px;animation:1s linear infinite spin}.loading-text{font-size:var(--font-md);color:var(--foreground);font-weight:500}.toast-container{top:var(--spacing-xl);right:var(--spacing-xl);z-index:var(--z-toast);gap:var(--spacing-sm);flex-direction:column;width:100%;max-width:400px;display:flex;position:fixed}.toast{background:var(--background);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:var(--spacing-lg);transition:var(--transition-normal);animation:.3s ease-out slideIn;position:relative}.toast.removing{animation:.3s ease-in forwards slideOut}.toast-success{border-left:4px solid var(--success);color:#155724;background:#d4edda}.toast-error{border-left:4px solid var(--danger);color:#721c24;background:#f8d7da}.toast-warning{border-left:4px solid var(--warning);color:#856404;background:#fff3cd}.toast-info{border-left:4px solid var(--info);color:#0c5460;background:#d1ecf1}.toast-header{margin-bottom:var(--spacing-xs);justify-content:space-between;align-items:flex-start;display:flex}.toast-title{font-weight:600;font-size:var(--font-md);margin:0}.toast-message{font-size:var(--font-sm);margin:0;line-height:1.5}.toast-close{font-size:var(--font-lg);cursor:pointer;color:inherit;opacity:.7;transition:var(--transition-normal);background:0 0;border:none;justify-content:center;align-items:center;width:20px;height:20px;padding:0;display:flex}.toast-close:hover{opacity:1}@keyframes slideIn{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@keyframes slideOut{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(100%)}}@media (max-width:768px){.toast-container{top:var(--spacing-md);right:var(--spacing-md);left:var(--spacing-md);max-width:none}.toast{padding:var(--spacing-md)}.toast-title{font-size:var(--font-sm)}.toast-message{font-size:var(--font-xs)}.error-boundary,.error-boundary-content{padding:var(--spacing-lg)}.error-boundary-actions{flex-direction:column}}@media (max-width:480px){.toast-container{top:var(--spacing-sm);right:var(--spacing-sm);left:var(--spacing-sm)}.loading-content{padding:var(--spacing-lg)}.loading-spinner{border-width:3px;width:32px;height:32px}}
.m-0{margin:0}.m-1{margin:var(--spacing-xs)}.m-2{margin:var(--spacing-sm)}.m-3{margin:var(--spacing-md)}.m-4{margin:var(--spacing-lg)}.m-5{margin:var(--spacing-xl)}.mt-0{margin-top:0}.mt-1{margin-top:var(--spacing-xs)}.mt-2{margin-top:var(--spacing-sm)}.mt-3{margin-top:var(--spacing-md)}.mt-4{margin-top:var(--spacing-lg)}.mt-5{margin-top:var(--spacing-xl)}.mb-0{margin-bottom:0}.mb-1{margin-bottom:var(--spacing-xs)}.mb-2{margin-bottom:var(--spacing-sm)}.mb-3{margin-bottom:var(--spacing-md)}.mb-4{margin-bottom:var(--spacing-lg)}.mb-5{margin-bottom:var(--spacing-xl)}.ml-0{margin-left:0}.ml-1{margin-left:var(--spacing-xs)}.ml-2{margin-left:var(--spacing-sm)}.ml-3{margin-left:var(--spacing-md)}.ml-4{margin-left:var(--spacing-lg)}.ml-5{margin-left:var(--spacing-xl)}.mr-0{margin-right:0}.mr-1{margin-right:var(--spacing-xs)}.mr-2{margin-right:var(--spacing-sm)}.mr-3{margin-right:var(--spacing-md)}.mr-4{margin-right:var(--spacing-lg)}.mr-5{margin-right:var(--spacing-xl)}.p-0{padding:0}.p-1{padding:var(--spacing-xs)}.p-2{padding:var(--spacing-sm)}.p-3{padding:var(--spacing-md)}.p-4{padding:var(--spacing-lg)}.p-5{padding:var(--spacing-xl)}.pt-0{padding-top:0}.pt-1{padding-top:var(--spacing-xs)}.pt-2{padding-top:var(--spacing-sm)}.pt-3{padding-top:var(--spacing-md)}.pt-4{padding-top:var(--spacing-lg)}.pt-5{padding-top:var(--spacing-xl)}.pb-0{padding-bottom:0}.pb-1{padding-bottom:var(--spacing-xs)}.pb-2{padding-bottom:var(--spacing-sm)}.pb-3{padding-bottom:var(--spacing-md)}.pb-4{padding-bottom:var(--spacing-lg)}.pb-5{padding-bottom:var(--spacing-xl)}.pl-0{padding-left:0}.pl-1{padding-left:var(--spacing-xs)}.pl-2{padding-left:var(--spacing-sm)}.pl-3{padding-left:var(--spacing-md)}.pl-4{padding-left:var(--spacing-lg)}.pl-5{padding-left:var(--spacing-xl)}.pr-0{padding-right:0}.pr-1{padding-right:var(--spacing-xs)}.pr-2{padding-right:var(--spacing-sm)}.pr-3{padding-right:var(--spacing-md)}.pr-4{padding-right:var(--spacing-lg)}.pr-5{padding-right:var(--spacing-xl)}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.text-justify{text-align:justify}.text-xs{font-size:var(--font-xs)}.text-sm{font-size:var(--font-sm)}.text-base{font-size:var(--font-base)}.text-md{font-size:var(--font-md)}.text-lg{font-size:var(--font-lg)}.text-xl{font-size:var(--font-xl)}.font-normal{font-weight:400}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}.text-primary{color:var(--primary)}.text-danger{color:var(--danger)}.text-success{color:var(--success)}.text-warning{color:var(--warning)}.text-info{color:var(--info)}.text-muted{color:#6c757d}.d-none{display:none}.d-block{display:block}.d-inline{display:inline}.d-inline-block{display:inline-block}.d-flex{display:flex}.d-inline-flex{display:inline-flex}.flex-row{flex-direction:row}.flex-column{flex-direction:column}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}.justify-start{justify-content:flex-start}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.align-start{align-items:flex-start}.align-center{align-items:center}.align-end{align-items:flex-end}.align-stretch{align-items:stretch}.flex-1{flex:1}.flex-auto{flex:auto}.flex-none{flex:none}.position-static{position:static}.position-relative{position:relative}.position-absolute{position:absolute}.position-fixed{position:fixed}.position-sticky{position:sticky}.w-25{width:25%}.w-50{width:50%}.w-75{width:75%}.w-100{width:100%}.w-auto{width:auto}.h-25{height:25%}.h-50{height:50%}.h-75{height:75%}.h-100{height:100%}.h-auto{height:auto}.border{border:1px solid var(--border)}.border-top{border-top:1px solid var(--border)}.border-bottom{border-bottom:1px solid var(--border)}.border-left{border-left:1px solid var(--border)}.border-right{border-right:1px solid var(--border)}.border-0{border:0}.border-top-0{border-top:0}.border-bottom-0{border-bottom:0}.border-left-0{border-left:0}.border-right-0{border-right:0}.rounded{border-radius:var(--radius-sm)}.rounded-md{border-radius:var(--radius-md)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-full{border-radius:50%}.shadow-none{box-shadow:none}.shadow-sm{box-shadow:var(--shadow-sm)}.shadow{box-shadow:var(--shadow-md)}.shadow-lg{box-shadow:var(--shadow-lg)}.shadow-xl{box-shadow:var(--shadow-xl)}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-visible{overflow:visible}.overflow-scroll{overflow:scroll}.overflow-x-auto{overflow-x:auto}.overflow-x-hidden{overflow-x:hidden}.overflow-x-visible{overflow-x:visible}.overflow-x-scroll{overflow-x:scroll}.overflow-y-auto{overflow-y:auto}.overflow-y-hidden{overflow-y:hidden}.overflow-y-visible{overflow-y:visible}.overflow-y-scroll{overflow-y:scroll}.text-truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.text-break{word-wrap:break-word;word-break:break-word}.user-select-none{-webkit-user-select:none;user-select:none}.user-select-auto{-webkit-user-select:auto;user-select:auto}.user-select-all{-webkit-user-select:all;user-select:all}.user-select-text{-webkit-user-select:text;user-select:text}.pointer-events-none{pointer-events:none}.pointer-events-auto{pointer-events:auto}.cursor-auto{cursor:auto}.cursor-default{cursor:default}.cursor-pointer{cursor:pointer}.cursor-wait{cursor:wait}.cursor-text{cursor:text}.cursor-move{cursor:move}.cursor-not-allowed{cursor:not-allowed}