/* ==========================================================
   CAMS.PHP — PAGE SPECIFIC SYSTEMS ONLY
   Midnight Signal X
========================================================== */

/*
  Foundation styling now handled globally by main.css

  cams.css should ONLY contain:
  - player systems
  - intelligence systems
  - geo systems
  - profile systems
  - cams-specific layouts
  - behaviour systems
*/
/* ==========================================================
   PLAYER SYSTEM
   Midnight Signal X
========================================================== */

/* ==========================================================
   PLAYER
========================================================== */

.player {

  position: relative;

  overflow: hidden;

  aspect-ratio: 16 / 8.55;

  cursor: pointer;

  border-radius: 24px;

  background:
    var(--grad-soft);

  border:
    1px solid var(--border);

  box-shadow:
    var(--glow-mid);

  transition:
    transform var(--motion-mid),
    box-shadow var(--motion-mid),
    border-color var(--motion-fast);
}

/* ==========================================================
   ATMOSPHERE
========================================================== */

.player::before {

  content: '';

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.02),
      transparent 35%
    );

  pointer-events: none;

  z-index: 2;
}

/* ==========================================================
   PLAYER HOVER
========================================================== */

.player:hover {

  transform: translateY(-2px);

  border-color:
    color-mix(
      in srgb,
      var(--accent) 24%,
      var(--border)
    );

  box-shadow:
    var(--glow-strong);
}

/* ==========================================================
   IFRAME
========================================================== */

.player iframe {

  width: 100%;
  height: 100%;

  border: 0;

  display: block;
}

/* ==========================================================
   OVERLAY LINK
========================================================== */

.room-overlay-link {

  position: absolute;

  inset: 0;

  z-index: 5;

  display: block;
}

/* ==========================================================
   CTA BUTTON
========================================================== */

.room-overlay-link::after {

  content: attr(data-hover-label);

  position: absolute;

  left: 50%;
  bottom: 50%;

  transform:
    translate(-50%, 18px);

  padding: 10px 16px;

  border-radius: 999px;

  background:
    var(--glass-bg);

  border:
    1px solid var(--border);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  box-shadow:
    var(--glow-mid);

  font-size: 0.84rem;

  font-weight: 700;

  letter-spacing: -0.01em;

  color: var(--text);

  opacity: 0;

  transition:
    opacity var(--motion-fast),
    transform var(--motion-fast);

  pointer-events: none;

  white-space: nowrap;
}

/* ==========================================================
   CTA SHOW
========================================================== */

.player:hover .room-overlay-link::after {

  opacity: 1;

  transform:
    translate(-50%, 0);
}

/* ==========================================================
   OVERLAY ATMOSPHERE
========================================================== */

.room-overlay-link::before {

  content: "";

  position: absolute;

  inset: 0;

  background:
    var(--glow-orb);

  opacity: 0;

  transition:
    opacity var(--motion-fast);

  pointer-events: none;
}

/* ==========================================================
   OVERLAY HOVER
========================================================== */

.player:hover .room-overlay-link::before {

  opacity: 1;
}

/* ==========================================================
   HERO LAYOUT
========================================================== */

.model-hero {

  display: grid;

  grid-template-columns:
    minmax(0,1.65fr)
    minmax(320px,0.52fr);

  gap: 24px;

  align-items: start;
}

/* ==========================================================
   PLAYER WRAP
========================================================== */

.player-wrap {

  position: relative;

  overflow: hidden;

  padding: 14px;

  border-radius: 30px;

  background:
    var(--grad-soft);

  border:
    1px solid var(--border);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  box-shadow:
    var(--glow-strong);

  transition:
    border-color var(--motion-fast),
    box-shadow var(--motion-mid);
}

/* ==========================================================
   ATMOSPHERE ORB
========================================================== */

.player-wrap::before {

  content: "";

  position: absolute;

  top: -140px;
  right: -140px;

  width: 320px;
  height: 320px;

  border-radius: 50%;

  background:
    var(--glow-orb);

  pointer-events: none;
}

/* ==========================================================
   CONTENT LAYER
========================================================== */

.player-wrap > * {

  position: relative;

  z-index: 2;
}

/* ==========================================================
   HERO META
========================================================== */

.hero-meta {

  display: flex;
  flex-direction: column;

  gap: 14px;

  padding: 22px 22px 26px;

  border-radius: 28px;

  background: var(--card);

  border:
    1px solid var(--border);

  box-shadow:
    var(--glow-mid);
}

/* ==========================================================
   HERO TITLE
========================================================== */

.hero-meta h1 {

  margin: 0;

  font-size:
    clamp(1.65rem, 2.5vw, 2.3rem);

  line-height: 1.02;

  letter-spacing: -0.05em;

  font-weight: 850;

  color: var(--text);
}

/* ==========================================================
   HERO STATS
========================================================== */

