:root{--primary-color:#6366f1;--primary-dark:#4f46e5;--secondary-color:#8b5cf6;--background:#0f172a;--surface:#1e293b;--surface-light:#334155;--text-primary:#f1f5f9;--text-secondary:#cbd5e1;--text-muted:#94a3b8;--border-color:#475569;--success:#10b981;--error:#ef4444;--warning:#f59e0b;--spacing-xs:.25rem;--spacing-sm:.5rem;--spacing-md:1rem;--spacing-lg:1.5rem;--spacing-xl:2rem;--spacing-2xl:3rem;--radius-sm:.375rem;--radius-md:.5rem;--radius-lg:.75rem;--transition:all .3s ease}*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;background-color:var(--background);color:var(--text-primary);line-height:1.6;font-size:16px}.navbar{background-color:var(--surface);border-bottom:1px solid var(--border-color);position:sticky;top:0;z-index:100}.navbar-container{max-width:900px;margin:0 auto;padding:var(--spacing-md) var(--spacing-lg);display:flex;justify-content:space-between;align-items:center}.navbar-brand{font-size:1.5rem;font-weight:800;background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.navbar-tabs{display:flex;gap:var(--spacing-md)}.navbar-tab{padding:var(--spacing-sm) var(--spacing-md);background:0;border:0;color:var(--text-secondary);cursor:pointer;font-weight:600;transition:var(--transition);border-bottom:2px solid transparent}.navbar-tab:hover{color:var(--text-primary)}.navbar-tab.active{color:var(--primary-color);border-bottom-color:var(--primary-color)}.tab-content{display:none}.tab-content.active{display:block}.container{max-width:900px;margin:0 auto;padding:var(--spacing-lg)}@media(max-width:768px){.container{padding:var(--spacing-md)}}.header{text-align:center;margin-bottom:var(--spacing-2xl);padding-bottom:var(--spacing-xl);border-bottom:2px solid var(--border-color)}.title{font-size:3rem;font-weight:800;background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:var(--spacing-sm)}.subtitle{font-size:1.125rem;color:var(--text-secondary);font-weight:300}@media(max-width:768px){.title{font-size:2rem}.subtitle{font-size:1rem}}.search-section{background-color:var(--surface);padding:var(--spacing-xl);border-radius:var(--radius-lg);margin-bottom:var(--spacing-xl);border:1px solid var(--border-color)}.search-inputs{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-md);margin-bottom:var(--spacing-lg)}.search-buttons{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-md)}@media(max-width:768px){.search-inputs,.search-buttons{grid-template-columns:1fr}}.input-field,.select-field{width:100%;padding:var(--spacing-md);background-color:var(--surface-light);border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-primary);font-size:1rem;transition:var(--transition)}.input-field:focus,.select-field:focus{outline:0;border-color:var(--primary-color);box-shadow:0 0 0 3px rgba(99,102,241,0.1)}.input-field::placeholder{color:var(--text-muted)}.btn{padding:var(--spacing-md) var(--spacing-lg);border:0;border-radius:var(--radius-md);font-size:1rem;font-weight:600;cursor:pointer;transition:var(--transition);text-transform:uppercase;letter-spacing:.5px}.btn-primary{background-color:var(--primary-color);color:white}.btn-primary:hover{background-color:var(--primary-dark);transform:translateY(-2px);box-shadow:0 4px 12px rgba(99,102,241,0.4)}.btn-primary:active{transform:translateY(0)}.btn-secondary{background-color:var(--surface-light);color:var(--text-primary);border:1px solid var(--border-color)}.btn-secondary:hover{background-color:var(--border-color);border-color:var(--primary-color)}.btn-danger{background-color:rgba(239,68,68,0.1);color:var(--error);border:1px solid var(--error)}.btn-danger:hover{background-color:var(--error);color:white;border-color:var(--error)}.btn:disabled{opacity:.5;cursor:not-allowed}.status-section{margin-bottom:var(--spacing-xl)}.status-message{padding:var(--spacing-lg);border-radius:var(--radius-md);font-weight:500}.status-message.success{background-color:rgba(16,185,129,0.1);color:var(--success);border:1px solid var(--success)}.status-message.error{background-color:rgba(239,68,68,0.1);color:var(--error);border:1px solid var(--error)}.status-message.warning{background-color:rgba(245,158,11,0.1);color:var(--warning);border:1px solid var(--warning)}.loading-section{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-2xl);gap:var(--spacing-lg)}.spinner{width:50px;height:50px;border:4px solid var(--border-color);border-top-color:var(--primary-color);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}#loadingText{color:var(--text-secondary);font-size:1.125rem}.search-results-section{background-color:var(--surface);padding:var(--spacing-xl);border-radius:var(--radius-lg);margin-bottom:var(--spacing-xl);border:1px solid var(--border-color)}.search-results-section h3{margin-bottom:var(--spacing-lg);color:var(--text-primary)}.search-results-list{display:flex;flex-direction:column;gap:var(--spacing-md)}.search-result-item{background-color:var(--surface-light);padding:var(--spacing-md) var(--spacing-lg);border-radius:var(--radius-md);border:1px solid var(--border-color);cursor:pointer;transition:var(--transition)}.search-result-item:hover{background-color:var(--border-color);border-color:var(--primary-color);transform:translateX(4px)}.search-result-title{font-weight:700;color:var(--text-primary);margin-bottom:var(--spacing-xs);font-size:1.3rem}.search-result-artist{color:var(--text-secondary);font-size:1.1rem;margin-bottom:var(--spacing-xs);font-weight:500}.search-result-album{color:var(--text-muted);font-size:.95rem;margin-bottom:var(--spacing-xs)}.search-result-duration{color:var(--text-muted);font-size:.95rem;margin-top:var(--spacing-xs)}.lyrics-section{background-color:var(--surface);padding:var(--spacing-xl);border-radius:var(--radius-lg);border:1px solid var(--border-color)}.lyrics-header{text-align:center;margin-bottom:var(--spacing-xl);padding-bottom:var(--spacing-lg);border-bottom:1px solid var(--border-color)}.lyrics-header-top{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--spacing-lg)}.lyrics-zoom-controls{display:flex;align-items:center;gap:var(--spacing-sm);background-color:var(--surface-light);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);border:1px solid var(--border-color)}.zoom-level{min-width:50px;text-align:center;font-weight:600;color:var(--text-primary)}.btn-sm{padding:var(--spacing-xs) var(--spacing-sm);font-size:.875rem;min-width:32px}#lyricsTitle,#libraryLyricsTitle{font-size:1.875rem;font-weight:700;margin-bottom:var(--spacing-sm)}#lyricsArtist,#libraryLyricsArtist{color:var(--text-secondary);font-size:1.125rem}.lyrics-container{background-color:var(--surface-light);padding:var(--spacing-xl);border-radius:var(--radius-md);margin-bottom:var(--spacing-xl);min-height:300px;max-height:600px;overflow-y:auto;line-height:2.5}.lyrics-container::-webkit-scrollbar{width:8px}.lyrics-container::-webkit-scrollbar-track{background:var(--surface)}.lyrics-container::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:4px}.lyrics-container::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.lyric-line{margin-bottom:var(--spacing-lg);display:flex;flex-wrap:wrap;gap:var(--spacing-sm);align-items:flex-start}.lyric-word{display:inline-flex;flex-direction:column;align-items:center;gap:var(--spacing-xs)}.lyric-original{font-size:1.75rem;font-weight:600;color:var(--text-primary);line-height:1.2}.lyric-romanized{font-size:1rem;color:var(--text-muted);font-weight:500;min-height:1.2em;transition:var(--transition)}.lyric-romanized.hidden{display:none}#copyBtn{width:100%}.lyrics-buttons{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--spacing-md)}#reRomanizeBtn.hidden,#jyutpingBtn.hidden{display:none}@media(max-width:768px){.lyrics-buttons{grid-template-columns:1fr}}.hidden{display:none !important}.visible{display:block !important}@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.lyrics-section{animation:fadeIn .3s ease}@media(max-width:480px){.title{font-size:1.5rem}.lyrics-container{max-height:400px;padding:var(--spacing-lg)}.lyric-original{font-size:1rem}.lyric-romanized{font-size:.7rem}}.library-controls{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--spacing-md);margin-bottom:var(--spacing-xl);background-color:var(--surface);padding:var(--spacing-lg);border-radius:var(--radius-lg);border:1px solid var(--border-color)}.library-search{display:flex}.library-filters{display:flex;gap:var(--spacing-md)}.library-actions{display:flex;gap:var(--spacing-md)}.library-list{display:flex;flex-direction:column;gap:var(--spacing-md)}.library-item{background-color:var(--surface);padding:var(--spacing-md) var(--spacing-lg);border-radius:var(--radius-md);border:1px solid var(--border-color);cursor:pointer;transition:var(--transition);display:flex;justify-content:space-between;align-items:center}.library-item:hover{background-color:var(--border-color);border-color:var(--primary-color);transform:translateX(4px)}.library-item-info{flex:1}.library-item-title{font-weight:700;color:var(--text-primary);font-size:1.1rem;margin-bottom:var(--spacing-xs)}.library-item-artist{color:var(--text-secondary);font-size:.95rem;margin-bottom:var(--spacing-xs)}.library-item-meta{color:var(--text-muted);font-size:.85rem;display:flex;gap:var(--spacing-md)}.library-item-badge{display:inline-block;background-color:var(--primary-color);color:white;padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm);font-size:.75rem;font-weight:600;margin-left:var(--spacing-md)}.library-item-delete{background:0;border:0;color:var(--text-muted);font-size:1.5rem;cursor:pointer;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md);transition:var(--transition);flex-shrink:0}.library-item-delete:hover{background-color:rgba(239,68,68,0.1);color:var(--error)}.library-empty{text-align:center;padding:var(--spacing-2xl);color:var(--text-muted)}.library-section{background-color:var(--surface);padding:var(--spacing-xl);border-radius:var(--radius-lg);border:1px solid var(--border-color)}@media(max-width:768px){.library-controls{grid-template-columns:1fr}.lyrics-buttons{grid-template-columns:1fr 1fr}}.settings-section{background-color:var(--surface);padding:var(--spacing-xl);border-radius:var(--radius-lg);border:1px solid var(--border-color);max-width:600px;margin:0 auto}.settings-form{display:flex;flex-direction:column;gap:var(--spacing-lg)}.form-group{display:flex;flex-direction:column;gap:var(--spacing-md)}.form-label{font-weight:600;color:var(--text-primary);font-size:1rem}.form-hint{font-size:.875rem;color:var(--text-muted);margin-top:var(--spacing-xs)}