/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   hero.css — Hero banner & badges
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.hero {
  position: relative; border-radius: var(--radius-xl);
  min-height: 150px; overflow: hidden; margin-bottom: 14px;
  border: 1px solid var(--glass-border); background: var(--bg-surface-2);
}
.hero__bg-mesh {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 100% 100% at 0% 0%,  rgba(129,140,248,.35) 0%,transparent 55%),
    radial-gradient(ellipse 80%  80%  at 100% 100%,rgba(167,139,250,.25) 0%,transparent 55%),
    radial-gradient(ellipse 60%  60%  at 50%  80%, rgba(103,232,249,.12) 0%,transparent 50%);
}
.hero__orb { position:absolute; border-radius:50%; filter:blur(40px); pointer-events:none; }
.hero__orb--1 { width:180px;height:180px;background:rgba(129,140,248,.3);top:-60px;left:-40px;animation:float1 6s ease-in-out infinite; }
.hero__orb--2 { width:140px;height:140px;background:rgba(103,232,249,.18);bottom:-40px;right:-20px;animation:float2 8s ease-in-out infinite; }
.hero__glass-sheen {
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.06) 0%,transparent 40%,rgba(255,255,255,.03) 100%);
}
.hero__content { position:relative;z-index:2;padding:18px 20px 18px; }

.hero__module-id {
  display:inline-flex;align-items:center;gap:5px;
  font-size:0.68rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent-glow);margin-bottom:8px;opacity:.85;
}

/* Title row: name + version badge inline */
.hero__title-row {
  display:flex;align-items:center;gap:10px;margin-bottom:5px;
}
.hero__name {
  font-size:2.5rem;font-weight:800;letter-spacing:-.04em;line-height:1;
  background:linear-gradient(135deg,#fff 0%,rgba(129,140,248,.9) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.hero__version-badge {
  font-size:0.72rem;font-weight:700;letter-spacing:.01em;font-family:var(--font-mono);
  background:rgba(129,140,248,.15);color:var(--accent-primary);
  border:1px solid rgba(129,140,248,.28);border-radius:var(--radius-full);
  padding:4px 10px;align-self:center;margin-top:4px;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  white-space:nowrap;flex-shrink:0;
}
.hero__sub { font-size:.78rem;color:var(--text-secondary);margin-bottom:14px;font-weight:400; }
.hero__badges { display:flex;gap:8px;flex-wrap:wrap; }

/* ── Light-theme hero fixes ──
   On a light surface the dark-tuned colors break down: the #fff start of the
   name gradient and the cyan module-id vanish, and the faint mesh leaves a
   flat-white corner. Re-tune all three for light/auto-light. */
[data-theme="light"] .hero {
  background:linear-gradient(135deg,#E9E9FB 0%,#DDE0FA 55%,#D6ECF6 100%);
}
[data-theme="light"] .hero__bg-mesh {
  background:
    radial-gradient(ellipse 100% 100% at 0% 0%,  rgba(129,140,248,.45) 0%,transparent 60%),
    radial-gradient(ellipse 80%  80%  at 100% 100%,rgba(167,139,250,.40) 0%,transparent 60%),
    radial-gradient(ellipse 70%  70%  at 50%  90%, rgba(56,189,248,.30) 0%,transparent 55%);
}
[data-theme="light"] .hero__glass-sheen {
  background:linear-gradient(135deg,rgba(255,255,255,.35) 0%,transparent 45%,rgba(255,255,255,.15) 100%);
}
[data-theme="light"] .hero__module-id {
  color:#3730A3;opacity:1;   /* indigo-800 — reads on the light banner */
}
[data-theme="light"] .hero__name {
  background:linear-gradient(135deg,#1E1B4B 0%,#5B53D8 100%);
  -webkit-background-clip:text;background-clip:text;
}

/* Badges */
.badge {
  display:inline-flex;align-items:center;gap:5px;padding:5px 12px;
  border-radius:var(--radius-full);font-size:.7rem;font-weight:600;letter-spacing:.02em;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.badge--active   { background:rgba(52,211,153,.15);border:1px solid rgba(52,211,153,.35);color:#34D399; }
.badge--inactive { background:rgba(248,113,113,.15);border:1px solid rgba(248,113,113,.35);color:#F87171; }
.badge--env      { background:rgba(129,140,248,.12);border:1px solid rgba(129,140,248,.28);color:var(--accent-primary); }
.badge__dot { width:6px;height:6px;border-radius:50%;background:currentColor;animation:pulse-dot 2s ease-in-out infinite; }