.hero-stats {

  display: flex;

  flex-wrap: wrap;

  gap: 8px;
}

/* ==========================================================
   STAT PILLS
========================================================== */

.hero-stats .stat {

  display: inline-flex;
  align-items: center;

  gap: 6px;

  padding: 7px 11px;

  border-radius: 999px;

  background:
    color-mix(in srgb, var(--card) 80%, transparent);

  border:
    1px solid var(--border);

  font-size: 0.8rem;

  font-weight: 700;

  color: var(--text);
}

/* ==========================================================
   PROMO BOX
========================================================== */

.promo-box {

  margin-top: 4px;
}

/* ==========================================================
   PROMO IMAGE
========================================================== */

.promo-image {

  width: 100%;

  max-height: 445px;

  object-fit: cover;

  display: block;

  border-radius: 22px;

  box-shadow:
    var(--glow-mid);
}

/* ==========================================================
   SPACING
========================================================== */

.model-hero + .section {

  margin-top: 36px;
}

/* ==========================================================
   OFFLINE
========================================================== */

.offline-placeholder {

  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  border-radius: 20px;

  filter:
    contrast(1.02)
    brightness(0.92);
}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 980px) {

  .model-hero {

    grid-template-columns: 1fr;
  }

  .player {

    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 700px) {

  .hero-meta {

    gap: 10px;

    padding: 18px;

    border-radius: 24px;
  }

  .player-wrap {

    padding: 10px;

    border-radius: 24px;
  }

  .hero-meta h1 {

    font-size: 2rem;
  }

  .hero-stats {

    gap: 6px;
  }

  .hero-stats .stat {

    font-size: 0.76rem;

    padding: 6px 10px;
  }

  .promo-image {

    max-height: 300px;
  }
}
/* ==========================================================
   INTELLIGENCE PANEL
========================================================== */

.intel-wrap {

  position: relative;

  overflow: hidden;

  padding: 26px;

  border-radius: 30px;

  background: var(--card);

  border:
    1px solid var(--border);

  box-shadow:
    var(--glow-strong);

  transition:
    transform var(--motion-mid),
    border-color var(--motion-fast),
    box-shadow var(--motion-mid);
}

/* ==========================================================
   ATMOSPHERE
========================================================== */

.intel-wrap::before {

  content: '';

  position: absolute;
  inset: 0;

  background:
    var(--glow-orb);

  pointer-events: none;

  opacity: 0.9;
}

/* ==========================================================
   HOVER
========================================================== */

.intel-wrap:hover {

  transform: translateY(-2px);

  border-color:
    color-mix(
      in srgb,
      var(--accent) 22%,
      var(--border)
    );

  box-shadow:
    var(--glow-strong);
}

/* ==========================================================
   HEAT STATES
========================================================== */

.intel-wrap.heat-medium {

  border-color:
    color-mix(
      in srgb,
      var(--accent) 14%,
      var(--border)
    );
}

.intel-wrap.heat-high {

  border-color:
    color-mix(
      in srgb,
      var(--accent) 24%,
      var(--border)
    );

  box-shadow:
    var(--glow-strong);
}

/* ==========================================================
   ENERGY
========================================================== */

.intel-energy {

  position: relative;

  z-index: 2;

  margin-bottom: 22px;
}

/* ==========================================================
   ENERGY HEAD
========================================================== */

.energy-head {

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  margin-bottom: 10px;

  font-size: 0.8rem;

  color: var(--muted);
}

.energy-head strong {

  color: var(--text);

  font-weight: 700;
}

/* ==========================================================
   ENERGY BAR
========================================================== */

.energy-bar {

  position: relative;

  overflow: hidden;

  height: 10px;

  border-radius: 999px;

  background:
    color-mix(
      in srgb,
      var(--card) 72%,
      transparent
    );
}

/* ==========================================================
   ENERGY FILL
========================================================== */

.energy-fill {

  position: relative;

  height: 100%;

  border-radius: inherit;

  animation:
    intelEnergyPulse 3.5s infinite ease-in-out;
}

/* subtle shine */
.energy-fill::after {

  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,0.14),
      transparent
    );

  transform: translateX(-120%);

  animation:
    intelShine 4s infinite ease-in-out;
}

/* ==========================================================
   ENERGY LEVELS
========================================================== */

.energy-fill-low {

  background:
    linear-gradient(
      90deg,
      rgba(120,120,140,0.82),
      rgba(170,170,190,0.82)
    );
}

.energy-fill-medium {

  background:
    linear-gradient(
      90deg,
      rgba(138,108,255,0.82),
      rgba(0,194,255,0.72)
    );
}

.energy-fill-high {

  background:
    var(--grad-primary);

  box-shadow:
    var(--glow-soft);
}

/* ==========================================================
   ENERGY SUB
========================================================== */

