/* Neon City: rain-dark glass, magenta/cyan signage and reactive glow. */
.bo-stylepack-profile--neon-city {
  --bo-pack-surface: rgba(10, 17, 30, 0.9);
  --bo-pack-surface-2: rgba(17, 25, 43, 0.94);
  --bo-pack-text: #ecf5ff;
  --bo-pack-muted: #a4b4c7;
  --bo-pack-heading: #ffffff;
  --bo-pack-accent: #43e7ff;
  --bo-pack-accent-2: #ff4fc8;
  --bo-pack-line: rgba(83, 225, 255, 0.29);
  --bo-pack-shadow: 0 16px 48px rgba(0, 0, 0, 0.45), 0 0 28px rgba(28, 185, 255, 0.08);
  --bo-pack-radius: 16px;
  --bo-pack-font: "Trebuchet MS", Arial, sans-serif;
  --bo-pack-heading-font: "Arial Narrow", Arial, sans-serif;
}

body:has(.bo-stylepack-profile--neon-city) .page__content {
  background:
    linear-gradient(115deg, rgba(255, 33, 190, 0.08), transparent 34%),
    radial-gradient(circle at 78% 20%, rgba(48, 214, 255, 0.13), transparent 25rem),
    #080d18;
}
body:has(.bo-stylepack-profile--neon-city) .page__header h1.page-title {
  color: #ecfbff;
  font-family: "Arial Narrow", Arial, sans-serif;
  letter-spacing: 0.06em;
  text-shadow: -2px 0 14px rgba(255, 62, 199, 0.55), 2px 0 14px rgba(54, 221, 255, 0.55);
}

.bo-stylepack-profile--neon-city::before {
  inset: -20px;
  background: radial-gradient(circle at var(--bo-pack-glow-x) var(--bo-pack-glow-y), rgba(54, 231, 255, .17), transparent 25rem);
}

.bo-stylepack-profile--neon-city .bo-stylepack-user__header,
.bo-stylepack-profile--neon-city .bo-stylepack-performer__content {
  backdrop-filter: blur(7px);
  border-color: rgba(67, 231, 255, .38);
  box-shadow: inset 0 0 0 1px rgba(255, 70, 195, .12), var(--bo-pack-shadow);
}

.bo-stylepack-profile--neon-city .bo-stylepack-user__avatar,
.bo-stylepack-profile--neon-city .field--name-field-images .field__item {
  box-shadow: 0 0 0 2px rgba(67, 231, 255, .38), 0 0 24px rgba(255, 79, 200, .19);
}

/* Page chrome: wet black glass with cyan and magenta edge light. */
body:has(.bo-stylepack-profile--neon-city) {
  --bo-pack-chrome-nav-bg: rgba(7, 12, 24, .97);
  --bo-pack-chrome-header-bg: #090f1d;
  --bo-pack-chrome-nav-text: #eaf8ff;
  --bo-pack-chrome-footer-bg: #060a13;
  --bo-pack-chrome-footer-text: #c4d7e3;
  --bo-pack-chrome-surface: rgba(20, 33, 52, .86);
  --bo-pack-chrome-title: #f6fdff;
  --bo-pack-chrome-muted: #9fb6c7;
  --bo-pack-chrome-accent: #43e7ff;
  --bo-pack-chrome-accent-2: #ff4fc8;
  --bo-pack-chrome-line: rgba(67, 231, 255, .34);
  --bo-pack-chrome-font: "Trebuchet MS", Arial, sans-serif;
  --bo-pack-chrome-heading-font: "Arial Narrow", Arial, sans-serif;
  --bo-pack-chrome-radius: 14px;
  --bo-pack-chrome-shadow: 0 10px 34px rgba(0,0,0,.48), 0 0 22px rgba(67,231,255,.08);
  --bo-pack-chrome-toggler-filter: invert(1);
}
body:has(.bo-stylepack-profile--neon-city) .page > nav.navbar {
  border-bottom: 1px solid #45e7ff;
  box-shadow: 0 8px 28px rgba(0,0,0,.42), 0 2px 18px rgba(255,79,200,.13), 0 1px 0 rgba(67,231,255,.7);
}
body:has(.bo-stylepack-profile--neon-city) .page__footer {
  border-top-color: #ff4fc8;
}

