:root { --bg-primary: #FFFFFF; --bg-secondary: #F9FAFB; --bg-card: #F9FAFB; --bg-header: #F3F4F6; --text-primary: #1A1A1A; --text-secondary: #6B7280; --color-primary: #6366F1; --color-secondary: #60A5FA; --color-success: #10B981; --color-warning: #F59E0B; --color-error: #EF4444; --border-color: #E5E7EB; --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);}[data-theme="dark"] { --bg-primary: #1F2937; --bg-secondary: #2D3748; --bg-card: #2D3748; --bg-header: #111827; --text-primary: #F3F4F6; --text-secondary: #9CA3AF; --color-primary: #818CF8; --color-secondary: #60A5FA; --color-success: #34D399; --color-warning: #FBBF24; --color-error: #F87171; --border-color: #374151;}* { margin: 0; padding: 0; box-sizing: border-box;}.breadcrumb-nav { padding: 1rem 0 0 0;}.breadcrumb { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; background: var(--bg-secondary); border-radius: 0.5rem; padding: 0.75rem 1rem;}.breadcrumb-item { display: flex; align-items: center;}.breadcrumb-item + .breadcrumb-item::before { content: '/'; color: var(--text-secondary); margin: 0 0.5rem;}.breadcrumb-item a { color: var(--color-primary); text-decoration: none; font-size: 0.9rem; transition: color 0.3s ease;}.breadcrumb-item a:hover { color: var(--text-primary); text-decoration: underline;}.breadcrumb-item.active { color: var(--text-secondary); font-size: 0.9rem;}.breadcrumb-item i { margin-right: 0.25rem; font-size: 0.8rem;}@media (max-width: 768px) { .breadcrumb { padding: 0.5rem 0.75rem; font-size: 0.8rem; } .breadcrumb-item + .breadcrumb-item::before { margin: 0 0.25rem; }}.back-btn i,.btn-back i { display: flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; vertical-align: middle !important;}.back-btn,.btn-back { padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important;}body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif; line-height: 1.6; color: var(--text-primary); background-color: var(--bg-primary); transition: all 0.3s ease;}.container { max-width: 1200px; margin: 0 auto; padding: 0 1rem;}.header { background-color: var(--bg-card); border-bottom: 1px solid var(--border-color); position: sticky; top: 0; z-index: 1000; box-shadow: var(--shadow);}.navbar { display: flex; justify-content: space-between; align-items: center; padding: 1rem 0;}.logo { display: flex; align-items: center; text-decoration: none; color: var(--text-primary); font-weight: 700; font-size: 1.5rem;}.logo img { height: 40px; margin-right: 0.75rem;}.nav-links { display: flex; list-style: none; align-items: center; gap: 2rem;}.nav-links a { text-decoration: none; color: var(--text-primary); font-weight: 500; transition: color 0.3s ease;}.nav-links a:hover { color: var(--color-primary);}.search-form { position: relative; max-width: 400px; flex: 1; margin: 0 2rem;}.search-input { width: 100%; padding: 0.75rem 1rem; padding-left: 2.5rem; border: 1px solid var(--border-color); border-radius: 0.75rem; background-color: var(--bg-secondary); color: var(--text-primary); font-size: 1rem; transition: all 0.3s ease;}.search-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);}.search-icon { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--text-secondary);}.theme-toggle { background: none; border: 1px solid var(--border-color); border-radius: 0.5rem; padding: 0.5rem; color: var(--text-primary); cursor: pointer; transition: all 0.3s ease;}.theme-toggle:hover { background-color: var(--bg-secondary);}.mobile-menu-toggle { display: none; background: none; border: none; color: var(--text-primary); font-size: 1.5rem; cursor: pointer;}.btn { display: inline-flex; align-items: center; padding: 0.75rem 1.5rem; border: none; border-radius: 0.75rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: all 0.3s ease; gap: 0.5rem;}.btn-primary { background-color: var(--color-primary); color: white;}.btn-primary:hover { background-color: #5856EB; transform: translateY(-1px);}.btn-secondary { background-color: transparent; color: var(--color-primary); border: 1px solid var(--color-primary);}.btn-secondary:hover { background-color: var(--color-primary); color: white;}.card { background-color: var(--bg-card); border-radius: 1rem; padding: 1.5rem; box-shadow: var(--shadow); transition: all 0.3s ease; border: 1px solid var(--border-color);}.card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px);}.song-card { background-color: var(--bg-card); border-radius: 0.75rem; padding: 1rem; box-shadow: var(--shadow); transition: all 0.3s ease; text-decoration: none; color: var(--text-primary); display: block; border: 1px solid var(--border-color);}.song-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); text-decoration: none; color: var(--text-primary);}.song-title { font-weight: 600; font-size: 1.1rem; margin-bottom: 0.5rem; color: var(--text-primary);}.song-artist { color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 0.5rem;}.song-key { display: inline-block; background-color: var(--color-primary); color: white; padding: 0.25rem 0.5rem; border-radius: 0.375rem; font-size: 0.75rem; font-weight: 600;}.grid { display: grid; gap: 1.5rem;}.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }.hero { text-align: center; padding: 4rem 0; background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)); color: white; margin-bottom: 3rem;}.hero h1 { font-size: 3rem; font-weight: 800; margin-bottom: 1rem;}.hero p { font-size: 1.25rem; margin-bottom: 2rem; opacity: 0.9;}.section-title { font-size: 2rem; font-weight: 700; margin-bottom: 2rem; color: var(--text-primary);}.section-subtitle { color: var(--text-secondary); margin-bottom: 1rem;}.form-group { margin-bottom: 1.5rem;}.form-label { display: block; margin-bottom: 0.5rem; font-weight: 600; color: var(--text-primary);}.form-input { width: 100%; padding: 0.75rem 1rem; border: 1px solid var(--border-color); border-radius: 0.5rem; background-color: var(--bg-secondary); color: var(--text-primary); font-size: 1rem; transition: all 0.3s ease;}.form-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);}.alert { padding: 1rem; border-radius: 0.5rem; margin-bottom: 1rem; font-weight: 500;}.alert-success { background-color: rgba(16, 185, 129, 0.1); color: var(--color-success); border: 1px solid rgba(16, 185, 129, 0.2);}.alert-error { background-color: rgba(239, 68, 68, 0.1); color: var(--color-error); border: 1px solid rgba(239, 68, 68, 0.2);}.alert-warning { background-color: rgba(245, 158, 11, 0.1); color: var(--color-warning); border: 1px solid rgba(245, 158, 11, 0.2);}.footer { background-color: var(--bg-header); border-top: 1px solid var(--border-color); padding: 3rem 0 2rem; margin-top: 4rem;}.footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; margin-bottom: 2rem;}.footer-section h3 { font-weight: 700; margin-bottom: 1rem; color: var(--text-primary);}.footer-section a { color: var(--text-secondary); text-decoration: none; display: block; margin-bottom: 0.5rem; transition: color 0.3s ease;}.footer-section a:hover { color: var(--color-primary);}.footer-bottom { text-align: center; padding-top: 2rem; border-top: 1px solid var(--border-color); color: var(--text-secondary);}.footer-logo { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem;}.footer-logo img { height: 40px; width: 40px; border-radius: 8px;}.footer-logo h3 { margin: 0; color: var(--text-primary);}@media (max-width: 768px) { .navbar { flex-wrap: wrap; } .nav-links { display: none; width: 100%; flex-direction: column; gap: 1rem; padding-top: 1rem; } .nav-links.active { display: flex; } .mobile-menu-toggle { display: block; } .search-form { margin: 1rem 0; order: 3; width: 100%; } .hero h1 { font-size: 2rem; } .hero p { font-size: 1rem; } .grid-cols-2, .grid-cols-3, .grid-cols-4 { grid-template-columns: 1fr; } .container { padding: 0 0.75rem; }}@media (min-width: 640px) { .grid-cols-2 { grid-template-columns: repeat(2, 1fr); }}@media (min-width: 768px) { .grid-cols-3 { grid-template-columns: repeat(3, 1fr); }}@media (min-width: 1024px) { .grid-cols-4 { grid-template-columns: repeat(4, 1fr); }}.song-detail { background-color: var(--bg-card); border-radius: 1rem; padding: 2rem; box-shadow: var(--shadow); margin-bottom: 2rem;}.chord-section { background-color: var(--bg-secondary); border-radius: 0.75rem; padding: 1.5rem; font-family: 'Courier New', monospace; white-space: pre-wrap; line-height: 1.8; color: var(--text-primary); border: 1px solid var(--border-color);}.rating { display: flex; gap: 0.25rem; align-items: center; margin: 1rem 0;}.star { cursor: pointer; color: #D1D5DB; font-size: 1.5rem; transition: color 0.2s ease;}.star.active,.star:hover { color: #F59E0B;}.loading { display: flex; justify-content: center; align-items: center; padding: 2rem;}.loading-spinner { width: 40px; height: 40px; border: 4px solid var(--border-color); border-top: 4px solid var(--color-primary); border-radius: 50%; animation: spin 1s linear infinite;}@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }}.favorite-btn { position: absolute; right: 0.75rem; background: rgba(255, 255, 255, 0.9); border: none; font-size: 1.25rem; cursor: pointer; padding: 0.5rem; border-radius: 50%; transition: all 0.3s ease; z-index: 10; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); backdrop-filter: blur(10px);}.favorite-btn:hover { transform: scale(1.1); background: rgba(255, 255, 255, 1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);}.favorite-btn.favorited { background: rgba(239, 68, 68, 0.1); color: #6366F1;}[data-theme="dark"] .favorite-btn { background: rgba(31, 41, 55, 0.9); color: var(--text-primary);}[data-theme="dark"] .favorite-btn:hover { background: rgba(31, 41, 55, 1);}.song-card,.song-card-modern { position: relative;}.song-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--border-color);}.song-views { font-size: 0.75rem; color: var(--text-secondary); display: flex; align-items: center; gap: 0.25rem;}.artist-avatar { font-size: 3rem; margin-bottom: 1rem;}.artist-name { font-weight: 600; margin-bottom: 0.5rem; color: var(--text-primary);}.artist-meta { color: var(--text-secondary); font-size: 0.9rem;}.text-center { text-align: center; }.text-left { text-align: left; }.text-right { text-align: right; }.mb-1 { margin-bottom: 0.25rem; }.mb-2 { margin-bottom: 0.5rem; }.mb-3 { margin-bottom: 0.75rem; }.mb-4 { margin-bottom: 1rem; }.mb-6 { margin-bottom: 1.5rem; }.mb-8 { margin-bottom: 2rem; }.mt-1 { margin-top: 0.25rem; }.mt-2 { margin-top: 0.5rem; }.mt-3 { margin-top: 0.75rem; }.mt-4 { margin-top: 1rem; }.mt-6 { margin-top: 1.5rem; }.mt-8 { margin-top: 2rem; }.p-4 { padding: 1rem; }.p-6 { padding: 1.5rem; }.p-8 { padding: 2rem; }.hidden { display: none; }.block { display: block; }.flex { display: flex; }.inline-flex { display: inline-flex; }.items-center { align-items: center; }.justify-center { justify-content: center; }.justify-between { justify-content: space-between; }.gap-2 { gap: 0.5rem; }.gap-4 { gap: 1rem; }.gap-6 { gap: 1.5rem; }.w-full { width: 100%; }.h-full { height: 100%; }