.energy-sub {

  margin-top: 8px;

  font-size: 0.76rem;

  line-height: 1.5;

  color:
    color-mix(
      in srgb,
      var(--text) 58%,
      transparent
    );
}

/* ==========================================================
   ANIMATIONS
========================================================== */

@keyframes intelEnergyPulse {

  0%,100% {
    opacity: 0.92;
  }

  50% {
    opacity: 1;
  }
}

@keyframes intelShine {

  0% {
    transform: translateX(-120%);
  }

  55% {
    transform: translateX(140%);
  }

  100% {
    transform: translateX(140%);
  }
}
/* ==========================================================
   AI PANEL
========================================================== */

.intel-ai {

  position: relative;

  overflow: hidden;

  margin-bottom: 22px;

  padding: 18px 20px;

  border-radius: 22px;

  background:
    color-mix(
      in srgb,
      var(--accent) 8%,
      var(--card)
    );

  border:
    1px solid var(--border);

  box-shadow:
    var(--glow-soft);
}

/* ==========================================================
   ATMOSPHERE
========================================================== */

.intel-ai::before {

  content: '';

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.02),
      transparent
    );

  pointer-events: none;
}

/* ==========================================================
   AI KICKER
========================================================== */

.ai-kicker {

  display: inline-block;

  margin-bottom: 10px;

  font-size: 0.7rem;

  font-weight: 800;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  color:
    color-mix(
      in srgb,
      var(--accent) 72%,
      var(--text)
    );

  opacity: 0.9;
}

/* ==========================================================
   AI TEXT
========================================================== */

.intel-ai p {

  margin: 0;

  line-height: 1.7;

  font-size: 0.95rem;

  color:
    color-mix(
      in srgb,
      var(--text) 90%,
      transparent
    );
}

/* ==========================================================
   GRID
========================================================== */

.intel-grid {

  display: grid;

  grid-template-columns:
    1.4fr 1fr;

  gap: 22px;

  align-items: stretch;

  margin-bottom: 26px;
}

/* ==========================================================
   MAIN PANEL
========================================================== */

.intel-main {

  position: relative;

  overflow: hidden;

  padding: 26px;

  border-radius: 28px;

  background: var(--card);

  border:
    1px solid var(--border);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.03),
    var(--glow-mid);
}

/* ==========================================================
   ATMOSPHERE
========================================================== */

.intel-main-glow {

  position: absolute;

  top: -80px;
  right: -80px;

  width: 240px;
  height: 240px;

  border-radius: 50%;

  background:
    var(--glow-orb);

  pointer-events: none;
}

/* ==========================================================
   MAIN TOP
========================================================== */

.intel-main-top {

  position: relative;

  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  flex-wrap: wrap;

  margin-bottom: 24px;
}
/* ==========================================================
   BADGE
========================================================== */

.intel-rank-badge {

  display: inline-flex;
  align-items: center;

  padding: 8px 12px;

  border-radius: 999px;

  background:
    color-mix(
      in srgb,
      var(--card) 82%,
      transparent
    );

  border:
    1px solid var(--border);

  font-size: 0.76rem;

  font-weight: 700;

  color: var(--text);
}

.intel-confidence {

  font-size: 0.78rem;

  font-weight: 700;

  color: var(--muted);
}

/* ==========================================================
   NUMBER
========================================================== */

.intel-number-wrap {

  position: relative;

  z-index: 2;
}

.intel-number {

  font-size:
    clamp(3rem, 6vw, 5rem);

  line-height: 0.94;

  letter-spacing: -0.05em;

  font-weight: 850;

  color:
    color-mix(
      in srgb,
      var(--accent) 82%,
      var(--text)
    );

  text-shadow:
    var(--glow-soft);
}

.intel-number-label {

  margin-top: 12px;

  font-size: 1rem;

  font-weight: 700;

  color:
    color-mix(
      in srgb,
      var(--text) 92%,
      transparent
    );
}

.intel-number-meta {

  margin-top: 8px;

  font-size: 0.9rem;

  line-height: 1.6;

  color: var(--muted);
}

/* ==========================================================
   CONFIDENCE
========================================================== */

.confidence-meter {

  position: relative;

  z-index: 2;

  margin-top: 24px;
}

.confidence-head {

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  margin-bottom: 10px;

  font-size: 0.82rem;

  color: var(--muted);
}

.confidence-head strong {

  color: var(--text);

  font-weight: 800;
}

/* ==========================================================
   BAR
========================================================== */

.confidence-bar {

  position: relative;

  overflow: hidden;

  height: 10px;

  border-radius: 999px;

  background:
    color-mix(
      in srgb,
      var(--card) 72%,
      transparent
    );
}

/* ==========================================================
   FILLS
========================================================== */

.confidence-fill-high,
.confidence-fill-medium,
.confidence-fill-low {

  position: relative;

  height: 100%;

  border-radius: inherit;

  transition:
    width 0.6s ease;

  box-shadow:
    var(--glow-soft);
}

