:root{--bg:#0a0e15;--bg2:#101622;--card:#141d2b;--line:#26344a;--text:#eef3f9;--muted:#8a9bb0;--accent:#3ad7c8;--accent2:#6a8dff;--accent3:#9b6cff;--star:#ffcb3d;--danger:#ff5a72;--r-sm:8px;--r-md:12px;--r-lg:14px;--r-xl:20px;--r-pill:999px;--sh1:0 6px 22px rgba(0,0,0,.22);--sh2:0 14px 40px rgba(0,0,0,.35);--sh3:0 24px 60px rgba(0,0,0,.5)}
  [data-theme="light"]{--bg:#eaeef5;--bg2:#fff;--card:#fff;--line:#e3e9f2;--text:#0f1b2a;--muted:#566780;--accent:#0d9488;--accent2:#3358d4;--accent3:#6d47f0;--star:#f5a623}
  /* ==== מצב בהיר: כותרת בהירה אמיתית (סבב UX 10.7) — עד עכשיו ה-header נשאר כהה והדף נראה חצוי ==== */
  [data-theme="light"] header{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 76%,#fff),color-mix(in srgb,var(--accent2) 64%,#fff) 50%,color-mix(in srgb,var(--accent3) 72%,#fff));background-size:240% 240%}
  [data-theme="light"] header::before{background:radial-gradient(circle at 80% -10%,rgba(255,255,255,.16),transparent 45%),radial-gradient(circle at 0% 120%,rgba(255,255,255,.1),transparent 40%)}
  [data-theme="light"] header h1,[data-theme="light"] header .brandtitle{color:#122036;text-shadow:none}
  [data-theme="light"] header .brand small{color:#3c4c63}
  [data-theme="light"] .brand .lg4eq,[data-theme="light"] .brand .lg4arr{fill:var(--accent2)}
  [data-theme="light"] .brand .lg4arr path{stroke:var(--accent2)}
  [data-theme="light"] .brandlink:focus-visible{outline-color:var(--accent)}
  [data-theme="light"] header .infobar{background:rgba(255,255,255,.62);color:#41526b}
  [data-theme="light"] header .infobar .ib-strong{color:#122036}
  [data-theme="light"] .online{background:rgba(255,255,255,.66);border-color:rgba(18,32,54,.14);color:#122036}
  [data-theme="light"] .cornericon{background:rgba(255,255,255,.82);color:#2a3648;border-color:rgba(18,32,54,.16);box-shadow:0 3px 10px rgba(18,32,54,.14)}
  [data-theme="light"] .cornericon:hover{background:#fff}
  [data-theme="light"] #syncBtn.cornericon{background:var(--accent);color:#fff;border-color:#fff}
  [data-theme="light"] .notes span{color:rgba(30,54,92,.16);text-shadow:none}
  /* פינה תחתונה (סבב UX 10.7): ההרמה-מעל-העוגיות נעשית ב-placePops; מגבלת-רוחב הבאנר במובייל — ליד כללי ה-popdock */
  [data-accent="purple"]{--accent:#b06bff;--accent2:#ec4899;--accent3:#f472b6}
  [data-accent="gold"]{--accent:#f6b53d;--accent2:#ff7a59;--accent3:#ff5e7a}
  [data-accent="green"]{--accent:#34d399;--accent2:#3b82f6;--accent3:#22d3ee}
  [data-accent="rose"]{--accent:#ff6b9d;--accent2:#a855f7;--accent3:#7c5cff}
  *{box-sizing:border-box}
  :focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  /* אזור-הכרזה לקורא-מסך: חייב להישאר בעץ הנגישות, ולכן לא display:none ולא visibility (16.8) */
  .visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
  /* ===== כיוון: כל הכללים הפיזיים למטה נכתבו לעברית בלבד (היה כלל אחד ויחיד מותנה-כיוון
     בכל הקובץ), ולכן באנגלית הכותרת נחתכה באמצע מילה ב-162px. אלה העקיפות ל-LTR. ===== */
  [dir="ltr"] header{text-align:left}
  [dir="ltr"] .brand{margin-left:0;margin-right:auto}
  /* הסלוגן העברי נמתח בטריק width:0 + min-width:100% + justify. באנגלית הוא ארוך יותר
     מהכותרת, ועם nowrap הוא פשוט נחתך באמצע מילה (נמדד 350px לתוך 171px). ב-LTR נותנים לו
     לרדת שורה במקום להיחתך. */
  [dir="ltr"] .brand small{text-align:start;text-align-last:auto;white-space:normal;width:auto;min-width:0;max-width:min(92vw,430px)}
  [dir="ltr"] .onlinewrap{left:auto;right:12px}
  [dir="ltr"] .bmpop{right:auto;left:12px}
  .skiplink{position:absolute;top:0;inset-inline-start:0;transform:translateY(-120%);background:var(--accent);color:#fff;padding:10px 18px;border-radius:0 0 12px 0;font-weight:700;z-index:1000;transition:transform .15s;text-decoration:none}
  .skiplink:focus{transform:translateY(0)}
  @media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
  .catpop,.tplist,.acbox,.menu-wide,.artistlist,.radiolist,.mylist,.bmlist,.admmlist,.admtabbody{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
  .catpop::-webkit-scrollbar,.tplist::-webkit-scrollbar,.acbox::-webkit-scrollbar,.menu-wide::-webkit-scrollbar,.artistlist::-webkit-scrollbar,.radiolist::-webkit-scrollbar,.mylist::-webkit-scrollbar,.bmlist::-webkit-scrollbar,.admmlist::-webkit-scrollbar,.admtabbody::-webkit-scrollbar{width:8px;height:8px}
  .catpop::-webkit-scrollbar-track,.tplist::-webkit-scrollbar-track,.acbox::-webkit-scrollbar-track,.menu-wide::-webkit-scrollbar-track,.artistlist::-webkit-scrollbar-track,.radiolist::-webkit-scrollbar-track,.mylist::-webkit-scrollbar-track,.bmlist::-webkit-scrollbar-track,.admmlist::-webkit-scrollbar-track,.admtabbody::-webkit-scrollbar-track{background:transparent}
  .catpop::-webkit-scrollbar-thumb,.tplist::-webkit-scrollbar-thumb,.acbox::-webkit-scrollbar-thumb,.menu-wide::-webkit-scrollbar-thumb,.artistlist::-webkit-scrollbar-thumb,.radiolist::-webkit-scrollbar-thumb,.mylist::-webkit-scrollbar-thumb,.bmlist::-webkit-scrollbar-thumb,.admmlist::-webkit-scrollbar-thumb,.admtabbody::-webkit-scrollbar-thumb{background:var(--line);border-radius:var(--r-sm)}
  .catpop::-webkit-scrollbar-thumb:hover,.tplist::-webkit-scrollbar-thumb:hover,.acbox::-webkit-scrollbar-thumb:hover,.menu-wide::-webkit-scrollbar-thumb:hover,.artistlist::-webkit-scrollbar-thumb:hover,.radiolist::-webkit-scrollbar-thumb:hover,.mylist::-webkit-scrollbar-thumb:hover,.bmlist::-webkit-scrollbar-thumb:hover,.admmlist::-webkit-scrollbar-thumb:hover,.admtabbody::-webkit-scrollbar-thumb:hover{background:var(--accent)}
  body{margin:0;font-family:'Rubik','Segoe UI',system-ui,Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.5;-webkit-font-smoothing:antialiased;padding-bottom:0;overflow-x:clip;transition:background-color .25s,color .25s}
  body.playing{padding-bottom:122px}
  header{background:linear-gradient(135deg,var(--accent),var(--accent2) 50%,var(--accent3));background-size:240% 240%;animation:meshmove 14s ease infinite;padding:8px 16px 6px;text-align:right;color:#fff;position:relative;overflow:hidden}
  header::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% -10%,rgba(255,255,255,.28),transparent 45%),radial-gradient(circle at 0% 120%,rgba(255,255,255,.2),transparent 40%)}
  @keyframes meshmove{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
  .brand{display:flex;flex-direction:column;width:fit-content;margin-left:auto;margin-right:0;position:relative}
  /* לוגו חדש: אקולייזר + חץ הורדה */
  .bv4row{display:flex;align-items:center;gap:12px;padding:4px 2px}
  /* לחיצה על הלוגו = חזרה/רענון לדף הבית */
  .brandlink{text-decoration:none;color:inherit;cursor:pointer;transition:transform .12s}
  .brandlink:active{transform:scale(.98)}
  .brandlink:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:var(--r-md)}
  .lg4{width:58px;height:62px;display:flex;align-items:center;justify-content:center;flex:none}
  .lg4 svg{width:50px;height:56px;overflow:visible}
  .lg4eq rect{transform-box:fill-box;transform-origin:50% 50%;animation:lg4eqb 2s ease-in-out infinite}
  .lg4eq rect:nth-of-type(1){animation-delay:-.25s}
  .lg4eq rect:nth-of-type(2){animation-delay:-.8s;animation-duration:2.15s}
  .lg4eq rect:nth-of-type(3){animation-delay:-1.3s;animation-duration:1.75s}
  .lg4eq rect:nth-of-type(4){animation-delay:-.55s;animation-duration:2.3s}
  @keyframes lg4eqb{0%,100%{transform:scaleY(.55)}50%{transform:scaleY(1)}}
  .lg4arr{animation:lg4bob 1.7s ease-in-out infinite}
  @keyframes lg4bob{0%,100%{transform:translateY(-1px)}50%{transform:translateY(5px)}}
  .bv4txt{display:flex;flex-direction:column;align-items:stretch;gap:0}
  /* מותג קטן בסרגל הדביק — נשאר תמיד למעלה */
  .toolbrand{display:none;align-items:center;gap:8px;text-decoration:none;color:var(--text);font-weight:800;font-size:1.05rem;white-space:nowrap;animation:fadein .3s ease}
  .toolbrand.show{display:inline-flex}
  @keyframes fadein{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
  .lg4.mini{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--accent),var(--accent2));display:inline-flex;align-items:center;justify-content:center;box-shadow:0 4px 12px color-mix(in srgb,var(--accent) 50%,transparent)}
  .lg4.mini svg{width:24px;height:27px}
  header h1,header .brandtitle{margin:0;font-size:2rem;font-weight:800;letter-spacing:0;line-height:1.05;color:#fff;font-family:'Rubik','Segoe UI',sans-serif;text-shadow:0 2px 0 rgba(0,0,0,.12),0 6px 16px rgba(0,0,0,.3)}
  .toolbrand{font-family:'Rubik','Segoe UI',sans-serif}
  .brand small{display:block;font-size:13.1px;font-weight:700;letter-spacing:0;opacity:.96;color:#fff;margin:3px 0 0;white-space:nowrap;width:0;min-width:100%;max-width:100%;text-align:justify;text-align-last:justify}
  header p{margin:10px 0 0;opacity:.96;font-size:1.02rem;position:relative;font-weight:500}
  .onlinewrap{position:absolute;top:12px;left:12px;z-index:2;display:flex;flex-direction:column;gap:7px;align-items:flex-start}
  .online{background:rgba(0,0,0,.28);padding:4px 10px;border-radius:var(--r-pill);font-size:.72rem;display:flex;align-items:center;gap:7px;border:1px solid rgba(255,255,255,.18)}
  .cornericons{display:flex;gap:7px;align-items:center}
  .cornericon{all:unset;cursor:pointer;width:31px;height:31px;border-radius:50%;background:rgba(0,0,0,.4);color:#fff;border:1px solid rgba(255,255,255,.32);display:flex;align-items:center;justify-content:center;font-size:.92rem;box-shadow:0 3px 10px rgba(0,0,0,.35);transition:all .12s}
  .cornericon:hover{transform:scale(1.1);background:rgba(0,0,0,.6)}
  #syncBtn.cornericon{background:var(--accent);border-color:rgba(255,255,255,.55)}
  #syncBtn.cornericon.on{background:#34d399;border-color:#fff;box-shadow:0 0 10px rgba(52,211,153,.85)}
  /* מובייל: הלוגו נשאר בפינה הימנית-עליונה, ובפינה השמאלית "מחוברים" + 3 האייקונים — זה לצד זה בשורה אחת. max-width שומר על הלוגו שלא יחפוף על האשכול, ופס-המידע יורד שורה במקום להיחתך */
  @media(max-width:560px){
    header{padding-top:8px}
    .onlinewrap{position:absolute;top:10px;left:10px;flex-direction:column;align-items:flex-start;gap:6px;width:auto;z-index:3}
    .online{padding:3px 8px;font-size:.62rem}
    .cornericon{width:40px;height:40px;font-size:.95rem}
    .brand{max-width:calc(100% - 122px)}
    header h1,header .brandtitle{font-size:1.45rem}
    .brand small{font-size:10.2px}
    .lg4{width:44px;height:48px}
    .lg4 svg{width:38px;height:43px}
    .bv4row{gap:8px}
    .infobar .ib-item{white-space:normal}
  }
  .infobar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:5px 0;padding:9px 14px;background:var(--bg2);border-bottom:1px solid var(--line);font-size:.74rem;color:var(--muted);line-height:1.4}
  .ib-item{white-space:nowrap}
  .ib-strong{color:var(--text);font-weight:600}
  .infobar .sep{font-style:normal;opacity:.35;margin:0 8px}
  header .infobar{background:rgba(0,0,0,.14);border-radius:var(--r-pill);border-bottom:0;color:rgba(255,255,255,.85);margin:0;padding:3px 15px;position:absolute;left:50%;bottom:5px;top:auto;transform:translateX(-50%);width:max-content;max-width:55%;z-index:1}
  header .infobar .ib-strong{color:#fff}
  header .infobar .sep{opacity:.55}
  /* מתחת ל-1300px: פס-המידע (תאריך/פרשה/דף/שערים/מזג-אוויר) יורד מתחת ללוגו במקום לרחף ממורכז — אחרת קצהו הימני חופף על הלוגו/הכותרת במסך צר */
  /* ‼️ 18.8 מאוחר (משוב משתמש: "למה הפס הלבן?") — ‏width:auto הפך את הכדור לפס לבן שנמתח
     מקצה לקצה מתחת ללוגו, וזה מה שנראה כמו רצועה זרה על הגרדיאנט. fit-content מחזיר אותו
     לכדור שמחבק את הטקסט וממורכז, בדיוק כמו מעל 1300px — ועדיין נשבר לשורות במסך צר. */
  @media(max-width:1300px){header .infobar{position:static;transform:none;width:fit-content;max-width:100%;margin:4px auto 0}}
  @media(max-width:560px){.infobar{font-size:.72rem;padding:8px 10px}.infobar .sep{margin:0 6px}}
  .dot{width:9px;height:9px;border-radius:50%;background:#4ade80;box-shadow:0 0 10px #4ade80;animation:pulse 1.6s infinite}
  /* ‼️ 16.8 — קישוטי-הכותרת (הנקודה הפועמת, התווים המרחפים) רצו ללא הפסקה גם כשהכותרת
     גוללה מזמן מחוץ למסך: 1,227ms של חישוב-סגנון על 10 שניות של חוסר-מעש במובייל, ~15%
     מעבד ברציפות. עכשיו הן קופאות כשהן לא נראות וכשהלשונית ברקע. */
  .anpause,.anpause *{animation-play-state:paused!important}
  /* חיווי "טיימר שינה פעיל" — מחלקה נפרדת מ-.on, שמסמנת "החלון פתוח" ונמחקת בסגירתו (16.8) */
  .chip.timing{border-color:var(--accent);color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
  /* "שירים נוספים" בעמוד-שיר — קישורים פנימיים אמיתיים ב-HTML (גילוי-זחילה), לא רק בלקוח */
  .related{max-width:1100px;margin:26px auto 8px;padding:0 16px}
  .related h2{font-size:1.05rem;margin:0 0 10px}
  .related ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
  .related li a{display:inline-block;background:var(--card);border:1px solid var(--line);border-radius:var(--r-pill);padding:7px 13px;font-size:.85rem;color:var(--text);text-decoration:none;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .related li a:hover{border-color:var(--accent);color:var(--accent)}
  .relmore{margin:12px 0 0;font-size:.85rem}
  .relmore a{color:var(--accent)}
  @keyframes pulse{50%{opacity:.35}}
  /* ‼️ סולם השכבות (16.8) — כל z-index באתר נמצא כאן, בסדר עולה:
     20 נגן-צף · 30 פס-הסכמה · 60 תפריטי-כרטיס · 110 פרומו (popdock) · 117/118 כפתורים-צפים ·
     150 סרגל-הניווט · 155 השלמה-אוטומטית · 160 פופאפי-סרגל · 190 נגן-מסך-מלא · 200 מודלים ·
     260 הוספה-לפלייליסט · 300 טוסט · 400 סיור.
     מה שהשתנה ולמה: הסרגל היה 5 — הוא כל התפריט במובייל, והפרומו (140) כיסה 7 מ-16 הפריטים
     ב-390px ו-12 מ-16 ב-360px. הפרומו ירד מתחת לסרגל ומתחת לפופאפים, כי ב-140 מול 120 הוא
     בלע לחיצות: "סיור באתר" ו"כיבוי טיימר שינה" לא נפתחו עד שסגרו את הבאנר (נמדד בלחיצות אמיתיות). */
  /* סרגל פעולות — כפתורי פיל ממורכזים; נשברים ל-2 שורות במסך צר, קטנים מאוד שהכל ייכנס */
  .toolbar{position:sticky;top:0;z-index:150;background:color-mix(in srgb,var(--bg2) 90%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);display:flex;gap:5px;padding:7px 8px;flex-wrap:wrap;align-items:center;justify-content:center}
  .searchrow{display:flex;justify-content:center;align-items:center;gap:8px;padding:9px 12px 2px;flex-wrap:wrap}
  /* 13.7 בקשת משתמש: חיפוש בולט יותר — אבל עדין, בלי לחרוג משפת-העיצוב ("לא חריג") */
  #q{width:min(300px,58%);background:var(--card);color:var(--text);border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));border-radius:var(--r-md);padding:10px 15px;font-size:.9rem;line-height:1.2;font-family:inherit;outline:none;transition:border-color .15s,box-shadow .15s}
  #q:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
  #q:focus{border-color:var(--accent)}
  .chip{cursor:pointer;background:var(--card);color:var(--text);border:1px solid var(--line);border-radius:var(--r-pill);padding:8px 14px;min-width:112px;justify-content:center;text-align:center;font-size:.85rem;font-weight:700;font-family:inherit;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;transition:transform .12s,box-shadow .12s,border-color .12s,color .12s;user-select:none}
  .chip:hover{transform:scale(1.06);border-color:var(--accent);color:var(--accent)}
  /* סגנון 1 — פילים צבעוניים קומפקטי: אייקון קו צבעוני במקום אימוג'י */
  .toolbar .chip{min-width:0;padding:6px 11px;gap:6px;font-size:.82rem}
  @media(max-width:560px){.toolbar .chip{padding:6px 9px;gap:5px;font-size:.78rem}}
  /* סבב UX 10.7: קיבוץ ניווט בדסקטופ — "שלי" (אישי) ו"כלים" (הגדרות) בתפריטים; במובייל שקוף (display:contents)
     כדי שכיווץ-הסרגל הקיים ימשיך לעבוד בדיוק כמו קודם */
  .navgrp{position:relative;display:inline-flex}
  .gcaret{font-size:.68em;opacity:.75;margin-inline-start:3px}
  .grpmenu{position:absolute;top:calc(100% + 8px);inset-inline-start:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:6px;box-shadow:0 14px 34px rgba(0,0,0,.28);display:none;flex-direction:column;gap:3px;z-index:110;min-width:200px}
  .navgrp.open .grpmenu{display:flex;animation:fadein .18s ease}
  .navgrp.open .grpbtn{border-color:var(--accent);color:var(--accent)}
  /* הכפתור עצמו נצבע (.on) ומציג את שם-הפריט הנבחר — ראו paintGrpSel; ה-:has נשאר כגיבוי לפני שה-JS רץ */
  .navgrp:has(.chip.on) .grpbtn{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
  .grpbtn.on{box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 45%,transparent)}
  .grpbtn .gsel{font-weight:800;max-width:11ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .toolToggle{position:relative}
  .toolToggle.hason::after{content:'';position:absolute;top:3px;inset-inline-end:5px;width:8px;height:8px;border-radius:50%;background:var(--accent2);box-shadow:0 0 0 2px var(--card)}
  .grpmenu .chip{width:100%;justify-content:flex-start;border:0;background:transparent;border-radius:10px;min-width:0}
  .grpmenu .chip:hover{transform:none;background:color-mix(in srgb,var(--accent) 12%,transparent)}
  @media(max-width:560px){.grpbtn{display:none}.navgrp,.grpmenu{display:contents}}
  .toolToggle{display:none;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border-color:transparent;gap:6px}
  .toolToggle .ttico{font-size:1.05rem;line-height:1}
  /* min-height 40: הצ'יפים נמדדו 31–32px גובה במובייל — מתחת לכל תקן מגע מקובל (16.8) */
  @media(max-width:560px){.chip{padding:7px 11px;font-size:.8rem;gap:6px;min-width:92px;min-height:40px}.toolbar{gap:6px;padding:7px 7px}
    .toolToggle{display:inline-flex!important;min-width:auto;flex:0 0 auto;padding:7px 16px}
    #toolbar.collapsed{justify-content:center;gap:14px;padding:8px 10px}
    #toolbar.collapsed .toolbrand{margin:0}
    #toolbar.collapsed .chip:not(.toolToggle){display:none}}
  /* פופאפ קטן לכפתורי שמיעה/טיימר/עיצוב (במקום תפריט נגלל שנחתך) */
  /* תבנית אחידה לכל פאנל נפתח: כותרת + תיאור + ✕ */
  .pophead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 2px}
  .pophead b{font-size:.95rem}
  .popx{flex:0 0 auto;width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--bg2);color:var(--muted);border:1px solid var(--line);cursor:pointer;font-size:.8rem;font-weight:700;transition:color .12s,border-color .12s,background .12s}
  .popx:hover{color:#fff;background:var(--accent);border-color:var(--accent)}
  .popdesc{margin:0 0 10px;color:var(--muted);font-size:.78rem;line-height:1.5}
  /* max-height+גלילה: ב-360×640 חלק מהפופאפים חרגו מתחת לקצה המסך ולא היה איך להגיע לתחתיתם (16.8) */
  .toolpop{position:fixed;top:104px;left:50%;transform:translateX(-50%);background:var(--card);border:1px solid var(--line);border-radius:16px;padding:9px;box-shadow:0 16px 44px rgba(0,0,0,.42);z-index:160;display:none;flex-direction:column;gap:3px;min-width:238px;max-width:92vw;max-height:calc(100dvh - 118px);overflow-y:auto;overscroll-behavior:contain;animation:fadein .18s ease}
  .toolpop.show{display:flex}
  .toolpop>button{background:var(--bg2);color:var(--text);border:1px solid var(--line);border-radius:10px;padding:11px 13px;font-size:.92rem;font-family:inherit;cursor:pointer;text-align:start;font-weight:600}
  .toolpop>button:hover{border-color:var(--accent)}
  .toolpop>button.m_radio{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 16%,var(--bg2)),var(--bg2));font-weight:700}
  .toolpop>button.m_radio.on{background:linear-gradient(135deg,#ff3b5c,#9b6cff);color:#fff;border-color:transparent}
  /* 📅 סינון לפי שנה — select בסגנון צ'יפ */
  /* 🎯 כפתור רדיו אישי בתוך התערובת היומית */
  /* ✍️ הצעת תיקון-כתיב בהשלמה האוטומטית */
  .acrow.acfuzzy{color:var(--muted)}
  .acfz{font-size:.68rem;font-weight:700;color:var(--accent);background:color-mix(in srgb,var(--accent) 13%,transparent);padding:1px 8px;border-radius:var(--r-pill);margin-inline-start:7px}
  .toolpop .sleeplbl{font-size:.8rem;color:var(--muted);padding:4px 4px 1px}
  .toolpop .sleepinput{display:flex;gap:6px}
  .toolpop .sleepinput input{flex:1;min-width:0;background:var(--bg2);color:var(--text);border:1px solid var(--line);border-radius:10px;padding:9px 11px;font-family:inherit;outline:none}
  .toolpop .sleepinput button{flex:0 0 auto;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border:0;border-radius:10px;padding:0 14px;font-weight:700;cursor:pointer;font-family:inherit}
  .chip.on{background:linear-gradient(135deg,var(--accent),var(--accent2),var(--accent3));border-color:transparent;color:#fff;box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 45%,transparent)}
  /* בעמוד פלייליסט כפתור "פלייליסטים" נראה לחוץ (CSS — כדי שסנכרון מצב-לחוץ של המודל לא ידרוס) */
  body.plmode #plChip{background:linear-gradient(135deg,var(--accent),var(--accent2),var(--accent3));border-color:transparent;color:#fff;box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 45%,transparent)}
  .chip.on:hover{color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2),var(--accent3));border-color:transparent}
  .sortbtn .liwrap svg{stroke:currentColor}
  /* באנר "חזרה לכל השירים" (עמוד שיר) — מרחף תחתון, באותו סגנון של פס סינון פעיל */
  /* "לכל השירים" בדף שיר — תיבה רגילה מעל הכרטיס, לא כפתור מרחף */
  .banner{margin:14px auto 0;padding:0;max-width:92%;display:flex;align-items:center;justify-content:center}
  .banner a{display:inline-flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--accent);border-radius:var(--r-pill);padding:9px 18px;box-shadow:0 6px 20px color-mix(in srgb,var(--accent) 24%,transparent);color:var(--accent);font-weight:700;text-decoration:none}
  /* פס הסינון הפעיל (זמר/קטגוריה) — באנר מרחף שנשאר עם המשתמש בגלילה */
  /* פס זמר/קטגוריה — תיבה רגילה מעל הכרטיסים (כמו תיבת פלייליסט), לא כפתור מרחף */
  .artistbar{margin:14px auto 0;padding:0;max-width:92%;display:none;align-items:center;justify-content:center}
  .artistbar.show{display:flex}
  .fpill{display:inline-flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--accent);border-radius:var(--r-pill);padding:6px 7px 6px 15px;box-shadow:0 6px 22px color-mix(in srgb,var(--accent) 28%,transparent);max-width:92vw}
  .fpill b{font-size:.98rem;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .fpx{flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--bg2);color:var(--muted);text-decoration:none;font-size:.82rem;font-weight:700;border:1px solid var(--line);transition:color .12s,border-color .12s,background .12s}
  .fpx:hover{color:#fff;background:var(--accent);border-color:var(--accent)}
  /* --- תגיות על כרטיס --- */
  .tags{display:flex;flex-wrap:wrap;gap:6px;margin:-2px 0 11px}
  .tagchip{font-size:.72rem;font-weight:700;padding:3px 10px;border-radius:var(--r-pill);background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);text-decoration:none;white-space:nowrap;cursor:pointer;transition:transform .1s,background .12s}
  .tagchip:hover{background:color-mix(in srgb,var(--accent) 22%,transparent);transform:translateY(-1px)}
  /* --- לוח קטגוריות --- */
  .catpop{min-width:300px;max-width:94vw;width:540px;max-height:72vh;overflow:auto}
  .catpop .catpophead{font-weight:800;font-size:.95rem;text-align:center;padding:2px 4px 9px;color:var(--text)}
  .catpop #catSearch{width:100%;box-sizing:border-box;background:var(--bg2);color:var(--text);border:1px solid var(--line);border-radius:11px;padding:9px 13px;font-family:inherit;font-size:.9rem;outline:none;margin-bottom:11px}
  .catpop #catSearch:focus{border-color:var(--accent)}
  .catgroups{display:flex;flex-direction:column;gap:14px}
  .catgrp{display:flex;flex-direction:column;gap:7px}
  .catgname{font-size:.78rem;font-weight:800;color:var(--muted);letter-spacing:.3px}
  /* ‼️ 18.8 (משוב גולש: "שיפתח סרגל רשת מעוצב של כל הקטגוריות") — היה עטיפת-גלולות
     בשורות משתנות, וקשה היה לסרוק בעין 68 קטגוריות. עכשיו רשת אחידה: אריח לכל קטגוריה,
     אימוג'י גדול למעלה, שם, ומונה. auto-fill כדי שמספר העמודות ייגזר מרוחב החלון.
     ‼️ נשמר בדיוק אותו class ואותו data-tag — paintTagbar וההאזנה המואצלת נשענים עליהם. */
  .catchips{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px}
  .catchip{cursor:pointer;font-size:.78rem;font-weight:700;padding:11px 8px 9px;border-radius:var(--r-md);background:var(--bg2);color:var(--text);border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:4px;text-align:center;line-height:1.3;min-height:86px;transition:transform .1s,border-color .12s,background .12s}
  .catchip .liwrap,.catchip .e3d{font-size:1.5rem;width:1.5em;height:1.5em}
  .catchip i{font-style:normal;font-size:.68rem;color:var(--muted);background:color-mix(in srgb,var(--text) 8%,transparent);padding:1px 8px;border-radius:var(--r-pill);margin-top:auto}
  @media(max-width:560px){.catchips{grid-template-columns:repeat(auto-fill,minmax(94px,1fr));gap:7px}.catchip{min-height:78px;font-size:.72rem}}
  .catchip:hover{border-color:var(--accent);transform:translateY(-1px)}
  .catchip.on{background:var(--accent);color:#fff;border-color:var(--accent)}
  .catchip.on i{color:#fff;background:rgba(255,255,255,.25)}
  .catload{color:var(--muted);font-size:.85rem;text-align:center;padding:6px}
  /* --- בורר קטגוריה לשיר --- */
  #tagPick input[type=search],#tagPick input[type=text]{width:100%;background:var(--bg2);color:var(--text);border:1px solid var(--line);border-radius:11px;padding:10px 14px;font-family:inherit;font-size:.9rem;outline:none;margin-bottom:8px}
  .tpctx{font-size:.85rem;color:var(--muted);font-weight:600;margin-bottom:8px;min-height:1px}
  .tplist{display:flex;flex-direction:column;gap:0;max-height:46vh;overflow:auto;border:1px solid var(--line);border-radius:var(--r-md)}
  .tprow{display:flex;align-items:center;gap:9px;padding:11px 14px;border-bottom:1px solid var(--line);cursor:pointer;font-size:.92rem;font-weight:600;transition:background .1s}
  .tprow:last-child{border-bottom:0}
  .tprow:hover{background:color-mix(in srgb,var(--accent) 13%,transparent)}
  .tprow .tpe{font-size:1.1rem}
  .tprow .tpg{margin-inline-start:auto;font-size:.7rem;color:var(--muted)}
  .tphead{font-size:.72rem;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.02em;margin:8px 4px 2px}
  .tprow.tpcur{background:color-mix(in srgb,#ff5a7a 7%,transparent)}
  .tprow.tpcur .tpx{margin-inline-start:auto;color:#ff5a7a;font-weight:800;font-size:.95rem}
  .tprow.tpcur:hover{background:color-mix(in srgb,#ff5a7a 16%,transparent)}
  .tpnewrow{display:flex;gap:8px;margin-top:10px}
  .tpnewrow input{flex:1;min-width:0;margin-bottom:0!important}
  .tpnewrow button{flex:0 0 auto;cursor:pointer;font-family:inherit;font-weight:700;padding:10px 16px;border-radius:11px;border:1px solid var(--accent);background:var(--accent);color:#fff;white-space:nowrap}
  .tpnote{font-size:.78rem;color:var(--muted);text-align:center;margin:9px 0 0}
  /* --- השלמה אוטומטית --- */
  .searchrow{position:relative}
  .acbox{position:absolute;top:calc(100% + 4px);left:50%;transform:translateX(-50%);width:min(520px,92%);max-height:340px;overflow:auto;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:0 14px 40px rgba(0,0,0,.35);z-index:155;display:none;padding:5px}
  .acbox.show{display:block}
  .acrow{padding:9px 12px;border-radius:10px;cursor:pointer;font-size:.9rem;font-weight:600;display:flex;align-items:center;gap:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .acrow .ack{margin-inline-start:auto;font-size:.7rem;color:var(--muted);font-weight:700}
  .acrow.actag{color:var(--accent)}
  .acrow:hover,.acrow.sel{background:color-mix(in srgb,var(--accent) 14%,transparent)}
  /* --- המלצות --- */
  .recorow{display:flex;gap:12px;overflow-x:auto;padding:4px 2px 10px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .recorow .song{flex:0 0 270px;max-width:270px;margin:0;scroll-snap-align:start;flex-direction:column}
  .recorow .song .cover-wrap{width:100%;aspect-ratio:16/10}
  /* --- הסתרת שירים אישית --- */
  .song.uhidden{display:none!important}
  /* --- עמוד פלייליסט --- */
  .plhead{max-width:860px;margin:14px auto 0;padding:14px 18px;background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:0 6px 22px rgba(0,0,0,.18)}
  .plh-top{display:flex;align-items:center;justify-content:center;gap:9px;font-size:1.3rem;font-weight:800}
  .plhead{text-align:center}
  .plh-top .plh-ic{font-size:1.5rem}
  .plh-sub{color:var(--muted);font-size:.84rem;margin:5px 0 11px;display:flex;gap:6px;flex-wrap:wrap;align-items:center;justify-content:center}
  .plh-sub a{color:var(--accent);text-decoration:none;font-weight:600}
  .plh-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
  .plh-actions button{cursor:pointer;font-family:inherit;font-weight:700;font-size:.85rem;padding:9px 15px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--bg2);color:var(--text);transition:transform .1s,border-color .12s}
  .plh-actions button:hover{border-color:var(--accent);transform:translateY(-1px)}
  .plh-actions #plhPlay{background:var(--accent);color:#fff;border-color:var(--accent)}
  /* עמוד פלייליסט נראה כמו האתר הרגיל — הסרגל וכל הכפתורים נשארים; רק תיבת הפלייליסט נוספת */
  /* --- פלייליסטים: רשימה ופירוט --- */
  .plnewrow{display:flex;gap:8px;margin:4px 0 8px}
  .plnewrow input{flex:1;min-width:0;padding:9px 13px;border-radius:11px;border:1px solid var(--line);background:var(--bg2);color:var(--text);font-family:inherit;font-size:.9rem}
  .plnewrow button{cursor:pointer;font-family:inherit;font-weight:700;padding:9px 16px;border-radius:11px;border:1px solid var(--accent);background:var(--accent);color:#fff;white-space:nowrap}
  .plpubopt{display:flex;align-items:center;gap:7px;margin:0 2px 9px;font-size:.82rem;color:var(--muted);cursor:pointer;user-select:none}
  .plpubopt input{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}
  .plvisbtn{margin-inline-start:auto;margin-inline-end:8px;cursor:pointer;font-family:inherit;font-weight:700;font-size:.78rem;padding:5px 12px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--bg2);color:var(--muted);white-space:nowrap;transition:all .12s}
  .plvisbtn.on{background:var(--accent);color:#fff;border-color:var(--accent)}
  .plminor{cursor:pointer;font-family:inherit;font-size:.82rem;font-weight:600;color:var(--accent);background:none;border:none;text-decoration:none;padding:2px}
  .plrow{cursor:pointer}
  .pldetacts{display:flex;gap:7px;flex-wrap:wrap;margin:2px 0 12px}
  #myModal .pldetacts{justify-content:center}
  .pldetacts button{cursor:pointer;font-family:inherit;font-weight:700;font-size:.8rem;padding:7px 12px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--bg2);color:var(--text);transition:border-color .12s}
  .pldetacts button:hover{border-color:var(--accent)}
  .pldetacts #plDetPlay,.pldetacts #myPlayAll{background:var(--accent);color:#fff;border-color:var(--accent)}
  .pldetacts .admdel{border-color:var(--danger);color:var(--danger)}
  /* --- פופאפ הוספה לפלייליסט --- */
  .addplpop{position:absolute;z-index:60;width:min(280px,86vw);background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:0 16px 44px rgba(0,0,0,.4);padding:10px;display:none}
  .addplpop.centered{position:fixed;top:15vh;left:50%;transform:translateX(-50%);z-index:260}
  .addplpop.show{display:block}
  .addpltitle{font-weight:800;font-size:.86rem;margin-bottom:7px}
  .addplitem{display:flex;align-items:center;gap:6px;width:100%;text-align:start;cursor:pointer;font-family:inherit;font-weight:600;font-size:.86rem;padding:8px 10px;border-radius:9px;border:none;background:none;color:var(--text)}
  .addplitem:hover{background:color-mix(in srgb,var(--accent) 14%,transparent)}
  .addplitem i{margin-inline-start:auto;font-style:normal;font-size:.72rem;color:var(--muted)}
  .addplempty{color:var(--muted);font-size:.82rem;padding:4px 8px 8px}
  /* --- דיווח/בקשה + עזרת מקלדת --- */
  .repctx{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-size:.85rem;color:var(--accent);font-weight:600;margin-bottom:8px;unicode-bidi:plaintext}
  select.adminput{cursor:pointer}
  .kbdtbl{width:100%;border-collapse:collapse}
  .kbdtbl td{padding:7px 10px;border-bottom:1px solid var(--line);font-size:.9rem}
  .kbdtbl td:first-child{width:90px;text-align:center}
  .kbdtbl kbd{background:var(--bg2);border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;padding:2px 9px;font-family:inherit;font-weight:700;font-size:.82rem;white-space:nowrap}
  main{max-width:860px;margin:0 auto;padding:6px 16px 40px}
  .song{background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);margin:12px 0;overflow:hidden;box-shadow:0 6px 22px rgba(0,0,0,.22);display:flex;flex-direction:column;transition:transform .16s,box-shadow .16s,background-color .25s,border-color .25s;content-visibility:auto;contain-intrinsic-size:auto 300px}
  .song:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(0,0,0,.30)}
  .cover-wrap{position:relative;width:100%;aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--muted)}
  /* התמונה נגישה ללחיצה רק כשיש בכרטיס מה לנגן (18.8) */
  article.song:has(.pp,.podpp) .cover-wrap{cursor:pointer}
  .cover-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:blur(26px) brightness(.7) saturate(1.12);transform:scale(1.18)}
  .cover{position:relative;max-width:100%;max-height:100%;width:auto;height:100%;object-fit:contain;z-index:1;transition:transform .35s ease}
  .song:hover .cover{transform:scale(1.06)}
  .song.playing-card{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 12px 36px color-mix(in srgb,var(--accent) 32%,transparent)}
  .eqbadge{display:none}
  .song.playing-card .eqbadge{display:flex;position:absolute;bottom:8px;inset-inline-end:8px;z-index:3;align-items:flex-end;gap:2px;height:15px;padding:4px 5px;box-sizing:content-box;background:rgba(0,0,0,.5);border-radius:6px;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
  .song.playing-card .eqbadge i{width:3px;height:100%;background:#fff;border-radius:2px;transform-origin:50% 100%;animation:eqbar 1s ease-in-out infinite}
  .song.playing-card .eqbadge i:nth-child(2){animation-delay:-.5s;animation-duration:1.25s}
  .song.playing-card .eqbadge i:nth-child(3){animation-delay:-.35s;animation-duration:.9s}
  @keyframes eqbar{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
  .badge{position:absolute;top:12px;right:12px;background:linear-gradient(135deg,#ff5d6c,#ff3b5c);color:#fff;font-size:.74rem;font-weight:800;padding:5px 12px;border-radius:var(--r-pill);z-index:2;box-shadow:0 4px 12px rgba(255,59,92,.5)}
  .song-body{padding:12px 16px;flex:1;min-width:0}
  .song h1,.song h2{margin:0 0 5px;font-size:1.24rem;line-height:1.3;font-weight:800;letter-spacing:0}
  .song h1 a,.song h2 a{color:inherit;text-decoration:none}
  .song h1 a:hover,.song h2 a:hover{color:var(--accent)}
  .meta{display:flex;gap:13px;color:var(--muted);font-size:.79rem;margin-bottom:7px;flex-wrap:wrap;align-items:center;font-variant-numeric:tabular-nums}
  .meta b{color:var(--text)}
  .plays{color:var(--muted);font-size:.72rem;margin:-2px 0 8px;opacity:1;font-variant-numeric:tabular-nums}
  .plays b{color:var(--text);font-weight:700}
  .meta .liwrap svg,.plays .liwrap svg,.durmeta .liwrap svg{stroke:var(--muted)}
  .durmeta{color:var(--muted);font-size:.78rem;font-weight:600;font-variant-numeric:tabular-nums}
  .artist{color:var(--accent);text-decoration:none;font-weight:700;background:color-mix(in srgb,var(--accent) 14%,transparent);padding:2px 10px;border-radius:var(--r-pill)}
  /* סבב UX 10.7: קרדיטים/מילים-ולחן בשורה אחת עם ...; לחיצה פותחת את הטקסט המלא */
  .desc{color:var(--muted);font-size:.84rem;line-height:1.6;margin:0 0 9px;white-space:pre-line;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer}
  .desc.open{display:block;overflow:visible}
  .actions{display:flex;align-items:center;gap:10px;margin-top:4px}
  .pp{border:0;border-radius:var(--r-pill);background:linear-gradient(135deg,var(--accent),var(--accent2),var(--accent3));color:#fff;font-size:.95rem;font-weight:700;cursor:pointer;padding:11px 22px;display:inline-flex;align-items:center;gap:7px;box-shadow:0 4px 14px color-mix(in srgb,var(--accent) 45%,transparent);transition:transform .18s,box-shadow .18s}
  .pp:hover{transform:scale(1.09);box-shadow:0 10px 26px color-mix(in srgb,var(--accent) 60%,transparent)}
  .pp:active{transform:scale(.95)}
  @keyframes grad{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
  .iconbtn{width:44px;height:44px;border:1px solid var(--line);background:var(--bg2);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:1.15rem;color:var(--muted);cursor:pointer;text-decoration:none;box-shadow:0 1px 4px rgba(0,0,0,.07);transition:color .12s,border-color .12s,box-shadow .12s,transform .12s}
  .iconbtn:hover{color:var(--accent);border-color:var(--accent);box-shadow:0 4px 12px color-mix(in srgb,var(--accent) 20%,transparent);transform:translateY(-1px)}
  .iconbtn:active{transform:scale(.88)}
  .pp:hover svg{transform:scale(1.12)}
  .pp svg{transition:transform .15s}
  .cliponly{font-size:.82rem;color:var(--muted);background:var(--bg2);border:1px dashed var(--line);padding:9px 15px;border-radius:var(--r-pill);font-weight:600;display:inline-flex;align-items:center;gap:6px}
  /* כפתור "הורד מהקליפ" — נסתר תמיד, נחשף רק באפליקציה שיודעת להוריד (body.candl) */
  .dlclip{display:none!important}
  body.candl .dlclip{display:inline-flex!important;color:var(--accent);border-color:var(--accent)}
  body.candl .cliponly{display:none}
  .fav.on{color:#ff4d6d;border-color:#ff4d6d}
  .fav.on svg{fill:currentColor}
  /* סבב UX 10.7: תפריט "⋯" לפעולות משניות בכרטיס — התוויות נשאבות מ-title (מתעדכן ב-i18n) */
  /* ‼️ 18.8 מאוחר (משוב משתמש: "⋯ רחוק בסוף שמאל") — ה-auto שדחף אותו לקצה השורה בוטל.
     עכשיו הוא צמוד לשאר הכפתורים, וכל הקבוצה יושבת ברצף אחד בתחילת השורה. */
  .morewrap{position:relative;display:inline-flex}
  .moremenu{position:absolute;top:calc(100% + 8px);inset-inline-end:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:6px;box-shadow:0 14px 34px rgba(0,0,0,.28);display:none;flex-direction:column;gap:2px;z-index:60;min-width:190px}
  .morewrap.open .moremenu{display:flex;animation:fadein .18s ease}
  .morewrap.open .morebtn{color:var(--accent);border-color:var(--accent)}
  .moremenu .iconbtn{width:100%;height:auto;border:0;background:transparent;border-radius:10px;box-shadow:none;justify-content:flex-start;gap:10px;padding:9px 11px;font-size:.86rem;color:var(--text)}
  .moremenu .iconbtn:hover{background:color-mix(in srgb,var(--accent) 12%,transparent);transform:none;color:var(--accent);box-shadow:none}
  .moremenu .iconbtn::after{content:attr(title);font-weight:600;white-space:nowrap}
  /* הכרטיס חתוך (overflow:hidden + content-visibility:auto = paint-containment) —
     כשהתפריט פתוח משחררים את שניהם, ומרימים את הכרטיס מעל הבא (האחים הם stacking contexts) */
  .song:has(.morewrap.open){overflow:visible;content-visibility:visible;position:relative;z-index:6}
  .song:has(.morewrap.open) .cover-wrap{border-radius:inherit}
  /* סבב UX 10.7: "0% · 0 מדרגים" = רעש — מוסתר עד הדירוג הראשון (הכוכבים נשארים, אפשר לדרג) */
  .rinfo.zero{display:none}
  /* ===== 🎙️ פודקאסטים (דמו) — מצב מבודד: פיד-פרקים באותה שפת-כרטיסים, ניזון מטבלאות pod_* בלבד ===== */
  body.podmode #list,body.podmode #loader,body.podmode #sentinel{display:none}
  /* במצב פודקאסטים גם שורת שירים/זמרים/חיפוש-שירים לא רלוונטית (בקשת משתמש) — ל-podmode חיפוש ומיון משלו */
  body.podmode .searchrow{display:none}
  #podlist{display:none;max-width:860px;margin:0 auto;padding:6px 16px 40px}
  body.podmode #podlist{display:block}
  /* אריח-עטיפה אחיד לפודקאסטים (בקשת משתמש 13.7 "שיהיה לכולם סימטרי"): ריבוע מלא לכולם —
     עטיפות-פודקאסט ריבועיות ימלאו אותו בדיוק, ותמונת-יוטיוב 16:9 מוצגת שלמה (contain) על הרקע
     המטושטש .cover-bg — החיתוך אכל לה את הצדדים (בקשת משתמש 27.7). שירים לא מושפעים. */
  body.podmode .song .cover-wrap{aspect-ratio:1/1}
  body.podmode .song .cover{width:100%;height:100%;object-fit:contain}
  @media(min-width:600px){body.podmode .song .cover-wrap{width:200px;aspect-ratio:1/1}}
  /* רצועת תוכניות — סינון "לפי תוכנית" בולט, נגלל אופקית */
  .podshows{display:flex;gap:7px;overflow-x:auto;padding:4px 2px 10px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
  .podshowchip{flex:none;display:inline-flex;align-items:center;gap:7px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-pill);padding:5px 12px;cursor:pointer;font-family:inherit;font-size:.82rem;font-weight:700;color:var(--text);transition:border-color .12s,color .12s}
  .podshowchip img{width:26px;height:26px;border-radius:50%;object-fit:cover;background:var(--bg2);flex:none}
  .podshowchip:hover{border-color:var(--accent);color:var(--accent)}
  .podshowchip.on{background:linear-gradient(135deg,var(--accent),var(--accent2),var(--accent3));border-color:transparent;color:#fff}
  .podbar{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;margin:10px 0 4px}
  .podbar input{background:var(--card);color:var(--text);border:1px solid var(--line);border-radius:var(--r-md);padding:8px 14px;font-size:.85rem;font-family:inherit;outline:none;width:min(230px,60vw)}
  .podbar input:focus{border-color:var(--accent)}
  .podpp{border:0;border-radius:var(--r-pill);background:linear-gradient(135deg,var(--accent),var(--accent2),var(--accent3));color:#fff;font-size:.95rem;font-weight:700;cursor:pointer;padding:11px 22px;display:inline-flex;align-items:center;gap:7px;box-shadow:0 4px 14px color-mix(in srgb,var(--accent) 45%,transparent);transition:transform .18s,box-shadow .18s;font-family:inherit}
  #podslist .artistrow img{width:34px;height:34px;border-radius:8px;object-fit:cover;vertical-align:middle;margin-inline-end:9px;background:var(--card)}
  .podpp:hover{transform:scale(1.07)}
  .podshowtag{color:var(--accent);text-decoration:none;font-weight:700;background:color-mix(in srgb,var(--accent) 14%,transparent);padding:2px 10px;border-radius:var(--r-pill);border:0;cursor:pointer;font-family:inherit;font-size:inherit}
  .podshowtag:hover{background:color-mix(in srgb,var(--accent) 24%,transparent)}
  .podmore{display:block;margin:18px auto;background:var(--card);border:1px solid var(--line);border-radius:var(--r-pill);color:var(--text);padding:10px 26px;font-weight:700;cursor:pointer;font-family:inherit}
  .podmorelbl{margin:20px 4px 4px;font-weight:800;color:var(--muted);font-size:.98rem}
  .podmore:hover{border-color:var(--accent);color:var(--accent)}
  .podpick{position:fixed;top:120px;left:50%;transform:translateX(-50%);background:var(--card);border:1px solid var(--line);border-radius:16px;padding:10px;box-shadow:0 16px 44px rgba(0,0,0,.42);z-index:130;display:none;flex-direction:column;gap:4px;min-width:260px;max-width:92vw;max-height:60vh;overflow:auto;scrollbar-width:thin}
  .podpick.show{display:flex;animation:fadein .18s ease}
  .podpick button{background:var(--bg2);color:var(--text);border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:.9rem;font-family:inherit;cursor:pointer;text-align:start;font-weight:600;display:flex;align-items:center;gap:9px}
  .podpick button:hover{border-color:var(--accent)}
  .podpick img{width:34px;height:34px;border-radius:8px;object-fit:cover;flex:none;background:var(--bg2)}
  .menu{position:absolute;top:calc(100% + 8px);inset-inline-end:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:6px;box-shadow:0 14px 34px rgba(0,0,0,.28);display:none;flex-direction:column;gap:2px;z-index:60;min-width:200px}
  .menu.open{display:flex;animation:fadein .18s ease}
  .menu button{all:unset;cursor:pointer;padding:11px 14px;border-radius:10px;font-size:.92rem;font-weight:600;color:var(--text);display:flex;gap:9px;align-items:center}
  .menu button:hover{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}
  .menu button.on{color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);font-weight:700}
  .sortchip.on{background:linear-gradient(135deg,var(--accent),var(--accent2),var(--accent3));border-color:transparent;color:#fff}
  .menu-wide{min-width:242px;max-height:72vh;overflow-y:auto}
  .menu-sec{font-size:.72rem;font-weight:800;color:var(--muted);padding:9px 12px 3px;border-top:1px solid var(--line);margin-top:4px}
  .sortbtn{cursor:pointer;background:var(--card);color:var(--text);border:1px solid var(--line);border-radius:var(--r-pill);padding:8px 14px;min-width:112px;justify-content:center;font-size:.85rem;font-weight:700;font-family:inherit;display:inline-flex;align-items:center;gap:7px;transition:transform .12s,border-color .12s,color .12s}
  .sortbtn:hover{border-color:var(--accent);color:var(--accent);transform:scale(1.05)}
  .sortbtn.on{background:linear-gradient(135deg,var(--accent),var(--accent2),var(--accent3));border-color:transparent;color:#fff}
  /* 📅 חלונית סינון תאריך */
  .datepop{min-width:266px}
  .dpcal{display:flex;gap:6px;margin-bottom:4px}
  .dpcalbtn{flex:1;background:var(--bg2);color:var(--text);border:1px solid var(--line);border-radius:10px;padding:9px;font-family:inherit;font-weight:700;font-size:.86rem;cursor:pointer}
  .dpcalbtn.on{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border-color:transparent}
  .dpview{display:flex;flex-direction:column;gap:7px;margin-top:4px}
  .dprow{display:flex;align-items:center;gap:8px}
  .dprow label{flex:0 0 42px;font-size:.82rem;color:var(--muted);font-weight:700}
  .dprow select,.dprow input{flex:1;min-width:0;background:var(--bg2);color:var(--text);border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-family:inherit;outline:none}
  .dpor{text-align:center;font-size:.76rem;color:var(--muted);margin:2px 0}
  .dpacts{display:flex;gap:6px;margin-top:9px}
  .dpacts button{flex:1;border:0;border-radius:10px;padding:9px;font-weight:700;font-family:inherit;cursor:pointer}
  #dpApply{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff}
  #dpClear{background:var(--bg2);color:var(--text);border:1px solid var(--line)}
  .stat{font-size:.84rem;color:var(--muted);font-weight:600}
  .resumebar{cursor:pointer;border:0;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font-weight:700;font-size:.86rem;padding:9px 16px;border-radius:var(--r-pill);display:inline-flex;align-items:center;gap:7px;box-shadow:0 4px 14px color-mix(in srgb,var(--accent) 40%,transparent);animation:fadein .3s ease}
  .resumebar:hover{transform:scale(1.04)}
  /* "שירים חדשים מאז ביקורך" — באנר מרחף תחתון עם X, באותו סגנון של "המשך האזנה" */
  .newpop{display:flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-pill);padding:5px 6px 5px 8px;box-shadow:0 12px 32px rgba(0,0,0,.32);animation:fadein .3s ease;max-width:88vw}
  .newpill{cursor:pointer;border:0;background:#ff4d6d;color:#fff;font-weight:700;font-size:.82rem;font-family:inherit;padding:8px 14px;border-radius:var(--r-pill);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:74vw}
  .song.fresh{box-shadow:0 0 0 2px #ff4d6d,0 10px 30px rgba(0,0,0,.12)}
  .updatebar{border:0;cursor:pointer;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font-weight:700;font-size:.9rem;padding:11px 18px;border-radius:var(--r-pill);box-shadow:0 8px 28px rgba(0,0,0,.35);display:inline-flex;align-items:center;gap:9px;animation:fadein .3s ease}
  .updatebar:hover{transform:scale(1.04)}
  .updatebar svg{width:18px;height:18px;flex:none}
  .song.fresh .song-body>h1::after,.song.fresh .song-body>h2::after{content:' 🆕';font-size:.8em}
  .loader{text-align:center;padding:22px 12px;color:var(--muted);font-size:.95rem}
  /* שלד טעינה (skeleton) — מוצג בזמן שינוי סינון/חיפוש */
  .song.skel{pointer-events:none}
  .song.skel:hover{transform:none;box-shadow:0 6px 22px rgba(0,0,0,.22)}
  .skel-cover{width:100%;aspect-ratio:16/10;background:var(--bg2)}
  .skel-line{height:14px;border-radius:6px;background:var(--bg2);margin:10px 0}
  .skel-title{width:62%;height:20px}
  .skel-meta{width:42%}
  .skel-actions{display:flex;gap:10px;margin-top:16px}
  .skel-pill{width:96px;height:42px;border-radius:var(--r-pill);background:var(--bg2)}
  .skel-dot{width:44px;height:44px;border-radius:50%;background:var(--bg2)}
  /* ▦ תצוגת-ריבועים (סבב-הבהרות 15.7, סופי: 2 מצבים בלבד — רגיל ⇄ ריבועים, לפי צילום-הרפרנס של
     המשתמש: תמונה רחבה למעלה, שם מתחת, כמה אריחים בשורה. מצב-השורות בוטל לבקשתו.)
     העטיפה נשארת contain+רקע-מטושטש כמו בכרטיס הרגיל — עטיפות מרובעות לא נחתכות.
     scoped ל-#list; ילד שאינו כרטיס (recorow וכו') פרוש על כל השורה. */
  /* ‼️ 18.8 (משוב גולש "מעלה ומוריד") — main מוגבל ל-860px, וזה נכון לרשימה בטור אחד אבל
     אבסורדי לרשת: על מסך רחב נכנסו 4 ריבועים ונשארו שוליים ריקים ענקיים משני הצדדים.
     בתצוגת-ריבועים בלבד מרחיבים ל-1400px → 6 ריבועים במסך 1440, בלי לגעת בתצוגה הרגילה. */
  body.gridview main{max-width:1400px}
  body.gridview #list{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
  body.gridview #list>:not(article.song){grid-column:1/-1}
  /* סימטריה: גובה אחיד (stretch), כותרת תמיד 2 שורות, זמר ראשון בלבד + תאריך בשורה משלו, פעולות צמודות
     לתחתית. בלי overflow:hidden על הכרטיס — כדי שתפריט "⋯" ייפתח (הכלל :has הקיים עושה את השאר) */
  body.gridview #list .song{flex-direction:column;padding:0 0 10px;margin:0}
  body.gridview #list .cover-wrap{width:100%;aspect-ratio:16/10;flex-shrink:0;border-radius:var(--r-xl) var(--r-xl) 0 0}
  body.gridview #list .song-body{padding:8px 10px 0;gap:4px;display:flex;flex-direction:column}
  body.gridview #list .song-body h2{font-size:.86rem;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
  body.gridview #list .meta{font-size:.72rem;margin:0;gap:4px 6px;align-content:flex-start}
  body.gridview #list .meta a.artist:nth-of-type(n+2),body.gridview #list .meta .artsep{display:none}
  body.gridview #list .meta .artist{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  body.gridview #list .meta>span:last-child{flex-basis:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  /* ‼️ 18.8 (משוב גולש) — .plays יצא מרשימת-ההסתרה: מונה ההשמעות הוא בדיוק המידע
     שעוזר לבחור שיר באריח, והוא כבר קיים ב-DOM ומתעדכן לבד. רק מוקטן ונדחס לשורה. */
  body.gridview #list .tags,body.gridview #list .rate,body.gridview #list .desc,body.gridview #list .cliponly{display:none}
  body.gridview #list .plays{margin:0;font-size:.68rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.gridview #list .plays .durmeta{display:none}
  /* ‼️ 18.8 — חמישה פקדים לא נכנסו לאריח של 218px ואייקון הקליפ נחתך בקצה (צילום המשתמש).
     שבירה לשתי שורות נוסתה ונפסלה — נראה גרוע ומבזבז גובה. הפתרון: אריח רחב ב-13px
     (‏minmax 200→230, עדיין 6 עמודות ב-1440) + אייקונים 34px + מרווח 5px = הכול בשורה אחת.
     (‏18.8 מאוחר: ה-⋯ כבר לא נדחף לקצה — הוא צמוד לשאר, ראו .morewrap.) */
  body.gridview #list .actions{margin:auto 0 0;padding-top:4px;gap:5px;flex-wrap:nowrap}
  /* ‼️ 16.8: כפתור ההורדה היה מוסתר כאן — באתר ששמו "שיר חדש להורדה", ובלי חלופה ב-⋯.
     הוא חוזר; רק "הוספה לתור" נשארת מוסתרת באריח (היא קיימת גם בתפריט ⋯ ובנגן). */
  body.gridview #list .actions .qadd{display:none}
  /* כפתורים קומפקטיים באריח — שהשורה לא תישבר לשתיים (ה-⋯ ירד שורה וקלקל את הסימטריה);
     nowrap + כיווץ עדין של כפתור-נגן שומרים שורה אחת גם באריח צר */
  body.gridview #list .actions>.iconbtn,body.gridview #list .actions .morebtn{width:34px;height:34px;font-size:.95rem;flex-shrink:0}
  body.gridview #list .pp{padding:9px 16px;font-size:.9rem;flex-shrink:1;min-width:49px;overflow:hidden}
  /* 🎬 צפייה בקליפ — מ-18.8 הכפתור גלוי בשתי התצוגות, כי ה-summary שהיה הטריגר בתצוגה
     הרגילה מוסתר עכשיו בתוך עטיפת-התמונה. לחיצה נוספת סוגרת. */
  .clipwatch{display:inline-flex}
  body.gridview #list .raterow{margin:0;gap:0}
  @media(max-width:560px){body.gridview #list{grid-template-columns:repeat(2,1fr);gap:9px}
  body.gridview #list .pp span{display:none}body.gridview #list .pp{padding:11px;border-radius:50%}
  /* ‼️ 16.8: "צפייה בקליפ" הוסתר כאן, ולשיר קליפ-בלבד לא נשארה שום דרך להגיע לווידאו במובייל.
     הוא נשאר. באריח של 2 עמודות ב-360px אין מקום ל-5 פקדים בשורה אחת בגודל מגע תקין,
     אז השורה נשברת לשתיים — כל האריחים גדלים יחד, אז הסימטריה נשמרת. */
  body.gridview #list .actions{gap:5px;flex-wrap:wrap;justify-content:center}
  body.gridview #list .actions>.iconbtn,body.gridview #list .actions .morebtn{width:40px;height:40px;font-size:1rem}}
  /* ‼️ 18.8 מאוחר (בקשת משתמש: "גם בפודקאסטים") — כל מצב-הריבועים נכתב על #list, ולכן במצב
     פודקאסטים המתג ▦ פשוט לא עשה כלום. אלה אותם כללים, מכוונים אל .podfeed (עוטף-הפרקים
     שבתוך #podlist). נכתב כבלוק נפרד ולא כהרחבת-הסלקטורים הקיימים — כדי שיהיה הפיך בבת אחת,
     ובלי לגעת בספציפיות של כללי-השירים (ראו הלקח על :has ב-clipbig).
     ‏(0,3,1) גובר על body.podmode .song .cover-wrap שהוא (0,3,0) — כולל זה שבתוך המדיה. */
  body.gridview #podlist{max-width:1400px}
  body.gridview .podfeed{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
  body.gridview .podfeed>:not(article.song){grid-column:1/-1}
  body.gridview .podfeed .song{flex-direction:column;padding:0 0 10px;margin:0}
  body.gridview .podfeed .cover-wrap{width:100%;aspect-ratio:1/1;flex-shrink:0;border-radius:var(--r-xl) var(--r-xl) 0 0}
  body.gridview .podfeed .song-body{padding:8px 10px 0;gap:4px;display:flex;flex-direction:column}
  body.gridview .podfeed .song-body h2{font-size:.86rem;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
  body.gridview .podfeed .meta{font-size:.72rem;margin:0;gap:4px 6px;align-content:flex-start}
  body.gridview .podfeed .meta>span:last-child{flex-basis:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  body.gridview .podfeed .desc{display:none}
  body.gridview .podfeed .actions{margin:auto 0 0;padding-top:4px;gap:5px;flex-wrap:nowrap}
  body.gridview .podfeed .actions .qadd{display:none}
  body.gridview .podfeed .actions>.iconbtn,body.gridview .podfeed .actions .morebtn{width:34px;height:34px;font-size:.95rem;flex-shrink:0}
  body.gridview .podfeed .podpp{padding:9px 14px;font-size:.88rem;flex-shrink:1;min-width:49px;overflow:hidden;white-space:nowrap}
  body.gridview .podfeed article.song.clipbig{grid-column:span 2}
  @media(max-width:560px){body.gridview .podfeed{grid-template-columns:repeat(2,1fr);gap:9px}
  body.gridview .podfeed .actions{gap:5px;flex-wrap:wrap;justify-content:center}
  body.gridview .podfeed .actions>.iconbtn,body.gridview .podfeed .actions .morebtn{width:40px;height:40px;font-size:1rem}
  body.gridview .podfeed .podpp{padding:11px 13px;font-size:.82rem}
  body.gridview .podfeed article.song.clipbig{grid-column:1/-1}}
  /* 🎁 טופס "הצע שיר" + ❤ כפתור פלייליסט-מהמועדפים */
  .sginp{background:var(--bg2);color:var(--text);border:1px solid var(--line);border-radius:10px;padding:9px 11px;font-family:inherit;font-size:.88rem;outline:none;width:100%;box-sizing:border-box;resize:vertical}
  .sginp:focus{border-color:var(--accent)}
  .plfromfav{width:100%;margin:0 0 9px;padding:10px;border-radius:11px;border:1px dashed var(--line);background:var(--bg2);color:var(--text);font-family:inherit;font-weight:700;font-size:.88rem;cursor:pointer;transition:border-color .12s,color .12s}
  .plfromfav:hover{border-color:var(--accent);color:var(--accent)}
  .skel-cover,.skel-line,.skel-pill,.skel-dot{position:relative;overflow:hidden}
  .skel-cover::after,.skel-line::after,.skel-pill::after,.skel-dot::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--text) 9%,transparent),transparent);animation:shimmer 1.4s infinite}
  @keyframes shimmer{100%{transform:translateX(100%)}}
  /* משוב לחיצה מוחשי (press feedback) */
  .iconbtn:active,.dctl:active,.dclose:active,.popx:active{transform:scale(.88)}
  .chip:active{transform:scale(.96)}
  .empty{text-align:center;color:var(--muted);padding:40px 16px}
  .endcap{text-align:center;color:var(--muted);font-size:.82rem;padding:20px 0 8px;letter-spacing:.5px}
  .retrybtn{margin-top:14px;cursor:pointer;font-family:inherit;font-weight:700;font-size:.9rem;padding:10px 22px;border-radius:var(--r-pill);border:1px solid var(--accent);background:var(--accent);color:#fff;transition:transform .12s}
  .retrybtn:active{transform:scale(.95)}
  .recolearn{text-align:center;color:var(--muted);padding:46px 20px;max-width:440px;margin:0 auto}
  .recolearn .rlemoji{font-size:3rem;margin-bottom:10px;line-height:1}
  .recolearn h3{margin:0 0 8px;color:var(--text);font-size:1.15rem}
  .recolearn p{margin:0;line-height:1.65;font-size:.95rem}
  #syncBody{display:flex;flex-direction:column;gap:13px}
  .syncintro{color:var(--muted);font-size:.92rem;line-height:1.6;margin:0}
  .syncintro b{color:var(--text)}
  .synccodebox{background:var(--bg2);border:1px dashed var(--accent);border-radius:var(--r-lg);padding:16px;text-align:center}
  .synccode{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:1.7rem;font-weight:800;letter-spacing:3px;color:var(--accent);direction:ltr;user-select:all}
  .synclbl{display:block;color:var(--muted);font-size:.8rem;margin-bottom:6px}
  .syncbtn{all:unset;cursor:pointer;text-align:center;box-sizing:border-box;background:var(--accent);color:#fff;font-weight:700;font-family:inherit;font-size:.95rem;padding:12px 14px;border-radius:var(--r-md);transition:filter .12s}
  .syncbtn:hover{filter:brightness(1.08)}
  .syncbtn.alt{background:var(--bg2);color:var(--text);border:1px solid var(--line)}
  .syncbtn.danger{background:transparent;color:var(--muted);border:1px solid var(--line);font-weight:600;font-size:.85rem;padding:8px}
  .syncor{text-align:center;color:var(--muted);font-size:.82rem;position:relative}
  .syncin{width:100%;box-sizing:border-box;padding:11px 14px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--bg2);color:var(--text);font-family:ui-monospace,Menlo,Consolas,monospace;font-size:1.05rem;letter-spacing:2px;text-align:center;text-transform:uppercase;outline:none;direction:ltr}
  .syncin:focus{border-color:var(--accent)}
  .syncnote{color:var(--muted);font-size:.8rem;line-height:1.5;margin:0}
  .syncok{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--accent)}
  .syncrow2{display:flex;gap:8px}
  .syncrow2 .syncbtn{flex:1;min-width:0}
  .modal{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);z-index:200;display:none;align-items:flex-start;justify-content:center;padding:6vh 16px}
  #radioModal{align-items:center;padding:16px}
  .modal.show{display:flex;animation:fadein .2s ease}
  .modalbox{background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);width:min(560px,100%);max-height:84vh;display:flex;flex-direction:column;padding:18px;box-shadow:0 24px 60px rgba(0,0,0,.4)}
  .modalhead{display:flex;justify-content:space-between;align-items:center;font-size:1.2rem;margin-bottom:12px}
  .modalhead button{all:unset;cursor:pointer;font-size:1.2rem;color:var(--muted);width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:50%}
  .modalhead button:hover{background:var(--bg2);color:var(--accent)}
  #artistq,#songq,#podsq{width:100%;box-sizing:border-box;padding:11px 15px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--bg2);color:var(--text);font-size:.95rem;font-family:inherit;outline:none;margin-bottom:12px}
  #artistq:focus,#songq:focus,#podsq:focus{border-color:var(--accent)}
  .artistsortbar{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
  .pltabs{display:flex;gap:6px;margin:2px 0 12px}
  .pltab{flex:1;background:var(--bg2);color:var(--text);border:1px solid var(--line);border-radius:11px;padding:10px;font-family:inherit;font-weight:700;font-size:.9rem;cursor:pointer;transition:background .12s,color .12s}
  .pltab.on{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border-color:transparent}
  .repchips{display:flex;flex-wrap:wrap;gap:7px;margin:4px 0 8px}
  .repchip{background:var(--bg2);color:var(--text);border:1px solid var(--line);border-radius:var(--r-pill);padding:7px 13px;font-family:inherit;font-size:.84rem;font-weight:600;cursor:pointer;transition:transform .1s,border-color .12s}
  .repchip:hover{border-color:var(--accent);transform:translateY(-1px)}
  .repchip.on{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border-color:transparent}
  .iconbtn.report:hover{color:#ff5a7a;border-color:#ff5a7a}
  .asortbtn,.ssortbtn,.psortbtn{flex:1;min-width:110px;cursor:pointer;border:1px solid var(--line);background:var(--bg2);color:var(--muted);font-weight:700;font-size:.82rem;font-family:inherit;padding:9px 10px;border-radius:10px;transition:all .12s}
  .asortbtn.on,.ssortbtn.on,.psortbtn.on{background:var(--accent);color:#fff;border-color:var(--accent)}
  .artistlist{overflow-y:auto;display:flex;flex-direction:column;gap:4px}
  .artistrow{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-radius:var(--r-md);cursor:pointer;font-weight:600;transition:background .12s}
  .artistrow:hover{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}
  .artistrow .cnt{font-size:.8rem;color:var(--muted);background:var(--bg2);padding:3px 10px;border-radius:var(--r-pill)}
  .plvis{display:flex;align-items:center;gap:6px;flex:none}
  .plvislbl{font-size:.95rem;line-height:1}
  .plswitch{position:relative;width:42px;height:23px;border-radius:var(--r-pill);background:var(--line);border:0;cursor:pointer;flex:none;padding:0;transition:background .15s}
  .plswitch::after{content:"";position:absolute;top:2px;inset-inline-start:2px;width:19px;height:19px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:inset-inline-start .15s}
  .plswitch.on{background:linear-gradient(135deg,var(--accent),var(--accent2))}
  .plswitch.on::after{inset-inline-start:21px}
  .chip-live{background:linear-gradient(120deg,#ff3b5c,#ff7849,#ffd166,#ff3b5c,#c81d4e);background-size:300% 300%;color:#fff;border-color:transparent;font-weight:800;box-shadow:0 4px 14px rgba(255,59,92,.45);animation:livegrad 4s ease infinite,livepulse 2s ease infinite}
  .chip-live:hover{color:#fff;transform:scale(1.07)}
  @keyframes livegrad{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
  @keyframes livepulse{0%,100%{box-shadow:0 4px 14px rgba(255,59,92,.4)}50%{box-shadow:0 4px 24px rgba(255,59,92,.75)}}
  .radiocard img{background:#fff;object-fit:cover}
  .radiobanner{margin:0 0 14px;height:66px;border-radius:16px;background:linear-gradient(120deg,#ff3b5c,#ff7849,#9b6cff,#ff3b5c);background-size:300% 300%;display:flex;align-items:center;justify-content:center;gap:16px;color:#fff;font-weight:800;font-size:1.05rem;box-shadow:0 12px 30px rgba(255,59,92,.4);animation:livegrad 5s ease infinite,rbfloat 4.5s ease-in-out infinite}
  @keyframes rbfloat{0%,100%{transform:perspective(600px) rotateX(7deg) rotateY(-7deg) translateY(0)}50%{transform:perspective(600px) rotateX(-5deg) rotateY(7deg) translateY(-7px)}}
  .rb-text{text-shadow:0 2px 6px rgba(0,0,0,.32);letter-spacing:.4px}
  .rb-waves{display:inline-flex;align-items:flex-end;gap:3px;height:26px}
  .rb-waves i{width:4px;height:8px;background:#fff;border-radius:2px;animation:rbw 1s ease-in-out infinite}
  .rb-waves i:nth-child(2){animation-delay:.15s}.rb-waves i:nth-child(3){animation-delay:.3s}.rb-waves i:nth-child(4){animation-delay:.45s}.rb-waves i:nth-child(5){animation-delay:.6s}
  @keyframes rbw{0%,100%{height:7px}50%{height:24px}}
  .radionote{font-size:.82rem;color:var(--muted);margin:0 0 12px;line-height:1.5}
  .radiolist{overflow-y:auto;display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .radiocard{display:flex;align-items:center;gap:11px;padding:10px;border-radius:var(--r-lg);cursor:pointer;border:1px solid var(--line);background:var(--bg2);transition:transform .12s,border-color .12s}
  .radiocard:hover{transform:translateY(-2px);border-color:var(--accent)}
  .radiocard img{width:46px;height:46px;border-radius:var(--r-md);flex-shrink:0}
  .radiocard .rn{font-weight:700;font-size:.88rem;line-height:1.2}
  .radiocard .rlive{font-size:.72rem;color:#ff4d6d;font-weight:700;margin-top:2px}
  @media(max-width:520px){.radiolist{grid-template-columns:1fr}}
  body.radio .dock-seek{display:none}
  body.radio #dspeed,body.radio #ddl,body.radio #dback,body.radio #dfwd{display:none}
  body.radio #dshuffle,body.radio #drepone,body.radio #drepall{display:none}
  .radiocard{position:relative}
  /* רשימה שלי — הכי מושמעים */
  .mylist{overflow-y:auto;display:flex;flex-direction:column;gap:8px;max-height:62vh}
  .myrow{display:flex;align-items:center;gap:11px;padding:9px;border-radius:var(--r-lg);cursor:pointer;border:1px solid var(--line);background:var(--bg2);transition:transform .12s,border-color .12s}
  .myrow:hover{transform:translateY(-2px);border-color:var(--accent)}
  .myrow img{width:46px;height:46px;border-radius:var(--r-md);flex-shrink:0;object-fit:cover;background:var(--card)}
  .myrow .mrank{font-weight:800;color:var(--muted);width:1.5em;text-align:center;flex-shrink:0;font-size:.95rem}
  .myrow .mn{font-weight:700;font-size:.9rem;line-height:1.25;flex:1;min-width:0}
  .myrow .mn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .myrow .mn.mnwrap{white-space:normal;overflow:visible;text-overflow:clip;word-break:break-word;overflow-wrap:anywhere}
  .myrow:has(.mnwrap){align-items:flex-start}
  .myrow .mcount{font-size:.78rem;color:var(--accent);font-weight:800;white-space:nowrap}
  .myctl{display:flex;gap:3px;flex-shrink:0}
  .myb{width:25px;height:25px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--card);color:var(--text);cursor:pointer;font-size:.66rem;font-weight:800;display:flex;align-items:center;justify-content:center;padding:0;line-height:1}
  .myb:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
  .myb:disabled{opacity:.28;cursor:default}
  .myx:hover{border-color:#ff4d6d;color:#ff4d6d}
  .myempty{color:var(--muted);text-align:center;padding:34px 12px;font-size:.95rem;line-height:1.6}
  /* סימניות בתוך שיר */
  .npmarks{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:540px}
  .npmark{display:inline-flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-pill);padding:5px 11px;font-size:.8rem;font-weight:700;cursor:pointer;color:var(--text)}
  .npmark:hover{border-color:var(--accent)}
  .npmark b{color:var(--accent)}
  .npmark .x{opacity:.45;font-weight:800;margin-inline-start:1px}
  .npbar,.dbar{position:relative}
  .nptick{position:absolute;top:-2px;bottom:-2px;width:3px;background:var(--accent);opacity:.85;border-radius:2px;pointer-events:none}
  /* פופאפ סימניות (נפתח מכפתור 🔖 בנגן) */
  .bmpop{position:fixed;z-index:45;right:12px;bottom:104px;width:min(290px,88vw);background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:0 14px 44px rgba(0,0,0,.45);padding:13px;display:none;animation:fadein .2s ease}
  .bmpop.show{display:block}
  .bmpop h4{margin:0 0 9px;font-size:.95rem;font-weight:800;display:flex;justify-content:space-between;align-items:center;gap:8px}
  .bmpop h4 button{background:none;border:0;color:var(--muted);font-size:1.15rem;cursor:pointer;line-height:1;width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;transition:background .12s,color .12s}
  .bmadd{width:100%;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border:0;border-radius:11px;padding:10px;font-weight:800;cursor:pointer;font-size:.92rem;margin-bottom:9px;font-family:inherit}
  .bmadd:active{transform:scale(.98)}
  .bmlist{display:flex;flex-direction:column;gap:6px;max-height:42vh;overflow-y:auto}
  .bmitem{display:flex;align-items:center;gap:9px;background:var(--bg2);border:1px solid var(--line);border-radius:11px;padding:9px 11px;cursor:pointer;transition:border-color .12s}
  .bmitem:hover{border-color:var(--accent)}
  .bmitem .bt{font-weight:800;color:var(--accent);flex:1}
  .bmitem .bj{font-size:.78rem;color:var(--muted)}
  .bmitem .bx{opacity:.5;font-weight:800;padding:2px 5px;border-radius:6px}
  .bmitem .bx:hover{opacity:1;background:var(--line)}
  .bmempty{color:var(--muted);text-align:center;padding:18px 8px;font-size:.85rem;line-height:1.6}
  /* סיור/הדרכה למשתמש חדש (זרקור על אלמנטים) */
  .tour{position:fixed;inset:0;z-index:400;display:none}
  .tour.show{display:block}
  .tour-ring{position:absolute;border-radius:var(--r-lg);box-shadow:0 0 0 9999px rgba(0,0,0,.72);transition:left .3s ease,top .3s ease,width .3s ease,height .3s ease;pointer-events:none;display:none}
  .tour-box{position:absolute;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:15px 17px;width:min(312px,88vw);box-shadow:0 16px 50px rgba(0,0,0,.5);transition:left .3s ease,top .3s ease}
  .tour-t{font-weight:800;font-size:1.06rem;margin-bottom:6px}
  .tour-d{font-size:.9rem;color:var(--muted);line-height:1.5;margin-bottom:13px}
  .tour-nav{display:flex;align-items:center;gap:8px}
  .tour-dots{display:flex;gap:4px;flex:1;justify-content:center}
  .tour-dot{width:6px;height:6px;border-radius:50%;background:var(--line)}
  .tour-dot.on{background:var(--accent)}
  .tour-btn{background:var(--bg2);border:1px solid var(--line);color:var(--text);border-radius:10px;padding:8px 14px;font-weight:700;cursor:pointer;font-family:inherit;font-size:.88rem}
  .tour-next{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border:0}
  .tour-skip{background:none;border:0;color:var(--muted);cursor:pointer;font-size:.82rem;font-family:inherit;padding:4px}
  .rlink{position:absolute;top:6px;left:6px;width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--card);border:1px solid var(--line);color:var(--muted);font-size:.78rem;text-decoration:none;opacity:.7}
  .rlink:hover{opacity:1;color:var(--accent);border-color:var(--accent)}
  .sleeplbl{font-size:.78rem;color:var(--muted);padding:6px 8px 2px;font-weight:600}
  .sleepinput{display:flex;gap:6px;padding:4px 6px}
  .sleepinput input[type=time]{width:auto;flex:1}
  .sleepinput input{width:84px;padding:9px 11px;border-radius:10px;border:1px solid var(--line);background:var(--bg2);color:var(--text);font-size:.95rem;text-align:center}
  .sleepinput button{all:unset;cursor:pointer;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font-weight:700;padding:9px 14px;border-radius:10px;font-size:.9rem}
  .resumepop{display:flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-pill);padding:5px 6px 5px 12px;box-shadow:0 12px 32px rgba(0,0,0,.32);animation:fadein .3s ease}
  .resumepop .resumebar{box-shadow:none;padding:7px 4px;background:none;color:var(--text)}
  /* === מנהל הפופאפים הצפים: מחסנית אחת מסודרת, אף פעם לא חופפים === */
  .popdock{position:fixed;bottom:22px;inset-inline-start:16px;z-index:110;display:flex;flex-direction:column-reverse;gap:10px;align-items:flex-start;max-width:92vw;pointer-events:none}
  body.playing .popdock{bottom:96px}
  .popdock>.popitem{display:none!important;pointer-events:auto;max-width:88vw}
  .popdock>.popitem.on{display:flex!important}
  /* מובייל: הבאנר לא מתפרש עד ה-FAB שבצד השני (סבב UX 10.7); חייב לבוא אחרי כלל ה-88vw */
  @media(max-width:560px){.popdock>.popitem{max-width:min(88vw,calc(100vw - 104px))}}
  .resumex{all:unset;cursor:pointer;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;color:var(--muted);transition:background .12s,color .12s}
  .resumex:hover{background:var(--bg2);color:var(--accent)}
  .toast{position:fixed;bottom:120px;left:50%;transform:translateX(-50%) translateY(20px);background:#111;color:#fff;padding:12px 22px;border-radius:var(--r-pill);font-weight:700;font-size:.92rem;box-shadow:0 12px 32px rgba(0,0,0,.4);z-index:300;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;max-width:90vw;text-align:center}
  .installbanner{display:flex;align-items:center;gap:12px;width:max-content;max-width:92vw;color:#fff;padding:12px 15px;border-radius:18px;
    background:linear-gradient(145deg,var(--accent),var(--accent2));border:1px solid rgba(255,255,255,.16);
    box-shadow:0 3px 0 rgba(0,0,0,.22), 0 12px 24px rgba(0,0,0,.38), 0 26px 50px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.4), inset 0 -3px 9px rgba(0,0,0,.22);
    opacity:0;pointer-events:none;transform-origin:bottom center;
    transform:perspective(750px) rotateX(-60deg) translateY(28px) scale(.92);
    transition:opacity .35s ease, transform .5s cubic-bezier(.2,.8,.25,1.35)}
  .installbanner.show{opacity:1;pointer-events:auto;transform:perspective(750px) rotateX(0deg) translateY(0) scale(1);animation:ibFloat 3.6s ease-in-out .6s infinite}
  @keyframes ibFloat{0%,100%{transform:perspective(750px) rotateX(0deg) translateY(0)}50%{transform:perspective(750px) rotateX(5deg) translateY(-6px)}}
  @media(prefers-reduced-motion:reduce){.installbanner.show{animation:none}}
  .installbanner .ib-emoji{font-size:1.85rem;flex-shrink:0;filter:drop-shadow(0 3px 5px rgba(0,0,0,.4))}
  .installbanner .ib-msg{display:flex;flex-direction:column;line-height:1.25;min-width:0;text-shadow:0 1px 2px rgba(0,0,0,.25)}
  .installbanner .ib-msg b{font-size:.95rem}
  .installbanner .ib-sub{font-size:.75rem;opacity:.92}
  .installbanner .ib-install{background:linear-gradient(180deg,#fff,#e9ecff);color:var(--accent);border:0;border-radius:var(--r-pill);padding:8px 17px;font-weight:800;cursor:pointer;font-size:.9rem;white-space:nowrap;flex-shrink:0;box-shadow:0 4px 0 rgba(0,0,0,.2),0 7px 13px rgba(0,0,0,.28);transition:transform .12s,box-shadow .12s}
  .installbanner .ib-install:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.2),0 3px 7px rgba(0,0,0,.28)}
  /* היעד הקטן ביותר בעמוד היה כאן: 28×27 (נמדד 16.8) — סגירת באנר שאי-אפשר לפגוע בה באצבע */
  .installbanner .ib-x{background:transparent;border:0;color:#fff;font-size:1.1rem;cursor:pointer;opacity:.85;padding:0;flex-shrink:0;width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%}
  .installbanner .ib-x:hover{background:rgba(255,255,255,.16);opacity:1}
  .installbanner.seasonpop{background:linear-gradient(145deg,var(--sp1,var(--accent)),var(--sp2,var(--accent2)))}
  /* 13.7 בקשת משתמש: הבאנר-העונתי מיושר לשפת-הגלולות של שאר הפופאפים התחתונים —
     בלי תלת-ממד/ריחוף/צל-כבד; שומר את צבעי-העונה. באנר-ההתקנה (installbanner רגיל) לא הושפע. */
  .installbanner.seasonpop{border-radius:var(--r-pill);padding:7px 9px 7px 15px;gap:9px;border:1px solid rgba(255,255,255,.14);box-shadow:0 12px 32px rgba(0,0,0,.32);transform:none;transition:opacity .3s ease}
  .installbanner.seasonpop.show{transform:none;animation:none}
  .installbanner.seasonpop .ib-emoji{font-size:1.3rem;filter:none}
  .installbanner.seasonpop .ib-msg b{font-size:.86rem}
  .installbanner.seasonpop .ib-sub{font-size:.73rem}
  .installbanner.seasonpop .ib-install{padding:7px 14px;font-size:.84rem;box-shadow:none}
  .installbanner.seasonpop .ib-install:active{transform:none;box-shadow:none}
  .bannertoggles{display:flex;flex-wrap:wrap;gap:7px}
  .bntgl{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r-pill);padding:6px 12px;font-size:.82rem;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s}
  .bntgl.on{background:color-mix(in srgb,var(--accent) 16%,transparent);border-color:var(--accent)}
  .e3d{height:1.15em;width:1.15em;vertical-align:-0.18em;display:inline-block;margin:0 .03em;object-fit:contain}
  .liwrap{display:inline-flex;align-items:center;justify-content:center}
  .liwrap svg{width:100%;height:100%;display:block}
  .e3d.etext{display:inline;width:auto;height:auto}
  /* על רקע צבעוני האייקון יורש את צבע הטקסט של הכפתור (כמו הגליף המקורי) — אחרת כחול-על-כחול נעלם.
     הרשימה = כל הסלקטורים בקובץ שמגדירים color:#fff + הנגן כולו. כלל לעתיד: כפתור צבעוני חדש → להוסיף לכאן. */
  #dock .liwrap svg,#npfull .liwrap svg,
  .chip.on .liwrap svg,.chip.on:hover .liwrap svg,.sortchip.on .liwrap svg,.catchip.on .liwrap svg,.pp .liwrap svg,.nppp .liwrap svg,
  .chip-live .liwrap svg,.chip-live:hover .liwrap svg,.updatebar .liwrap svg,.syncbtn .liwrap svg,
  .sortbtn.on .liwrap svg,.asortbtn.on .liwrap svg,.ssortbtn.on .liwrap svg,.psortbtn.on .liwrap svg,.badge .liwrap svg,
  .adminedit .liwrap svg,.adminpanelbtn .liwrap svg,.admmbtn .liwrap svg,.admsave .liwrap svg,.admtgl.on .liwrap svg,
  .admact .liwrap svg,.admtab.on .liwrap svg,body.plmode #plChip .liwrap svg,
  .bmadd .liwrap svg,.consent button .liwrap svg,.cornericon .liwrap svg,.dctls .dctl.on .liwrap svg,.dock .dpp .liwrap svg,
  .dpcalbtn.on .liwrap svg,.installbanner .liwrap svg,
  .newpill .liwrap svg,.pldetacts #plDetPlay .liwrap svg,.pldetacts #myPlayAll .liwrap svg,.plh-actions #plhPlay .liwrap svg,.plnewrow button .liwrap svg,
  .plvisbtn.on .liwrap svg,.radiobanner .liwrap svg,.repchip.on .liwrap svg,.reportfab .liwrap svg,.resumebar .liwrap svg,
  .sleepinput button .liwrap svg,.toast .liwrap svg,.toolToggle .liwrap svg,.tour-next .liwrap svg,.tpnewrow button .liwrap svg,
  .top .liwrap svg,.fpx:hover .liwrap svg
  {stroke:currentColor}
  .pinbadge .liwrap svg{stroke:#3a2a00}
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
  .toast.err{background:#8a1c2b}
  .toast.ok{background:#15602f}
  .dclose:hover,.npclose:hover,.resumex:hover,.bmpop h4 button:hover{background:color-mix(in srgb,var(--text) 12%,transparent);color:var(--text)}
  .rate{display:flex;align-items:center;gap:11px;margin-top:9px;flex-wrap:wrap}
  .stars{font-size:1.4rem;letter-spacing:3px;cursor:pointer;color:var(--line);display:inline-flex}
  /* לכוכב לא היה שום ריפוד — אזור הפגיעה היה רוחב הגליף בלבד (16.8) */
  .star{transition:color .1s,transform .1s;padding:5px 3px;line-height:1}.star.on,.star.hov{color:var(--star)}.star:hover{color:var(--star);transform:scale(1.15)}
  .rhint{display:none;align-items:center;justify-content:center;min-width:1.5em;height:1.5em;padding:0 .25em;background:var(--star);color:#1a1a1a;border-radius:.6em;font-size:.82rem;font-weight:800}.rhint.show{display:inline-flex}
  .rinfo{font-size:.82rem;color:var(--muted)}.rinfo b{color:var(--star)}
  /* 🎬 הקליפ (18.8, משוב גולש) — יושב בתוך .cover-wrap ונפתח *במקום התמונה* במקום לרדת
     כשורה נפרדת בתחתית הכרטיס. ה-summary מוסתר; הטריגר הוא כפתור .clipwatch בשורת הפעולות,
     ולחיצה נוספת סוגרת. ‼️ pointer-events:none כשסגור — ה-details פרוש inset:0 ובלי זה
     הוא היה בולע כל לחיצה על התמונה (וממילא חוסם את "לחיצה על התמונה מנגנת"). */
  /* ‼️ 18.8 (בקשת משתמש, סבב ב') — הקליפ נפתח בגודל התמונה, וההגדלה היא צעד שני:
     ⤢ בפינת הווידאו מוסיף .clipbig לכרטיס, ורק אז הכרטיס עובר לטור והווידאו נפרש
     ב-16:9 (באריחים — נפרש לשתי עמודות). הצמצום חוזר באותו כפתור, וסגירת הקליפ
     מנקה את המחלקה כדי שהפתיחה הבאה תתחיל שוב קטנה. */
  #list article.song.clipbig .cover-wrap{width:100%;aspect-ratio:16/9;flex-shrink:1;align-self:stretch}
  /* ‼️ חובה — כלל העטיפה-הריבועית של כרטיס-רשימה "#list>article.song:not(:has(h1))" הוא
     (1,3,3) וגובר על (1,3,1) שלי, ואז הקליפ המוגדל יוצא ריבוע שחור עם וידאו ממורכז.
     הכלל הזה הוא (1,4,2) ומחזיר 16:9. (בסבב הקודם ה-:has() נתן לי מחלקה נוספת "במתנה"
     והכיסוי הזה לא נדרש — לקח: החלפת :has() במחלקה משנה גם את הסְפֵּצִיפִיוּת.) */
  @media(min-width:600px){body:not(.gridview) #list>article.song.clipbig .cover-wrap{aspect-ratio:16/9}}
  @media(min-width:600px){body:not(.gridview) #list article.song.clipbig{flex-direction:column}}
  body.gridview #list article.song.clipbig{grid-column:span 2}
  @media(max-width:560px){body.gridview #list article.song.clipbig{grid-column:1/-1}}
  /* ‼️ 18.8 מאוחר (בקשת משתמש: "גם בפודקאסטים") — כל כללי-ההגדלה נכתבו על #list בלבד, ופיד
     הפודקאסטים יושב ב-#podlist. בלעדי הכלל הזה הקליפ בפודקאסט היה נפתח אבל ⤢ לא היה עושה כלום.
     ‏(1,3,1) גובר על body.podmode .song .cover-wrap{width:200px;aspect-ratio:1/1} שהוא (0,3,0)
     — גם זה שבתוך מדיה, כי ספציפיות גוברת על סדר-מקור. הכרטיס כבר column, אז אין מה להפוך. */
  #podlist article.song.clipbig .cover-wrap{width:100%;aspect-ratio:16/9;flex-shrink:1;align-self:stretch}
  /* כפתור-השכבה עצמו — z-index מעל ה-details (5), ומופיע רק כשהקליפ פתוח */
  /* ‼️ 18.8 (משוב משתמש: "כפתור ההגדלה לא ברור") — היה ריבוע 30px עם חיצי-פינות בלבד, כהה על
     וידאו כהה, ודומה מדי לכפתור המסך-המלא של יוטיוב עצמו. עכשיו: כדור עם *מילה* ("הגדל"/"הקטן"),
     רקע אטום וצל — קריא, ואי-אפשר לבלבל אותו עם פקדי הנגן של יוטיוב שיושבים בתחתית. */
  .cover-wrap .clipzoom{position:absolute;z-index:6;top:6px;inset-inline-end:6px;display:none;height:30px;padding:0 11px 0 9px;gap:5px;border:0;border-radius:var(--r-pill);background:rgba(0,0,0,.82);color:#fff;font-family:inherit;font-size:.79rem;font-weight:700;line-height:1;cursor:pointer;align-items:center;justify-content:center;backdrop-filter:blur(2px);box-shadow:0 2px 10px rgba(0,0,0,.4)}
  .cover-wrap .clipzoom .czt{display:inline}
  .cover-wrap:has(.ytd[open]) .clipzoom{display:inline-flex}
  .cover-wrap .clipzoom:hover{background:rgba(0,0,0,.85)}
  /* פקדי הקליפ שלנו — מחליפים את סרגל יוטיוב שכובה ב-controls=0 (20.8) */
  .cover-wrap .clipctl{position:absolute;z-index:6;inset-inline:0;bottom:0;display:none;align-items:center;gap:8px;padding:7px 9px;background:linear-gradient(transparent,rgba(0,0,0,.72))}
  .cover-wrap:has(.ytd[open]) .clipctl{display:flex}
  .cover-wrap .ccpp{flex-shrink:0;width:28px;height:28px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.92);color:#111;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
  .cover-wrap .ccpp:hover{background:#fff}
  .cover-wrap .ccpp .ccpause{display:none}
  .cover-wrap.ccplaying .ccpp .ccplay{display:none}
  .cover-wrap.ccplaying .ccpp .ccpause{display:inline}
  .cover-wrap .ccbar{flex:1;height:5px;border-radius:3px;background:rgba(255,255,255,.32);cursor:pointer;position:relative;overflow:hidden}
  .cover-wrap .ccbar>i{position:absolute;top:0;bottom:0;left:0;width:0;background:#fff;display:block}
  /* באריח קטן אין מקום לפס — משאירים רק את הכפתור */
  @media(max-width:560px){body.gridview #list .cover-wrap:not(.ccbig) .ccbar{display:none}}
  .cover-wrap .clipzoom .zout{display:none}
  article.song.clipbig .clipzoom .zin{display:none}
  article.song.clipbig .clipzoom .zout{display:inline}
  .cover-wrap .ytd{position:absolute;inset:0;z-index:5;margin:0}
  .cover-wrap .ytd:not([open]){pointer-events:none;visibility:hidden}
  .cover-wrap .ytd>summary{display:none}
  /* ‼️ 20.8 — margin:0 חובה. הכלל הבסיסי של .yt נושא margin-top:11px מהימים שהקליפ היה
     שורה נפרדת מתחת לכרטיס. העקיפה כאן דרסה position/inset/padding/height אבל **לא את
     ה-margin**, ולכן הווידאו נדחף 11px מטה: נשאר פס של תמונת-הרקע למעלה וגלישה של 11px
     למטה. נמדד: gapTop=11, gapBottom=-11, גם בקטן וגם במוגדל (דיווח משתמש). */
  .cover-wrap .ytd .yt{position:absolute;inset:0;margin:0;padding:0;height:100%;background:#000}
  .cover-wrap .ytd .yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
  .ytd summary{cursor:pointer;color:var(--accent);font-size:.92rem;font-weight:600;list-style:none;display:inline-flex;align-items:center;gap:6px}
  /* 15.7 בקשת משתמש: "צפייה בקליפ" באותה שורה עם הדירוג (בצד שמאל) — לא שורה נפרדת,
     וכך כרטיסים עם/בלי קליפ באותו גובה בדיוק. בפתיחה הסרטון יורד לרוחב מלא */
  .raterow{display:flex;align-items:center;justify-content:space-between;gap:8px 14px;flex-wrap:wrap;margin-top:9px}
  .raterow .rate{margin-top:0}
  /* ‼️ .clipzoom חייב להיכלל: הוא נשלט ב-:has(.ytd[open]) וה-details נשאר "פתוח" בעץ גם
     כשהוא display:none — בלי זה היה מרחף כפתור-הגדלה מעל תמונה בלי וידאו במצב "בלי קליפים" */
  body.noclips .ytd,body.noclips .cliponly,body.noclips .chip[data-f="yt"],body.noclips .clipwatch,body.noclips .clipzoom,body.noclips .clipctl{display:none!important}
  .yt{position:relative;padding-bottom:56.25%;height:0;margin-top:11px;border-radius:var(--r-lg);overflow:hidden}
  .yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
  .empty{text-align:center;color:var(--muted);padding:50px}
  footer{text-align:center;color:var(--muted);padding:28px;font-size:.82rem}
  footer a{color:var(--muted);text-decoration:none}
  footer a:hover{color:var(--accent)}
  .morehead{max-width:860px;margin:22px auto 2px;padding:0 18px;font-size:1.12rem;font-weight:800}
  .related{max-width:900px;margin:8px auto 26px;padding:18px 16px}
  .related h2{font-size:1.06rem;margin:20px 0 10px;font-weight:800;display:flex;align-items:center;gap:7px}
  .relgrid{display:flex;flex-direction:column;gap:8px}
  .relitem{display:flex;align-items:center;gap:10px;width:100%;padding:13px 16px;border-radius:13px;background:var(--bg2);border:1px solid var(--line);color:var(--text);text-decoration:none;font-size:.92rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:transform .12s,border-color .12s,color .12s,box-shadow .12s}
  .relitem>span:last-child{overflow:hidden;text-overflow:ellipsis}
  .relitem:hover{transform:translateX(-3px);border-color:var(--accent);color:var(--accent);box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 22%,transparent)}
  .relitem .ri-ico{flex-shrink:0;opacity:.8}
  .admindot{cursor:pointer;opacity:.4;padding:0 10px;font-weight:800;user-select:none}
  .admlbl{display:block;font-size:.8rem;color:var(--muted);font-weight:700;margin:10px 2px 5px}
  .adminput{width:100%;box-sizing:border-box;padding:11px 14px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--bg2);color:var(--text);font-size:.95rem;font-family:inherit}
  .adminput:focus{border-color:var(--accent);outline:none}
  .admarea{resize:vertical;min-height:90px}
  .admbtns{display:flex;gap:10px;margin-top:16px}
  .admsave{flex:1;cursor:pointer;border:0;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font-weight:800;font-size:.95rem;padding:12px;border-radius:var(--r-md)}
  .admdel{cursor:pointer;border:1px solid #ff4d6d;background:transparent;color:#ff4d6d;font-weight:700;font-size:.9rem;padding:12px 16px;border-radius:var(--r-md)}
  .admsave:hover{transform:scale(1.02)}
  body.admin .song{position:relative}
  .adminedit{position:absolute;top:8px;inset-inline-start:8px;z-index:6;cursor:pointer;border:0;background:rgba(0,0,0,.6);color:#fff;font-size:1rem;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.3)}
  .adminedit:hover{background:var(--accent)}
  [dir="ltr"] .adminedit{top:48px} /* ב-LTR הפינה העליונה תפוסה ע"י תג 📌 — מורידים את כפתור העריכה מתחתיו */
  .admtoggles{display:flex;gap:10px;margin-top:10px}
  .admtgl{flex:1;cursor:pointer;border:1px solid var(--line);background:var(--bg2);color:var(--text);font-weight:700;font-size:.85rem;padding:10px;border-radius:10px}
  .admtgl.on{background:var(--accent);color:#fff;border-color:var(--accent)}
  body.admin .song[data-hidden="1"]{opacity:.5;outline:2px dashed #ff4d6d;outline-offset:-2px}
  .pinbadge{left:12px;right:auto;background:linear-gradient(135deg,#ffcb3d,#ffa62e);color:#3a2a00;box-shadow:0 4px 12px rgba(255,170,40,.5)}
  .adminpanelbtn{display:none;position:fixed;bottom:22px;inset-inline-start:18px;z-index:118;width:52px;height:52px;border-radius:50%;border:0;cursor:pointer;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font-size:1.4rem;box-shadow:0 6px 20px rgba(0,0,0,.4)}
  body.admin .adminpanelbtn{display:flex;align-items:center;justify-content:center}
  body.playing .adminpanelbtn{bottom:134px}
  .reportfab{position:fixed;bottom:22px;inset-inline-end:18px;z-index:117;width:52px;height:52px;border-radius:50%;cursor:pointer;background:linear-gradient(135deg,#ff8a3d,#ff5b8f);border:0;color:#fff;box-shadow:0 6px 20px rgba(255,91,143,.45);display:flex;align-items:center;justify-content:center;transition:transform .12s,box-shadow .12s}
  .reportfab:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(255,91,143,.6)}
  body.playing .reportfab{bottom:134px}
  .admmlist{display:flex;flex-direction:column;gap:6px;max-height:62vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .admgroup{font-size:.74rem;font-weight:800;letter-spacing:.02em;color:var(--muted);text-transform:uppercase;margin:6px 2px 7px;opacity:.85}
  .admsec{border:1px solid var(--line);border-radius:var(--r-md);margin-bottom:9px;background:var(--bg2);overflow:hidden}
  .admsec>summary{cursor:pointer;list-style:none;padding:11px 14px;font-weight:700;font-size:.9rem;color:var(--text);display:flex;align-items:center;gap:7px}
  .admsec>summary::-webkit-details-marker{display:none}
  .admsec>summary::after{content:"▾";margin-inline-start:auto;color:var(--muted);transition:transform .15s}
  .admsec[open]>summary::after{transform:rotate(180deg)}
  .admsec>summary:hover{color:var(--accent)}
  .admsec .admmlist,.admsec .bannertoggles{padding:0 12px 12px;max-height:60vh}
  .admmrow{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;background:var(--bg2);border:1px solid var(--line);font-size:.86rem}
  .admmrow.empty{justify-content:center;color:var(--muted);font-weight:600}
  .admmrow span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .admmbtn{flex:none;cursor:pointer;border:0;background:var(--accent);color:#fff;font-weight:700;font-size:.8rem;padding:6px 12px;border-radius:var(--r-sm)}
  #adminPanel .modalbox{max-width:760px;width:96vw;max-height:90vh;display:flex;flex-direction:column}
  .admtabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px;flex:none}
  .admtab{cursor:pointer;border:1px solid var(--line);background:var(--bg2);color:var(--text);font-weight:700;font-size:.82rem;padding:7px 13px;border-radius:var(--r-pill);display:inline-flex;align-items:center;gap:6px}
  .admtab.on{background:var(--accent);color:#fff;border-color:var(--accent)}
  .admtabbody{overflow-y:auto;flex:1;min-height:0;-webkit-overflow-scrolling:touch}
  .admbadge{background:#e33;color:#fff;border-radius:var(--r-pill);font-size:.68rem;padding:1px 7px;font-weight:800;display:none}
  /* שורת-שגיאה בפאנל: מנהל חייב להבחין בין "אין נתונים" לבין "לא הצלחנו לטעון" (16.8) */
  .admerr{color:#c62828;background:rgba(230,60,60,.09);border:1px solid rgba(230,60,60,.35);border-radius:10px;padding:14px 12px;font-weight:600}
  /* חיווי איכות הקובץ (18.8) — נגזר מגודל+משך שהסורק כבר שמר, בלי בקשה נוספת */
  .kbps{font-weight:800;color:var(--muted)}
  .kbps.hi{color:var(--accent)}
  /* === תצוגת שמות שירים (18.8, משוב גולש) ===
     ללא-אייקונים: __emoji3d מחליף כל אימוג'י בטקסט באייקון (.liwrap/.e3d). מסתירים אותם
     רק בשמות ובכרטיסים — לא בכל האתר, אחרת כפתורים שכל תוכנם אימוג'י מתרוקנים.
     שמות-לועזיים-מימין-לשמאל: ‼️ unicode-bidi:plaintext על שמות הנגן *גובר* על dir ומחזיר
     זיהוי-לפי-תו-ראשון — בלי לבטל אותו כאן, ה-dir שנוסיף לא היה משנה כלום. */
  html[data-noicons="1"] #list .liwrap,html[data-noicons="1"] #list .e3d,
  html[data-noicons="1"] .songlink .liwrap,html[data-noicons="1"] .songlink .e3d,
  html[data-noicons="1"] .dtitle .liwrap,html[data-noicons="1"] .dtitle .e3d,
  html[data-noicons="1"] .nptitle .liwrap,html[data-noicons="1"] .nptitle .e3d{display:none}
  html[data-rtlnames="1"] .songlink,html[data-rtlnames="1"] #list .song-body h1,
  html[data-rtlnames="1"] #list .song-body h2{direction:rtl;text-align:right;unicode-bidi:isolate}
  html[data-rtlnames="1"] .dock .dtitle,html[data-rtlnames="1"] .nptitle{direction:rtl;unicode-bidi:isolate}
  /* שורת-בריאות הריצות האוטומטיות (18.8) — כישלון שקט היה עד היום בלתי-נראה בפאנל */
  .admhealth{font-size:.78rem;color:var(--muted);font-weight:600;line-height:1.7;margin:-6px 2px 14px;white-space:normal}
  .admhealth:empty{display:none}
  .admhealth.bad{color:#c62828;background:rgba(230,60,60,.09);border:1px solid rgba(230,60,60,.35);border-radius:10px;padding:10px 12px;margin-top:0}
  /* לשונית "כלים" (18.8) — כרטיס לכל פעולת-ניהול: שם, הסבר, שדות, כפתורים, ותוצאה במקום */
  .admtool{border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg2);padding:12px 13px;margin-bottom:9px}
  .admtool.danger{border-color:rgba(230,60,60,.45)}
  .admtool>b{display:block;font-size:.92rem;margin-bottom:3px}
  .admtool>.admmeta{margin-bottom:2px;line-height:1.5;white-space:normal}
  .admtool .admbtns{margin-top:11px;flex-wrap:wrap}
  .admtool .admarea{min-height:70px}
  .admtool input[type=file]{margin-top:8px;font-size:.8rem;padding:8px}
  .admtool details>summary{cursor:pointer;color:var(--muted);font-size:.78rem;font-weight:700;margin-top:9px;list-style:none}
  .admtool details>summary::-webkit-details-marker{display:none}
  .admtoolout{margin-top:11px;font-size:.85rem;line-height:1.6;word-break:break-word}
  .admtoolout:empty{display:none}
  .admtoolrows{max-height:230px;overflow-y:auto;background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:8px 10px;margin:6px 0;font-size:.8rem;line-height:1.75}
  .admtoolraw{max-height:220px;overflow:auto;background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:8px 10px;font-size:.72rem;white-space:pre-wrap;word-break:break-all;margin:6px 0 0}
  .dimrow{opacity:.55}
  .admrefresh{background:none;border:0;font-size:1.05rem;cursor:pointer;padding:2px 6px;margin-inline-start:auto;line-height:1}
  .admrefresh.spin{animation:admspin .9s linear}
  @keyframes admspin{to{transform:rotate(360deg)}}
  .admtab.on .admbadge{background:rgba(255,255,255,.3)}
  .admcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px;margin-bottom:14px}
  .admcard{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r-md);padding:10px 8px;text-align:center}
  .admcard b{display:block;font-size:1.15rem;color:var(--accent)}
  .admcard span{font-size:.7rem;color:var(--muted);font-weight:700}
  .admmeta{display:block;font-size:.72rem;color:var(--muted);font-weight:600;white-space:normal}
  .mn2{flex:1;min-width:0;overflow:hidden}
  .mn2 b{display:block;font-size:.85rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .admactions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
  .admact{cursor:pointer;border:0;background:var(--accent);color:#fff;font-weight:700;font-size:.84rem;padding:9px 14px;border-radius:10px;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
  .admact.alt{background:var(--bg2);color:var(--text);border:1px solid var(--line)}
  .admact:disabled{opacity:.6;cursor:wait}
  #admSearch{margin-bottom:10px;width:100%;box-sizing:border-box}
  .admsongrow{display:flex;align-items:center;gap:7px;padding:8px 10px;border-radius:10px;background:var(--bg2);border:1px solid var(--line)}
  .admsongrow.hid{opacity:.55}
  .admsbtn{flex:none;cursor:pointer;border:1px solid var(--line);background:var(--bg);color:var(--text);font-size:.82rem;padding:5px 8px;border-radius:var(--r-sm);text-decoration:none;line-height:1}
  .admsbtn.warn{color:#e33;border-color:#e33}
  /* נגן צף תחתון */
  .dock{position:fixed;bottom:0;left:0;right:0;z-index:20;background:color-mix(in srgb,var(--bg2) 97%,transparent);backdrop-filter:blur(14px);border-top:1px solid var(--line);display:none;flex-direction:column;gap:7px;padding:9px 14px;box-shadow:0 -6px 24px rgba(0,0,0,.35)}
  .dock.show{display:flex}
  .dock-row{display:flex;align-items:center;gap:10px}
  .dock-seek{gap:9px}
  .dock-main{justify-content:space-between;gap:10px;flex-wrap:wrap}
  .dctls{display:flex;align-items:center;gap:5px;flex-shrink:0}
  .dock img{width:46px;height:46px;border-radius:10px;object-fit:cover;flex-shrink:0;background:var(--card)}
  /* עטיפה + תקליט שמחליק החוצה ומסתובב */
  .nowart{position:relative;width:100px;height:48px;flex-shrink:0}
  .dcover{position:absolute;top:0;right:0;width:48px;height:48px;border-radius:10px;object-fit:cover;z-index:2;background:var(--card);box-shadow:0 3px 12px rgba(0,0,0,.5)}
  .vinyl{position:absolute;top:1px;right:1px;width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle,#2a2a2a 0 28%,#0c0c0c 29% 100%);box-shadow:0 2px 12px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.07);z-index:1;transition:right .55s cubic-bezier(.5,1.4,.5,1)}
  .nowart.playing .vinyl{right:52px}
  .vinyl img{width:34px;height:34px;border-radius:50%;object-fit:cover}
  .vinyl::after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:var(--bg2);z-index:2;box-shadow:0 0 0 2px rgba(0,0,0,.55)}
  .vinyl.spin{animation:spin 4s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}
  /* תווים מרחפים בכותרת */
  .notes{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
  .notes span{position:absolute;bottom:-30px;color:rgba(255,255,255,.32);animation:floatNote linear infinite;text-shadow:0 0 8px rgba(255,255,255,.3)}
  .notes span:nth-child(1){left:6%;font-size:1.3rem;animation-duration:9s}
  .notes span:nth-child(2){left:20%;font-size:1rem;animation-duration:11s;animation-delay:2s}
  .notes span:nth-child(3){left:38%;font-size:1.7rem;animation-duration:8s;animation-delay:1s}
  .notes span:nth-child(4){left:55%;font-size:1.1rem;animation-duration:12s;animation-delay:3s}
  .notes span:nth-child(5){left:70%;font-size:1.4rem;animation-duration:10s;animation-delay:.5s}
  .notes span:nth-child(6){left:84%;font-size:1rem;animation-duration:13s;animation-delay:2.5s}
  .notes span:nth-child(7){left:92%;font-size:1.5rem;animation-duration:9.5s;animation-delay:1.5s}
  .notes span:nth-child(5){font-size:2rem}
  .notes span:nth-child(8){left:13%;font-size:1.65rem;animation-duration:10.5s;animation-delay:4s;color:rgba(255,203,61,.42)}
  .notes span:nth-child(9){left:29%;font-size:.95rem;animation-duration:12.5s;animation-delay:5.5s}
  .notes span:nth-child(10){left:47%;font-size:1.25rem;animation-duration:9.3s;animation-delay:4.2s;color:rgba(255,203,61,.36)}
  .notes span:nth-child(11){left:63%;font-size:1.9rem;animation-duration:11.5s;animation-delay:6s}
  .notes span:nth-child(12){left:77%;font-size:1.1rem;animation-duration:13.5s;animation-delay:3.6s}
  .notes span:nth-child(13){left:89%;font-size:1.4rem;animation-duration:8.8s;animation-delay:5s;color:rgba(255,203,61,.4)}
  .notes span:nth-child(14){left:97%;font-size:1rem;animation-duration:12.2s;animation-delay:7s}
  .notes span:nth-child(15){left:3%;font-size:1.2rem;animation-duration:8.4s;animation-delay:.6s}
  .notes span:nth-child(16){left:16%;font-size:1rem;animation-duration:10.2s;animation-delay:2.2s;color:rgba(255,203,61,.38)}
  .notes span:nth-child(17){left:24%;font-size:1.55rem;animation-duration:9.6s;animation-delay:.3s}
  .notes span:nth-child(18){left:33%;font-size:1.85rem;animation-duration:11.8s;animation-delay:1.8s}
  .notes span:nth-child(19){left:43%;font-size:1.05rem;animation-duration:8.9s;animation-delay:2.8s}
  .notes span:nth-child(20){left:52%;font-size:1.45rem;animation-duration:10.8s;animation-delay:.9s;color:rgba(255,203,61,.42)}
  .notes span:nth-child(21){left:60%;font-size:1.15rem;animation-duration:9.1s;animation-delay:2.4s}
  .notes span:nth-child(22){left:74%;font-size:1.7rem;animation-duration:12.6s;animation-delay:1.2s}
  .notes span:nth-child(23){left:81%;font-size:1rem;animation-duration:8.2s;animation-delay:3.1s;color:rgba(255,203,61,.36)}
  .notes span:nth-child(24){left:95%;font-size:1.3rem;animation-duration:10.4s;animation-delay:1.6s}
  @keyframes floatNote{0%{transform:translateY(0) rotate(0);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translateY(-210px) rotate(35deg);opacity:0}}
  /* גלי קול בתחתית הכותרת */
  .dmid{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
  .dock .dpp{width:46px;height:46px;border:0;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2),var(--accent3));color:#fff;font-size:1.1rem;cursor:pointer;flex-shrink:0}
  .dctl{background:none;border:0;color:var(--muted);font-size:1.15rem;cursor:pointer;padding:4px;flex-shrink:0;text-decoration:none;line-height:1}
  .dctl:hover{color:var(--accent)}
  .dctl.on{color:var(--accent)}
  #dspeed{font-size:.82rem;font-weight:700;border:1px solid var(--line);border-radius:var(--r-sm);padding:6px 8px;min-width:40px}
  .dock .dtitle{font-weight:700;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;unicode-bidi:plaintext}
  .dock .dbar{flex:1;height:8px;background:var(--line);border-radius:4px;cursor:pointer;overflow:hidden;min-width:60px}
  .dock .dfill{height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2))}
  .dock .dtime{font-size:.74rem;color:var(--muted);min-width:38px;text-align:center;font-variant-numeric:tabular-nums}
  .dright{display:flex;align-items:center;gap:7px;flex-shrink:0}
  .dvol{display:flex;align-items:center;gap:4px}
  .dvol input{width:68px;accent-color:var(--accent);cursor:pointer}
  .dclose{background:none;border:0;color:var(--muted);font-size:1.15rem;cursor:pointer;width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;line-height:1;transition:background .12s,color .12s}
  .nowart{cursor:pointer}
  /* === נגן צף — פריסה נקייה ומסודרת במובייל בלבד (דסקטופ נשאר כרגיל) ===
     שורה 1: עטיפה + שם + ⏮▶⏭ (וגם ערבוב/חזרה) · שורה 2: פקדים משניים ממורכזים · כל הפקדים נשמרים. */
  @media(max-width:560px){
    .dock{padding:8px 14px calc(10px + env(safe-area-inset-bottom));gap:6px}
    .dock-seek{gap:8px}
    .dock .dtime{min-width:42px;flex:0 0 auto;font-variant-numeric:tabular-nums}
    .actions{flex-wrap:wrap;gap:8px}
    .song-body .iconbtn{width:40px;height:40px;font-size:1.02rem}
    .actions .pp{padding:10px 18px;font-size:.9rem}
    .dock-main{flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 9px}
    .dock .dvol{display:none}                  /* ווליום — בנייד יש כפתורי חומרה */
    .dock #viz{display:none}                    /* ויזואלייזר דקורטיבי */
    .nowart{order:1;width:auto;height:40px}
    .nowart .vinyl{display:none}
    .dcover{position:static;width:40px;height:40px;border-radius:9px;box-shadow:0 2px 8px rgba(0,0,0,.45)}
    .dmid{order:2;flex:1 1 60px;min-width:0}
    .dock .dtitle{font-size:.88rem}
    .dctls{order:3;gap:7px;flex:1 1 100%;justify-content:center}
    .dctl{font-size:1.12rem;padding:3px}
    .dctls .dctl{width:40px;height:40px;font-size:1rem}
    .dock .dpp{width:40px;height:40px;font-size:1.02rem}
    .dright{order:4;flex:1 1 100%;justify-content:center;gap:9px}
    .dright .dctl{width:38px;height:38px;font-size:.9rem}
    #dspeed{padding:5px 7px;min-width:34px;font-size:.78rem}
    /* כפתורים צפים במובייל: קטנים יותר, וכשהנגן פתוח — מעליו ולא עליו */
    .reportfab,.adminpanelbtn{width:44px;height:44px;bottom:14px}
    .adminpanelbtn{font-size:1.15rem}
    body.playing .reportfab,body.playing .adminpanelbtn{bottom:calc(178px + env(safe-area-inset-bottom))}
    body.playing .popdock{bottom:calc(178px + env(safe-area-inset-bottom))}
    body.playing{padding-bottom:calc(188px + env(safe-area-inset-bottom))}
    .popx{width:40px;height:40px;font-size:.9rem}
    /* === פאנל הניהול במובייל (18.8) ===
       לשונית "שירים" הייתה שורת-פלקס של 6 עמודות בשורה אחת. ב-360px נשארו לכותרת ~85px
       (חתוכה ב-ellipsis) והכפתורים ירדו ל-~28px — מתחת לרף ה-40px של שאר המובייל בקובץ.
       עכשיו: הכותרת בשורה מלאה, הפעולות בשורה שנייה, יעדי-מגע 40px. אותם onclick בדיוק. */
    #adminPanel{padding:2vh 8px}
    #adminPanel .modalbox{width:100%;max-width:none;max-height:96vh;padding:14px 12px}
    .admsongrow{flex-wrap:wrap;gap:7px}
    .admsongrow .mn2{flex:1 1 100%}
    .admsongrow .mn2 b{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.35}
    .admsongrow .admsbtn{flex:1 1 0;min-width:44px;height:40px;padding:0;font-size:1rem;display:inline-flex;align-items:center;justify-content:center}
    .admmrow{flex-wrap:wrap}
    .admmrow span{white-space:normal;flex:1 1 100%}
    .admmbtn{min-height:38px;padding:8px 14px}
    .admtab{min-height:40px;padding:8px 13px}
    /* גלילה אחת (admtabbody) במקום שתיים מקוננות — בנייד המקוננת לוכדת את האצבע */
    .admmlist,.admsec .admmlist,.admsec .bannertoggles{max-height:none}
  }
  /* נגן מסך מלא */
  /* z הועלה מ-40 ל-190: הפרומו (110) והסרגל (150) ציירו מעל נגן-המסך-המלא והסתירו את שם השיר */
  .npfull{position:fixed;inset:0;z-index:190;background:linear-gradient(160deg,var(--bg2),var(--bg));display:none;flex-direction:column;align-items:center;justify-content:center;gap:24px;padding:30px;animation:fadein .3s ease}
  .npfull.show{display:flex}
  .npclose{position:absolute;top:18px;left:18px;background:none;border:0;color:var(--muted);font-size:1.5rem;cursor:pointer;width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;line-height:1;transition:background .12s,color .12s}
  .npvinyl{width:min(72vw,300px);height:min(72vw,300px);border-radius:50%;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle,#2a2a2a 0 22%,#0c0c0c 23% 100%);box-shadow:0 20px 60px rgba(0,0,0,.6),inset 0 0 0 2px rgba(255,255,255,.06);position:relative}
  .npvinyl::after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;background:var(--bg);z-index:2;box-shadow:0 0 0 4px rgba(0,0,0,.5)}
  .npvinyl img{width:66%;height:66%;border-radius:50%;object-fit:cover}
  .npvinyl.spin{animation:spin 5s linear infinite}
  .nptitle{font-size:1.45rem;font-weight:800;text-align:center;max-width:90%;unicode-bidi:plaintext}
  .npbar{width:min(90vw,420px);height:9px;background:var(--line);border-radius:5px;cursor:pointer;overflow:hidden}
  .npfill{height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2))}
  .nptime{color:var(--muted);font-size:.85rem}
  .npctls{display:flex;align-items:center;gap:26px}
  .npctls .dctl{font-size:2rem}
  .npmore{cursor:pointer;border:1px solid var(--line);background:var(--bg2);color:var(--text);font-weight:700;font-size:.9rem;padding:9px 18px;border-radius:var(--r-pill);font-family:inherit}
  .npmore:hover{border-color:var(--accent);color:var(--accent)}
  .npacts{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:18px;flex-wrap:wrap}
  .nppp{width:74px;height:74px;border:0;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2),var(--accent3));color:#fff;font-size:1.7rem;cursor:pointer}
  /* כפתור למעלה */
  .top{position:fixed;bottom:90px;inset-inline-end:18px;z-index:15;width:46px;height:46px;border-radius:50%;border:0;background:var(--accent);color:#fff;font-size:1.3rem;cursor:pointer;display:none;box-shadow:0 6px 18px rgba(0,0,0,.35)}
  .top.show{display:block}
  /* כפתורי נגן צף — בולטים וברורים שהם לחיצים */
  .dctls .dctl{background:var(--bg2);border:1px solid var(--line);color:var(--text);font-size:1.05rem;padding:0;width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;transition:transform .1s,background .12s,color .12s,box-shadow .12s}
  .dctls .dctl:hover{color:var(--accent);border-color:var(--accent)}
  .dctls .dctl:active{transform:scale(.88)}
  .dctls .dctl.on{color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2));border-color:transparent;box-shadow:0 3px 12px color-mix(in srgb,var(--accent) 50%,transparent)}
  #dqueue{position:relative}
  .dctl[data-n]:not([data-n="0"])::after{content:attr(data-n);position:absolute;top:-4px;inset-inline-end:-4px;min-width:15px;height:15px;border-radius:var(--r-pill);background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font-size:.6rem;font-weight:800;line-height:15px;text-align:center;padding:0 3px;box-sizing:border-box;pointer-events:none}
  body.radio #dqueue{display:none}
  .dright .dctl{background:var(--bg2);border:1px solid var(--line);width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;padding:0;font-size:.95rem}
  .dright .dctl.on{color:var(--accent);border-color:var(--accent)}
  .dmid{display:flex;flex-direction:column;gap:3px;min-width:0;flex-shrink:1}
  #viz{display:block;width:120px;height:22px;opacity:.85}
  /* אנימציית כניסת כרטיס */
  /* אנימציית fadeup הוסרה — גרמה לכרטיסים להופיע "דהויים ואז מתחדדים" (הבהוב) בכל טעינה/רענון */
  /* באנר הסכמה */
  .consent{position:fixed;bottom:0;left:0;right:0;z-index:30;background:var(--bg2);border-top:1px solid var(--line);padding:13px 16px;display:none;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;font-size:.88rem;box-shadow:0 -4px 20px rgba(0,0,0,.3)}
  .consent.show{display:flex}
  /* כשהנגן פתוח — באנר ההסכמה יושב מעליו ולא מכסה אותו */
  body.playing .consent{bottom:96px}
  @media(max-width:560px){body.playing .consent{bottom:calc(178px + env(safe-area-inset-bottom))}}
  .consent a{color:var(--accent)}
  .consent button{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border:0;border-radius:10px;padding:9px 22px;min-height:40px;font-weight:700;cursor:pointer;font-family:inherit}
  @media(min-width:600px){.song{flex-direction:row}.cover-wrap{width:230px;aspect-ratio:auto;flex-shrink:0}
  /* סימטריה בתצוגה הרגילה: לכל כרטיסי-הפיד עטיפה באותה פרופורציה (ריבוע, צמוד למעלה) במקום גובה
     שנמתח לפי התוכן. רק ילדים ישירים של הפיד ולא עמוד-שיר-בודד (h1) / המלצות / פודקאסטים / ריבועים */
  body:not(.gridview) #list>article.song:not(:has(h1)) .cover-wrap{aspect-ratio:1/1;align-self:flex-start}}
  /* === ניגודיות גבוהה של ווינדוס (forced-colors) — 18.8 ===
     במצב הזה הדפדפן דורס color/background/border/fill/stroke לצבעי-מערכת ומוחק box-shadow לגמרי.
     כל מה שסימנו "פעיל/נבחר" רק ברקע-גרדיאנט או בצל פשוט נעלם — כוכב-מלא, צ'יפ-נבחר, לשונית
     פעילה, פס-התקדמות, הכרטיס-המתנגן. הבסיס: מכוונים מחדש את משתני :root לצבעי-מערכת (מכסה
     מאות כללים בבת-אחת), ואז מתקנים ביד רק את מה שנשען על צל/רקע-בלבד.
     ‼️ outline ו-text-decoration שורדים את המצב (ולכן :focus-visible כבר תקין) — הם סמן-הבחירה. */
  @media(forced-colors:active){
    :root,[data-theme="light"],[data-accent="purple"],[data-accent="gold"],[data-accent="green"],[data-accent="rose"]{--bg:Canvas;--bg2:Canvas;--card:Canvas;--line:CanvasText;--text:CanvasText;--muted:GrayText;--accent:Highlight;--accent2:Highlight;--accent3:Highlight;--star:CanvasText;--danger:CanvasText;--sh1:none;--sh2:none;--sh3:none}
    /* 1. כוכבים: מלא וריק הם אותו תו ★ ונבדלו רק בצבע. GrayText מול Highlight נבדלים גם כאן,
          וקו-תחתון מוסיף ערוץ שני שאינו תלוי בצבע בכלל. */
    .star{color:GrayText}
    .star.on,.star.hov{color:Highlight;text-decoration:underline}
    /* 2. כל משפחת ה"נבחר" — רקע-מערכת אמיתי במקום גרדיאנט שנמחק */
    .chip.on,.chip.on:hover,.catchip.on,.podshowchip.on,.menu button.on,.sortchip.on,.sortbtn.on,.dpcalbtn.on,.pltab.on,.repchip.on,.asortbtn.on,.ssortbtn.on,.psortbtn.on,.admtgl.on,.admtab.on,.grpbtn.on,.dctl.on,.dctls .dctl.on,.dright .dctl.on{background:Highlight;color:HighlightText;border:1px solid Highlight}
    /* 3. מתג ההפעלה — היה מלבן ריק בלי מסלול ובלי ידית */
    .plswitch{background:Canvas;border:1px solid CanvasText;box-sizing:border-box}
    .plswitch::after{background:CanvasText}
    .plswitch.on{background:Highlight;border-color:Highlight}
    .plswitch.on::after{background:HighlightText}
    /* 4. פסי-התקדמות — מסלול ומילוי קרסו לאותו צבע, לא נותר שום חיווי מיקום */
    .dock .dbar,.npbar{background:Canvas;border:1px solid CanvasText;box-sizing:border-box}
    .dock .dfill,.npfill{background:Highlight}
    /* 5. הכרטיס המתנגן / החדש — הצל היה הסימן היחיד; outline שורד */
    .song.playing-card{outline:3px solid Highlight;outline-offset:-3px}
    .song.fresh{outline:3px dashed Highlight;outline-offset:-3px}
    .eqbadge{background:Canvas;border:1px solid CanvasText}
    .eqbadge i{background:CanvasText}
    /* 6. כפתורים בלי מסגרת (border:0 + גרדיאנט) — בלי גבול אין בכלל יעד-לחיצה נראה */
    .pp,.podpp,.resumebar,.updatebar,.bmadd,.installbanner .ib-install,.admsave,.adminedit,.adminpanelbtn,.reportfab,.admmbtn,.admact,.admsbtn,.dock .dpp,.nppp,.top,.consent button,.tour-next,.toolpop .sleepinput button{border:1px solid ButtonBorder;box-sizing:border-box}
    /* 7. שורה מסומנת בתפריט/השלמה — הרקע היה הסימן היחיד גם לניווט-מקלדת */
    .acrow:hover,.acrow.sel,.addplitem:hover,.grpmenu .chip:hover{background:Highlight;color:HighlightText}
    /* 8. נקודות-חיווי שצוירו כרקע בלבד */
    .dot,.nptick,.tour-dot{background:CanvasText}
    .tour-dot.on{background:Highlight}
    .toolToggle.hason::after{background:Highlight}
    #syncBtn.cornericon.on{background:Highlight;color:HighlightText}
    /* 9. עמעום שנשען על opacity — opacity לא נדרס, ולכן .28 הופך לבלתי-קריא במקום ל"מושבת" */
    .myb:disabled,.admact:disabled,.dimrow,.admsongrow.hid,.admindot,.rlink,.bmitem .bx,.npmark .x{opacity:1;color:GrayText}
    /* 10. חלוניות צפות — הצל היה ההפרדה מהדף שמאחור */
    .menu,.toolpop,.moremenu,.bmpop,.grpmenu,.acbox,.modalbox,.popdock,.toast,.badge,.pinbadge,.newpill,.admbadge,.vinyl,.npvinyl{border:1px solid CanvasText;box-sizing:border-box}
  }