/* Tabs */
.oeuk-tabs { display:flex; gap:10px; margin-bottom:15px; border-bottom:2px solid #eee; }
.oeuk-tabs button { padding:10px 20px; border:none; background:#f4f4f4; cursor:pointer; border-radius:5px 5px 0 0; font-weight:600; }
.oeuk-tabs button.active { background:#2d2f6d; color:#fff; }

/* Backgrounds */
#summary { background:#f0f7ff; padding:20px; border-radius:6px; }
#charts { background:#f8f9fa; padding:20px; border-radius:6px; }
#trends { background:#f7fff9; padding:20px; border-radius:6px; }

/* Summary */
.oeuk-summary-hero {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:20px;
  margin-bottom:20px;
}
.summary-card {
  background:#fff;
  border-radius:12px;
  box-shadow:0 4px 12px rgba(0,0,0,0.1);
  padding:20px;
  text-align:center;
  transition:transform .2s, box-shadow .2s;
}
.summary-card:hover {
  transform:translateY(-4px);
  box-shadow:0 6px 16px rgba(0,0,0,0.15);
}
.summary-card .stat {
  font-size:2em;
  font-weight:700;
  color:#2d2f6d;
  margin-bottom:5px;
}
.summary-card .label { font-size:1em; color:#444; }
.summary-card.highlight {
  background:#fff !important;
  color:#2d2f6d !important;
}
.summary-card.highlight .stat {
  color:#2d2f6d !important;
}
.summary-text { font-size:1.1em; line-height:1.5; color:#333; margin-top:10px; }

/* Explore Data */
.section-title { margin-bottom:10px; font-size:1.4em; color:#2d2f6d; }
#oeukDatasetSelect { padding:8px; margin-bottom:15px; border-radius:6px; border:1px solid #ccc; }

/* Trends */
#oeukTrendFilters { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:15px; }
.trend-btn { padding:8px 14px; border:none; border-radius:20px; background:#eee; cursor:pointer; }
.trend-btn.active { background:#6a4d9c; color:#fff; }
#oeukTrends { display:grid; gap:15px; }
.trend-card { background:#fff; padding:15px; border-radius:10px; box-shadow:0 2px 6px rgba(0,0,0,0.1); }
.trend-card h4 { margin:0 0 8px; color:#2d2f6d; }