/* HIGH */

.confidence-fill-high {

  background:
    linear-gradient(
      90deg,
      rgba(0,194,255,0.88),
      rgba(138,108,255,0.92)
    );
}

/* MEDIUM */

.confidence-fill-medium {

  background:
    linear-gradient(
      90deg,
      rgba(255,184,92,0.88),
      rgba(255,140,90,0.88)
    );
}

/* LOW */

.confidence-fill-low {

  background:
    linear-gradient(
      90deg,
      rgba(150,150,170,0.82),
      rgba(190,190,210,0.82)
    );
}

/* ==========================================================
   SHIMMER
========================================================== */

.confidence-fill-high::after,
.confidence-fill-medium::after,
.confidence-fill-low::after {

  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      120deg,
      transparent 30%,
      rgba(255,255,255,0.16),
      transparent 70%
    );

  animation:
    confidenceShimmer 2.8s infinite;
}

@keyframes confidenceShimmer {

  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}
/* ==========================================================
   SUB
========================================================== */

.confidence-sub {

  margin-top: 7px;

  font-size: 0.75rem;

  line-height: 1.5;

  color: var(--muted);
}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 980px) {

  .intel-grid {

    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {

  .intel-wrap,
  .intel-main {

    padding: 20px;

    border-radius: 24px;
  }

  .intel-number {

    font-size: 3.5rem;
  }
}

/* ==========================================================
   INTELLIGENCE STATS + PROFILE
========================================================== */

/* ==========================================================
   STATS GRID
========================================================== */

.intel-stats {

  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 16px;

  align-content: start;
}

/* ==========================================================
   STAT CARD
========================================================== */

.intel-stat-card {

  position: relative;

  overflow: hidden;

  min-height: 122px;

  padding: 20px;

  border-radius: 22px;

  background: var(--card);

  border:
    1px solid var(--border);

  box-shadow:
    var(--glow-soft);

  transition:
    transform var(--motion-fast),
    border-color var(--motion-fast),
    box-shadow var(--motion-fast);
}

/* ==========================================================
   ATMOSPHERE
========================================================== */

.intel-stat-card::before {

  content: '';

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.018),
      transparent 35%
    );

  pointer-events: none;

  opacity: 0.75;
}

/* ==========================================================
   HOVER
========================================================== */

.intel-stat-card:hover {

  transform: translateY(-2px);

  border-color:
    color-mix(
      in srgb,
      var(--accent) 22%,
      var(--border)
    );

  box-shadow:
    var(--glow-mid);
}

/* ==========================================================
   STAT TEXT
========================================================== */

.stat-label {

  display: block;

  margin-bottom: 14px;

  font-size: 0.8rem;

  font-weight: 700;

  letter-spacing: 0.01em;

  color: var(--muted);
}

.stat-value {

  display: block;

  font-size:
    clamp(1.3rem, 2.5vw, 2rem);

  line-height: 1.05;

  letter-spacing: -0.03em;

  font-weight: 850;

  color:
    color-mix(
      in srgb,
      var(--accent) 78%,
      var(--text)
    );

  text-shadow:
    var(--glow-soft);
}
/* ==========================================================
   BEHAVIOUR HEAD
========================================================== */

.intel-behaviour-head {

  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 16px;

  flex-wrap: wrap;

  margin-bottom: 16px;
}

.intel-behaviour-head h3 {

  margin: 0;

  font-size: 1.02rem;

  letter-spacing: -0.02em;

  color: var(--text);
}

.intel-behaviour-head p {

  margin: 0;

  font-size: 0.82rem;

  line-height: 1.5;

  color: var(--muted);
}

/* ==========================================================
   INSIGHTS GRID
========================================================== */

.intel-insights-grid {

  display: grid;

  grid-template-columns:
    repeat(2, minmax(0,1fr));

  gap: 16px;
}

/* ==========================================================
   INTEL CARD
========================================================== */

.intel-card {

  position: relative;

  overflow: hidden;

  display: grid;

  grid-template-columns:
    4px 1fr;

  gap: 16px;

  padding: 20px;

  border-radius: 22px;

  background: var(--card);

  border:
    1px solid var(--border);

  box-shadow:
    var(--glow-soft);

  transition:
    transform var(--motion-fast),
    border-color var(--motion-fast),
    box-shadow var(--motion-fast);
}

/* ==========================================================
   ATMOSPHERE
========================================================== */

.intel-card::before {

  content: '';

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.018),
      transparent 35%
    );

  pointer-events: none;
}

/* ==========================================================
   CARD HOVER
========================================================== */

.intel-card:hover {

  transform: translateY(-2px);

  border-color:
    color-mix(
      in srgb,
      var(--accent) 22%,
      var(--border)
    );

  box-shadow:
    var(--glow-mid);
}

/* ==========================================================
   HOT STATE
========================================================== */

