/* ============ list ============ */
.listpane{position:sticky;top:118px;max-height:calc(100vh - 134px);display:flex;flex-direction:column;
  padding-top:10px;min-width:0}
@media(max-width:960px){
  .listtools{padding-top:2px}
  /* on a phone the toolbar wraps; the assembly button is the one thing that must
     stay on the first line, above where the bottom sheet starts */
  .buildbtn{order:-1;margin-inline-end:auto}
  .densbtn{margin-inline-start:0;order:2}
}
@media(max-width:960px){.listpane{position:static;max-height:none}}
.listmeta{display:flex;justify-content:space-between;align-items:center;padding:0 4px 9px;font-size:12px;
  color:var(--fnt);font-weight:700}
.listmeta b{color:var(--tx-2);font-variant-numeric:tabular-nums;font-weight:900}
.list{overflow-y:auto;overflow-x:hidden;flex:1;min-width:0;padding-inline-end:5px;scrollbar-width:thin}
.list::-webkit-scrollbar{width:6px}
.list::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px}

.grouphead{position:sticky;top:0;z-index:2;
  background:var(--bg);background:color-mix(in srgb, var(--bg) 92%, transparent);backdrop-filter:blur(10px);
  padding:15px 4px 7px;font-size:11.5px;font-weight:900;letter-spacing:.08em;
  display:flex;align-items:center;gap:9px}
.grouphead .gdot{width:9px;height:9px;border-radius:3px;background:var(--cc);flex:0 0 auto;
  box-shadow:0 0 12px -1px var(--cc)}
.grouphead::after{content:"";flex:1;height:1px;
  background:linear-gradient(to left, color-mix(in srgb, var(--cc) 45%, transparent), transparent)}

.listtools{display:flex;align-items:center;gap:5px;flex-wrap:wrap;padding:0 2px 9px}
/* the way out of a tile */
.backout{flex:0 0 100%;display:flex;align-items:center;gap:11px;text-align:start;
  padding:9px 13px;margin-bottom:7px;border-radius:14px;background:var(--panel);
  border:1px solid var(--line);border-inline-start:3px solid var(--cc);transition:.14s}
