html{font-size:16px}body{color:#eaeaea;direction:rtl;background:#1a1a2e;margin:0;padding:0;font-family:Segoe UI,Helvetica Neue,Arial,sans-serif}*,:before,:after{box-sizing:border-box}:root{--bg:#f5f6fc;--surface:#fff;--text:#1f2138;--text-muted:#8587a3;--border:#ecedf6;--border-strong:#dcdef0;--accent:#6d5cf0;--accent-2:#9b6cf0;--accent-soft:#efebff;--vote:#ff5d8a;--vote-soft:#ffe9f0;--play:#11b886;--play-soft:#def6ee;--shadow:0 6px 20px #3c327812;--shadow-lg:0 14px 40px #503ca02e;--radius:16px;--radius-lg:22px}html,body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;direction:rtl;min-height:100vh;margin:0;padding:0;font-family:Heebo,Segoe UI,Helvetica Neue,Arial,sans-serif}button{cursor:pointer;border:none;font-family:inherit;transition:transform .12s,background .15s,color .15s,box-shadow .15s}button:active:not(:disabled){transform:scale(.94)}button:disabled{opacity:.45;cursor:not-allowed}a{color:inherit;text-decoration:none}.app{max-width:580px;padding:0 14px calc(40px + env(safe-area-inset-bottom));margin:0 auto}.app-header{z-index:50;background:linear-gradient(var(--bg) 78%, #f5f6fc00);justify-content:space-between;align-items:center;padding:16px 2px 12px;display:flex;position:sticky;top:0}.app-title{letter-spacing:-.01em;background:linear-gradient(120deg, var(--accent), var(--accent-2));color:#0000;-webkit-background-clip:text;background-clip:text;margin:0;font-size:1.7rem;font-weight:800}.conn-chip{background:var(--surface);border:1px solid var(--border);color:var(--text-muted);box-shadow:var(--shadow);border-radius:999px;align-items:center;gap:6px;padding:6px 12px;font-size:.85rem;font-weight:600;display:inline-flex}.conn-dot{background:var(--play);border-radius:50%;width:8px;height:8px;animation:2s infinite pulse;box-shadow:0 0 #11b88680}@keyframes pulse{0%{box-shadow:0 0 #11b88673}70%{box-shadow:0 0 0 7px #11b88600}to{box-shadow:0 0 #11b88600}}.now-hero{background:linear-gradient(120deg, var(--accent), var(--accent-2));color:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);align-items:center;gap:14px;margin:4px 0 18px;padding:18px;display:flex}.now-hero-note{font-size:1.9rem;line-height:1;animation:1.6s ease-in-out infinite bob}@keyframes bob{0%,to{transform:translateY(0)rotate(-4deg)}50%{transform:translateY(-5px)rotate(4deg)}}.now-hero-body{flex:1;min-width:0}.now-hero-label{letter-spacing:.12em;text-transform:uppercase;opacity:.85;font-size:.72rem;font-weight:700}.now-hero-title{white-space:nowrap;text-overflow:ellipsis;margin-top:2px;font-size:1.35rem;font-weight:800;overflow:hidden}.now-hero-artist{opacity:.88;font-size:.9rem}.now-hero-go{opacity:.9;flex-shrink:0;font-size:1.4rem}.search{margin-bottom:16px;position:relative}.search input{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);width:100%;color:var(--text);box-shadow:var(--shadow);direction:rtl;outline:none;padding:14px 46px 14px 16px;font-family:inherit;font-size:1rem;transition:border-color .15s}.search input::placeholder{color:var(--text-muted)}.search input:focus{border-color:var(--accent)}.search-icon{inset-inline-end:16px;color:var(--text-muted);pointer-events:none;font-size:1.05rem;position:absolute;top:50%;transform:translateY(-50%)}.song-list{flex-direction:column;gap:9px;display:flex}.row{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);align-items:center;gap:12px;padding:12px 14px;transition:transform .12s,box-shadow .15s;display:flex}.row:hover{box-shadow:var(--shadow-lg)}.row.now{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft), var(--shadow)}.row.played{opacity:.62}.row-info{flex:1;min-width:0;display:block}.row-title{align-items:center;gap:7px;font-size:1.02rem;font-weight:700;display:flex}.row-title .name{white-space:nowrap;text-overflow:ellipsis;min-width:0;overflow:hidden}.row-artist{color:var(--text-muted);white-space:nowrap;text-overflow:ellipsis;margin-top:1px;font-size:.82rem;overflow:hidden}.played-tag{color:var(--play);background:var(--play-soft);border-radius:999px;flex-shrink:0;padding:2px 7px;font-size:.66rem;font-weight:700}.now-tag{color:#fff;background:var(--accent);border-radius:999px;flex-shrink:0;padding:2px 8px;font-size:.66rem;font-weight:700}.row-actions{flex-shrink:0;align-items:center;gap:8px;display:flex}.vote-pill{background:var(--surface);border:1.5px solid var(--border-strong);min-width:46px;color:var(--text-muted);border-radius:999px;justify-content:center;align-items:center;gap:6px;padding:8px 13px;font-size:.92rem;font-weight:700;display:inline-flex}.vote-pill .heart{font-size:1rem;line-height:1}.vote-pill.voted{background:var(--vote-soft);border-color:var(--vote);color:var(--vote)}.play-btn{background:var(--play-soft);width:44px;height:44px;color:var(--play);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;padding-inline-start:2px;font-size:.95rem;display:flex}.play-btn:hover{background:var(--play);color:#fff}.play-btn.playing{background:var(--play);color:#fff;animation:1.6s infinite playpulse}@keyframes playpulse{0%{box-shadow:0 0 #11b88673}70%{box-shadow:0 0 0 9px #11b88600}to{box-shadow:0 0 #11b88600}}.voters{color:var(--text-muted);border-top:1px dashed var(--border);margin-top:7px;padding-top:7px;font-size:.74rem}.empty{text-align:center;color:var(--text-muted);padding:48px 16px;font-size:.95rem}.welcome-overlay{background:linear-gradient(150deg, var(--accent), var(--accent-2));z-index:999;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.welcome-card{background:var(--surface);border-radius:var(--radius-lg);text-align:center;width:100%;max-width:360px;box-shadow:var(--shadow-lg);direction:rtl;flex-direction:column;gap:14px;padding:32px 26px;display:flex}.welcome-emoji{font-size:2.6rem}.welcome-card h2{margin:0;font-size:1.4rem;font-weight:800}.welcome-card p{color:var(--text-muted);margin:-6px 0 6px;font-size:.92rem}.welcome-card input{background:var(--bg);border:1px solid var(--border-strong);border-radius:var(--radius);color:var(--text);text-align:center;direction:rtl;outline:none;padding:14px 16px;font-family:inherit;font-size:1.05rem}.welcome-card input:focus{border-color:var(--accent)}.welcome-card button{background:linear-gradient(120deg, var(--accent), var(--accent-2));color:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:14px;font-size:1.05rem;font-weight:700}.song-page{max-width:820px;padding:16px 14px calc(48px + env(safe-area-inset-bottom));margin:0 auto}.back-btn{color:var(--accent);align-items:center;gap:6px;margin-bottom:18px;font-size:.95rem;font-weight:700;display:inline-flex}.song-page-title{margin:0 0 4px;font-size:1.7rem;font-weight:800}.song-page-artist{color:var(--text-muted);margin:0 0 18px}.chord-sheet{border-radius:var(--radius);border:1px solid var(--border);width:100%;box-shadow:var(--shadow);background:#fff;display:block}.song-page-error{text-align:center;color:var(--text-muted);padding:70px 20px}.viewer{z-index:200;background:#fff;flex-direction:column;display:flex;position:fixed;inset:0}.viewer-bar{height:54px;padding:0 12px;padding-top:env(safe-area-inset-top);height:calc(54px + env(safe-area-inset-top));border-bottom:1px solid var(--border);background:var(--surface);z-index:2;flex-shrink:0;align-items:center;gap:8px;display:flex}.vbar-btn{background:var(--bg);color:var(--text);border-radius:10px;flex-shrink:0;padding:9px 13px;font-size:.9rem;font-weight:700}.vbar-btn.open{background:var(--play-soft);color:var(--play)}.vbar-btn.close{background:var(--vote-soft);color:var(--vote)}.vbar-btn.take{background:var(--accent-soft);color:var(--accent)}.vbar-title{text-align:center;white-space:nowrap;text-overflow:ellipsis;flex:1;font-weight:800;overflow:hidden}.vbar-follow{color:var(--accent);flex-shrink:0;font-size:.85rem;font-weight:700}.viewer-stage-wrap{touch-action:none;-webkit-user-select:none;user-select:none;background:#f3f2fb;flex:1;position:relative;overflow:hidden}.viewer-stage{position:absolute;top:0;left:0}.viewer-img{pointer-events:none;-webkit-user-drag:none;width:100%;height:auto;display:block}.viewer-hint{z-index:3;box-shadow:var(--shadow);pointer-events:none;border-radius:999px;padding:5px 13px;font-size:.74rem;font-weight:700;position:absolute;top:12px;left:50%;transform:translate(-50%)}.viewer-hint.follow{background:var(--accent-soft);color:var(--accent)}.viewer-hint.present{background:var(--play-soft);color:var(--play)}.viewer-zoom{bottom:calc(18px + env(safe-area-inset-bottom));background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-lg);z-index:3;border-radius:999px;gap:8px;padding:6px;display:flex;position:absolute;left:50%;transform:translate(-50%)}.viewer-zoom button{background:var(--bg);width:48px;height:48px;color:var(--text);border-radius:50%;justify-content:center;align-items:center;font-size:1.4rem;font-weight:700;display:flex}.viewer-zoom button:active{background:var(--accent-soft)}.qa-overlay{z-index:300;background:var(--bg);padding-top:env(safe-area-inset-top);flex-direction:column;display:flex;position:fixed;inset:0}.qa-head{border-bottom:1px solid var(--border);background:var(--surface);flex-shrink:0;align-items:center;gap:8px;padding:12px;display:flex}.qa-title{text-align:center;flex:1;font-weight:800}.qa-banner{border-radius:var(--radius);text-align:center;flex-shrink:0;margin:12px;padding:12px 14px;font-size:.92rem;font-weight:700}.qa-banner.ok{background:var(--play-soft);color:var(--play)}.qa-banner.warn{color:#b06b00;background:#fff2da}.qa-banner.neutral{background:var(--accent-soft);color:var(--accent)}.qa-idle{opacity:.8;font-weight:600}.qa-grid{flex:1;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;padding:0 12px 24px;display:grid;overflow-y:auto}.qa-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:8px}.qa-card.idle{opacity:.6}.qa-thumb{aspect-ratio:4/3;object-fit:contain;background:#f3f2fb;border-radius:10px;width:100%;display:block}.qa-thumb.placeholder{color:var(--text-muted);justify-content:center;align-items:center;font-size:.8rem;display:flex}.qa-name{margin-top:6px;font-size:.9rem;font-weight:700}.qa-meta{color:var(--text-muted);white-space:nowrap;text-overflow:ellipsis;font-size:.76rem;overflow:hidden}.qa-view{color:var(--accent);font-weight:700}.app-footer{color:var(--text-muted);justify-content:center;align-items:center;gap:12px;padding:28px 0 10px;display:flex}.app-version{opacity:.7;font-size:.74rem}.reset-link{color:var(--text-muted);text-underline-offset:2px;background:0 0;border-radius:8px;padding:4px 8px;font-size:.74rem;text-decoration:underline}.reset-link:hover{color:var(--vote)}