.intel-card.hot {

  border-color:
    color-mix(
      in srgb,
      var(--accent) 28%,
      var(--border)
    );

  box-shadow:
    var(--glow-strong);
}

/* ==========================================================
   SIDE BAR
========================================================== */

.intel-card-bar {

  width: 4px;

  border-radius: 999px;

  background: var(--grad-primary);

  opacity: 0.92;
}

/* ==========================================================
   CARD BODY
========================================================== */

.intel-card-body strong {

  display: block;

  margin-bottom: 8px;

  font-size: 0.98rem;

  font-weight: 700;

  letter-spacing: -0.02em;

  color: var(--text);
}

.intel-card-body p {

  margin: 0;

  font-size: 0.9rem;

  line-height: 1.7;

  color:
    color-mix(
      in srgb,
      var(--text) 76%,
      transparent
    );
}
/* ==========================================================
   INTELLIGENCE RAIL
========================================================== */

.intelligence-rail .model-card {

  position: relative;

  transition:
    transform var(--motion-mid),
    border-color var(--motion-fast),
    box-shadow var(--motion-mid);
}

.intelligence-rail .model-card:hover {

  transform: translateY(-2px);

  box-shadow:
    var(--glow-mid);
}

/* ==========================================================
   INTELLIGENCE BADGE
========================================================== */

.badge.intelligent {

  background:
    color-mix(
      in srgb,
      var(--accent) 68%,
      var(--card)
    );

  border:
    1px solid color-mix(
      in srgb,
      var(--accent) 22%,
      var(--border)
    );

  box-shadow:
    var(--glow-soft);

  font-size: 0.72rem;

  font-weight: 700;

  color: var(--text);
}

/* ==========================================================
   CARD INTEL
========================================================== */

.card-intel {

  margin-top: 6px;
  margin-bottom: 4px;

  font-size: 0.8rem;

  line-height: 1.5;

  color: var(--muted);
}

/* ==========================================================
   TOOLTIP
========================================================== */

.has-tooltip {

  position: relative;

  cursor: default;
}

/* ==========================================================
   TOOLTIP PANEL
========================================================== */

.tooltip {

  position: absolute;

  left: 50%;
  bottom: 120%;

  transform:
    translateX(-50%)
    translateY(6px);

  z-index: 100;

  max-width: 220px;

  padding: 10px 12px;

  border-radius: 14px;

  background:
    color-mix(
      in srgb,
      var(--card) 92%,
      black
    );

  border:
    1px solid var(--border);

  box-shadow:
    var(--glow-mid);

  font-size: 0.74rem;

  line-height: 1.45;

  text-align: center;

  color: var(--text);

  opacity: 0;

  pointer-events: none;

  transition:
    opacity var(--motion-fast),
    transform var(--motion-fast);
}

/* ==========================================================
   TOOLTIP ARROW
========================================================== */

.tooltip::after {

  content: "";

  position: absolute;

  top: 100%;
  left: 50%;

  transform: translateX(-50%);

  border-width: 6px;

  border-style: solid;

  border-color:
    color-mix(
      in srgb,
      var(--card) 92%,
      black
    )
    transparent
    transparent
    transparent;
}

/* ==========================================================
   TOOLTIP SHOW
========================================================== */

.has-tooltip:hover .tooltip {

  opacity: 1;

  transform:
    translateX(-50%)
    translateY(0);
}
/* ==========================================================
   MODEL TITLE
========================================================== */

.model-title {

  display: block;

  max-width: 100%;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  font-size:
    clamp(1.8rem, 4vw, 2.5rem);

  line-height: 1.1;

  letter-spacing: -0.04em;

  font-weight: 800;

  color: var(--text);
}

/* ==========================================================
   INTEL HERO ROW
========================================================== */

.intel-hero-row {

  display: flex;
  flex-direction: column;

  gap: 8px;
}

/* ==========================================================
   HERO RESPONSIVE
========================================================== */

@media (max-width: 1100px) {

  .model-hero {
    grid-template-columns: 1fr;
  }

  .hero-meta {
    order: -1;
  }

  .intel-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 768px) {

  .intel-wrap {
    padding: 18px;
    border-radius: 24px;
  }

  .intel-strip {
    flex-wrap: wrap;
    gap: 6px;
  }

  .intel-stats {
    gap: 12px;
  }

  .intel-insights-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .intel-card,
  .intel-main,
  .intel-stat-card,
  .intel-ai {
    border-radius: 18px;
  }

  .intel-number {
    font-size: 2.8rem;
    line-height: 1;
  }

  .intel-number-label {
    font-size: 0.84rem;
  }

  .intel-number-meta {
    font-size: 0.8rem;
  }
}

