/* 51Blocks Industry Intelligence Hub — fully scoped to this component */
#iif-feed-app.iif-app-wrapper {
  --iif-navy: #09223f;
  --iif-navy-2: #0f3158;
  --iif-ink: #d1d1d1;
  --iif-muted: #617085;
  --iif-red: #d81123;
  --iif-red-dark: #c92d3c;
  --iif-surface: #0f3158;
  --iif-surface-soft: #1e426b;
  --iif-line: #0f3158;
  --iif-shadow: 0 14px 38px rgba(9, 34, 63, .10);
  color: var(--iif-ink);
  font-family: "Poppins", "Montserrat", Arial, sans-serif;
  max-width: 1280px;
  margin: 0 auto;
  padding: 28px 20px 64px;
}

#iif-feed-app *,
#iif-feed-app *::before,
#iif-feed-app *::after {
  box-sizing: border-box;
}

#iif-feed-app .iif-hero-banner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 330px;
  padding: 60px clamp(28px, 7vw, 92px);
  border-radius: 4px;
  background: linear-gradient(118deg, var(--iif-navy) 0%, #103967 100%);
  box-shadow: var(--iif-shadow);
}

#iif-feed-app .iif-hero-banner::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  opacity: .26;
  background-image: linear-gradient(rgba(255, 255, 255, .11) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .11) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: linear-gradient(90deg, transparent, #000 45%, transparent);
}

#iif-feed-app .iif-hero-glow {
  position: absolute;
  z-index: -1;
  right: -130px;
  bottom: -180px;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(226, 60, 75, .72) 0%, rgba(226, 60, 75, 0) 68%);
  filter: blur(3px);
}

#iif-feed-app .iif-hero-content {
  max-width: 830px;
}

#iif-feed-app .iif-live-badge,
#iif-feed-app .iif-tag-service,
#iif-feed-app .iif-tag-impact {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .11em;
  line-height: 1.2;
  text-transform: uppercase;
}

#iif-feed-app .iif-live-badge {
  padding: 8px 11px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .30);
  border-radius: 2px;
  background: rgba(255, 255, 255, .10);
}

#iif-feed-app .iif-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff6975;
  box-shadow: 0 0 0 0 rgba(255, 105, 117, .65);
  animation: iif-pulse 2s infinite;
}

#iif-feed-app .iif-hero-title {
  margin: 20px 0 12px;
  color: #fff;
  font-size: clamp(36px, 5vw, 62px);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1.04;
}

#iif-feed-app .iif-hero-subtitle {
  max-width: 760px;
  margin: 0;
  color: rgba(255, 255, 255, .78);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
}

#iif-feed-app .iif-hero-stats {
  display: flex;
  align-items: center;
  gap: 25px;
  margin-top: 36px;
}

#iif-feed-app .iif-stat-pill {
  display: grid;
  gap: 2px;
}

#iif-feed-app .iif-stat-num {
  color: #fff;
  font-size: 23px;
  font-weight: 800;
  line-height: 1.15;
}

#iif-feed-app .iif-stat-label {
  color: rgba(255, 255, 255, .63);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

#iif-feed-app .iif-stat-divider {
  width: 1px;
  height: 32px;
  background: rgba(255, 255, 255, .28);
}

#iif-feed-app .iif-stat-l10 .iif-stat-num {
  color: #ff9da5;
}

#iif-feed-app .iif-toolbar-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 24px 0 28px;
  padding: 12px;
  border: 1px solid var(--iif-line);
  border-radius: 4px;
  background: var(--iif-navy);
  box-shadow: 0 5px 20px rgba(9, 34, 63, .06);
}

#iif-feed-app .iif-tabs-scroll-wrap {
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}

#iif-feed-app .iif-tabs-nav {
  display: flex;
  width: max-content;
  gap: 3px;
}

#iif-feed-app .iif-tab-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 11px;
  color: #fff;
  border: 0;
  border-radius: 2px;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .035em;
  text-transform: uppercase;
  transition: background-color .18s ease, color .18s ease;
  white-space: nowrap;
}

#iif-feed-app .iif-tab-item:hover {
  color: #fff;
  background: var(--iif-red);
}

#iif-feed-app .iif-tab-item.active {
  color: #fff;
  background: var(--iif-red);
}

#iif-feed-app .iif-tab-icon {
  font-size: 14px;
  line-height: 1;
}

#iif-feed-app .iif-filter-bar {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 9px;
}

#iif-feed-app .iif-search-field {
  display: flex;
  align-items: center;
  width: min(245px, 22vw);
  min-height: 40px;
  padding: 0 11px;
  color: var(--iif-ink);
  border: 1px solid var(--iif-line);
  border-radius: 2px;
  background: var(--iif-surface-soft);
}

#iif-feed-app .iif-search-input {
  min-width: 0;
  width: 100%;
  padding: 0 8px;
  color: var(--iif-ink);
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: 12px;
}

#iif-feed-app .iif-search-input::placeholder {
  color: #9ba6b4;
}

#iif-feed-app .iif-search-field:focus-within {
  border-color: var(--iif-navy-2);
  box-shadow: 0 0 0 3px rgba(15, 49, 88, .10);
}

#iif-feed-app .iif-search-clear {
  padding: 0;
  color: #8290a1;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 19px;
  line-height: 1;
}

#iif-feed-app .iif-impact-filter {
  min-height: 50px;
  max-width: 210px;
  padding: 0 30px 0 11px;
  color: #fff;
  border: 1px solid var(--iif-line);
  border-radius: 2px;
  outline: 0;
  background: var(--iif-red);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

/* #iif-feed-app .iif-impact-filter option {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  max-width: 180px;
} */

