*{box-sizing:border-box;margin:0;padding:0}:root{--bg-main:#000;--bg-card:#ffffff08;--bg-soft:#ffffff0d;--border:#2a2a2a;--text-main:#ccc;--text-muted:#a6a6a6;--accent:#ccc;--accent-dark:#0a0a0a;--success:#8dd5a5;--danger:#f6a7a7}body{background:var(--bg-main);color:var(--text-main);font-family:Saira,sans-serif;line-height:1.5}.wrapper{background:#000;justify-content:center;align-items:flex-start;min-height:100vh;padding:20px;display:flex}.card{background:var(--bg-card);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);text-align:center;border:none;border-radius:12px;flex-direction:column;width:100%;max-width:760px;padding:24px;display:flex;overflow:hidden}.navbar{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:18px;display:grid}.navButton{border:1px solid var(--border);color:var(--text-muted);cursor:pointer;background:0 0;border-radius:10px;padding:12px;font-size:14px;font-weight:600;transition:all .2s}.navButton:hover:not(:disabled){border-color:var(--accent);background:var(--accent);color:#000}.navButton.active{border-color:var(--accent);background:var(--accent);color:var(--accent-dark)}.title{margin-bottom:10px;font-size:clamp(26px,4vw,34px);font-weight:700;line-height:1.2}.subtitle{color:var(--text-muted);margin-bottom:20px;font-size:14px;line-height:1.6}.input{width:100%;color:var(--text-main);background:#00000040;border:1px solid #404040;border-radius:10px;outline:none;padding:14px;font-size:15px;transition:border-color .2s}.input:focus{border-color:var(--accent)}.button{border:1px solid var(--accent);background:var(--accent);width:100%;color:var(--accent-dark);cursor:pointer;border-radius:10px;margin-top:12px;padding:12px;font-size:15px;font-weight:700;transition:all .2s}.button:hover:not(:disabled){color:var(--accent);background:0 0}.button:disabled,.songOption:disabled,.navButton:disabled{cursor:not-allowed;opacity:.55}.note{color:#bf8f8f;margin-top:20px;font-size:13px}.songListWrapper{text-align:left;border:1px solid var(--border);background:var(--bg-soft);border-radius:10px;max-height:280px;margin-top:16px;padding:12px;overflow:hidden}.songListTitle{color:var(--text-muted);letter-spacing:.04em;text-transform:uppercase;margin-bottom:10px;font-size:13px}.songList{gap:8px;max-height:228px;display:grid;overflow-y:auto}.songOption{width:100%;color:var(--text-main);text-align:left;cursor:pointer;background:#101010;border:1px solid #333;border-radius:8px;align-items:flex-start;gap:8px;padding:10px;transition:all .18s;display:flex}.songOption:hover:not(:disabled){border-color:#666;transform:translateY(-1px)}.songOption.selected{border-color:var(--accent);background:#1b1b1b}.songOptionId{color:var(--text-muted);min-width:26px;font-weight:700}.songOptionLabel{word-break:break-word;flex:1;line-height:1.35}.progressContainer{align-items:center;gap:10px;margin-top:16px;display:flex}.progressBarWrapper{background:#242424;border-radius:999px;flex:1;height:8px;overflow:hidden}.progressBarFill{background:var(--accent);border-radius:999px;width:0;height:100%;transition:width .25s}.progressPercentage{text-align:right;min-width:42px;color:var(--text-main);font-size:13px;font-weight:700}.loaderWrapper{justify-content:center;align-items:center;gap:10px;margin-top:12px;display:flex}.spinner{border:2px solid #333;border-top:2px solid var(--accent);border-radius:50%;width:22px;height:22px;animation:.8s linear infinite spin}.loadingText{color:var(--text-muted);font-size:13px}.status{min-height:20px;color:var(--success);margin-top:14px;font-size:13px;line-height:1.4}.seoSections{gap:12px;width:100%;margin-top:4px;display:grid}.seoCard{border:1px solid var(--border);text-align:left;background:#ffffff05;border-radius:12px;padding:16px}.seoCard h2{margin-bottom:8px;font-size:18px}.seoCard p{color:var(--text-muted);font-size:14px}.seoList{gap:6px;margin-top:10px;padding-left:18px;display:grid}.seoList li{color:var(--text-main);font-size:14px}.platformLine{color:var(--text-main);margin-top:10px;font-weight:600}.faqItem{border-top:1px solid #242424;margin-top:10px;padding-top:10px}.faqItem summary{cursor:pointer;font-size:14px;font-weight:600}.faqItem p{color:var(--text-muted);margin-top:8px;font-size:14px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (width<=640px){.wrapper{padding:12px}.card{padding:18px}.navbar{gap:8px}.navButton{padding:10px;font-size:13px}.subtitle{font-size:13px}.progressContainer{flex-direction:column;align-items:stretch;gap:6px}.progressPercentage{text-align:center}.seoCard h2{font-size:16px}}