/* ============================================================
   media.css — Mediateca
   ============================================================ */
.media-body { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.media-tabs { display: flex; gap: 6px; padding: 12px 18px 4px; }
.mtab {
  background: var(--panel); border: 1px solid var(--border);
  color: var(--text-dim); padding: 7px 18px; border-radius: var(--radius);
  cursor: pointer;
}
.mtab.active { color: var(--text); border-color: var(--accent); }

.media-grid {
  flex: 1; overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  padding: 12px 18px 20px;
  align-content: start;
}
.media-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden; cursor: pointer;
  transition: border-color .12s, transform .12s;
}
.media-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.media-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; background: #000; }
.media-ph {
  aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center;
  font-size: 34px; color: var(--text-dim); background: var(--panel2);
}
.media-name {
  padding: 8px 10px; font-size: 12.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-top: 1px solid var(--border);
}

.media-player {
  border-top: 1px solid var(--border);
  background: var(--bg2);
  padding: 12px 18px;
  display: flex; gap: 16px; align-items: flex-start;
  flex-wrap: wrap;
}
.mp-head { width: 100%; display: flex; justify-content: space-between; align-items: center; font-weight: 700; }
.mp-stage { flex: 1; min-width: 260px; max-width: 640px; }
.mp-stage video, .mp-stage img { width: 100%; max-height: 320px; border-radius: var(--radius); background: #000; }
.mp-stage audio { width: 100%; }
.mp-actions { display: flex; flex-direction: column; gap: 8px; }