.kdl-wrap{margin:24px 0}
.kdl-filters{display:flex;flex-wrap:wrap;gap:12px;align-items:end;margin:0 0 14px 0}
.kdl-filter{display:flex;flex-direction:column;gap:6px;min-width:160px}
.kdl-filter-grow{flex:1;min-width:220px}
.kdl-filter label{font-size:13px;opacity:.85}
.kdl-filter select,.kdl-filter input{padding:10px 10px;border:1px solid rgba(255,255,255,.15);border-radius:10px;background:transparent;color:inherit}
.kdl-filter select option{color:#111} /* options are usually on light OS UI */

.kdl-links{display:flex;flex-wrap:wrap;gap:8px}
.kdl-btn{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:inherit;text-decoration:none;cursor:pointer;font-size:13px;line-height:1}
.kdl-btn:hover{background:rgba(255,255,255,.10)}
.kdl-btn.kdl-add{padding:8px 10px}
.kdl-muted{opacity:.7}

.kdl-lyrics{display:none;margin-top:10px;padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);white-space:normal}
.kdl-lyrics.is-open{display:block}

.kdl-playlist{margin-top:18px;padding:12px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04)}
.kdl-playlist-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.kdl-playlist-actions{display:flex;gap:10px}
.kdl-playlist-list{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:8px}
.kdl-playlist-item{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.kdl-playlist-title{flex:1;min-width:200px}
.kdl-audio-player{width:100%;margin-top:10px}

.kdl-modal{position:fixed;inset:0;display:none;z-index:99999}
.kdl-modal.is-open{display:block}
.kdl-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.65)}
.kdl-modal-card{position:relative;max-width:980px;margin:4vh auto; background:#111;border-radius:16px;border:1px solid rgba(255,255,255,.15);box-shadow:0 12px 35px rgba(0,0,0,.4);overflow:hidden}
.kdl-modal-head{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.12)}
.kdl-modal-title{font-weight:700}
.kdl-modal-body{padding:12px 14px}
.kdl-embed-wrap{position:relative;padding-top:56.25%;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.12);background:#000}
.kdl-embed-wrap iframe{position:absolute;inset:0;width:100%;height:100%}
.kdl-modal-foot{margin-top:12px;display:flex;justify-content:flex-end}
@media (max-width: 700px){
  .kdl-modal-card{margin:2vh 10px}
  .kdl-filter{min-width:140px}
}


.kdl-lyrics-pre{margin:0;white-space:pre-wrap;line-height:1.65;font-size:15px;padding:12px 12px;border-radius:12px;border:1px solid rgba(255,255,255,0.12);background:rgba(0,0,0,0.25);max-height:60vh;overflow:auto}



/* Статус "Научени" – цветни етикети */
.kdl-badge{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
  line-height:1;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
}
.kdl-badge--learned{
  background: rgba(0,255,120,0.14);
  border-color: rgba(0,255,120,0.28);
}
.kdl-badge--learning{
  background: rgba(210,170,0,0.16);
  border-color: rgba(210,170,0,0.30);
}
.kdl-badge--no{
  background: rgba(255,60,60,0.14);
  border-color: rgba(255,60,60,0.30);
}
.kdl-badge--dream{
  background: rgba(0,210,220,0.14);
  border-color: rgba(0,210,220,0.30);
}

/* По-компактни колони */
.kdl-table th, .kdl-table td{ vertical-align: top; }
.kdl-table td{ white-space: normal; word-break: break-word; }
.kdl-status{ white-space: nowrap; }
}