#iif-feed-app .iif-impact-filter:focus {
  border-color: var(--iif-navy-2);
  box-shadow: 0 0 0 3px rgba(15, 49, 88, .10);
}

#iif-feed-app .iif-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

#iif-feed-app .iif-intel-card {
  position: relative;
  display: flex;
  overflow: hidden;
  min-width: 0;
  padding: 40px 30px 35px 30px;
  border: 1px solid #03121F;
  background: #03121F;
  border-radius: 0px;
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.5);
  color: #e7eef5;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

#iif-feed-app .iif-intel-card:hover {
  transform: translateY(-4px);
  border-color: var(--iif-red);
  box-shadow: var(--iif-shadow);
}

#iif-feed-app .iif-card-accent-bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  display: none;
  background: #ff2300;
}

#iif-feed-app .iif-impact-high .iif-card-accent-bar {
  background: var(--iif-red);
}

#iif-feed-app .iif-impact-l10 .iif-card-accent-bar {
  background: #7c4dff;
}

#iif-feed-app .iif-card-inner {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 318px;
  /* padding: 23px 22px 20px 26px; */
}

#iif-feed-app .iif-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 9px;
}

#iif-feed-app .iif-tag-service {
  max-width: 68%;
  color: var(--iif-ink);
  font-size: 9px;
  letter-spacing: .08em;
}

#iif-feed-app .iif-svc-icon {
  font-size: 14px;
  line-height: 1;
}

#iif-feed-app .iif-tag-group {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}

#iif-feed-app .iif-tag-impact {
  padding: 6px 7px;
  color: #a9710b;
  border-radius: 2px;
  background: #fff4d8;
  font-size: 8px;
  letter-spacing: .065em;
  white-space: nowrap;
  position: absolute;
  top: 10px;
  right: 10px;
}

#iif-feed-app .iif-imp-high {
  color: #b42635;
  background: #ffe5e8;
}

#iif-feed-app .iif-imp-l10 {
  color: #5b2bb8;
  background: #ede6ff;
}

#iif-feed-app .iif-card-heading {
  margin: 19px 0 10px;
  font-size: 18px;
  font-weight: 750;
  letter-spacing: -.018em;
  line-height: 1.35;
}

#iif-feed-app .iif-card-heading a {
  color: var(--iif-ink);
  text-decoration: none;
  transition: color .18s ease;
}

#iif-feed-app .iif-card-heading a:hover {
  color: var(--iif-red);
}

#iif-feed-app .iif-card-body {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: #fff;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  font-size: 12px;
  line-height: 1.65;
}

#iif-feed-app .iif-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 20px;
}

#iif-feed-app .iif-publisher-meta {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
}

#iif-feed-app .iif-pub-avatar {
  display: grid;
  flex: 0 0 29px;
  width: 29px;
  height: 29px;
  place-items: center;
  color: #fff;
  border-radius: 50%;
  background: var(--iif-navy);
  font-size: 11px;
  font-weight: 800;
}

#iif-feed-app .iif-pub-details {
  display: grid;
  min-width: 0;
  gap: 2px;
}

#iif-feed-app .iif-pub-name {
  overflow: hidden;
  color: #fff;
  font-size: 10px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#iif-feed-app .iif-pub-time {
  color: #8a97a7;
  font-size: 10px;
}

#iif-feed-app .iif-action-btn {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
  color: var(--iif-red);
  text-decoration: none;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}

#iif-feed-app .iif-action-btn:hover {
  color: var(--iif-red-dark);
}

#iif-feed-app .iif-action-btn:hover .iif-arrow-icon {
  transform: translateX(3px);
}

#iif-feed-app .iif-arrow-icon {
  transition: transform .18s ease;
}

#iif-feed-app .iif-load-more-wrap {
  display: flex;
  justify-content: center;
  padding-top: 34px;
}

#iif-feed-app .iif-load-more-btn {
  min-height: 46px;
  padding: 0 24px;
  color: #fff;
  border: 1px solid var(--iif-navy);
  border-radius: 2px;
  background: var(--iif-navy);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}

#iif-feed-app .iif-load-more-btn:hover {
  border-color: var(--iif-red);
  background: var(--iif-red);
  transform: translateY(-2px);
}

@keyframes iif-pulse {
  70% {
    box-shadow: 0 0 0 7px rgba(255, 105, 117, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(255, 105, 117, 0);
  }
}

@media (max-width: 1100px) {
  #iif-feed-app .iif-toolbar-card {
    align-items: stretch;
    flex-direction: column;
  }

  #iif-feed-app .iif-search-field {
    width: 100%;
  }

  #iif-feed-app .iif-filter-bar {
    justify-content: space-between;
  }

  #iif-feed-app .iif-cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  #iif-feed-app.iif-app-wrapper {
    padding: 16px 14px 42px;
  }

  #iif-feed-app .iif-hero-banner {
    min-height: 0;
    padding: 38px 24px;
  }

  #iif-feed-app .iif-hero-title {
    font-size: 35px;
  }

  #iif-feed-app .iif-hero-subtitle {
    font-size: 14px;
  }

  #iif-feed-app .iif-hero-stats {
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 28px;
  }

  #iif-feed-app .iif-stat-divider {
    display: none;
  }

  #iif-feed-app .iif-filter-bar {
    align-items: stretch;
    flex-direction: column;
  }

  #iif-feed-app .iif-impact-filter {
    max-width: none;
    width: 100%;
  }

  #iif-feed-app .iif-cards-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  #iif-feed-app .iif-card-inner {
    min-height: 294px;
  }
}

@media (prefers-reduced-motion: reduce) {

  #iif-feed-app *,
  #iif-feed-app *::before,
  #iif-feed-app *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}