.backout:hover{border-color:var(--cc);background:var(--panel-2)}
.backout .bo-arrow{font-size:23px;font-weight:700;line-height:1;color:var(--cc);
  color:color-mix(in srgb, var(--cc), #000 var(--cc-dark));flex:0 0 auto;
  width:30px;text-align:center}
.backout .bo-t{min-width:0;flex:1}
.backout .bo-n{font-size:15.5px;font-weight:900;letter-spacing:-.02em;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.backout .bo-s{font-size:11.5px;color:var(--mut);font-weight:700;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.sortseg{display:flex;background:var(--panel);border:1px solid var(--line);border-radius:99px;padding:2px}
.sortseg button{padding:4px 11px;border-radius:99px;font-size:12px;font-weight:700;color:var(--mut);transition:.14s}
.sortseg button[aria-pressed="true"]{background:var(--cc);color:#0B0C10}
:root[data-theme="light"] .sortseg button[aria-pressed="true"],
:root:not([data-theme="dark"]) .sortseg button[aria-pressed="true"]{color:#fff}
:root[data-theme="dark"] .sortseg button[aria-pressed="true"]{color:#0B0C10}
.densbtn{margin-inline-start:auto;font-size:12px;font-weight:700;color:var(--mut);padding:4px 10px;
  border-radius:99px;border:1px solid var(--line)}
.densbtn:hover{color:var(--cc);border-color:var(--cc)}

/* ── כפתור ההרכבה בשורת הכלים ────────────────────────────────────
   the entry point to the assembly column. idle it reads as an invitation;
   while a list is open it turns solid so he can never lose track of which
   playlist the ＋ buttons are feeding. */
.buildbtn{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:800;
  padding:4px 12px;border-radius:99px;border:1px dashed var(--acc);color:var(--acc);
  background:transparent;transition:.15s;white-space:nowrap}
.buildbtn:hover{background:var(--acc);color:#0B0C10;border-style:solid}
.buildbtn.on{border-style:solid;border-color:var(--cc);background:var(--cc);color:#0B0C10}
:root[data-theme="light"] .buildbtn.on,
:root:not([data-theme="dark"]) .buildbtn.on{color:#fff}
:root[data-theme="dark"] .buildbtn.on{color:#0B0C10}
.buildbtn .bdot{width:7px;height:7px;border-radius:50%;background:currentColor;
  animation:bpulse 1.9s ease-in-out infinite}
@keyframes bpulse{0%,100%{opacity:1}50%{opacity:.35}}
.buildbtn .bn{font-variant-numeric:tabular-nums;font-weight:900;
  background:rgba(0,0,0,.22);border-radius:99px;padding:0 6px;min-width:18px;text-align:center}
@media (prefers-reduced-motion:reduce){.buildbtn .bdot{animation:none}}

/* ── רעיון / תקלה ──────────────────────────────────────────────── */
#reqbtn{position:relative}
#reqbtn.haspip::after{content:"";position:absolute;inset-block-start:6px;inset-inline-end:6px;
  width:7px;height:7px;border-radius:50%;background:var(--acc);
  box-shadow:0 0 0 2px var(--panel)}
.modnote{font-size:12px;color:var(--mut);margin-top:8px;line-height:1.55}

/* one tap to hear the tune — the first control under the title */
.bigplaywrap{padding:0 18px 4px}
.bigplay{width:100%;display:flex;align-items:center;gap:14px;text-align:start;
  padding:14px 16px;border-radius:16px;border:0;cursor:pointer;
  background:linear-gradient(135deg, var(--cc), color-mix(in srgb, var(--cc), #000 22%));
  box-shadow:0 12px 26px -14px color-mix(in srgb, var(--cc) 90%, transparent);
  transition:.16s}
.bigplay:hover{transform:translateY(-2px)}
.bigplay:active{transform:translateY(0)}
.bp-ic{flex:0 0 auto;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.22);color:#fff;font-size:17px;padding-inline-start:3px}
.bp-t{min-width:0}
.bp-1{font-size:16.5px;font-weight:800;color:#fff;letter-spacing:-.01em}
.bp-2{font-size:12px;font-weight:700;color:rgba(255,255,255,.8);margin-top:1px}
.myaudio{width:100%;margin-top:8px;border-radius:12px}
.audiobox{margin-top:14px;padding-top:13px;border-top:1px solid var(--line)}
.ab-h{font-size:13px;font-weight:800;color:var(--fnt);margin-bottom:6px}
.playnote{font-size:12.5px;line-height:1.55;color:var(--mut);margin-top:8px}
.reqta{min-height:76px;resize:vertical;font-family:inherit;line-height:1.6}
.reqlist{margin-top:16px;max-height:min(42vh,340px);overflow:auto}
.reqhead{font-size:11px;font-weight:900;letter-spacing:.06em;color:var(--mut);
  margin:0 0 8px;text-transform:none}
.reqrow{display:flex;gap:10px;align-items:flex-start;padding:9px 11px;margin-bottom:6px;
  background:var(--panel-2);border:1px solid var(--line);border-radius:12px;
  border-inline-start:3px solid var(--cc)}
.reqbadge{flex:none;font-size:10.5px;font-weight:900;color:var(--cc);
  border:1px solid var(--cc);border-radius:99px;padding:1px 7px;margin-top:1px;white-space:nowrap}
.reqt{flex:1;min-width:0}
.reqx{font-size:13.5px;line-height:1.5;color:var(--tx);overflow-wrap:anywhere}
.reqs{font-size:11px;color:var(--mut);margin-top:3px}
.reqr{font-size:12.5px;line-height:1.5;color:var(--tx-2);margin-top:6px;padding-top:6px;
  border-top:1px dashed var(--line);opacity:.9}
/* a finding from the bug hunter: the proposed fix, and a decision on it */
.reqrow.bugrow{background:color-mix(in srgb, var(--cc) 7%, transparent)}
.reqfix{font-size:12.5px;line-height:1.5;color:var(--tx-2);margin-top:6px;padding-top:6px;
  border-top:1px dashed var(--line);font-weight:600}
.bugact{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.bugact .act{flex:1 1 auto;min-width:104px;font-size:13px;padding:8px 10px}

.alphabar{display:flex;flex-wrap:wrap;gap:2px;padding:0 2px 9px}
.alphabar button{min-width:21px;height:21px;border-radius:6px;font-size:11.5px;font-weight:800;
  color:var(--fnt);transition:.12s}
.alphabar button:hover{background:var(--cc);color:#0B0C10}
:root[data-theme="light"] .alphabar button:hover,
:root:not([data-theme="dark"]) .alphabar button:hover{color:#fff}
.alphabar button.dim{opacity:.25;pointer-events:none}

.row{width:100%;text-align:start;display:flex;align-items:center;gap:11px;padding:8px 10px;
  border-radius:var(--r-s);border:1px solid transparent;transition:.14s}
/* compact density — the default; a whole book fits in far less scrolling.
   compact means tighter, not "run the performer into the title": the song name
   stays the big line and the performer keeps its own small one underneath. */
.list.dense .row{padding:5px 9px;gap:9px;border-radius:9px}
.list.dense .cover{width:32px;height:32px;border-radius:8px;font-size:12.5px}
.list.dense .row-t{font-size:16px;font-weight:800}
.list.dense .row-s{display:block;font-size:11.5px;margin-top:0}
.list.dense .row-inline{display:none}
.list.dense .grouphead{padding:11px 4px 5px;font-size:11px}
.row-inline{display:none}
.row:hover{background:var(--panel);border-color:var(--line)}
.row[aria-current="true"]{background:var(--panel-2);border-color:var(--cc);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--cc) 13%, transparent)}
.cover{width:44px;height:44px;border-radius:11px;flex:0 0 auto;display:grid;place-items:center;
  font-weight:900;font-size:16px;color:#fff;letter-spacing:-.03em;position:relative;overflow:hidden;
  background:var(--cc);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16), 0 4px 12px -5px rgba(0,0,0,.5)}
.cover::after{content:"";position:absolute;inset:0;
  background:linear-gradient(150deg, rgba(255,255,255,.28), transparent 58%)}
.row-main{flex:1;min-width:0}
.row-t{font-size:16.5px;font-weight:800;line-height:1.25;letter-spacing:-.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row[aria-current="true"] .row-t{color:var(--cc);color:color-mix(in srgb, var(--cc), #000 var(--cc-dark))}
.row-s{font-size:12.5px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.row-marks{display:flex;align-items:center;gap:5px;flex:0 0 auto}
.mk{width:5px;height:5px;border-radius:50%;background:var(--line-2)}
.mk.on{background:var(--cc)}
.mk.vid.on{background:var(--ok)}
.keytag{font-size:10px;font-weight:800;letter-spacing:.04em;color:var(--mut);border:1px solid var(--line-2);
  border-radius:6px;padding:1px 5px;font-variant-numeric:tabular-nums}
.fav{color:var(--acc);font-size:12px}

.empty{padding:44px 18px;text-align:center;color:var(--mut)}
.empty b{display:block;font-size:19px;color:var(--tx);margin-bottom:6px;font-weight:800}
.empty button{color:var(--acc);font-weight:700;text-decoration:underline;text-underline-offset:3px;margin-top:8px}

/* ============ detail ============ */
.detail{padding-top:10px;min-width:0;max-width:100%}
@media(max-width:960px){
  .detail{position:fixed;inset:0;z-index:60;background:var(--bg);overflow-y:auto;padding:0 16px 84px;
    transform:translateX(-100%);transition:transform .24s cubic-bezier(.4,0,.2,1);visibility:hidden}
  .detail.open{transform:none;visibility:visible}
  .backbar{display:flex!important}
  /* whole-screen sections (playlists, inbox, to-do) render inline on a phone */
  #app.pane-detail .listpane{display:none}
  /* this shorthand used to end in 12px and quietly beat the nav clearance set
     above it, so the last card on ללמוד / רשימות / חדשים sat under the floating
     bottom bar and its buttons could not be reached. */
  #app.pane-detail .detail{position:static;transform:none;visibility:visible;overflow:visible;
    padding:0 0 calc(112px + env(safe-area-inset-bottom));z-index:auto}
  #app.pane-detail .backbar{display:none!important}
}
.backbar{display:none;position:sticky;top:0;z-index:5;background:var(--bg);padding:12px 0;align-items:center;
  border-bottom:1px solid var(--line);margin-bottom:4px}
.backbar button{display:flex;align-items:center;gap:6px;font-weight:800;color:var(--cc);font-size:14.5px}

.placeholder{border:1px solid var(--line);border-radius:22px;padding:56px 30px;text-align:center;
  color:var(--mut);background:var(--panel);box-shadow:var(--sh-1)}
.placeholder .big{font-size:28px;color:var(--tx);margin-bottom:10px;font-weight:900;letter-spacing:-.03em}
.placeholder .hint{max-width:46ch;margin:0 auto;font-size:14.5px;line-height:1.75}
.placeholder kbd{background:var(--panel-3);border:1px solid var(--line-2);border-radius:6px;padding:1px 7px;
  font-size:12.5px;font-family:inherit;font-weight:700}

.songcard{background:var(--panel);border:1px solid var(--line);border-radius:22px;box-shadow:var(--sh-2);
  overflow:hidden;min-width:0}

.hero{position:relative;padding:16px 22px 14px;overflow:hidden;border-bottom:1px solid var(--line)}
@media(max-width:620px){.hero{padding:13px 15px 12px}}
.hero .wash{position:absolute;inset:-40%;opacity:.16;filter:blur(60px);
  background:radial-gradient(closest-side, var(--cc), transparent 70%)}
.hero .inner{position:relative;display:flex;gap:13px;align-items:center}
.hero .art{width:52px;height:52px;border-radius:14px;flex:0 0 auto;display:grid;place-items:center;
  font-weight:900;font-size:20px;color:#fff;letter-spacing:-.03em;position:relative;overflow:hidden;
  align-self:flex-start;background:var(--cc);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2), 0 8px 20px -10px rgba(0,0,0,.55)}
.hero .art::after{content:"";position:absolute;inset:0;
  background:linear-gradient(150deg, rgba(255,255,255,.3), transparent 58%)}
@media(max-width:620px){.hero .art{width:44px;height:44px;font-size:17px;border-radius:12px}}
.hero .txt{flex:1;min-width:0}
.hero .cat{font-size:10.5px;letter-spacing:.11em;font-weight:900;margin-bottom:2px;
  color:var(--cc);color:color-mix(in srgb, var(--cc), #000 var(--cc-dark))}
.hero h2{font-size:clamp(21px,2.9vw,29px);font-weight:900;margin:0 0 1px;line-height:1.15;
  letter-spacing:-.035em;text-wrap:balance}
.hero .translit{font-size:11.5px;color:var(--fnt);letter-spacing:.05em;direction:ltr;text-align:right;
  font-weight:600;unicode-bidi:isolate}
.byline{margin-top:6px;font-size:14px;color:var(--tx-2);font-weight:500}
.byline a{cursor:pointer;font-weight:800;border-bottom:1px solid transparent;
  color:var(--cc);color:color-mix(in srgb, var(--cc), #000 var(--cc-dark))}
.byline a:hover{border-bottom-color:currentColor}
.taglist{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.tg{font-size:11.5px;font-weight:800;padding:3px 11px;border-radius:99px;
  background:transparent;background:color-mix(in srgb, var(--cc) 15%, transparent);
  color:var(--cc);color:color-mix(in srgb, var(--cc), #000 var(--cc-dark));
  border:1px solid var(--line);border-color:color-mix(in srgb, var(--cc) 30%, transparent)}

.actionbar{display:flex;gap:7px;flex-wrap:wrap;padding:10px 22px;background:var(--panel-2);
  border-bottom:1px solid var(--line)}
@media(max-width:620px){.actionbar{padding:9px 15px}}
.act{display:inline-flex;align-items:center;gap:6px;padding:8px 15px;border-radius:99px;font-size:13.5px;
  font-weight:800;border:1px solid var(--line-2);background:var(--panel);color:var(--tx-2);transition:.15s}
.act:hover{border-color:var(--cc);color:var(--cc);color:color-mix(in srgb, var(--cc), #000 var(--cc-dark))}
.act.primary{background:var(--cc);border-color:var(--cc);color:#0B0C10}
:root[data-theme="light"] .act.primary,
:root:not([data-theme="dark"]) .act.primary{color:#fff}
:root[data-theme="dark"] .act.primary{color:#0B0C10}
.act.primary:hover{filter:brightness(1.08)}
.act.on{background:transparent;background:color-mix(in srgb, var(--cc) 16%, transparent);border-color:var(--cc);
  color:var(--cc);color:color-mix(in srgb, var(--cc), #000 var(--cc-dark))}
.act.go{background:var(--ok);border-color:var(--ok);color:#04140E}
:root[data-theme="light"] .act.go,:root:not([data-theme="dark"]) .act.go{color:#fff}
:root[data-theme="dark"] .act.go{color:#04140E}
.act.nope{border-color:var(--line-2);color:var(--mut)}
.act.nope:hover{border-color:var(--no);color:var(--no)}

.metagrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));border-bottom:1px solid var(--line)}
.mi{padding:9px 22px;border-inline-start:1px solid var(--line)}
.mi:first-child{border-inline-start:none}
@media(max-width:620px){.mi{padding:10px 17px}}
.mi .k{font-size:10px;letter-spacing:.1em;color:var(--fnt);font-weight:900;margin-bottom:2px}
.mi .v{font-size:14.5px;color:var(--tx-2);font-weight:700}
.mi .v.empty-v{color:var(--fnt);font-weight:400}

.section{padding:17px 22px}
@media(max-width:620px){.section{padding:14px 15px}}
.section+.section{border-top:1px solid var(--line)}
.sectionhead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:13px}
.sectionhead h3{font-size:11px;letter-spacing:.11em;font-weight:900;color:var(--fnt);margin:0}
.sectionhead .tools{display:flex;gap:5px;align-items:center}
.minibtn{font-size:12px;font-weight:800;color:var(--mut);padding:4px 11px;border-radius:99px;
  border:1px solid var(--line);transition:.15s}
.minibtn:hover{color:var(--cc);border-color:var(--cc)}
.minibtn.on{background:transparent;background:color-mix(in srgb, var(--cc) 16%, transparent);border-color:var(--cc);
  color:var(--cc);color:color-mix(in srgb, var(--cc), #000 var(--cc-dark))}

.player{position:relative;width:100%;max-width:560px;aspect-ratio:16/9;background:#000;border-radius:16px;
  overflow:hidden;border:1px solid var(--line)}
.listenbar{width:100%;display:flex;align-items:center;gap:13px;padding:11px 14px;border-radius:16px;
  border:1px solid var(--line);background:var(--panel-2);text-align:start;transition:.15s}
.listenbar:hover{border-color:var(--cc);background:color-mix(in srgb, var(--cc) 8%, var(--panel-2))}
.listenbar .pbtn{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;
  background:var(--cc);color:#0B0C10;font-size:15px;padding-inline-start:3px;
  box-shadow:0 6px 16px -8px color-mix(in srgb, var(--cc) 85%, transparent)}
:root[data-theme="light"] .listenbar .pbtn,
:root:not([data-theme="dark"]) .listenbar .pbtn{color:#fff}
:root[data-theme="dark"] .listenbar .pbtn{color:#0B0C10}
.listenbar .btxt{flex:1;min-width:0;display:flex;flex-direction:column}
.listenbar .bt1{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.listenbar .bt2{font-size:11.5px;color:var(--fnt);font-weight:600;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.listenbar .bhint{font-size:11.5px;font-weight:800;color:var(--fnt);flex:0 0 auto;
  border:1px solid var(--line-2);border-radius:99px;padding:3px 10px}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.playstub{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;width:100%;
  aspect-ratio:16/9;border-radius:16px;border:1px dashed var(--line-2);background:var(--panel-2);
  color:var(--mut);text-align:center;padding:20px}
.playstub .t{font-size:14px;max-width:38ch}
.vidmeta{font-size:12px;color:var(--fnt);margin-top:8px;display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.vidmeta .dot{width:3px;height:3px;border-radius:50%;background:var(--line-2)}

.lyrics{font-family:"Frank Ruhl Libre",serif;font-size:var(--ly,23px);line-height:1.95;
  white-space:pre-wrap;color:var(--tx);max-width:34ch;letter-spacing:.005em;font-weight:500}
.lyrics.none{font-family:"Heebo",sans-serif;font-size:14px;color:var(--mut);
  background:transparent;background:color-mix(in srgb, var(--cc) 12%, transparent);
  border:1px solid var(--line);border-color:color-mix(in srgb, var(--cc) 28%, transparent);
  border-radius:16px;padding:15px 17px;line-height:1.7;max-width:none}
.lyrics.none b{display:block;color:var(--cc);color:color-mix(in srgb, var(--cc), #000 var(--cc-dark));
  margin-bottom:3px;font-size:13.5px;font-weight:900}
textarea.ed{width:100%;min-height:270px;border-radius:16px;border:1px solid var(--line-2);background:var(--bg-2);
  padding:14px 15px;font-family:"Frank Ruhl Libre",serif;font-size:18px;line-height:1.85;resize:vertical}
textarea.ed:focus{outline:none;border-color:var(--cc);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--cc) 16%, transparent)}
.confbadge{font-size:10.5px;padding:3px 10px;border-radius:99px;font-weight:900}
.confbadge.low{background:var(--acc-dim);color:var(--acc)}
.confbadge.medium{background:var(--panel-3);color:var(--mut)}

.notebox{background:var(--panel-2);border-radius:16px;padding:13px 15px;font-size:14px;color:var(--tx-2);
  line-height:1.65;border-inline-start:3px solid var(--cc)}
input.fld,select.fld,textarea.fld{width:100%;padding:9px 12px;border-radius:11px;border:1px solid var(--line-2);
  background:var(--bg-2);font-size:14.5px;font-weight:500}
input.fld:focus,select.fld:focus,textarea.fld:focus{outline:none;border-color:var(--cc);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--cc) 16%, transparent)}
.fldrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:10px;margin-bottom:10px}
.fldlab{font-size:11px;letter-spacing:.07em;color:var(--fnt);font-weight:900;margin-bottom:5px;display:block}

.transp{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:13.5px;font-weight:700}
.transp select{width:auto;min-width:82px;padding:6px 9px}
.transp .out{font-weight:900;font-size:18px;font-variant-numeric:tabular-nums;
  color:var(--cc);color:color-mix(in srgb, var(--cc), #000 var(--cc-dark))}
.steps{display:flex;border:1px solid var(--line-2);border-radius:11px;overflow:hidden}
.steps button{width:33px;height:33px;font-size:17px;color:var(--mut);background:var(--panel-2)}
.steps button:hover{background:var(--panel-3);color:var(--cc)}
.steps .val{width:40px;display:flex;align-items:center;justify-content:center;font-weight:900;
  border-inline:1px solid var(--line-2);font-variant-numeric:tabular-nums;font-size:13px}

/* ============ inbox ============ */
.inboxgrid{display:grid;gap:12px}
.newcard{background:var(--panel);border:1px solid var(--line);border-radius:20px;overflow:hidden;
  box-shadow:var(--sh-1);position:relative}
.newcard .top{display:flex;gap:14px;padding:16px 18px;align-items:flex-start}
.newcard .art{width:46px;height:46px;border-radius:13px;flex:0 0 auto;display:grid;place-items:center;
  background:var(--cc);
  color:#fff;font-weight:900;font-size:18px;position:relative;overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18), 0 6px 16px -8px color-mix(in srgb, var(--cc) 80%, transparent)}
.newcard .art::after{content:"";position:absolute;inset:0;
  background:linear-gradient(150deg, rgba(255,255,255,.28), transparent 58%)}
.newcard .info{flex:1;min-width:0}
.newcard h4{font-size:19px;font-weight:900;margin:0 0 2px;letter-spacing:-.03em}
.newcard .ar{font-size:13.5px;font-weight:700;color:var(--cc);color:color-mix(in srgb, var(--cc), #000 var(--cc-dark))}
.newcard .when{font-size:12px;color:var(--fnt);font-weight:700;margin-top:3px}
.newcard .why{font-size:13.5px;color:var(--tx-2);line-height:1.6;padding:0 18px 14px}
.newcard .foot{display:flex;gap:8px;flex-wrap:wrap;padding:12px 18px;background:var(--panel-2);
  border-top:1px solid var(--line)}
.newbadge{position:absolute;inset-inline-end:14px;top:14px;font-size:10px;font-weight:900;letter-spacing:.08em;
  padding:3px 9px;border-radius:99px;background:var(--ok-dim);color:var(--ok)}

/* ============ chorus, tempo, live link ============ */
.lyricblocks{display:flex;flex-direction:column;gap:14px}
.lblock{position:relative;padding:2px 0}
.lblock.chorus{padding:12px 16px;border-radius:14px;background:var(--acc-dim);
  border-inline-start:4px solid var(--acc)}
.lbadge{display:inline-block;font-size:10.5px;font-weight:900;letter-spacing:.11em;color:var(--acc);
  margin-bottom:7px}
.lmark{font-size:11.5px;font-weight:700;color:var(--fnt);padding:3px 9px;border-radius:99px;
  border:1px solid var(--line);margin-top:9px;opacity:0;transition:.15s}
.lblock:hover .lmark{opacity:1}
.lblock.chorus .lmark{opacity:.7;border-color:var(--acc-line);color:var(--acc)}
.lmark:hover{opacity:1!important;color:var(--acc);border-color:var(--acc)}
@media(max-width:960px){.lmark{opacity:.55}}

.tapout{font-size:13px;font-weight:900;color:var(--mut);font-variant-numeric:tabular-nums;
  min-width:64px;text-align:center;direction:ltr}
.tapout.live{color:color-mix(in srgb, var(--cc), #000 var(--cc-dark))}
.medkey.bpm{background:var(--panel-3);color:var(--tx-2);border-color:var(--line-2);direction:ltr}
.medcard.match{border-color:var(--cc);box-shadow:0 0 0 2px color-mix(in srgb, var(--cc) 22%, transparent)}

.stagebar .stbpm{font-size:14px;font-weight:900;color:#0B0C10;background:#3EDB9B;border-radius:9px;
  padding:3px 10px;direction:ltr;flex:0 0 auto}
#versewrap.ischorus #versetext{color:#FFD98A}
.versebadge{position:absolute;top:14px;inset-inline-start:0;inset-inline-end:0;text-align:center;
  font-size:12px;font-weight:900;letter-spacing:.16em;color:#FFB43D;z-index:5;pointer-events:none}
#versedots i.ch{background:#5E471A}
#versedots i.ch.on{background:#FFB43D}
#followtag{position:absolute;top:0;inset-inline:0;text-align:center;padding:6px;font-size:12px;
  font-weight:900;letter-spacing:.1em;color:#0B0C10;background:#3EDB9B;z-index:8}
#stagenextbar .nk.bpm{color:#3EDB9B;border-color:#1B5C42}

/* ============ chords ============ */
.chordwrap{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--panel-2)}
.chordbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:9px 13px;
  border-bottom:1px solid var(--line);background:var(--panel)}
.chordbar .lbl{font-size:11.5px;font-weight:800;color:var(--fnt);letter-spacing:.05em}
.chordtext{padding:15px 17px;font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  font-size:15px;line-height:2;white-space:pre;overflow-x:auto;direction:ltr;text-align:left;
  color:var(--tx);scrollbar-width:thin}
.chordtext::-webkit-scrollbar{height:6px}
.chordtext::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px}
.chordtext b{font-weight:800;color:var(--cc);color:color-mix(in srgb, var(--cc), #000 var(--cc-dark))}
.chordsug{padding:14px 17px;font-size:13.5px;color:var(--mut);line-height:1.7}
.chordsug .prog{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px;direction:ltr;
  unicode-bidi:isolate;justify-content:flex-end}
.chordsug .ch{font-family:ui-monospace,Menlo,monospace;font-size:15px;font-weight:800;padding:6px 13px;
  border-radius:10px;background:transparent;background:color-mix(in srgb, var(--cc) 14%, transparent);
  border:1px solid var(--line);border-color:color-mix(in srgb, var(--cc) 32%, transparent);
  color:var(--cc);color:color-mix(in srgb, var(--cc), #000 var(--cc-dark))}
textarea.chordED{width:100%;min-height:170px;border:0;background:var(--bg-2);padding:14px 16px;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:15px;line-height:2;direction:ltr;
  text-align:left;resize:vertical}
textarea.chordED:focus{outline:none;box-shadow:inset 0 0 0 2px var(--cc)}

/* ============ key badge, medley, stage next-up ============ */
.keybig{flex:0 0 auto;text-align:center;padding:6px 13px;border-radius:12px;
  background:transparent;background:color-mix(in srgb, var(--cc) 16%, transparent);
  border:1px solid color-mix(in srgb, var(--cc) 38%, transparent);align-self:flex-start}
.keybig .kbk{font-size:10px;font-weight:900;letter-spacing:.11em;color:var(--fnt)}
.keybig.sug{border-style:dashed}
.keybig .kbv{font-size:19px;font-weight:900;letter-spacing:-.02em;font-variant-numeric:tabular-nums;
  color:var(--cc);color:color-mix(in srgb, var(--cc), #000 var(--cc-dark));direction:ltr}
@media(max-width:620px){.keybig{padding:5px 10px}.keybig .kbv{font-size:16px}}

.medhead{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-bottom:12px}
.medkey{font-size:15px;font-weight:900;padding:5px 14px;border-radius:99px;
  background:transparent;background:color-mix(in srgb, var(--cc) 16%, transparent);
  color:var(--cc);color:color-mix(in srgb, var(--cc), #000 var(--cc-dark));
  border:1px solid var(--line);border-color:color-mix(in srgb, var(--cc) 34%, transparent)}
.medcount{font-size:12.5px;color:var(--fnt);font-weight:700}
.medhint{font-size:13.5px;color:var(--mut);line-height:1.7;background:var(--panel-2);
  border:1px solid var(--line);border-radius:16px;padding:14px 16px}
.medgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.medcard{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:13px;text-align:start;
  border:1px solid var(--line);background:var(--panel-2);transition:.14s;min-width:0}
.medcard:hover{border-color:var(--cc);background:color-mix(in srgb, var(--cc) 8%, var(--panel-2))}
.medtxt{min-width:0;flex:1}
.medname{font-size:14.5px;font-weight:800;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.medsub{font-size:11.5px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.setnote{font-size:12.5px;font-weight:600;color:var(--mut);margin:-3px 0 8px 0;padding:5px 13px;
  border-inline-start:3px solid var(--cc);background:var(--panel);border-radius:0 9px 9px 0}

#stagenextbar{display:flex;align-items:center;gap:11px;padding:12px 18px;border-top:1px solid #1A1F2C;
  background:#0B0D14;cursor:pointer;flex-wrap:wrap}
#stagenextbar:hover{background:#111524}
#stagenextbar .nl{font-size:10.5px;font-weight:900;letter-spacing:.11em;color:#636D82}
#stagenextbar .nn{font-size:17px;font-weight:800;color:#F4F6FA;flex:1;min-width:0;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
#stagenextbar .nk{font-size:13px;font-weight:900;color:#FFB43D;direction:ltr;
  border:1px solid #5E471A;border-radius:8px;padding:2px 9px}
#stagenextbar .ni{font-size:12px;color:#636D82;font-weight:700;font-variant-numeric:tabular-nums}

/* ============ auto-fill panel ============ */
.enrichbusy{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--mut);
  background:var(--panel-2);border:1px solid var(--line);border-radius:16px;padding:14px 16px}
.enrichbox{background:var(--panel-2);border:1px solid var(--line);border-color:color-mix(in srgb, var(--cc) 32%, transparent);
  border-radius:18px;padding:15px 17px}
.enrichgrid{display:grid;gap:1px;margin-top:11px;background:var(--line);border-radius:12px;overflow:hidden;
  border:1px solid var(--line)}
.erow{display:grid;grid-template-columns:132px 1fr;gap:12px;background:var(--panel);padding:8px 13px}
@media(max-width:620px){.erow{grid-template-columns:100px 1fr;gap:8px}}
.ek{font-size:11.5px;font-weight:800;color:var(--fnt);letter-spacing:.04em;align-self:center}
.ev{font-size:14px;color:var(--tx-2);font-weight:600;line-height:1.5}
.enrichlyr{margin-top:11px;font-family:"Frank Ruhl Libre",serif;font-size:16px;line-height:1.8;
  white-space:pre-wrap;color:var(--tx-2);background:var(--bg-2);border-radius:12px;padding:13px 15px;
  max-height:220px;overflow:hidden;position:relative}

/* ============ ai bot ============ */
#aifab{position:fixed;inset-inline-start:20px;bottom:20px;z-index:80;display:flex;align-items:center;gap:9px;
  padding:11px 18px 11px 14px;border-radius:99px;font-size:14px;font-weight:800;color:#0B0C10;
  background:linear-gradient(135deg,#FFC24D,#FF6B35);
  box-shadow:0 10px 30px -10px rgba(255,120,50,.6), 0 0 0 1px rgba(255,255,255,.18) inset;
  transition:.16s}
#aifab:hover{transform:translateY(-2px);box-shadow:0 16px 38px -12px rgba(255,120,50,.72)}
#aifab .sp{font-size:16px}
@media(max-width:620px){#aifab{inset-inline-start:14px;bottom:14px;padding:10px 15px 10px 12px;font-size:13px}}

#aipanel{position:fixed;inset-inline-start:20px;bottom:20px;z-index:95;width:min(430px,calc(100vw - 32px));
  height:min(640px,calc(100vh - 40px));background:var(--panel);border:1px solid var(--line);
  border-radius:22px;box-shadow:var(--sh-2);display:none;flex-direction:column;overflow:hidden}
#aipanel.on{display:flex}
@media(max-width:620px){#aipanel{inset:8px;width:auto;height:auto;border-radius:18px}}
.aihead{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--line);
  background:var(--panel-2)}
.aihead .av{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;font-size:15px;
  background:linear-gradient(135deg,#FFC24D,#FF6B35);color:#0B0C10;font-weight:900}
.aihead h4{margin:0;font-size:15.5px;font-weight:900;letter-spacing:-.02em}
.aihead .st{font-size:11px;color:var(--fnt);font-weight:700}
.aibody{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:11px;
  scrollbar-width:thin}
.aibody::-webkit-scrollbar{width:6px}
.aibody::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px}
.msg{max-width:88%;padding:10px 14px;border-radius:16px;font-size:14.5px;line-height:1.65;white-space:pre-wrap}
.msg.me{align-self:flex-start;background:var(--cc);color:#0B0C10;font-weight:600;border-bottom-left-radius:6px}
:root[data-theme="light"] .msg.me,:root:not([data-theme="dark"]) .msg.me{color:#fff}
:root[data-theme="dark"] .msg.me{color:#0B0C10}
.msg.bot{align-self:flex-end;background:var(--panel-2);border:1px solid var(--line);border-bottom-right-radius:6px}
.msg.bot b{font-weight:800;color:var(--cc);color:color-mix(in srgb, var(--cc), #000 var(--cc-dark))}
.aisug{display:flex;gap:6px;flex-wrap:wrap;padding:0 16px 10px}
.aisug button{font-size:12.5px;font-weight:700;padding:6px 12px;border-radius:99px;border:1px solid var(--line);
  color:var(--mut);background:var(--panel-2);transition:.14s}
.aisug button:hover{border-color:var(--cc);color:var(--cc)}
.aifoot{padding:11px 14px;border-top:1px solid var(--line);display:flex;gap:8px;align-items:flex-end;
  background:var(--panel-2)}
.aifoot textarea{flex:1;min-height:40px;max-height:120px;padding:10px 13px;border-radius:14px;
  border:1px solid var(--line-2);background:var(--bg-2);font-size:14.5px;resize:none;line-height:1.5}
.aifoot textarea:focus{outline:none;border-color:var(--cc)}
.aisend{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;flex:0 0 auto;
  background:var(--cc);color:#0B0C10;font-size:17px;font-weight:900}
:root[data-theme="light"] .aisend,:root:not([data-theme="dark"]) .aisend{color:#fff}
:root[data-theme="dark"] .aisend{color:#0B0C10}
.aisend[disabled]{opacity:.4;cursor:default}
.aidots{display:inline-flex;gap:3px}
.aidots i{width:5px;height:5px;border-radius:50%;background:var(--mut);animation:bounce 1.2s infinite}
.aidots i:nth-child(2){animation-delay:.15s}
.aidots i:nth-child(3){animation-delay:.3s}
@keyframes bounce{0%,60%,100%{opacity:.3}30%{opacity:1}}

/* ============ learning ============ */
.act.learn{background:#A3D93B;border-color:#A3D93B;color:#10160A}
.act.learn:hover{filter:brightness(1.08)}
.learncard{border:1px solid var(--line);border-radius:18px;background:var(--panel-2);overflow:hidden;
  margin-bottom:12px}
.learntop{display:flex;align-items:center;gap:12px;padding:13px 15px}
.learnname{font-size:17.5px;font-weight:900;letter-spacing:-.03em;text-align:start;color:var(--tx)}
.learnname:hover{color:color-mix(in srgb, var(--cc), #000 var(--cc-dark))}
.learnsub{font-size:12.5px;color:var(--mut);font-weight:600;margin-top:2px}
.learnplay{position:relative;width:100%;max-width:520px;margin:0 15px 12px;aspect-ratio:16/9;
  border-radius:14px;overflow:hidden;background:#000;border:1px solid var(--line)}
.learnplay iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.learnmiss{padding:0 15px 12px;font-size:13.5px;color:var(--mut);display:flex;align-items:center;
  gap:9px;flex-wrap:wrap}
.learnlyr{margin:0 15px 12px;padding:12px 14px;border-radius:12px;background:var(--bg-2);
  font-family:"Frank Ruhl Libre",serif;font-size:17px;line-height:1.85;white-space:pre-wrap;
  color:var(--tx-2);max-height:150px;overflow:hidden}
.learnfoot{display:flex;gap:7px;flex-wrap:wrap;padding:12px 15px;background:var(--panel);
  border-top:1px solid var(--line)}
#bottomnav .bdot.lrn{background:#A3D93B;box-shadow:0 0 0 3px rgba(163,217,59,.22)}
@media(max-width:400px){
  #bottomnav button{padding:6px 1px}
  #bottomnav button .bl{font-size:9.5px}
  #bottomnav button .bi{font-size:17px}
}

/* ============ inbox extras ============ */
.bulkhint{font-size:12.5px;color:var(--fnt);font-weight:600;align-self:center}
.pop{display:flex;flex-wrap:wrap;gap:7px;padding:0 18px 12px}
.popchip{font-size:11.5px;font-weight:800;padding:4px 11px;border-radius:99px;
  background:var(--ok-dim);color:var(--ok);display:inline-flex;align-items:center;gap:5px}
.popchip.trend{background:transparent;background:color-mix(in srgb, var(--cc) 15%, transparent);
  color:var(--cc);color:color-mix(in srgb, var(--cc), #000 var(--cc-dark))}
.catpick{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:0 18px 13px}
.catpick .cl{font-size:11.5px;font-weight:800;color:var(--fnt);letter-spacing:.05em}
.catpick select{padding:7px 11px;border-radius:11px;border:1px solid var(--line-2);background:var(--bg-2);
  font-size:14px;font-weight:700;color:var(--cc);color:color-mix(in srgb, var(--cc), #000 var(--cc-dark))}
.catpick .why{font-size:12.5px;color:var(--mut)}


.catpick .catfind{flex:1 1 180px;min-width:150px;padding:7px 11px;border-radius:11px;border:1px solid var(--line-2);background:var(--bg-2);color:inherit;font:inherit;font-size:14px}