/* ═══════════════════════════════════════════════════════════════
   Playloudr · Smart Links — table layer for the v3 chrome.
   Loads AFTER playloudr-v3.css; reuses its tokens. Heading voice =
   --display (Geist), body = --ui (IBM Plex Sans), data = --mono.
   ═══════════════════════════════════════════════════════════════ */

/* ───── Section spacing ───── */
.section + .section { margin-top: 28px; }
.section-head { margin-bottom: 16px; }
.section-title {
  font-family: var(--display);
  font-size: 19px; font-weight: 700; letter-spacing: -0.018em;
  margin: 0 0 4px; color: var(--ink); line-height: 1.1;
}
.section-sub {
  font-size: 13.5px; color: var(--gray-500); margin: 0; line-height: 1.5;
}

/* ───── Table shell ───── */
.table-wrap {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--sh-card);
}
.table-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}
.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th {
  text-align: left;
  font-family: var(--ui);
  font-size: 11px; font-weight: 700;
  color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.06em;
  padding: 12px 16px;
  background: var(--gray-50);
  border-bottom: 1px solid var(--line);
}
.table th:last-child { text-align: right; }
.table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--gray-50); }

.cell-title-row { display: flex; align-items: center; gap: 12px; }
.cell-cover { width: 40px; height: 40px; border-radius: var(--r-sm); flex-shrink: 0; }
.cell-title { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.cell-sub { font-size: 12px; color: var(--gray-500); margin-top: 2px; }
.cell-mono { font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); }
.cell-num {
  font-family: var(--ui); font-size: 14px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--ink);
}
.cell-date { font-size: 13px; color: var(--gray-500); letter-spacing: -0.005em; }
.cell-actions { display: flex; gap: 2px; justify-content: flex-end; }

/* ───── Action icons ───── */
.act-btn {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; color: var(--gray-500);
  background: transparent; border: 0;
  transition: background .12s, color .12s;
}
.act-btn:hover { background: var(--gray-100); color: var(--ink); }

/* ───── Tabs / Filters ───── */
.tabs {
  display: inline-flex; background: var(--gray-100); padding: 3px;
  border-radius: var(--r-full); gap: 2px;
}
.tabs button {
  border: 0; background: transparent;
  font: 600 12.5px var(--ui);
  padding: 6px 13px; border-radius: var(--r-full);
  color: var(--gray-500); letter-spacing: -0.005em;
  transition: background .12s, color .12s;
}
.tabs button.active {
  background: #fff; color: var(--ink);
  box-shadow: 0 1px 2px rgba(17,20,43,0.08);
}

/* ───── Search ───── */
.search {
  display: inline-flex; align-items: center; gap: 10px;
  height: 38px; padding: 0 14px;
  border: 1px solid var(--gray-200); border-radius: var(--r-sm);
  background: #fff; min-width: 280px;
}
.search svg { color: var(--gray-400); flex-shrink: 0; }
.search input {
  border: 0; outline: 0; flex: 1; font: 13px var(--ui); color: var(--ink);
  background: transparent;
}
.search input::placeholder { color: var(--gray-400); }

/* ───── Tags / badges ───── */
.tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--ui);
  font-size: 11px; font-weight: 700;
  padding: 4px 10px; border-radius: var(--r-full);
  letter-spacing: -0.005em;
}
.tag-playlist  { background: var(--blue-tint); color: var(--blue-600); }
.tag-release   { background: var(--gray-100); color: var(--ink-2); }
.tag-published { background: var(--green-soft); color: var(--green-text); }
.tag-song      { background: var(--blue-tint); color: var(--blue-600); }

/* ───── Empty state ───── */
.empty {
  padding: 56px 20px; text-align: center;
  color: var(--gray-400); font-size: 13.5px;
}

/* ───── Cover art (distinct gradient per release) ───── */
.cover-synthwave {
  background:
    radial-gradient(circle at 30% 38%, #FFB1CC 0%, transparent 40%),
    linear-gradient(180deg, #FF6B3D 0%, #FF2D7A 55%, #8B3F66 100%);
}
.cover-secondera {
  background:
    radial-gradient(circle at 80% 22%, #FF7799 0%, transparent 30%),
    linear-gradient(180deg, #1F2937 0%, #0D1226 80%);
  position: relative;
}
.cover-secondera::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 75% 30%, rgba(255,45,122,0.4) 0%, transparent 20%);
  border-radius: inherit;
}
.cover-firstera {
  background:
    radial-gradient(circle at 50% 45%, #FF2D7A 0%, transparent 25%),
    linear-gradient(180deg, #1A1530 0%, #2D1B3D 50%, #0D0820 100%);
  position: relative;
}
.cover-firstera::after {
  content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 35%;
  background: linear-gradient(180deg, transparent 0%, #0D0820 100%);
  border-radius: inherit;
}