/* Fondo más premium */
body.theme-dark{
  background:
    radial-gradient(1200px 700px at 20% 0%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(900px 600px at 80% 10%, rgba(255,255,255,.08), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,.86), rgba(0,0,0,.94));
}

/* Ajuste de cajas */
.hub-box{ margin: 0 auto; max-width: 980px; }
.result-box.hub-box{ padding: 18px; }

/* Hero */
.hub-title{ margin: 0 0 6px; font-size: 22px; }
.hub-subtitle{ margin: 0 0 14px; opacity: .9; line-height: 1.35; }

.hub-controls{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 10px 0 10px;
}
@media (min-width:760px){
  .hub-controls{ grid-template-columns: 1.2fr .8fr; }
}

.hub-search,.hub-select{
  width:100%;
  border-radius:14px;
  padding:12px 14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
  color:#fff;
  outline:none;
}
.hub-search::placeholder{ color: rgba(255,255,255,.55); }

.hub-meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin: 6px 0 10px;
}
.hub-count{ font-size: 13px; opacity: .75; }
.hub-mini-cta{ font-size: 13px; opacity: .85; text-decoration: underline; }

.hub-hero-actions{
  display:flex;
  gap:10px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.hub-hero-btn{ border-radius:14px; padding:10px 12px; }

/* Grid */
.hub-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 6px;
}
@media (min-width:620px){ .hub-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width:980px){ .hub-grid{ grid-template-columns: repeat(3, 1fr); } }

/* Card */
.hub-card{
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  padding: 12px;
  background: rgba(255,255,255,.04);
  height: 100%;
  display:flex;
  flex-direction: column;
  justify-content: space-between;
}
.hub-card-title{ font-size: 15px; margin: 0 0 8px; line-height: 1.25; }

.hub-card-meta{ display:flex; gap:8px; flex-wrap:wrap; margin: 0 0 10px; }
.hub-pill{
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  opacity: .9;
}

.hub-card-actions{ display:flex; gap:10px; }
.hub-btn{ flex:1; border-radius:14px; padding:10px 12px; }
.hub-btn-secondary{ background: transparent; border: 1px solid rgba(255,255,255,.18); color: #fff; }

/* CTA final */
.hub-cta-title{ margin: 0 0 6px; font-size: 18px; }
.hub-cta-text{ margin: 0 0 12px; opacity: .9; line-height: 1.35; }

/* Redes */
.hub-socials{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px;}
.hub-social{
  display:inline-block;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.16);
  text-decoration:none;
  color:#fff;
  background: rgba(0,0,0,.18);
}
.hub-social:hover{opacity:.9;}