/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 560px) {

  .intel-wrap {
    padding: 16px;
  }

  .intel-hero-row {
    align-items: center;
    text-align: center;
    gap: 10px;
  }

  .intel-strip {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
  }

  .intel-trend {
    width: 100%;
    justify-content: center;
    font-size: 0.84rem;
  }

  .intel-stats {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .intel-main-top {
    align-items: flex-start;
    gap: 8px;
  }

  .intel-number {
    font-size: 2.3rem;
  }

  .intel-card,
  .intel-ai {
    padding: 16px;
  }

  .model-title {
    font-size: 1.9rem;
    white-space: normal;
  }
}
/* ==========================================================
   PROFILE + ENERGY STATES
   Midnight Signal X
========================================================== */

/*
  CLEANUP NOTES:
  - Removed duplicate .intel-main declaration
  - Unified spacing + glass styling with main.css
  - Reduced hardcoded RGB dependence slightly
  - Keeps intelligence-specific UI inside cams.css
*/

/* ==========================================================
   PROFILE RESPONSIVE
========================================================== */

@media (max-width: 768px) {

  .profile-top {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================
   STATUS LABEL
========================================================== */

.status-label {

  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 5px 10px;

  border-radius: 999px;

  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.01em;

  border:
    1px solid var(--border);

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ==========================================================
   LIVE
========================================================== */

.status-label.live {

  background:
    rgba(48,213,161,0.10);

  color:
    rgba(110,235,195,0.96);

  box-shadow:
    var(--glow-soft);
}

/* ==========================================================
   OFFLINE
========================================================== */

.status-label.offline {

  background:
    rgba(255,120,140,0.08);

  color:
    rgba(255,160,175,0.92);
}

/* ==========================================================
   LAST SEEN
========================================================== */

.last-seen {

  font-size: 0.75rem;
  line-height: 1.4;

  color: var(--muted);
}

/* ==========================================================
   TREND STATES
========================================================== */

.intel-trend-up,
.intel-trend-down,
.intel-trend-stable {

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 6px 10px;

  border-radius: 999px;

  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.01em;

  border:
    1px solid var(--border);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  transition:
    background var(--motion-fast),
    border-color var(--motion-fast),
    color var(--motion-fast);
}

/* ==========================================================
   UP
========================================================== */

.intel-trend-up {

  background:
    rgba(48,213,161,0.08);

  color:
    rgba(120,240,205,0.96);
}

/* ==========================================================
   DOWN
========================================================== */

.intel-trend-down {

  background:
    rgba(255,120,150,0.08);

  color:
    rgba(255,170,190,0.88);

  opacity: 0.9;
}

/* ==========================================================
   STABLE
========================================================== */

.intel-trend-stable {

  background:
    color-mix(
      in srgb,
      var(--accent) 10%,
      transparent
    );

  color:
    color-mix(
      in srgb,
      var(--accent) 68%,
      var(--text)
    );
}

/* ==========================================================
   SUBTLE ENERGY ATMOSPHERE
========================================================== */

.intel-main::after {

  content: '';

  position: absolute;

  inset: -40%;

  background:
    var(--glow-orb);

  opacity: 0;

  transition:
    opacity 0.4s ease;

  pointer-events: none;
}
/* ==========================================================
   ENERGY STATES
========================================================== */

/* LOW */

.energy-low {

  background:
    linear-gradient(
      90deg,
      rgba(100,110,130,0.92),
      rgba(135,145,165,0.92)
    );

  opacity: 0.82;
}

/* MID */

.energy-mid {

  background:
    linear-gradient(
      90deg,
      rgba(110,130,255,0.92),
      rgba(138,108,255,0.92)
    );
}

/* HIGH */

.energy-high {

  background:
    linear-gradient(
      90deg,
      rgba(120,190,255,0.95),
      rgba(138,108,255,0.95)
    );

  box-shadow:
    var(--glow-soft);
}

/* PEAK */

.energy-peak {

  background:
    linear-gradient(
      90deg,
      rgba(138,108,255,0.96),
      rgba(195,120,255,0.96)
    );

  box-shadow:
    var(--glow-mid);

  animation:
    energyPulse 2.4s infinite ease-in-out;
}

/* ==========================================================
   PEAK ATMOSPHERE
========================================================== */

.intel-main.energy-active::after {
  opacity: 1;
}

/* ==========================================================
   SUBTLE PULSE
========================================================== */

@keyframes energyPulse {

  0%,100% {
    opacity: 0.92;
  }

  50% {
    opacity: 1;
  }
}

/* ==========================================================
   HOT CARD
========================================================== */

.intel-card.hot {

  border:
    1px solid color-mix(
      in srgb,
      var(--accent) 22%,
      var(--border)
    );

  background:
    color-mix(
      in srgb,
      var(--accent) 8%,
      var(--card)
    );

  box-shadow:
    var(--glow-strong);

  transform: translateY(-1px);
}

/* ==========================================================
   COOL
========================================================== */

.intel-card.cool {
  opacity: 0.76;
}

/* ==========================================================
   ALERT
========================================================== */

.alert-banned {

  margin-top: 14px;

  padding: 13px 16px;

  border-radius: 18px;

  background:
    rgba(255,90,140,0.08);

  border:
    1px solid color-mix(
      in srgb,
      rgba(255,90,140,0.22),
      var(--border)
    );

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  text-align: center;

  font-size: 0.88rem;
  line-height: 1.5;

  color:
    rgba(255,170,195,0.96);
}
/* ==========================================================
   INTEL LITE
========================================================== */

.intel-section .intel-hero-row {
  margin-bottom: 14px;
}

.intel-section .intel-ai {

  margin-top: 0;

  padding: 18px 20px;
}

.intel-section .intel-ai p {

  margin: 8px 0 0;

  line-height: 1.65;
}

/* ==========================================================
   BUTTON ROW
========================================================== */

.button-row {

  display: flex;

  justify-content: flex-start;

  flex-wrap: wrap;

  gap: 12px;
}

/* ==========================================================
   SOLID BUTTON
========================================================== */

.solid-btn {

  min-width: 220px;

  padding: 12px 22px;

  font-size: 0.98rem;

  font-weight: 700;
}

/* ==========================================================
   PLAYER INNER
========================================================== */

.player-inner {

  position: relative;

  width: 100%;
  height: 100%;
}

/* ==========================================================
   GEO LOCK + SMART INTELLIGENCE
   Midnight Signal X
========================================================== */

/*
  CLEANUP NOTES:
  - Removed duplicated iframe sizing logic
  - Unified glass styling with main.css system
  - Geo lock now behaves like premium gated content
  - Kept all functionality page-specific to cams.css
*/

/* ==========================================================
   GEO BLOCK
========================================================== */

.geo-block {

  position: absolute;

  inset: 0;

  z-index: 5;

  display: flex;

  align-items: center;
  justify-content: center;
}

/* ==========================================================
   PLAYER UNLOCK
========================================================== */

.player-loaded .geo-block {
  display: none;
}

/* ==========================================================
   PLAYER IFRAME VISIBILITY
========================================================== */

/* hidden until unlock */

.player:not(.player-loaded) iframe {

  opacity: 0;

  pointer-events: none;
}

/* ==========================================================
   GEO INNER
========================================================== */

.geo-inner {

  position: relative;

  width: 100%;
  height: 100%;
}

/* ==========================================================
   PREVIEW
========================================================== */

.geo-preview {

  width: 100%;
  height: 100%;

  object-fit: cover;

  filter:
    blur(10px)
    brightness(0.75);

  opacity: 0.55;
}

/* ==========================================================
   OVERLAY
========================================================== */

.geo-overlay {

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      180deg,
      color-mix(
        in srgb,
        var(--bg) 72%,
        transparent
      ),
      color-mix(
        in srgb,
        var(--bg) 92%,
        black
      )
    );

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ==========================================================
   CONTENT
========================================================== */

.geo-content {

  position: absolute;

  inset: 0;

  z-index: 2;

  display: flex;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap: 14px;

  padding: 24px;

  text-align: center;
}

/* ==========================================================
   SUB
========================================================== */

.geo-sub {

  max-width: 480px;

  font-size: 0.92rem;

  line-height: 1.6;

  color: var(--muted);
}

/* ==========================================================
   ACTIONS
========================================================== */

.geo-actions {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 10px;
}

/* ==========================================================
   NOTE
========================================================== */

.geo-note {

  font-size: 0.76rem;

  line-height: 1.5;

  color:
    color-mix(
      in srgb,
      var(--text) 60%,
      transparent
    );
}


/* ==========================================================
   CTA BLOCK
========================================================== */

.cta-block {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 8px;

  margin-top: 18px;
}

.cta-subtext {

  max-width: 260px;

  font-size: 0.78rem;

  line-height: 1.5;

  text-align: center;

  color:
    color-mix(
      in srgb,
      var(--text) 68%,
      transparent
    );
}

.promo-btn {

  min-width: 220px;

  text-align: center;

  font-weight: 700;
}

/* ==========================================================
   SMART RAIL
========================================================== */

.smart-rail {

  margin-top: 26px;
}

/* ==========================================================
   HEAD
========================================================== */

.smart-head {

  display: flex;

  align-items: flex-end;
  justify-content: space-between;

  gap: 12px;

  margin-bottom: 14px;

  flex-wrap: wrap;
}

.smart-head h3 {

  margin: 0;

  font-size: 1rem;

  color: var(--text);
}

.smart-sub {

  font-size: 0.74rem;

  line-height: 1.4;

  color: var(--muted);
}

/* ==========================================================
   GRID
========================================================== */

.smart-grid {

  display: grid;

  grid-template-columns:
    repeat(3,1fr);

  gap: 14px;
}

/* ==========================================================
   CARD
========================================================== */

.smart-card {

  position: relative;

  overflow: hidden;

  display: block;

  border-radius: 18px;

  background:
    color-mix(
      in srgb,
      var(--card) 92%,
      transparent
    );

  border:
    1px solid var(--border-soft);

  text-decoration: none;

  color: var(--text);

  transition:
    transform var(--motion-fast),
    border-color var(--motion-fast),
    box-shadow var(--motion-fast);
}

.smart-card:hover {

  transform: translateY(-2px);

  border-color:
    color-mix(
      in srgb,
      var(--accent) 20%,
      var(--border)
    );

  box-shadow:
    var(--glow-mid);
}

/* ==========================================================
   THUMB
========================================================== */

.smart-thumb {

  position: relative;
}

.smart-thumb img {

  width: 100%;
  height: 140px;

  object-fit: cover;

  display: block;

  transition:
    transform var(--motion-mid);
}

.smart-card:hover .smart-thumb img {

  transform: scale(1.03);
}

/* ==========================================================
   LIVE
========================================================== */

.smart-live {

  position: absolute;

  top: 8px;
  left: 8px;

  padding: 4px 8px;

  border-radius: 999px;

  background:
    linear-gradient(
      180deg,
      rgba(255,90,120,0.92),
      rgba(255,70,110,0.88)
    );

  border:
    1px solid var(--border);

  font-size: 0.66rem;

  font-weight: 800;

  color: #fff;

  box-shadow:
    var(--glow-soft);
}

/* ==========================================================
   META
========================================================== */

.smart-meta {

  padding: 10px;

  font-size: 0.8rem;
}

.smart-meta strong {

  display: block;

  margin-bottom: 4px;

  color: var(--text);
}

.smart-meta span {

  color: var(--muted);
}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 900px) {

  .smart-grid {

    grid-template-columns:
      repeat(2,1fr);
  }
}

@media (max-width: 560px) {

  .smart-grid {

    grid-template-columns: 1fr;
  }

  .geo-actions {

    flex-direction: column;

    width: 100%;
  }

  .promo-btn,
  .geo-actions .solid-btn,
  .geo-actions .ghost-btn {

    width: 100%;
  }

  .beast-intel {

    padding: 18px;

    border-radius: 20px;
  }
}
.promo-box {

  margin-top: 4px;
}

.promo-image {

  width: 100%;

  max-height: 360px;

  object-fit: cover;

  border-radius: 22px;

  display: block;

  box-shadow:
    var(--glow-mid);
}
/* ==========================================================
   CREATOR INTELLIGENCE V4
========================================================== */

.profile-tier{
    margin-bottom:18px;
}

.profile-tier strong{
    display:block;
    margin-bottom:8px;

    font-size:1rem;
    font-weight:700;
}

/* ==========================================================
   SECTION HEADINGS
========================================================== */

.profile-signals-title{

    margin-top:20px;
    margin-bottom:10px;

    font-size:.82rem;
    font-weight:700;

    text-transform:uppercase;
    letter-spacing:.08em;

    color:var(--accent);

    opacity:.9;
}

/* ==========================================================
   METRICS
========================================================== */

.profile-metrics{

    display:flex;
    flex-wrap:wrap;

    gap:10px;
}

.profile-metrics span{

    display:inline-flex;
    align-items:center;
    gap:6px;

    min-height:40px;

    padding:8px 14px;

    border-radius:999px;

    background:
        rgba(255,255,255,.04);

    border:
        1px solid rgba(255,255,255,.08);

    font-size:.85rem;
    font-weight:600;

    white-space:nowrap;
}

/* ==========================================================
   CLASSIFICATIONS / SIGNALS
========================================================== */

.profile-signals{

    display:flex;
    flex-wrap:wrap;

    gap:8px;
}

.profile-signals span{

    display:inline-flex;
    align-items:center;

    padding:7px 12px;

    border-radius:999px;

    background:
        rgba(0,255,140,.06);

    border:
        1px solid rgba(0,255,140,.18);

    font-size:.82rem;
    font-weight:600;
}

/* ==========================================================
   INTEL CARD
========================================================== */

.intel-ai{

    position:relative;
}

.intel-ai .ai-kicker{

    display:flex;
    align-items:center;

    gap:8px;

    margin-bottom:16px;

    font-size:1rem;
    font-weight:700;

    letter-spacing:.08em;
    text-transform:uppercase;
}

.intel-ai::before{

    content:'';

    position:absolute;

    top:0;
    left:0;

    width:4px;
    height:100%;

    border-radius:4px;

    background:var(--accent);

    opacity:.5;
}

/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:768px){

    .profile-metrics,
    .profile-signals{

        gap:6px;
    }

    .profile-metrics span,
    .profile-signals span{

        font-size:.78rem;
    }

    .profile-signals-title{

        margin-top:16px;
    }

}