:root{--primary:#6C3CE1;--primary-light:#8B5CF6;--primary-dark:#5521C6;--secondary:#EC4899;--accent:#F59E0B;--bg:#0F0B1A;--bg-card:#1A1425;--bg-card-hover:#231D33;--bg-surface:#14101F;--text:#F1EFFA;--text-muted:#9B8FC2;--text-dim:#6B5F8A;--border:rgba(139,92,246,0.15);--glow:rgba(108,60,225,0.4);--glow-pink:rgba(236,72,153,0.3);--radius:16px;--radius-sm:10px;--radius-xs:6px;--shadow:0 4px 24px rgba(0,0,0,0.3);--shadow-lg:0 8px 40px rgba(0,0,0,0.4);--transition:0.3s cubic-bezier(0.4,0,0.2,1);--font:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif}*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}body{font-family:var(--font);line-height:1.7;color:var(--text);background:var(--bg);overflow-x:hidden;min-height:100vh}body::before{content:'';position:fixed;top:0;left:0;width:100%;height:100%;background:radial-gradient(ellipse 80% 50% at 20% 20%,rgba(108,60,225,0.12) 0%,transparent 50%),radial-gradient(ellipse 60% 40% at 80% 80%,rgba(236,72,153,0.08) 0%,transparent 50%),radial-gradient(ellipse 40% 60% at 50% 50%,rgba(245,158,11,0.05) 0%,transparent 50%);pointer-events:none;z-index:0}a{text-decoration:none;color:var(--primary-light);transition:var(--transition)}a:hover{color:var(--secondary)}a:focus-visible{outline:2px solid var(--primary-light);outline-offset:3px;border-radius:4px}img{max-width:100%;height:auto}.container{max-width:1200px;margin:0 auto;padding:0 24px;position:relative;z-index:1}h1,h2,h3,h4,h5,h6{line-height:1.2;font-weight:600}h2{font-size:2.2rem;background:linear-gradient(135deg,var(--text),var(--primary-light));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:0.5em}h3{font-size:1.3rem;color:var(--text)}.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 28px;font-family:var(--font);font-size:0.95rem;font-weight:500;color:#fff;background:linear-gradient(135deg,var(--primary),var(--primary-dark));border:1px solid rgba(139,92,246,0.3);border-radius:50px;cursor:pointer;transition:var(--transition);text-decoration:none;position:relative;overflow:hidden;z-index:0}.btn::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--primary-light),var(--secondary));opacity:0;transition:var(--transition);border-radius:50px;z-index:-1}.btn:hover{color:#fff;transform:translateY(-2px);box-shadow:0 8px 30px var(--glow)}.btn:hover::before{opacity:1}.btn span,.btn-text{position:relative;z-index:1}.btn-secondary{background:transparent;border:1.5px solid #A78BFA;color:#A78BFA}.btn-secondary:hover{background:rgba(139,92,246,0.1);color:#fff;border-color:var(--secondary)}.btn-secondary::before{display:none}header{position:sticky;top:0;z-index:1000;background:rgba(15,11,26,0.85);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border);transition:var(--transition)}.header-top{display:flex;justify-content:space-between;align-items:center;padding:16px 0}.header-content h1{font-size:1.5rem;background:linear-gradient(135deg,var(--primary-light),var(--secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:700;letter-spacing:-0.02em}.header-content .tagline{font-size:0.8rem;color:var(--text-muted);font-weight:300;letter-spacing:0.03em}.mobile-nav ul{display:flex;list-style:none;gap:8px;align-items:center}.mobile-nav ul li a{padding:8px 18px;border-radius:50px;font-size:0.9rem;font-weight:400;color:var(--text-muted);transition:var(--transition);border:1px solid transparent}.mobile-nav ul li a:hover{color:var(--text);background:rgba(139,92,246,0.1);border-color:var(--border)}@media (min-width:769px){.mobile-nav ul{gap:0;align-items:stretch}.mobile-nav ul li a{display:flex;align-items:center;padding:10px 18px;border-radius:0;border:none;border-bottom:2px solid transparent}.mobile-nav ul li a:hover{border-color:transparent;border-bottom-color:var(--primary)}}.mobile-menu-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;background:none;border:none;cursor:pointer;padding:8px;z-index:1001}.hamburger-line{display:block;width:24px;height:2px;background:var(--text);border-radius:2px;transition:var(--transition)}.mobile-menu-toggle.active .hamburger-line:nth-child(1){transform:rotate(45deg) translate(5px,5px)}.mobile-menu-toggle.active .hamburger-line:nth-child(2){opacity:0}.mobile-menu-toggle.active .hamburger-line:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}.hero{padding:70px 0 50px;position:relative;overflow:hidden}.hero::before{content:'';position:absolute;top:-30%;left:50%;transform:translateX(-50%);width:800px;height:800px;background:radial-gradient(circle,rgba(108,60,225,0.15),transparent 60%);pointer-events:none}.hero::after{content:'';position:absolute;bottom:-20%;right:-10%;width:500px;height:500px;background:radial-gradient(circle,rgba(236,72,153,0.1),transparent 60%);pointer-events:none}.hero-content{text-align:center;max-width:700px;margin:0 auto;position:relative;z-index:1}.hero-content h2{font-size:3.2rem;font-weight:700;background:linear-gradient(135deg,#fff,var(--primary-light),var(--secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:24px;letter-spacing:-0.03em;line-height:1.15}.hero-content p{font-size:1.1rem;color:var(--text-muted);line-height:1.8;margin-bottom:40px;max-width:560px;margin-left:auto;margin-right:auto}.hero-buttons{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}.search-section{padding:40px 0 24px}.search-section h2{text-align:center;margin-bottom:24px}.search-box{max-width:560px;margin:0 auto;position:relative}.search-box input{width:100%;padding:16px 24px;font-family:var(--font);font-size:1rem;color:var(--text);background:var(--bg-card);border:1.5px solid var(--border);border-radius:50px;outline:none;transition:var(--transition)}.search-box input::placeholder{color:var(--text-dim)}.search-box input:focus{border-color:var(--primary-light);box-shadow:0 0 0 4px rgba(139,92,246,0.15);background:var(--bg-card-hover)}.search-results{max-width:560px;margin:8px auto 0;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;display:none}.search-result-item{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;color:var(--text);border-bottom:1px solid var(--border);transition:var(--transition)}.search-result-item:last-child{border-bottom:none}.search-result-item:hover{background:var(--bg-card-hover);color:var(--primary-light)}.search-result-item span{font-size:0.8rem;color:var(--text-dim);background:rgba(139,92,246,0.1);padding:4px 12px;border-radius:50px}.no-results{text-align:center;padding:20px;color:var(--text-muted)}.no-results a{color:var(--primary-light)}.featured-songs,.songs-section{padding:30px 0}.featured-songs h2,.songs-header h2{text-align:center}.section-intro,.songs-header p{text-align:center;color:var(--text-muted);margin-bottom:24px}.songs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px}.song-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:28px;transition:var(--transition);position:relative;overflow:hidden}.song-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--primary),var(--secondary));opacity:0;transition:var(--transition)}.song-card:hover{transform:translateY(-6px);border-color:rgba(139,92,246,0.3);box-shadow:0 16px 48px rgba(108,60,225,0.15);background:var(--bg-card-hover)}.song-card:hover::before{opacity:1}.song-card h3{font-size:1.15rem;margin-bottom:8px;color:var(--text)}.song-card .artist{color:var(--text-muted);font-size:0.9rem;margin-bottom:10px}.song-card-meta{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px}.meta-badge{display:inline-block;font-size:0.72rem;color:var(--primary-light);background:rgba(139,92,246,0.1);padding:3px 12px;border-radius:50px;font-weight:500;letter-spacing:0.03em}.meta-badge.meta-key{color:var(--accent);background:rgba(245,158,11,0.1)}.meta-badge.meta-time{color:var(--secondary);background:rgba(236,72,153,0.1)}.song-card .btn,.song-card-actions .btn{justify-content:center;padding:10px 24px;font-size:0.88rem}.songs-cta{text-align:center;margin-top:48px}.song-count{text-align:center;color:var(--text-dim);font-size:0.9rem;margin-top:16px}.songs-header{padding:60px 0 20px;text-align:center}.songs-header .search-box{margin-top:24px}.filter-bar{max-width:700px;margin:20px auto 0}.filter-bar .filter-group{margin-bottom:12px}.filter-bar .filter-group>label{display:block;font-size:0.82rem;color:var(--text-muted);margin-bottom:8px}.filter-row .filter-group>label{text-align:left}.filter-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.filter-chip{display:inline-block;padding:6px 16px;background:var(--bg-card);border:1px solid var(--border);border-radius:50px;color:var(--text-muted);font-size:0.8rem;cursor:pointer;transition:var(--transition)}.filter-chip:hover{background:var(--bg-card-hover);border-color:var(--primary);color:var(--text)}.filter-chip.active{background:var(--primary);border-color:var(--primary);color:#fff}.filter-row{display:flex;gap:16px;justify-content:center}.filter-row .filter-group{flex:1;max-width:220px}.filter-select{width:100%;padding:10px 14px;font-family:var(--font);font-size:0.85rem;color:var(--text);background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;transition:var(--transition);appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239B8FC2' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}.filter-select:focus{border-color:var(--primary-light);box-shadow:0 0 0 4px rgba(139,92,246,0.15);outline:none}@media (max-width:768px){.filter-row{flex-direction:column;align-items:center}.filter-row .filter-group{max-width:100%;width:100%}}.features-section{padding:50px 0}.features-section h2{text-align:center;margin-bottom:48px}.features-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr));gap:24px}.feature-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:32px 28px;text-align:center;transition:var(--transition);overflow-wrap:break-word;word-break:break-word;min-width:0}.feature-card:hover{transform:translateY(-4px);border-color:rgba(139,92,246,0.25);box-shadow:0 12px 36px rgba(0,0,0,0.2)}.feature-icon{font-size:2.8rem;margin-bottom:16px;display:block}.feature-card h3{margin-bottom:10px;font-size:1.1rem}.feature-card p{color:var(--text-muted);font-size:0.9rem;line-height:1.6}.donate-section{padding:50px 0;text-align:center;position:relative}.donate-section::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(108,60,225,0.08),rgba(236,72,153,0.05));border-top:1px solid var(--border);border-bottom:1px solid var(--border)}.donate-section h2,.donate-section h3{position:relative;z-index:1}.donate-section p{color:var(--text-muted);position:relative;z-index:1;margin-bottom:24px}.donate-options{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;position:relative;z-index:1;margin-bottom:16px}.razorpay-donate-btn{position:relative;z-index:1}.razorpay-donate-btn form{display:inline-block}.upi-donate-option{position:relative;z-index:1;text-align:center}.upi-label{color:var(--text-dim);font-size:0.85rem;margin-bottom:8px}.donate-btn{background:linear-gradient(135deg,var(--secondary),#D946EF) !important;border-color:rgba(236,72,153,0.3) !important}.donate-btn:hover{box-shadow:0 8px 30px var(--glow-pink) !important}.qr-code{width:140px;height:140px;border-radius:var(--radius);border:2px solid var(--border);cursor:pointer;transition:var(--transition);background:#fff;padding:8px}.qr-code:hover{transform:scale(1.05);border-color:var(--secondary);box-shadow:0 8px 24px var(--glow-pink)}.upi-id{color:var(--text-dim);font-size:0.85rem;position:relative;z-index:1}.upi-id strong{color:var(--text-muted)}.qr-modal-overlay{display:flex;position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,0.75);align-items:center;justify-content:center;backdrop-filter:blur(4px)}.qr-modal-content{background:var(--card-bg,#1A1425);border:1px solid var(--border);border-radius:16px;padding:40px;text-align:center;position:relative;max-width:400px;width:90%;box-shadow:0 24px 48px rgba(0,0,0,0.5)}.qr-modal-close{position:absolute;top:12px;right:16px;background:none;border:none;color:var(--text-muted);font-size:1.8rem;cursor:pointer;line-height:1;transition:var(--transition)}.qr-modal-close:hover{color:var(--text)}.qr-modal-content h3{margin-bottom:20px;color:var(--text)}.qr-modal-img{width:220px;height:220px;border-radius:var(--radius);background:#fff;padding:12px;margin-bottom:20px}.qr-modal-upi-id{color:var(--text-muted);font-size:0.95rem;margin-bottom:12px;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}.qr-modal-upi-id strong{color:var(--text);font-family:monospace;font-size:1rem}.qr-modal-copy{background:var(--primary);color:#fff;border:none;padding:4px 12px;border-radius:6px;cursor:pointer;font-size:0.8rem;transition:var(--transition)}.qr-modal-copy:hover{background:var(--primary-hover)}.qr-modal-hint{color:var(--text-dim);font-size:0.85rem;margin-bottom:0}.about-section{padding:50px 0}.about-section h2{text-align:center}.about-content{max-width:700px;margin:0 auto;text-align:center}.about-content h3{font-size:1.1rem;color:var(--text);margin-top:24px;margin-bottom:8px}.about-content p{color:var(--text-muted);margin-bottom:16px;line-height:1.8}.how-it-works-section{padding:50px 0;text-align:center}.how-it-works-section h2{text-align:center;margin-bottom:48px}.how-it-works-section .features-grid{grid-template-columns:repeat(3,1fr);max-width:900px;margin:0 auto}@media (max-width:768px){.how-it-works-section .features-grid{grid-template-columns:1fr}}.malayalam-section{padding:50px 0;text-align:center}.malayalam-section h2{text-align:center;margin-bottom:24px}.malayalam-section .songs-cta{display:flex;justify-content:center;flex-wrap:wrap;gap:12px}.faq-section{padding:50px 0}.faq-section h2{text-align:center;margin-bottom:48px}.faq-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;max-width:900px;margin:0 auto;min-width:0}.faq-item{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:28px;transition:var(--transition);overflow-wrap:break-word;word-break:break-word;min-width:0}.faq-item:hover{border-color:rgba(139,92,246,0.25)}.faq-item h3{font-size:1rem;margin-bottom:10px;color:#A78BFA}.faq-item p{color:var(--text-muted);font-size:0.9rem;line-height:1.7}.faq-item p a{color:var(--primary-light)}.song-detail-header{padding:60px 0 20px}.back-link{display:inline-flex;align-items:center;gap:6px;color:var(--text-muted);font-size:0.9rem;margin-bottom:20px;transition:var(--transition)}.back-link:hover{color:var(--primary-light)}.song-detail-header h2{font-size:2.4rem}.song-detail-header .artist{color:var(--text-muted);font-size:1.05rem}.lyrics-link-header{display:inline-block;margin-top:10px;padding:5px 16px;background:var(--bg-card);border:1px solid var(--border);border-radius:50px;color:var(--primary-light);text-decoration:none;font-size:0.85rem;transition:var(--transition)}.lyrics-link-header:hover{background:var(--primary);color:#fff;border-color:var(--primary)}.song-card-actions{display:flex;gap:8px;margin-top:auto}.song-card-actions .btn{flex:1;justify-content:center;padding:10px 12px;font-size:0.85rem}.song-card-actions .btn-secondary{background:transparent;border:1px solid var(--border);color:#A78BFA}.song-card-actions .btn-secondary:hover{background:var(--primary);color:#fff;border-color:var(--primary)}.song-content-section{padding:0 0 60px}.song-toolbar{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:16px 24px;margin-bottom:24px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px}.song-meta-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.meta-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:50px;font-size:0.82rem;font-weight:500;color:var(--text);background:rgba(139,92,246,0.08);border:1px solid var(--border)}.meta-pill .meta-label{color:var(--text-dim);font-weight:400;font-size:0.75rem;text-transform:uppercase;letter-spacing:0.05em}.meta-pill-key{background:rgba(245,158,11,0.1);border-color:rgba(245,158,11,0.2);color:var(--accent)}.meta-pill-time{background:rgba(236,72,153,0.1);border-color:rgba(236,72,153,0.2);color:var(--secondary)}.song-controls{display:flex;gap:16px;align-items:center;flex-wrap:wrap}.transpose-controls{display:flex;align-items:center;gap:8px}.transpose-display{font-size:0.82rem;color:var(--text-muted);min-width:90px;text-align:center}.transpose-display strong{color:var(--primary-light);font-weight:600}.ctrl-btn{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;background:rgba(139,92,246,0.1);border:1px solid rgba(139,92,246,0.2);border-radius:8px;color:var(--primary-light);font-size:1rem;font-weight:600;cursor:pointer;transition:var(--transition);font-family:var(--font)}.ctrl-btn:hover{background:rgba(139,92,246,0.2);border-color:var(--primary-light)}.ctrl-btn-text{width:auto;padding:0 14px;font-size:0.78rem;font-weight:500}.scroll-controls{display:flex;align-items:center;gap:8px}.speed-controls{display:none;gap:4px;align-items:center}.speed-controls.visible{display:flex}.speed-btn{padding:4px 10px;font-size:0.7rem;font-family:var(--font);background:rgba(139,92,246,0.06);border:1px solid var(--border);border-radius:6px;color:var(--text-dim);cursor:pointer;transition:var(--transition)}.speed-btn.active,.speed-btn:hover{color:var(--primary-light);background:rgba(139,92,246,0.15);border-color:rgba(139,92,246,0.3)}#auto-scroll-btn.active{background:rgba(236,72,153,0.15);border-color:rgba(236,72,153,0.3);color:var(--secondary)}.chord-content{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:36px;margin-bottom:40px}.section-label{font-size:0.85rem;font-weight:600;color:var(--secondary);text-transform:uppercase;letter-spacing:0.08em;margin:28px 0 12px;padding:6px 0 6px 14px;border-left:3px solid var(--secondary)}.section-label:first-child{margin-top:0}.chord-progression{margin:8px 0 16px;overflow-x:auto;padding:4px 0}.chord-line{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.chord{display:inline-flex;align-items:center;justify-content:center;padding:8px 18px;background:rgba(108,60,225,0.12);color:var(--primary-light);border:1px solid rgba(139,92,246,0.2);border-radius:var(--radius-sm);font-weight:600;font-size:1.1rem;font-family:'Courier New',monospace;transition:var(--transition);min-width:50px;text-align:center}.bar-group{display:inline-flex;gap:0;background:rgba(108,60,225,0.12);border:1px solid rgba(139,92,246,0.2);border-radius:var(--radius-sm)}.bar-group .chord{border:none;background:none;border-radius:0;min-width:40px;padding:8px 14px}.bar-group .chord+.chord{border-left:1px solid rgba(139,92,246,0.3)}.chord:hover{background:rgba(108,60,225,0.2);border-color:var(--primary-light);transform:translateY(-2px);box-shadow:0 4px 12px rgba(108,60,225,0.2)}.chord-lyric-line{display:flex;flex-wrap:wrap;align-items:flex-end;margin:2px 0;line-height:1}.chord-lyric-pair{display:inline-flex;flex-direction:column;align-items:flex-start;position:relative}.chord-name{font-family:'Courier New',monospace;font-size:1.05rem;font-weight:700;color:var(--primary-light);padding:0 2px;min-height:1.4em;white-space:nowrap;text-shadow:0 0 12px rgba(139,92,246,0.3)}.chord-name.empty{visibility:hidden}.lyric-text{font-size:1.05rem;color:var(--text);white-space:pre;line-height:1.6;font-weight:400}.lyric-only-line{font-size:1.05rem;color:var(--text);line-height:1.8;margin:2px 0}body:not(.lang-ml) .lang-ml{display:none}body.lang-ml .lang-en{display:none}body.lang-ml{font-family:'Manjari','Poppins',sans-serif}body.lang-ml .lyric-text,body.lang-ml .lyric-only-line,body.lang-ml .lyric-line{font-size:1.1rem;line-height:1.9}.song-spacer{height:12px}.song-section-break{height:28px}.song-divider{border:none;border-top:1px solid var(--border);margin:20px auto;width:60%;opacity:0.5}.video-container{margin:40px 0;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border)}.video-container iframe{display:block;width:100%;aspect-ratio:16 / 9;border:none}.song-navigation{display:flex;gap:16px;justify-content:center;margin-top:48px;flex-wrap:wrap}.related-chords-section{margin-top:48px;padding:24px;background:var(--card-bg,#1A1425);border-radius:12px;border:1px solid rgba(108,60,225,0.15)}.related-chords-section h3{font-size:1.1rem;margin-bottom:16px;color:var(--text-secondary,#b0b0b0)}.related-chords-grid{display:flex;flex-direction:column;gap:8px}.related-chord-link{padding:10px 14px;background:rgba(108,60,225,0.08);border-radius:8px;color:var(--text-primary,#fff);text-decoration:none;font-size:0.9rem;transition:background 0.2s}.related-chord-link:hover{background:rgba(108,60,225,0.2)}.request-header{padding:60px 0 24px;text-align:center}.request-header h2{font-size:2.2rem}.request-header p{color:var(--text-muted)}.request-form-section{padding:0 0 60px}.request-form{max-width:560px;margin:0 auto;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:40px}.form-group{margin-bottom:24px}.form-group label{display:block;font-size:0.9rem;font-weight:500;color:var(--text);margin-bottom:8px}.form-group input,.form-group textarea{width:100%;padding:14px 18px;font-family:var(--font);font-size:0.95rem;color:var(--text);background:var(--bg-surface);border:1.5px solid var(--border);border-radius:var(--radius-sm);outline:none;transition:var(--transition);resize:vertical}.form-group input::placeholder,.form-group textarea::placeholder{color:var(--text-dim)}.form-group input:focus,.form-group textarea:focus{border-color:var(--primary-light);box-shadow:0 0 0 4px rgba(139,92,246,0.12);background:var(--bg-card)}.request-form .btn{width:100%;justify-content:center;padding:14px;font-size:1rem}.success-message{max-width:560px;margin:0 auto;text-align:center;background:var(--bg-card);border:1px solid rgba(34,197,94,0.3);border-radius:var(--radius);padding:40px}.success-message h3{color:#22C55E;margin-bottom:12px}.success-message p{color:var(--text-muted);margin-bottom:20px}.error-message{max-width:560px;margin:12px auto 0;text-align:center;background:var(--bg-card);border:1px solid rgba(239,68,68,0.3);border-radius:var(--radius);padding:24px}.error-message h3{color:#EF4444;margin-bottom:8px}.error-message p{color:var(--text-muted)}.privacy-section{padding:50px 0}.privacy-section h2{margin-bottom:32px}.privacy-content{max-width:760px;margin:0 auto}.privacy-content h3{color:var(--primary-light);margin-top:32px;margin-bottom:12px;font-size:1.15rem}.privacy-content p{color:var(--text-muted);margin-bottom:12px;line-height:1.8}.privacy-content ul{color:var(--text-muted);margin:8px 0 16px 24px;line-height:1.8}.privacy-content li{margin-bottom:6px}footer{background:var(--bg-surface);border-top:1px solid var(--border);padding:48px 0 32px;position:relative;z-index:1}.footer-content{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;margin-bottom:32px;flex-wrap:wrap}.footer-logo h3{font-size:1.2rem;background:linear-gradient(135deg,var(--primary-light),var(--secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:6px}.footer-logo p{color:#8A7EB0;font-size:0.85rem}.footer-links h4,.footer-social h4{color:var(--text);font-size:0.95rem;margin-bottom:12px}.footer-links ul,.footer-social ul{list-style:none}.footer-links ul li,.footer-social ul li{margin-bottom:8px}.footer-links ul li a,.footer-social ul li a{color:#8A7EB0;font-size:0.9rem;transition:var(--transition)}.footer-links ul li a:hover,.footer-social ul li a:hover{color:var(--primary-light)}.footer-bottom{padding-top:24px;border-top:1px solid var(--border);text-align:center}.footer-bottom p{color:#8A7EB0;font-size:0.85rem}.footer-bottom a{color:var(--text-muted)}.form-success-message{position:fixed;top:0;left:0;right:0;z-index:9999;background:rgba(15,11,26,0.95);backdrop-filter:blur(20px);padding:20px;border-bottom:1px solid rgba(34,197,94,0.3)}.success-content{max-width:600px;margin:0 auto;text-align:center}.success-content h3{color:#22C55E;margin-bottom:8px}.success-content p{color:var(--text-muted);font-size:0.9rem;margin-bottom:12px}.success-content .btn-small,.btn-small{padding:8px 20px;font-size:0.8rem;font-family:var(--font);color:#fff;background:var(--primary);border:none;border-radius:50px;cursor:pointer;transition:var(--transition)}.success-content .btn-small:hover,.btn-small:hover{background:var(--primary-light)}@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.hero-content,.feature-card,.song-card,.faq-item{animation:fadeInUp 0.6s ease-out both}.feature-card:nth-child(2),.song-card:nth-child(2),.faq-item:nth-child(2){animation-delay:0.1s}.feature-card:nth-child(3),.song-card:nth-child(3),.faq-item:nth-child(3){animation-delay:0.2s}.feature-card:nth-child(4),.song-card:nth-child(4),.faq-item:nth-child(4){animation-delay:0.3s}@media (max-width:768px){.mobile-menu-toggle{display:flex}.mobile-nav{display:none;position:absolute;top:100%;left:0;right:0;background:rgba(15,11,26,0.98);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);padding:16px 24px}.mobile-nav.mobile-nav-open{display:block}.mobile-nav ul{flex-direction:column;gap:4px}.mobile-nav ul li a{display:block;padding:14px 18px;border-radius:var(--radius-sm);font-size:1rem}.header-top{padding:14px 0}.header-content h1{font-size:1.2rem}.hero{padding:50px 0 36px}.hero-content h2{font-size:2rem}.hero-content p{font-size:0.95rem}h2{font-size:1.7rem}.features-section,.donate-section,.about-section,.faq-section{padding:40px 0}.features-grid{grid-template-columns:1fr}.faq-grid{grid-template-columns:1fr}.faq-item{padding:20px}.chord-content{padding:24px 18px}.chord{padding:6px 14px;font-size:1.05rem;min-width:42px}.song-toolbar{flex-direction:column;align-items:flex-start;padding:14px 18px}.song-toolbar .simplify-toggle{width:100%;justify-content:center}.song-controls{flex-direction:column;align-items:flex-start;gap:10px;width:100%}.transpose-controls{width:100%;justify-content:space-between}.chord-name{font-size:1rem}.lyric-text{font-size:0.95rem}.request-form{padding:28px 20px}.footer-content{flex-direction:column;gap:24px}.song-detail-header h2{font-size:1.8rem}.donate-options{flex-direction:column;gap:20px}}@media (min-width:769px){.mobile-nav{display:block !important}}@media (max-width:480px){.container{padding:0 16px}.hero-content h2{font-size:1.7rem}.hero-buttons{flex-direction:column;align-items:center}.hero-buttons .btn{width:100%;justify-content:center}.songs-grid{grid-template-columns:1fr}.malayalam-section .songs-cta{flex-direction:column;align-items:center}}.generate-header{text-align:center;padding:3rem 0 1.5rem}.generate-header h2{font-size:2rem;margin-bottom:0.5rem;background:linear-gradient(135deg,var(--primary-light),var(--secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.generate-header p{color:var(--text-muted);max-width:600px;margin:0 auto}.generate-input-section{padding:0 0 2rem}.generate-form{max-width:600px;margin:0 auto;background:var(--bg-card);padding:2rem;border-radius:var(--radius);border:1px solid var(--border)}.upload-area{border:2px dashed var(--border);border-radius:var(--radius-sm);padding:2rem;text-align:center;cursor:pointer;transition:all var(--transition);background:var(--bg-surface)}.upload-area:hover,.upload-area.drag-over{border-color:var(--primary);background:rgba(108,60,225,0.05)}.upload-area.upload-highlight{border-color:var(--accent);animation:pulse-border 1.5s ease-in-out 3}@keyframes pulse-border{0%,100%{border-color:var(--accent)}50%{border-color:var(--secondary)}}.upload-icon{color:var(--text-muted);margin-bottom:0.75rem}.upload-text{color:var(--text);font-weight:500;margin-bottom:0.25rem}.upload-hint{color:var(--text-dim);font-size:0.85rem}.selected-file{display:flex;align-items:center;gap:0.75rem;padding:0.75rem 1rem;background:var(--bg-surface);border-radius:var(--radius-sm);border:1px solid var(--primary);margin-top:0.5rem}.file-name{flex:1;color:var(--text);font-size:0.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-remove{background:none;border:none;color:var(--text-muted);font-size:1.5rem;cursor:pointer;line-height:1;padding:0 0.25rem}.file-remove:hover{color:var(--secondary)}.input-divider{display:flex;align-items:center;gap:1rem;margin:1.25rem 0;color:var(--text-muted);font-size:0.85rem;text-transform:uppercase;letter-spacing:0.05em}.input-divider::before,.input-divider::after{content:'';flex:1;height:1px;background:var(--border)}.youtube-url-group{position:relative;display:flex;align-items:center}.youtube-url-icon{position:absolute;left:0.85rem;color:var(--text-muted);pointer-events:none;flex-shrink:0}.youtube-url-input{width:100%;padding:0.85rem 2.5rem 0.85rem 2.75rem;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:0.95rem;font-family:inherit;transition:border-color 0.2s}.youtube-url-input::placeholder{color:var(--text-muted);opacity:0.7}.youtube-url-input:focus{outline:none;border-color:var(--primary)}.youtube-url-clear{position:absolute;right:0.5rem;background:none;border:none;color:var(--text-muted);font-size:1.4rem;cursor:pointer;line-height:1;padding:0.25rem}.youtube-url-clear:hover{color:var(--secondary)}.youtube-fetch-status{margin-top:0.5rem;font-size:0.85rem;color:var(--text-muted)}.youtube-fetch-status.error{color:var(--secondary)}.youtube-player-container{margin-bottom:1rem;border-radius:var(--radius);overflow:hidden;aspect-ratio:16 / 9;max-width:560px;margin-left:auto;margin-right:auto}.youtube-player-container iframe{width:100%;height:100%;border:none}.generate-btn{display:block;margin:1.5rem auto 0;padding:0.9rem 2.5rem;font-size:1.05rem;font-weight:600}.generate-progress{padding:2rem 0}.progress-card{max-width:500px;margin:0 auto;background:var(--bg-card);padding:2rem;border-radius:var(--radius);border:1px solid var(--border)}.progress-steps{display:flex;flex-direction:column;gap:1rem;margin-bottom:1.5rem}.progress-step{display:flex;align-items:center;gap:0.75rem;color:var(--text-dim);font-size:0.9rem;transition:color var(--transition)}.progress-step.active{color:var(--primary-light)}.progress-step.completed{color:var(--text-muted)}.step-indicator{width:20px;height:20px;border-radius:50%;border:2px solid var(--text-dim);position:relative;flex-shrink:0;transition:all var(--transition)}.progress-step.active .step-indicator{border-color:var(--primary-light);background:rgba(108,60,225,0.2);animation:pulse-glow 1.5s ease-in-out infinite}@keyframes pulse-glow{0%,100%{box-shadow:0 0 0 0 rgba(108,60,225,0.4)}50%{box-shadow:0 0 0 6px rgba(108,60,225,0)}}.progress-step.completed .step-indicator{border-color:#10b981;background:#10b981}.progress-step.completed .step-indicator::after{content:'✓';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:white;font-size:0.65rem;font-weight:bold}.warmup-hint{font-size:0.8rem;color:var(--text-muted);margin-top:0.35rem;animation:fadeIn 0.4s ease}@keyframes fadeIn{from{opacity:0}to{opacity:1}}.progress-bar-container{background:var(--bg-surface);border-radius:4px;height:6px;overflow:hidden}.progress-bar{height:100%;background:linear-gradient(90deg,var(--primary),var(--secondary));border-radius:4px;transition:width 0.5s ease;width:0%}.generate-error{padding:2rem 0}.error-card{max-width:500px;margin:0 auto;background:var(--bg-card);padding:2rem;border-radius:var(--radius);border:1px solid rgba(239,68,68,0.3);text-align:center}.error-card h3{color:#ef4444;margin-bottom:0.75rem}.error-card p{color:var(--text-muted);margin-bottom:1.5rem}.generate-results .container{max-width:900px}.generate-results .song-toolbar{max-width:560px;margin-left:auto;margin-right:auto}.audio-player-container{background:var(--bg-card);border-radius:var(--radius-sm);padding:1rem 1.5rem;margin-bottom:1.5rem;border:1px solid var(--border)}.audio-controls{display:flex;align-items:center;gap:0.75rem}.audio-play-btn{background:var(--primary);border:none;border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;color:white;cursor:pointer;flex-shrink:0;transition:background var(--transition)}.audio-play-btn:hover{background:var(--primary-light)}.audio-time{color:var(--text-muted);font-size:0.85rem;font-variant-numeric:tabular-nums;min-width:3.5em;text-align:center}.audio-seek{flex:1;-webkit-appearance:none;appearance:none;height:4px;background:var(--bg-surface);border-radius:2px;cursor:pointer}.audio-seek::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--primary-light);cursor:pointer}.audio-seek::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--primary-light);border:none;cursor:pointer}.generate-meta-bar{display:flex;align-items:center;justify-content:center;gap:1.25rem;padding:0.75rem 0;margin-bottom:1rem}.generate-meta-bar .transpose-controls{margin-left:0;display:flex;align-items:center;gap:0.6rem;font-size:0.9rem;color:var(--text-muted)}.simplify-toggle{display:flex;gap:2px;background:var(--bg-card);border:1px solid var(--border);border-radius:8px;padding:3px}.simplify-tab{padding:6px 14px;border-radius:6px;border:none;background:transparent;color:var(--text-muted);cursor:pointer;font-size:0.85rem;font-family:var(--font);font-weight:500;transition:all 0.2s ease}.simplify-tab:hover{color:var(--text)}.simplify-tab.active{background:var(--primary);color:#fff}.beginner-info{display:flex;justify-content:center;gap:10px;margin-bottom:1rem;animation:fadeIn 0.3s ease}@keyframes fadeIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}.beginner-capo{background:rgba(245,158,11,0.15);color:#F59E0B;padding:4px 14px;border-radius:50px;font-size:0.8rem;font-weight:600}.beginner-difficulty{padding:4px 14px;border-radius:50px;font-size:0.8rem;font-weight:600}.difficulty-easy{background:rgba(34,197,94,0.15);color:#22C55E}.difficulty-moderate{background:rgba(245,158,11,0.15);color:#F59E0B}.difficulty-advanced{background:rgba(239,68,68,0.15);color:#EF4444}.chord-block-original{display:block;font-size:0.65rem;color:var(--text-muted);opacity:0.6;margin-top:1px;font-style:italic}.transpose-btn{background:var(--bg-surface);border:1px solid var(--border);color:var(--text);width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;cursor:pointer;font-size:0.95rem;font-weight:600;font-family:var(--font);transition:all var(--transition)}.transpose-btn:hover{background:var(--primary);border-color:var(--primary);color:white}.transpose-reset{margin-left:0.25rem;border-radius:var(--radius-xs);width:auto;padding:0.35rem 0.75rem;font-size:0.8rem;font-weight:500}#transpose-value{min-width:28px;text-align:center;font-weight:600;color:var(--primary-light);font-size:1rem}.current-chord-display{text-align:center;padding:1.5rem;margin-bottom:1.5rem}.current-chord-label{color:var(--text-dim);font-size:0.8rem;text-transform:uppercase;letter-spacing:1px;margin-bottom:0.25rem}.current-chord{font-size:4rem;font-weight:700;color:var(--primary-light);line-height:1;text-shadow:0 0 30px var(--glow);cursor:pointer}.chord-timeline-wrapper{overflow-x:auto;margin-bottom:1.5rem;padding-bottom:0.5rem;scrollbar-width:thin;scrollbar-color:var(--primary-dark) var(--bg-surface)}.chord-timeline{display:flex;gap:4px;padding:0.5rem 0;min-width:min-content}.chord-block{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0.75rem 0.5rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xs);cursor:pointer;transition:all 0.15s ease;flex-shrink:0}.chord-block:hover{background:var(--bg-card-hover);border-color:var(--primary)}.chord-block.active{background:rgba(108,60,225,0.2);border-color:var(--primary-light);box-shadow:0 0 12px var(--glow);transform:scale(1.05)}.chord-block.past{opacity:0.5}.chord-block-name{font-size:1.4rem;font-weight:600;color:var(--text);cursor:pointer}.chord-block.active .chord-block-name{color:var(--primary-light)}.chord-block-time{font-size:0.7rem;color:var(--text-dim);margin-top:0.2rem}.generate-actions{display:flex;gap:0.75rem;justify-content:center;flex-wrap:wrap;padding:1rem 0 2rem}.generate-actions .btn{min-width:160px;padding:0.65rem 1.5rem}.generate-actions .btn-secondary{background:var(--bg-card);border:1px solid var(--border);color:var(--text)}.generate-actions .btn-secondary:hover{background:var(--bg-card-hover);border-color:var(--primary)}@media (max-width:768px){.generate-header h2{font-size:1.5rem}.generate-form{padding:1.25rem}.generate-meta-bar{padding:0.5rem 0;flex-direction:column;gap:0.75rem}.current-chord{font-size:3rem}.audio-controls{gap:0.5rem}.chord-block{padding:0.5rem 0.4rem}.chord-block-name{font-size:1.15rem}}@media (max-width:480px){.generate-header{padding:2rem 0 1rem}.current-chord{font-size:2.5rem}}.share-buttons{display:flex;align-items:center;gap:0.75rem;padding:1rem 0;margin:1rem 0;border-top:1px solid var(--border)}.share-label{color:var(--text-muted);font-size:0.9rem;white-space:nowrap}.share-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--border);background:var(--bg-card);color:var(--text-muted);cursor:pointer;transition:all var(--transition)}.share-btn:hover{transform:scale(1.1)}.share-whatsapp:hover{background:#25D366;color:#fff;border-color:#25D366}.share-facebook:hover{background:#1877F2;color:#fff;border-color:#1877F2}.share-twitter:hover{background:#000;color:#fff;border-color:#000}.share-copy:hover{background:var(--primary);color:#fff;border-color:var(--primary)}.share-btn.copied{background:#10b981;color:#fff;border-color:#10b981}@media (max-width:480px){.share-buttons{flex-wrap:wrap}.share-label{width:100%}}.chords-page-title{font-size:1.8rem;font-weight:700;line-height:1.2}.meta-pill-ai{background:rgba(16,185,129,0.1);border-color:#10b981;color:#10b981}.chords-used-section{margin:1.5rem 0}.chords-used-section h2{font-size:1.1rem;font-weight:600;margin-bottom:0.75rem;color:var(--text)}.chords-used-grid{display:flex;flex-wrap:wrap;gap:0.5rem}.chord-badge{display:inline-flex;align-items:center;justify-content:center;min-width:3rem;padding:0.4rem 0.75rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);font-family:'Poppins',sans-serif;font-weight:600;font-size:0.95rem;color:var(--primary)}.chord-finder-cta-box{background:linear-gradient(135deg,rgba(108,60,225,0.1),rgba(236,72,153,0.1));border:1px solid rgba(108,60,225,0.3);border-radius:var(--radius);padding:1.5rem;text-align:center;margin:2rem 0}.chord-finder-cta-box h3{font-size:1.1rem;margin-bottom:0.5rem}.chord-finder-cta-box p{color:var(--text-muted);font-size:0.9rem;margin-bottom:1rem}.pwa-install-banner{position:fixed;bottom:1rem;left:50%;transform:translateX(-50%);background:var(--bg-card);border:1px solid var(--primary);border-radius:var(--radius-sm);padding:0.75rem 1rem;display:flex;align-items:center;gap:0.75rem;box-shadow:var(--shadow-lg);z-index:1000;max-width:420px;width:calc(100% - 2rem);animation:slideUp 0.4s ease-out}@keyframes slideUp{from{transform:translateX(-50%) translateY(100%);opacity:0}to{transform:translateX(-50%) translateY(0);opacity:1}}.pwa-install-banner .pwa-text{flex:1;font-size:0.85rem;color:var(--text);line-height:1.4}.pwa-install-banner .pwa-install-btn{background:var(--primary);color:#fff;border:none;border-radius:var(--radius-xs);padding:0.4rem 0.9rem;font-size:0.8rem;font-weight:600;cursor:pointer;white-space:nowrap;transition:background var(--transition)}.pwa-install-banner .pwa-install-btn:hover{background:var(--primary-light)}.pwa-install-banner .pwa-dismiss{background:none;border:none;color:var(--text-dim);font-size:1.2rem;cursor:pointer;padding:0 0.25rem;line-height:1}.pwa-install-banner .pwa-dismiss:hover{color:var(--text)}.print-meta{display:none}@media print{header,footer,.donate-section,.song-toolbar,.song-navigation,.video-container,.back-link,.lyrics-cta,.song-nav-links,.offline-banner,.lyrics-link-header,.generate-input-section,.generate-progress,.generate-error,.generate-actions,.audio-player-container,.transpose-controls,.share-buttons,.pwa-install-banner,.chord-finder-cta,.beginner-info,body::before{display:none !important}body{background:#fff !important;color:#000 !important;font-size:12pt;font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif}.container{max-width:100% !important;padding:0 !important}.chord-content,.lyrics-content{background:#fff !important;border:none !important;padding:0 !important}.chord-name{color:#000 !important;font-weight:700;text-shadow:none !important}.lyric-text,.lyric-line,.lyric-only-line{color:#000 !important}.section-label{color:#333 !important;border-left-color:#333 !important;background:none !important}.chord{background:#eee !important;color:#000 !important;border:1px solid #999 !important;box-shadow:none !important;text-shadow:none !important}.chord-progression{background:none !important;border:none !important}.song-detail-header{padding:0 !important;background:none !important}.song-detail-header h2{background:none !important;-webkit-text-fill-color:#000 !important;color:#000 !important;font-size:18pt}.song-detail-header .artist{color:#333 !important}.song-content-section{padding:0 !important}.print-meta{display:block !important;margin-bottom:12pt;padding-bottom:8pt;border-bottom:1px solid #999;font-size:10pt;color:#666}.meta-pill{background:none !important;border:1px solid #999 !important;color:#000 !important;box-shadow:none !important}.meta-label{color:#666 !important}@page{margin:1.5cm;size:A4;@bottom-center{content:"ecoliving-tips.github.io — More chords,transpose & auto-scroll online";font-size:8pt;color:#999}}}.lyric-line{padding:4px 0;font-size:1.05rem;line-height:1.8;color:var(--text)}.lyrics-content{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:32px;margin:24px 0}.lyrics-cta{background:linear-gradient(135deg,rgba(108,60,225,0.15),rgba(236,72,153,0.1));border:1px solid var(--border);border-radius:var(--radius);padding:24px;text-align:center;margin:24px 0}.lyrics-cta p{margin-bottom:12px;color:var(--text-muted);font-size:1.05rem}.category-links{padding:40px 0}.category-links h3{text-align:center;margin-bottom:20px;color:var(--text)}.category-link-list{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}.category-tag{display:inline-block;padding:8px 20px;background:var(--bg-card);border:1px solid var(--border);border-radius:50px;color:var(--primary-light);text-decoration:none;font-size:0.95rem;transition:var(--transition)}.category-tag:hover{background:var(--bg-card-hover);border-color:var(--primary);color:var(--text)}.song-nav-links{display:flex;flex-wrap:wrap;gap:12px;margin:20px 0}.song-nav-tag{display:inline-block;padding:6px 16px;background:var(--bg-card);border:1px solid var(--border);border-radius:50px;color:var(--primary-light);text-decoration:none;font-size:0.85rem;transition:var(--transition)}.song-nav-tag:hover{background:var(--bg-card-hover);color:var(--text)}.browse-section{padding:20px 0}.browse-columns{display:grid;grid-template-columns:1fr 1fr;gap:30px}.browse-col h3{margin-bottom:16px;font-size:1.1rem;color:var(--text-muted)}.tag-list{display:flex;flex-wrap:wrap;gap:10px}.browse-tag{display:inline-block;padding:8px 20px;background:var(--bg-card);border:1px solid var(--border);border-radius:50px;color:var(--primary-light);text-decoration:none;font-size:0.95rem;transition:var(--transition)}.browse-tag:hover{background:var(--bg-card-hover);border-color:var(--primary);color:var(--text)}@media (max-width:600px){.browse-columns{grid-template-columns:1fr}}.offline-banner{background:var(--accent);color:#000;text-align:center;padding:8px;font-size:0.85rem;font-weight:500}.chord-diagram-tooltip{position:fixed;z-index:1000;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow-lg);pointer-events:auto;max-width:340px}.chord-diagram-tooltip .tooltip-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--border)}.chord-diagram-tooltip .tooltip-header h4{margin:0;color:var(--primary-light);font-size:1.1rem}.chord-diagram-tooltip .tooltip-close{background:none;border:none;color:var(--text-muted);font-size:1.2rem;cursor:pointer;padding:0 4px}.chord-diagram-tooltip .diagram-tabs{display:flex;gap:8px;margin-bottom:12px}.chord-diagram-tooltip .diagram-tab{padding:4px 12px;border-radius:var(--radius-xs);border:1px solid var(--border);background:transparent;color:var(--text-muted);cursor:pointer;font-family:var(--font);font-size:0.85rem;transition:var(--transition)}.chord-diagram-tooltip .diagram-tab.active{background:var(--primary);color:#fff;border-color:var(--primary)}.chord-diagram-tooltip svg{display:block;margin:0 auto}.chord-diagram-tooltip .diagram-panel{display:none}.chord-diagram-tooltip .diagram-panel.active{display:block}.chord-diagram-overlay{position:fixed;inset:0;z-index:999}.prog-hero{text-align:center;padding:3rem 0 2rem;background:linear-gradient(180deg,rgba(108,60,225,0.15) 0%,transparent 100%)}.prog-hero h2{font-size:2.2rem;font-weight:700;margin-bottom:0.5rem;background:linear-gradient(135deg,var(--primary-light),var(--secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.prog-hero p{color:var(--text-muted);font-size:1.1rem;margin-bottom:1.5rem}.key-selector-wrap{display:inline-flex;align-items:center;gap:0.75rem}.key-selector-wrap label{color:var(--text-muted);font-weight:500}.key-selector{padding:0.6rem 2rem 0.6rem 1rem;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg-card);color:var(--text);font-family:var(--font);font-size:1rem;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%239B8FC2' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 0.75rem center}.key-selector:focus{outline:2px solid var(--primary-light);outline-offset:2px}.key-selector option,.key-selector optgroup{background:var(--bg-card);color:var(--text)}.key-selector::-webkit-scrollbar{width:8px}.key-selector::-webkit-scrollbar-track{background:var(--bg-surface)}.key-selector::-webkit-scrollbar-thumb{background:var(--primary-dark);border-radius:4px}.key-selector{scrollbar-width:thin;scrollbar-color:var(--primary-dark) var(--bg-surface)}.prog-palette-section,.prog-presets-section,.prog-timeline-section{padding:2rem 0}.prog-palette-section h3,.prog-presets-section h3,.prog-timeline-section h3{font-size:1.3rem;margin-bottom:0.5rem}.section-hint{color:var(--text-dim);font-size:0.9rem;margin-bottom:1rem}.diatonic-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:0.75rem}.diatonic-card{display:flex;flex-direction:column;align-items:center;gap:0.25rem;padding:1rem 0.5rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition);font-family:var(--font);color:var(--text)}.diatonic-card:hover{border-color:var(--primary-light);background:var(--bg-card-hover);transform:translateY(-2px);box-shadow:0 4px 16px rgba(108,60,225,0.2)}.diatonic-card.selected{border-color:var(--primary);background:rgba(108,60,225,0.15);transform:scale(0.95)}.diatonic-degree{font-size:0.8rem;color:var(--text-dim);font-weight:500}.diatonic-name{font-size:1.1rem;font-weight:600}.diatonic-diagram{margin-top:0.25rem;opacity:0.85}.diatonic-diagram svg{width:80px;height:auto}.preset-strip{display:flex;gap:0.75rem;flex-wrap:wrap}.preset-btn{display:flex;flex-direction:column;padding:0.75rem 1.25rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition);font-family:var(--font);color:var(--text)}.preset-btn:hover{border-color:var(--secondary);background:var(--bg-card-hover)}.preset-name{font-weight:600;font-size:0.95rem}.preset-label{font-size:0.8rem;color:var(--text-dim);margin-top:0.15rem}.progression-timeline{display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap;min-height:60px;padding:1rem;background:var(--bg-surface);border-radius:var(--radius);border:1px solid var(--border)}.progression-chord{display:flex;flex-direction:column;align-items:center;position:relative;padding:0.6rem 1.2rem;background:var(--bg-card);border:2px solid var(--border);border-radius:var(--radius-sm);transition:var(--transition)}.progression-chord.play-highlight{border-color:var(--accent);background:rgba(245,158,11,0.15);box-shadow:0 0 16px rgba(245,158,11,0.3)}.prog-chord-degree{font-size:0.7rem;color:var(--text-dim)}.prog-chord-name{font-weight:600;font-size:1rem;cursor:pointer}.prog-chord-name:hover{color:var(--primary-light)}.prog-chord-remove{position:absolute;top:-6px;right:-6px;width:18px;height:18px;border-radius:50%;background:var(--secondary);color:#fff;border:none;font-size:12px;line-height:1;cursor:pointer;opacity:0;transition:opacity 0.2s;display:flex;align-items:center;justify-content:center}.progression-chord:hover .prog-chord-remove{opacity:1}.prog-arrow{color:var(--text-dim);font-size:1.2rem}.progression-controls{display:flex;align-items:center;justify-content:space-between;margin-top:1rem;flex-wrap:wrap;gap:0.75rem}.bpm-control{display:flex;align-items:center;gap:0.5rem}.bpm-control span{font-weight:500;min-width:70px;text-align:center}.btn-sm{padding:0.3rem 0.7rem;font-size:1rem;border-radius:var(--radius-xs);background:var(--bg-card);border:1px solid var(--border);color:var(--text);cursor:pointer;transition:var(--transition);font-family:var(--font)}.btn-sm:hover{background:var(--bg-card-hover);border-color:var(--primary-light)}.prog-actions{display:flex;gap:0.5rem}.btn-outline{padding:0.5rem 1.2rem;border-radius:var(--radius-sm);background:transparent;border:1px solid var(--border);color:var(--text-muted);cursor:pointer;transition:var(--transition);font-family:var(--font);font-weight:500}.btn-outline:hover{border-color:var(--text-muted);color:var(--text)}.prog-how-section{padding:3rem 0;background:linear-gradient(180deg,transparent 0%,rgba(108,60,225,0.05) 100%)}.prog-how-section h2{text-align:center;font-size:1.8rem;margin-bottom:2rem}.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}.how-step{text-align:center;padding:1.5rem;background:var(--bg-card);border-radius:var(--radius);border:1px solid var(--border)}.step-number{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;font-weight:700;font-size:1.2rem;display:inline-flex;align-items:center;justify-content:center;margin-bottom:0.75rem}.how-step h3{font-size:1.05rem;margin-bottom:0.5rem}.how-step p{font-size:0.9rem;color:var(--text-muted)}.prog-faq-section{padding:3rem 0}.prog-faq-section h2{text-align:center;font-size:1.8rem;margin-bottom:2rem}.prog-keys-section{padding:2rem 0}.prog-keys-section h2{text-align:center;font-size:1.8rem;margin-bottom:2rem}.keys-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;max-width:700px;margin:0 auto}.keys-column{text-align:center}.keys-column h4{color:var(--primary);margin-bottom:0.75rem;font-size:1.1rem}.key-links{list-style:none;padding:0;margin:0 auto;display:inline-grid;grid-template-columns:1fr 1fr;gap:0.4rem 1.5rem;text-align:left}.key-links li a{color:var(--text-muted);text-decoration:none;font-size:0.95rem;transition:color 0.2s}.key-links li a:hover{color:var(--primary-light)}@media (max-width:480px){.keys-grid{grid-template-columns:1fr}.key-links{grid-template-columns:1fr 1fr}}.prog-cta-section{padding:2rem 0}.cta-card{text-align:center;padding:2.5rem;background:linear-gradient(135deg,rgba(108,60,225,0.12),rgba(236,72,153,0.08));border:1px solid var(--border);border-radius:var(--radius)}.cta-card h3{font-size:1.5rem;margin-bottom:0.5rem}.cta-card p{color:var(--text-muted);margin-bottom:1.5rem}.btn-lg{padding:0.8rem 2rem;font-size:1.1rem}.progressions-header{text-align:center;padding:3rem 0 1.5rem;background:linear-gradient(180deg,rgba(108,60,225,0.15) 0%,transparent 100%)}.progressions-header h2{font-size:2rem;font-weight:700;margin-bottom:0.5rem}.progressions-header p{color:var(--text-muted)}.progressions-section{padding:2rem 0}.progressions-section h3{font-size:1.3rem;margin:2rem 0 1rem}.progressions-section h3:first-child{margin-top:0}.builder-cta{text-align:center;margin-top:2rem}.preset-list{display:flex;flex-direction:column;gap:0.75rem}.preset-card{display:flex;align-items:center;gap:1rem;padding:1rem 1.25rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm)}.preset-card-name{font-weight:600;min-width:100px}.preset-card-chords{color:var(--text-muted)}.other-keys{padding:2rem 0}.other-keys h3{text-align:center;margin-bottom:1.5rem;font-size:1.3rem}.key-link-list{display:flex;flex-wrap:wrap;gap:0.5rem;justify-content:center}.key-link-list a{padding:0.4rem 1rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xs);font-size:0.9rem;transition:var(--transition)}.key-link-list a:hover{border-color:var(--primary-light);background:var(--bg-card-hover)}@media (max-width:768px){.diatonic-grid{grid-template-columns:repeat(4,1fr)}.how-grid{grid-template-columns:1fr}.prog-hero h2{font-size:1.6rem}.progression-controls{flex-direction:column;align-items:stretch}.prog-actions{justify-content:center}.bpm-control{justify-content:center}}@media (max-width:480px){.diatonic-grid{grid-template-columns:repeat(2,1fr)}.diatonic-diagram{display:none}.preset-strip{flex-direction:column}.progression-timeline{padding:0.75rem}}.identifier-section{padding:2rem 0}.identifier-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:2.5rem 2rem;max-width:520px;margin:0 auto;text-align:center}.identifier-mic-area{margin-bottom:1.5rem}.identifier-mic-btn{width:100px;height:100px;border-radius:50%;border:3px solid var(--primary);background:rgba(108,60,225,0.1);color:var(--primary-light);cursor:pointer;transition:var(--transition);display:inline-flex;align-items:center;justify-content:center;position:relative}.identifier-mic-btn:hover{background:rgba(108,60,225,0.2);border-color:var(--primary-light);transform:scale(1.05)}.identifier-mic-btn.listening{border-color:var(--secondary);background:rgba(236,72,153,0.15);color:var(--secondary);animation:mic-pulse 2s ease-in-out infinite}@keyframes mic-pulse{0%,100%{box-shadow:0 0 0 0 rgba(236,72,153,0.4)}50%{box-shadow:0 0 0 18px rgba(236,72,153,0)}}.mic-status{margin-top:0.75rem;color:var(--text-muted);font-size:0.95rem}.identifier-volume{margin-bottom:1.5rem;display:flex;align-items:center;gap:0.75rem;justify-content:center}.volume-bar-bg{width:180px;height:6px;background:rgba(255,255,255,0.08);border-radius:3px;overflow:hidden}.volume-bar-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--primary),var(--secondary));border-radius:3px;transition:width 0.08s linear}.volume-label{font-size:0.75rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.05em}.identifier-result{margin-bottom:1.5rem}.identifier-chord-name{font-size:4rem;font-weight:700;line-height:1.1;background:linear-gradient(135deg,var(--primary-light),var(--secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.chord-pulse{animation:chordPulseAnim 0.3s ease-out}@keyframes chordPulseAnim{0%{transform:scale(1.15);opacity:0.7}100%{transform:scale(1);opacity:1}}.identifier-chord-full{font-size:1.1rem;color:var(--text-muted);margin-top:0.25rem}.identifier-notes{font-size:0.9rem;color:var(--text-dim);margin-top:0.5rem;font-family:monospace;letter-spacing:0.05em}.identifier-confidence{display:flex;align-items:center;gap:0.75rem;justify-content:center;margin-top:1rem}.confidence-bar-bg{width:140px;height:8px;background:rgba(255,255,255,0.08);border-radius:4px;overflow:hidden}.confidence-bar-fill{height:100%;width:0%;border-radius:4px;transition:width 0.2s ease;background:var(--text-dim)}.confidence-bar-fill.high{background:linear-gradient(90deg,#10B981,#34D399)}.confidence-bar-fill.medium{background:linear-gradient(90deg,var(--accent),#FBBF24)}.confidence-bar-fill.low{background:linear-gradient(90deg,#EF4444,#F87171)}.confidence-label{font-size:0.8rem;font-weight:600;color:var(--text-muted);min-width:36px}.identifier-diagrams{margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--border)}.identifier-diagram-tabs{display:flex;gap:0.5rem;justify-content:center;margin-bottom:1rem}.identifier-tab{padding:0.4rem 1.2rem;border:1px solid var(--border);border-radius:999px;background:transparent;color:var(--text-muted);font-size:0.85rem;cursor:pointer;transition:var(--transition);font-family:var(--font)}.identifier-tab:hover{border-color:var(--primary);color:var(--text)}.identifier-tab.active{background:var(--primary);border-color:var(--primary);color:#fff}.identifier-diagram-content{display:flex;justify-content:center;min-height:120px;align-items:center}.identifier-diagram-content svg{max-width:100%}.identifier-history{margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--border)}.history-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:0.75rem}.identifier-history h4{font-size:0.85rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:0;font-weight:500}.history-actions{display:flex;gap:0.4rem}.history-action-btn{background:none;border:1px solid var(--border);border-radius:6px;color:var(--text-dim);cursor:pointer;padding:0.3rem 0.4rem;display:inline-flex;align-items:center;justify-content:center;transition:var(--transition)}.history-action-btn:hover{border-color:var(--primary);color:var(--primary-light)}.history-action-btn.copied{border-color:#22c55e;color:#22c55e}.history-chips{display:flex;flex-wrap:wrap;gap:0.4rem;justify-content:center}.history-chip{display:inline-block;padding:0.3rem 0.75rem;border-radius:999px;font-size:0.85rem;font-weight:500;background:rgba(139,92,246,0.1);color:var(--text-muted);border:1px solid rgba(139,92,246,0.15);cursor:pointer;transition:var(--transition)}.history-chip:hover{border-color:var(--primary);color:var(--primary-light);background:rgba(108,60,225,0.2)}.history-chip.active{background:var(--primary);border-color:var(--primary);color:#fff}.history-chip.latest{background:rgba(108,60,225,0.2);color:var(--primary-light);border-color:var(--primary)}@media (max-width:480px){.identifier-card{padding:1.5rem 1rem}.identifier-mic-btn{width:80px;height:80px}.identifier-mic-btn svg{width:36px;height:36px}.identifier-chord-name{font-size:3rem}}.section-divider{border:none;border-top:1px solid var(--border);margin:3rem 0 2rem}.section-label{font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.1em;color:var(--text-muted);margin-bottom:1rem}.curated-label{display:inline-flex;align-items:center;gap:6px;background:rgba(108,60,225,0.12);border:1px solid rgba(108,60,225,0.25);border-radius:var(--radius-xs);padding:4px 10px;font-size:0.7rem;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:var(--primary-light);margin-bottom:1.5rem}.recently-added-section{margin:2rem 0 2.5rem}.recently-added-home{padding:3rem 0}.recently-added-home h2{text-align:center;margin-bottom:0.5rem}.recently-added-home .section-subtitle{text-align:center;color:var(--text-muted);margin-bottom:1.5rem}.recently-added-home .recently-added-row{margin-bottom:1.5rem}.recently-added-section h3{font-size:1.1rem;font-weight:600;color:var(--text);margin-bottom:1rem}.recently-added-row{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;-webkit-overflow-scrolling:touch}.recently-added-row::-webkit-scrollbar{height:4px}.recently-added-row::-webkit-scrollbar-track{background:var(--bg-surface);border-radius:2px}.recently-added-row::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}.recently-added-card{flex:0 0 220px;scroll-snap-align:start;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px 16px;text-decoration:none;color:var(--text);transition:var(--transition);display:flex;flex-direction:column;gap:6px}.recently-added-card:hover{background:var(--bg-card-hover);border-color:var(--primary);box-shadow:0 0 12px var(--glow);transform:translateY(-2px)}.recently-added-card .ra-title{font-size:0.85rem;font-weight:500;line-height:1.3;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.recently-added-card .ra-artist{font-size:0.75rem;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.recently-added-card .ra-meta{margin-top:auto}.az-letter-bar{position:sticky;top:0;z-index:90;background:var(--bg);border-bottom:1px solid var(--border);padding:10px 0;display:flex;flex-wrap:wrap;justify-content:center;gap:4px;margin-bottom:1.5rem}.az-letter-btn{min-width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:var(--bg-card);border:1px solid var(--border);color:var(--text-muted);font-size:0.8rem;font-weight:600;cursor:pointer;transition:var(--transition);text-decoration:none}.az-letter-btn:hover{background:var(--bg-card-hover);color:var(--text);border-color:var(--primary)}.az-letter-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}.az-letter-btn.disabled{opacity:0.3;pointer-events:none}.letter-group{margin-bottom:2rem}.letter-heading{font-size:1.5rem;font-weight:700;color:var(--primary-light);border-bottom:1px solid var(--border);padding-bottom:6px;margin-bottom:14px;scroll-margin-top:70px}.chord-browse-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:10px}.chord-browse-card{display:flex;align-items:center;gap:12px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 16px;text-decoration:none;color:var(--text);transition:var(--transition);min-width:0;overflow:hidden}.chord-browse-card:hover{background:var(--bg-card-hover);border-color:var(--primary);box-shadow:0 0 8px var(--glow)}.chord-browse-card .cb-info{flex:1;min-width:0}.chord-browse-card .cb-title{font-size:0.85rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chord-browse-card .cb-artist{font-size:0.75rem;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chord-browse-card .cb-badge{flex-shrink:0;font-size:0.65rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;padding:3px 8px;border-radius:10px}.cb-badge.difficulty-easy{background:rgba(34,197,94,0.15);color:#4ade80}.cb-badge.difficulty-moderate{background:rgba(245,158,11,0.15);color:#fbbf24}.cb-badge.difficulty-advanced{background:rgba(239,68,68,0.15);color:#f87171}.difficulty-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:1rem}.difficulty-chip{padding:6px 14px;border-radius:20px;border:1px solid var(--border);background:var(--bg-card);color:var(--text-muted);font-size:0.8rem;font-weight:500;cursor:pointer;transition:var(--transition)}.difficulty-chip:hover{border-color:var(--primary);color:var(--text)}.difficulty-chip.active{background:var(--primary);border-color:var(--primary);color:#fff}.browse-stats{display:flex;align-items:center;gap:1rem;margin-bottom:1rem;font-size:0.85rem;color:var(--text-muted)}.browse-stats strong{color:var(--text)}.browse-no-results{text-align:center;padding:3rem 1rem;color:var(--text-muted)}.browse-no-results p{margin-bottom:1rem;font-size:1rem}@media (max-width:600px){.az-letter-btn{min-width:28px;height:28px;font-size:0.7rem}.chord-browse-grid{grid-template-columns:1fr}.recently-added-card{flex:0 0 180px}.letter-heading{font-size:1.2rem}}.chords-browse-page{padding-top:2rem;padding-bottom:3rem}.chords-browse-header{text-align:center;margin-bottom:2rem}.chords-browse-header h2{font-size:2rem;margin-bottom:0.5rem}.chords-browse-cta{color:var(--text-muted);font-size:0.9rem;margin-top:0.75rem}.chords-browse-cta a{color:var(--primary-light)}.az-jump{position:sticky;top:0;z-index:90;background:var(--bg);border-bottom:1px solid var(--border);padding:10px 0;display:flex;flex-wrap:wrap;justify-content:center;gap:4px;margin-bottom:2rem}.az-jump a{min-width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:var(--bg-card);border:1px solid var(--border);color:var(--text-muted);font-size:0.8rem;font-weight:600;text-decoration:none;transition:var(--transition)}.az-jump a:hover{background:var(--primary);color:#fff;border-color:var(--primary)}.az-section{margin-bottom:2rem}.az-letter{font-size:1.4rem;font-weight:700;color:var(--primary-light);border-bottom:1px solid var(--border);padding-bottom:6px;margin-bottom:10px;scroll-margin-top:60px}.az-list{list-style:none;padding:0;margin:0;columns:2;column-gap:2rem}.az-list li{padding:4px 0;break-inside:avoid;line-height:1.4}.az-list a{color:var(--text);text-decoration:none;transition:color var(--transition)}.az-list a:hover{color:var(--primary-light)}.az-artist{color:var(--text-muted);font-size:0.85em}@media (max-width:768px){.az-list{columns:1}.az-jump a{min-width:28px;height:28px;font-size:0.7rem}}