/* ========================================================================
 * V2: asymmetric HUD/dashboard, city-scale glow, no fuzzy body text.
 * ======================================================================== */
.bo-stylepack-profile--neon-city {
  --bo-pack-surface: rgba(8, 20, 35, .985);
  --bo-pack-surface-2: rgba(17, 33, 53, .985);
  --bo-pack-text: #eef8ff;
  --bo-pack-muted: #c0d0dd;
  --bo-pack-heading: #ffffff;
  --bo-pack-accent: #67eaff;
  --bo-pack-accent-2: #ff8bdc;
  --bo-pack-line: rgba(103, 234, 255, .34);
}
body:has(.bo-stylepack-profile--neon-city) {
  --bo-pack-chrome-nav-text: #f1fbff;
  --bo-pack-chrome-footer-text: #d7e8f2;
  --bo-pack-chrome-muted: #bdceda;
  --bo-pack-chrome-accent: #67eaff;
  --bo-pack-chrome-accent-2: #ff9de3;
}
body:has(.bo-stylepack-profile--neon-city) .page__content {
  background: #050d18;
}
body:has(.bo-stylepack-profile--neon-city) .page__content::before {
  background:
    radial-gradient(circle at var(--bo-pack-page-glow-x, 70%) var(--bo-pack-page-glow-y, 12%), rgba(35,223,255,.14), transparent 23rem),
    radial-gradient(circle at 15% 32%, rgba(255,62,190,.10), transparent 22rem),
    linear-gradient(180deg, #06111e, #040914 60%, #03070d);
}
body:has(.bo-stylepack-profile--neon-city) .page__content::after {
  top: 7%;
  bottom: 0;
  background:
    linear-gradient(90deg, transparent 0 4%, rgba(103,234,255,.12) 4.2% 4.35%, transparent 4.5% 95.5%, rgba(255,139,220,.12) 95.65% 95.8%, transparent 96%),
    repeating-linear-gradient(90deg, transparent 0 115px, rgba(77,151,255,.032) 116px 117px);
}

.bo-stylepack-profile--neon-city[data-bo-pack-layout="neon-dashboard"] .bo-stylepack-user__social {
  position: relative;
  overflow: hidden;
  border-top: 3px solid #ff8bdc;
}
.bo-stylepack-profile--neon-city[data-bo-pack-layout="neon-dashboard"] .bo-stylepack-user__social::before {
  position: absolute;
  inset: 1rem 1rem auto;
  height: 40%;
  opacity: .35;
  background: repeating-linear-gradient(90deg, #67eaff 0 2px, transparent 2px 18px);
  content: "";
}

.bo-stylepack-profile--neon-city .bo-comment {
  margin-block: .72rem;
  padding: .74rem .9rem;
  border: 1px solid #2d526a;
  border-radius: 6px;
  background: #0b1a2a;
  box-shadow: inset 3px 0 0 #67eaff;
}
.bo-stylepack-profile--neon-city .bo-comment .bo-comment {
  margin-left: clamp(.45rem, 2.5vw, 1.8rem);
  background: #17253a;
  box-shadow: inset 3px 0 0 #ff8bdc;
}

body:has(.bo-stylepack-profile--neon-city) .page > nav.navbar .nav-link {
  margin-inline: .12rem;
  border: 1px solid transparent;
  border-radius: 999px;
}
body:has(.bo-stylepack-profile--neon-city) .page > nav.navbar .nav-link:hover,
body:has(.bo-stylepack-profile--neon-city) .page > nav.navbar .nav-link:focus-visible {
  border-color: #67eaff;
  background: rgba(103,234,255,.09);
  color: #ffffff;
  box-shadow: 0 0 16px rgba(103,234,255,.14);
}

/* V2 readability: keep the page title crisp; atmosphere belongs behind text. */
body:has(.bo-stylepack-profile--neon-city) .page__header h1.page-title {
  text-shadow: none;
}
body:has(.bo-stylepack-profile--neon-city) .navbar-brand__logo img {
  border: 1px solid #67eaff;
  border-radius: 12px;
  box-shadow: 0 0 12px rgba(103,234,255,.30), 0 0 22px rgba(255,139,220,.12);
}