.h9j-wrap {
  max-width: 880px;
  margin: 0 auto;
  padding: 24px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color: inherit;
}

.h9j-header { margin-bottom: 16px; }
.h9j-title { font-size: 1.75rem; margin-bottom: 6px; color: #801a7a; }
.h9j-subtitle { font-size: 1rem; opacity: .85; }

/* Filtros */
.h9j-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  margin: 16px 0;
}

.h9j-filter { display: flex; flex-direction: column; gap: 6px; }
.h9j-filter--search { flex: 2 1 400px; min-width: 240px; }
.h9j-filter--actions { flex: 0 0 auto; }

.h9j-input {
  padding: 10px 12px;
  font-size: 1rem;
  border: 2px solid #727272;
  border-radius: 8px;
  background: #fff;
  color: #111;
  height: 49px;
}

.h9j-hint { font-size: .85rem; opacity: .75; }

.h9j-btn {
  padding: 10px 14px;
  border-radius: 8px;
  cursor: pointer;
  background: #00af66; border: 2px solid #00af66; height: 49px; color: #FFF; font-weight: 600; text-transform: uppercase;
}

.h9j-clear-wrap {margin-top: 40px;}

.h9j-meta { margin: 6px 0 10px 0; }
.h9j-count { font-size: .95rem; opacity: .9; }

/* Lista de resultados */
.h9j-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.h9j-list__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #801a7a; border: 2px solid #801a7a;
}

.h9j-link {
  text-decoration: none;
  color: #FFF;
  font-size: 1rem;
}
.h9j-link:hover { text-decoration: underline; }
.h9j-link--disabled {
  color: #999;
  pointer-events: none;
}

.h9j-badge {
  padding: 4px 8px;
  border: 1px solid #ddd;
  border-radius: 10px;
  font-size: .8rem;
  background: #f5f5f5;
  color: #666;
}

/* Foco visível */
.h9j-input:focus,
.h9j-btn:focus,
.h9j-link:focus {
  outline: 3px solid rgba(10, 88, 202, .35);
  outline-offset: 2px;
}

/* Responsivo */
@media (max-width: 720px) {
  .h9j-filter--search,
  .h9j-filter--actions { flex: 1 1 100%; }
  .h9j-btn { width: 100%; }
  /*
  .topo { background-size: 50%; height: 50vh; padding: 0; display: flex; align-items: flex-end;}
  .topo img { width: 80%; height: auto; }
  */
}

/* Ícone de download antes do nome */
.h9j-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  font-size: 1rem;
}
.h9j-link span { text-transform: uppercase !important; }
.h9j-link:hover { text-decoration: underline; }

.h9j-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.h9j-link--disabled .h9j-icon {
  opacity: 0.4;
}

body { background: #FFF; color: #111; padding: 0; margin:0; }

.topo {
    width: 100%; padding: 20px; font-size: 0; background-color: #00af66; background-image: url('midia_bg_desktop.png'); background-position: top right; background-size: contain; background-repeat: no-repeat;
}
.topo img {
    max-width: 40%;
    height: auto;
}