/* =========================
   FILE: assets/css/bookmarks.css
   ========================= */

.bm-wrap{
  margin-top:14px;
  display:grid;
  gap:14px;
}

.bm-head{
  padding:14px;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
}

.bm-title{
  margin:0;
  font-size:22px;
  line-height:1.2;
}

.bm-sub{ margin-top:6px; }

.bm-head__right{ display:flex; gap:10px; flex-wrap:wrap; }

.bm-toolbar{
  display:grid;
  gap:10px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(255,255,255,.02);
}

.bm-toolbar__row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.bm-toolbar__row--meta{
  justify-content:space-between;
}

.bm-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.02);
  font-size:13px;
}

.bm-chip input{ accent-color: currentColor; }

.bm-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:14px;
}
@media (max-width: 1180px){ .bm-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 920px){ .bm-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px){ .bm-grid{ grid-template-columns: 1fr; } }

.bm-card{
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  background:rgba(255,255,255,.02);
  box-shadow: 0 16px 40px rgba(0,0,0,.22);
}

.bm-card__media{
  display:block;
  background:#000;
}
.bm-card__media img{
  width:100%;
  height:auto;
  aspect-ratio: 4/3;
  object-fit:cover;
  display:block;
}

.bm-card__body{
  padding:12px;
  display:grid;
  gap:10px;
}

.bm-card__top{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
}

.bm-card__title{
  margin:0;
  font-size:15px;
  line-height:1.2;
}
.bm-card__title a{ text-decoration:none; }
.bm-card__title a:hover{ text-decoration:underline; }

.bm-card__badges{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.bm-badge{
  display:inline-flex;
  align-items:center;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.25);
  background: rgba(148,163,184,.10);
  color:#cbd5e1;
  font-size:12px;
  white-space:nowrap;
}
.bm-badge--on{
  border-color: rgba(34,197,94,.35);
  background: rgba(34,197,94,.10);
  color:#bbf7d0;
}
.bm-badge--play{
  border-color: rgba(56,189,248,.35);
  background: rgba(56,189,248,.10);
  color:#bae6fd;
}

.bm-card__meta{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.bm-pill{
  display:inline-flex;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.02);
  font-size:12px;
  color:var(--muted);
}
.bm-pill--cph{ color:#e5e7eb; }

.bm-card__actions{
  display:flex;
  justify-content:flex-end;
}

.btn--sm{
  padding:7px 10px;
  font-size:12px;
  border-radius:12px;
}

.bm-empty{
  padding:18px;
  display:grid;
  gap:10px;
}
.bm-empty__title{ font-weight:800; font-size:16px; }
.bm-empty__actions{ display:flex; gap:10px; flex-wrap:wrap; }