/* PulseNexus canvas: the surrounding page now belongs to the same navy,
   cyan and violet visual system as the supplied banner. */
:root {
  --bg: #030b18;
  --surface: #091727;
  --surface-2: #0d1d31;
  --line: #233c58;
}

body {
  background:
    radial-gradient(circle at 10% -8%, rgba(0, 190, 255, .16), transparent 31rem),
    radial-gradient(circle at 92% 2%, rgba(111, 48, 255, .15), transparent 34rem),
    linear-gradient(180deg, #020817 0%, #061225 42%, #030a17 100%);
  background-attachment: fixed;
}

html[data-theme="light"] body {
  background:
    radial-gradient(circle at 10% -8%, rgba(0, 161, 224, .13), transparent 30rem),
    radial-gradient(circle at 92% 2%, rgba(103, 67, 224, .11), transparent 33rem),
    linear-gradient(180deg, #f5f9fd 0%, #e9f1fa 44%, #f3f7fc 100%);
  background-attachment: fixed;
}

/* Fluid public layout hotfix. Keeps loading states compact and uses wide screens well. */
main {
  width: min(1900px, calc(100% - 48px));
}

/* The supplied PulseNexus banner is also the navigation masthead artwork.
   A translucent theme-aware veil keeps navigation and status controls legible
   without recolouring or filtering the original cyan/violet brand asset. */
.topbar {
  background:
    linear-gradient(90deg, rgba(3, 10, 22, .91) 0%, rgba(3, 10, 22, .73) 42%, rgba(3, 10, 22, .80) 72%, rgba(3, 10, 22, .92) 100%),
    url("./assets/pulsenexus-banner.jpg") center 48% / cover no-repeat;
  box-shadow: 0 8px 30px rgba(0, 22, 62, .20);
}

.surface,
.market-card {
  background: linear-gradient(145deg, rgba(9, 24, 42, .97), rgba(5, 15, 31, .97));
  border-color: rgba(72, 117, 163, .34);
}

html[data-theme="light"] .topbar {
  background:
    linear-gradient(90deg, rgba(247, 251, 253, .94) 0%, rgba(247, 251, 253, .82) 42%, rgba(247, 251, 253, .86) 72%, rgba(247, 251, 253, .95) 100%),
    url("./assets/pulsenexus-banner.jpg") center 48% / cover no-repeat;
  box-shadow: 0 8px 28px rgba(31, 57, 70, .10);
}

.topbar .brand,
.topbar nav,
.topbar .top-actions {
  position: relative;
  z-index: 1;
}

.index-grid > :only-child,
.sector-map > .empty:only-child,
.model-grid > .empty:only-child {
  grid-column: 1 / -1;
}

.skeleton,
.empty {
  min-height: 72px;
  padding: 16px;
}

.opportunity-list > .empty {
  min-height: 84px;
  margin: 0;
}

@media (min-width: 721px) {
  .topbar {
    height: 72px;
    padding-left: max(24px, calc((100vw - 1900px) / 2));
    padding-right: max(24px, calc((100vw - 1900px) / 2));
  }

  .hero {
    margin-top: 22px;
    padding: 32px 36px;
    gap: 28px;
  }

  .hero h1 {
    font-size: clamp(34px, 3.2vw, 56px);
  }

  .hero-copy {
    margin: 14px 0;
    font-size: 15px;
  }

  .hero-stats article {
    min-height: 98px;
    padding: 16px 18px;
  }

  .hero-stats strong {
    font-size: 24px;
  }

  .section-block {
    padding-top: 30px;
  }

  .split-section {
    padding: 30px 0;
  }

  .market-card {
    padding: 18px;
  }

  .sector-panel,
  .intelligence-panel {
    padding: 20px;
  }
}

@media (max-width: 720px) {
  main {
    width: calc(100% - 24px);
  }

  .split-section {
    padding: 30px 0;
  }

  .skeleton,
  .empty {
    min-height: 64px;
  }
}

/* PulseNexus brand assets keep their native navy/cyan/violet palette in every
   theme. Only the containing border and shadow adapt to the surrounding UI. */
.brand-mark {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  display: block;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(91, 177, 255, .30);
  border-radius: 13px;
  background: #03132d;
  box-shadow: 0 8px 28px rgba(20, 112, 255, .20);
}

.brand-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero {
  grid-template-columns: minmax(0, 1.42fr) minmax(330px, .78fr);
  gap: 24px;
  padding: 26px;
}

.hero-brand-panel { min-width: 0; }

.hero-banner-frame {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(82, 154, 255, .36);
  border-radius: 18px;
  background: #020b21;
  box-shadow: 0 18px 46px rgba(0, 28, 88, .30);
}

.hero-banner {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  object-fit: cover;
}

.hero-copy { margin: 14px 2px; }

html[data-theme="light"] .brand-mark {
  border-color: #7ea9d0;
  box-shadow: 0 7px 20px rgba(24, 72, 132, .20);
}

html[data-theme="light"] .hero-banner-frame {
  border-color: #7aa7d0;
  box-shadow: 0 16px 38px rgba(27, 61, 105, .16);
}

html[data-theme="light"] .surface,
html[data-theme="light"] .market-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(240, 247, 251, .98));
}

html[data-theme="light"] .hero-stats article,
html[data-theme="light"] .plan-strip span,
html[data-theme="light"] .plan-summary,
html[data-theme="light"] .sector-tile {
  background: rgba(226, 239, 246, .72);
  border-color: #bfd3df;
}

html[data-theme="light"] .hero-badges span,
html[data-theme="light"] .state-pill {
  color: #315b73;
  border-color: #9dbdcc;
  background: rgba(236, 246, 250, .74);
}

html[data-theme="light"] .opportunity-row:hover {
  background: rgba(48, 117, 145, .07);
}

/* The banner is dark photographic artwork. In light mode it sits inside a
   deliberate branded masthead instead of an unrelated white card. This is a
   component-level theme adaptation: the page remains light while the artwork,
   copy, metrics and badges become one coherent high-contrast brand zone. */
html[data-theme="light"] .hero {
  color: #f5f9ff;
  background:
    radial-gradient(circle at 96% 4%, rgba(110, 49, 255, .22), transparent 24rem),
    radial-gradient(circle at 12% 100%, rgba(0, 190, 255, .16), transparent 28rem),
    linear-gradient(145deg, rgba(6, 22, 48, .99), rgba(2, 10, 28, .99));
  border-color: rgba(84, 153, 235, .48);
  box-shadow: 0 22px 58px rgba(23, 56, 105, .22);
}

html[data-theme="light"] .hero .hero-copy,
html[data-theme="light"] .hero .hero-stats span {
  color: #b8cce0;
}

html[data-theme="light"] .hero .hero-stats small {
  color: #92b7d8;
}

html[data-theme="light"] .hero .hero-stats strong {
  color: #f5f9ff;
}

html[data-theme="light"] .hero .hero-stats article {
  background: linear-gradient(145deg, rgba(13, 36, 65, .92), rgba(7, 22, 43, .92));
  border-color: rgba(93, 152, 208, .42);
}

html[data-theme="light"] .hero .hero-badges span {
  color: #bfe5ff;
  border-color: rgba(74, 174, 229, .54);
  background: rgba(7, 37, 68, .72);
}

@media (max-width: 1100px) {
  .hero { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .brand-mark { width: 38px; height: 38px; padding: 0; }
  .hero { padding: 14px; }
  .hero-banner-frame { border-radius: 13px; }
}