/* ================================================================
   REE MISSION CONTROL v5 — Expanded Right Rail / Top 10 Refinement
   ================================================================ */

:root {
  --bg-deep: #020813;
  --bg-space: #04101f;
  --panel: rgba(8, 20, 42, 0.56);
  --panel-deep: rgba(6, 14, 30, 0.76);
  --edge: rgba(122, 234, 255, 0.12);
  --edge-strong: rgba(122, 234, 255, 0.22);
  --text: #edf6ff;
  --text-dim: #89a8c8;
  --text-soft: #bdd4ea;
  --cyan: #67eeff;
  --blue: #46a1ff;
  --sapphire: #5f7bff;
  --violet: #8d63ff;
  --magenta: #d66dff;
  --pink: #ff6fb5;
  --green: #67f6af;
  --amber: #ffd071;
  --radius-xl: 30px;
  --radius-lg: 22px;
  --radius-md: 18px;
  --shadow-deep: 0 30px 80px rgba(0, 0, 0, 0.45);
  --glow-cyan: 0 0 24px rgba(103, 238, 255, 0.28), 0 0 84px rgba(103, 238, 255, 0.08);
  --glow-violet: 0 0 24px rgba(141, 99, 255, 0.3), 0 0 84px rgba(141, 99, 255, 0.08);
  --glow-magenta: 0 0 24px rgba(214, 109, 255, 0.26), 0 0 84px rgba(214, 109, 255, 0.08);
}

*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-deep);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}
body { position: relative; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: "Space Grotesk", Inter, sans-serif; }

.cosmos-layer,
.nebula-layer,
.grid-overlay,
.horizon-glow,
#particle-field,
#light-trails {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.cosmos-layer {
  background:
    radial-gradient(ellipse 90% 70% at 16% 8%, rgba(46, 146, 255, 0.18), transparent 48%),
    radial-gradient(ellipse 82% 64% at 84% 12%, rgba(143, 99, 255, 0.16), transparent 44%),
    radial-gradient(ellipse 76% 56% at 50% 100%, rgba(214, 109, 255, 0.09), transparent 38%),
    linear-gradient(180deg, #030813 0%, #06101d 32%, #050b16 72%, #030811 100%);
}

.nebula-layer {
  background:
    radial-gradient(ellipse 58% 46% at 30% 30%, rgba(103, 238, 255, 0.06), transparent),
    radial-gradient(ellipse 44% 40% at 70% 56%, rgba(141, 99, 255, 0.08), transparent),
    radial-gradient(ellipse 28% 28% at 54% 20%, rgba(255, 111, 181, 0.04), transparent);
  animation: nebula-drift 28s ease-in-out infinite alternate;
}

.grid-overlay {
  background-image:
    linear-gradient(rgba(103, 238, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(103, 238, 255, 0.02) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(ellipse 82% 70% at 50% 45%, rgba(0, 0, 0, 0.9), transparent);
}

.horizon-glow {
  background:
    radial-gradient(ellipse 100% 24% at 50% 100%, rgba(103, 238, 255, 0.08), transparent),
    radial-gradient(ellipse 68% 10% at 50% 100%, rgba(141, 99, 255, 0.11), transparent);
}

@keyframes nebula-drift {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(18px, -12px) scale(1.04); opacity: 0.72; }
}

#particle-field,
#light-trails { z-index: 0; }
#light-trails { opacity: 0.7; }

.command-shell {
  position: relative;
  z-index: 1;
  width: min(1820px, calc(100vw - 16px));
  height: 100vh;
  margin: 0 auto;
  padding: 8px;
}

.presentation-frame {
  width: 100%;
  max-width: 100%;
  display: grid;
  grid-template-rows: 0.82fr 0.76fr 1.76fr;
  gap: 8px;
}

.glass-module {
  position: relative;
  background: linear-gradient(180deg, rgba(17, 35, 69, 0.56) 0%, rgba(7, 17, 35, 0.76) 100%);
  border: 1px solid var(--edge);
  border-radius: var(--radius-xl);
  backdrop-filter: blur(20px) saturate(1.35);
  -webkit-backdrop-filter: blur(20px) saturate(1.35);
  box-shadow: var(--shadow-deep), inset 0 1px 0 rgba(255,255,255,0.08), inset 0 -24px 48px rgba(0,0,0,0.14);
  overflow: hidden;
}

.glass-module::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.08), transparent 22%, transparent 78%, rgba(103,238,255,0.04)),
    radial-gradient(circle at top left, rgba(255,255,255,0.1), transparent 28%),
    radial-gradient(circle at 84% 12%, rgba(103,238,255,0.08), transparent 22%);
  pointer-events: none;
}

.glass-module::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: calc(var(--radius-xl) - 1px);
  border: 1px solid rgba(255,255,255,0.04);
  pointer-events: none;
}

.ambient-core::before {
  box-shadow: inset 0 0 120px rgba(103, 238, 255, 0.03);
}

.ambient-core .module-header::after,
.hero-object::after,
.status-tower::after,
.module-leaderboard::before,
.module-feed::before,
.module-pipeline::before,
.module-trend::before {
  content: "";
  position: absolute;
  pointer-events: none;
}

.hero-object::after,
.status-tower::after,
.module-leaderboard::before,
.module-feed::before,
.module-pipeline::before,
.module-trend::before {
  inset: auto;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  filter: blur(46px);
  opacity: 0.38;
}

.module-leaderboard::before {
  top: 12%;
  right: -34px;
  background: rgba(103, 238, 255, 0.24);
}

.module-feed::before {
  bottom: 14%;
  right: -44px;
  background: rgba(214, 109, 255, 0.26);
}

.module-pipeline::before {
  top: 8%;
  left: 10%;
  background: rgba(103, 238, 255, 0.22);
}

.module-trend::before {
  bottom: -42px;
  left: 16%;
  background: rgba(141, 99, 255, 0.24);
}

.topbar,
.hero-row > .glass-module,
.command-grid > .glass-module,
.left-command-stack > .glass-module {
  padding: 10px 14px;
}

.hero-module {
  display: grid;
  grid-template-columns: 1.35fr 1fr 0.72fr;
  gap: 14px;
  align-items: center;
  min-height: 0;
}

.topbar-left,
.topbar-center,
.topbar-right,
.left-command-stack,
.module-leaderboard,
.module-feed { min-width: 0; min-height: 0; }

.topbar-left { display: flex; align-items: center; gap: 18px; }
.brand-mark { position: relative; width: 88px; aspect-ratio: 1; flex: 0 0 auto; }
.brand-ring, .brand-core { position: absolute; inset: 0; border-radius: 50%; }
.brand-ring.outer { inset: 2px; border: 1px solid rgba(103,238,255,0.34); box-shadow: var(--glow-cyan); }
.brand-ring.inner { inset: 18px; border: 1px solid rgba(214,109,255,0.38); box-shadow: var(--glow-magenta); }
.brand-core { inset: 30px; background: radial-gradient(circle, #fff 0%, #8cefff 28%, #4bafff 65%, rgba(75,175,255,0) 100%); box-shadow: 0 0 26px rgba(103,238,255,0.5), 0 0 70px rgba(103,238,255,0.28); }
.brand-mark::before,
.brand-mark::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  border: 1px dashed rgba(255,255,255,0.08);
  animation: spin 16s linear infinite;
}
.brand-mark::after { inset: -6px; border-style: solid; border-color: rgba(103,238,255,0.08); animation-direction: reverse; animation-duration: 22s; }
.eyebrow { margin-bottom: 6px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--cyan); text-shadow: 0 0 20px rgba(103,238,255,0.25); }
.title-stack { position: relative; display: inline-block; }
h1 {
  font-size: clamp(2rem, 2.5vw, 3.35rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, #ffffff 8%, #9ef6ff 36%, #86a2ff 70%, #f2b0ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.title-prism { position: absolute; left: -14px; right: -18px; bottom: -10px; height: 22px; border-radius: 999px; background: linear-gradient(90deg, rgba(103,238,255,0.22), rgba(95,123,255,0.18), rgba(214,109,255,0.22)); filter: blur(16px); opacity: 0.82; }
.hero-subline { margin-top: 8px; max-width: 40rem; color: var(--text-soft); font-size: 0.84rem; line-height: 1.4; }
.topbar-center { display: flex; align-items: center; justify-content: center; }
.hero-object {
  position: relative;
  width: min(100%, 420px);
  height: 100%;
  min-height: 108px;
  border-radius: 26px;
  background: radial-gradient(circle at 50% 50%, rgba(103,238,255,0.14), transparent 30%), linear-gradient(180deg, rgba(20,34,71,0.6), rgba(8,16,32,0.56));
  border: 1px solid rgba(103,238,255,0.14);
  box-shadow: inset 0 0 30px rgba(103,238,255,0.08), 0 0 50px rgba(103,238,255,0.08);
  overflow: hidden;
}
.hero-object::after { top: 10px; right: 0; background: rgba(103,238,255,0.25); }
.hero-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(103,238,255,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(103,238,255,0.05) 1px, transparent 1px); background-size: 28px 28px; mask-image: radial-gradient(circle at center, rgba(0,0,0,0.8), transparent 74%); }
.hero-orbit { position: absolute; inset: 18% 16%; border-radius: 50%; border: 1px solid rgba(255,255,255,0.08); }
.orbit-a { animation: spin 18s linear infinite; }
.orbit-b { inset: 28% 24%; border-color: rgba(214,109,255,0.16); animation: spin 13s linear infinite reverse; }
.hero-beacon { position: absolute; inset: 50% auto auto 50%; width: 82px; height: 82px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, #ffffff 0%, #b6f8ff 18%, #68eeff 36%, #5f7bff 68%, rgba(95,123,255,0) 100%); box-shadow: 0 0 30px rgba(103,238,255,0.65), 0 0 76px rgba(103,238,255,0.24), 0 0 110px rgba(214,109,255,0.16); }
.hero-chip { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); min-width: 68%; padding: 10px 14px; text-align: center; border-radius: 18px; background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(8,16,32,0.48)); border: 1px solid rgba(255,255,255,0.1); }
.chip-label { display: block; font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cyan); margin-bottom: 4px; }
.hero-chip strong { font-size: 0.92rem; color: var(--text); }
.topbar-right { display: grid; gap: 10px; align-content: center; }
.signal-badge { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 14px; border-radius: 999px; font-size: 0.76rem; font-weight: 600; letter-spacing: 0.03em; border: 1px solid rgba(103,238,255,0.18); background: rgba(7,17,31,0.7); width: fit-content; }
.signal-dot,
.signal-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 14px currentColor, 0 0 24px currentColor; animation: dot-pulse 2.8s ease-in-out infinite; }
.signal-badge.online { color: var(--green); }
.signal-badge.cyan { color: var(--cyan); }
.signal-badge.purple { color: var(--magenta); }
.signal-badge.amber { color: var(--amber); }
.clock-module,
.status-tower { position: relative; padding: 12px 14px; border-radius: 18px; background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(7,17,31,0.66)); border: 1px solid rgba(103,238,255,0.12); }
.status-tower::after { top: -28px; right: -14px; background: rgba(103,238,255,0.18); }
.clock-module { display: flex; flex-direction: column; align-items: center; }
.clock-label,
.status-tower span { font-size: 0.66rem; color: var(--text-dim); letter-spacing: 0.14em; text-transform: uppercase; }
.clock-module strong { font-family: "Space Grotesk", monospace; font-size: 1.1rem; color: var(--cyan); margin-top: 3px; text-shadow: 0 0 18px rgba(103,238,255,0.45); }
.status-tower strong { display: block; margin-top: 5px; font-family: "Space Grotesk", sans-serif; font-size: 1.36rem; }
.status-tower small { display: block; margin-top: 3px; color: var(--text-soft); font-size: 0.77rem; }
.module-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 10px; position: relative; z-index: 1; }
.compact-header { margin-bottom: 10px; }
h2 { font-size: clamp(1rem, 1.1vw, 1.28rem); font-weight: 600; }
.hero-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-height: 0; }
.single-hero-row .module-snapshot { min-width: 0; }

.kpi-constellation { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; }
.kpi-orb {
  position: relative;
  min-height: 126px;
  padding: 11px 11px 10px;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.015) 36%, rgba(7,18,37,0.76) 100%), radial-gradient(circle at 20% 18%, rgba(255,255,255,0.18), transparent 30%);
  overflow: hidden;
}
.kpi-cyan { border-color: rgba(103,238,255,0.22); box-shadow: var(--glow-cyan); }
.kpi-sapphire { border-color: rgba(95,123,255,0.22); box-shadow: 0 0 24px rgba(95,123,255,0.24); }
.kpi-violet { border-color: rgba(141,99,255,0.26); box-shadow: var(--glow-violet); }
.kpi-magenta { border-color: rgba(214,109,255,0.24); box-shadow: var(--glow-magenta); }
.orb-aura, .orb-ring { position: absolute; pointer-events: none; }
.orb-aura { inset: auto auto -18px 50%; width: 130px; height: 56px; transform: translateX(-50%); filter: blur(24px); opacity: 0.62; }
.kpi-cyan .orb-aura { background: rgba(103,238,255,0.54); }
.kpi-sapphire .orb-aura { background: rgba(95,123,255,0.54); }
.kpi-violet .orb-aura { background: rgba(141,99,255,0.56); }
.kpi-magenta .orb-aura { background: rgba(214,109,255,0.56); }
.orb-ring { top: -18px; right: -8px; width: 92px; height: 92px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.16); opacity: 0.5; animation: breathe 7s ease-in-out infinite; }
.orb-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  z-index: 1;
}
.orb-badge-positive {
  color: #f3fff9;
  border: 1px solid rgba(176, 255, 214, 0.72);
  background: radial-gradient(circle at 32% 28%, rgba(243,255,249,0.28), rgba(93,214,134,0.95) 45%, rgba(26,122,67,0.98) 100%);
  box-shadow: 0 0 22px rgba(103,246,175,0.45), inset 0 1px 10px rgba(255,255,255,0.14);
}
.orb-badge-text-only {
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  display: block;
  background: none;
  box-shadow: 0 0 18px rgba(103,246,175,0.4);
  color: var(--green);
  font-size: 0.98rem;
  line-height: 1;
  text-shadow: 0 0 14px rgba(103,246,175,0.5);
}
.orb-badge-lowered { top: 18px; }
.kpi-label { display: block; font-size: 0.72rem; color: rgba(237,246,255,0.75); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 8px; }
.kpi-value { display: block; font-family: "Space Grotesk", sans-serif; font-size: clamp(1.56rem, 1.72vw, 2.3rem); line-height: 1.02; letter-spacing: -0.04em; margin-bottom: 6px; }
.kpi-orb small { display: block; max-width: 14ch; color: var(--text-soft); font-size: 0.75rem; line-height: 1.28; }
.kpi-delta { margin-top: 10px; display: inline-flex; padding: 5px 9px; border-radius: 999px; font-size: 0.65rem; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid rgba(255,255,255,0.08); }
.kpi-delta.positive { color: var(--green); background: rgba(103,246,175,0.08); box-shadow: 0 0 18px rgba(103,246,175,0.08); }

.vitals-strip,
.pipeline-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.vital,
.signal-note,
.pipeline-node,
.leader-row,
.battle-result,
.feed-event { background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(9,18,35,0.74)); border: 1px solid rgba(255,255,255,0.08); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 14px 26px rgba(0,0,0,0.18); }
.vital { padding: 10px 12px; border-radius: 16px; }
.vital span { display: block; font-size: 0.64rem; color: var(--text-dim); letter-spacing: 0.08em; text-transform: uppercase; }
.vital strong { display: block; margin-top: 5px; font-family: "Space Grotesk", sans-serif; font-size: 1rem; }
.glow-up { color: var(--green) !important; text-shadow: 0 0 18px rgba(103,246,175,0.34); }

.module-trend { display: flex; flex-direction: column; }
.command-trend { justify-self: stretch; align-self: stretch; }
.trend-canvas { position: relative; flex: 1 1 auto; min-height: 0; height: 144px; border-radius: 20px; overflow: hidden; border: 1px solid rgba(103,238,255,0.1); background: linear-gradient(180deg, rgba(7,17,31,0.5), rgba(3,9,18,0.72)); margin-bottom: 10px; }
.compact-trend-canvas { height: 92px; }
.trend-canvas::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at top center, rgba(103,238,255,0.12), transparent 46%); pointer-events: none; }
.trend-canvas canvas { width: 100%; height: 100%; }
.signal-notes { display: grid; gap: 8px; }
.compact-signal-notes { gap: 7px; }
.signal-note { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 16px; }
.note-icon { width: 30px; height: 30px; border-radius: 10px; flex: 0 0 auto; }
.note-icon.velocity { background: linear-gradient(135deg, rgba(103,238,255,0.36), rgba(70,161,255,0.06)); box-shadow: var(--glow-cyan); }
.note-icon.inventory { background: linear-gradient(135deg, rgba(95,123,255,0.36), rgba(141,99,255,0.08)); }
.note-icon.watchlist { background: linear-gradient(135deg, rgba(214,109,255,0.36), rgba(255,111,181,0.08)); box-shadow: var(--glow-magenta); }
.signal-note span { display: block; font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cyan); margin-bottom: 3px; }
.signal-note strong { display: block; font-size: 0.79rem; line-height: 1.3; font-weight: 500; color: var(--text-soft); }

.command-grid {
  display: grid;
  grid-template-columns: 1.42fr 0.91fr 0.91fr;
  gap: 10px;
  min-height: 0;
}

.left-command-stack {
  display: grid;
  grid-template-rows: 0.9fr 0.92fr;
  gap: 10px;
  min-height: 0;
}

.module-leaderboard,
.module-feed {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.pipeline-flow { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin-bottom: 10px; padding-bottom: 2px; }
.flow-connector { position: absolute; left: 6%; right: 6%; top: 50%; height: 4px; transform: translateY(-50%); background: linear-gradient(90deg, rgba(103,238,255,0.06), rgba(103,238,255,0.24), rgba(141,99,255,0.26), rgba(214,109,255,0.2)); border-radius: 999px; }
.flow-pulse { position: absolute; width: 72px; height: 100%; border-radius: inherit; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.9), transparent); filter: blur(2px); animation: pulse-flow 5s ease-in-out infinite; }
.pipeline-node { position: relative; z-index: 1; padding: 14px 12px; border-radius: 18px; min-height: 108px; overflow: hidden; }
.pipeline-node::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at top left, rgba(255,255,255,0.1), transparent 24%); }
.node-cyan { border-color: rgba(103,238,255,0.18); }
.node-blue { border-color: rgba(70,161,255,0.18); }
.node-violet { border-color: rgba(141,99,255,0.2); }
.node-magenta { border-color: rgba(214,109,255,0.2); }
.node-glow { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); width: 60px; height: 34px; filter: blur(22px); opacity: 0.56; }
.cyan-glow { background: var(--cyan); }
.purple-glow { background: var(--violet); }
.magenta-glow { background: var(--magenta); }
.node-label { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cyan); margin-bottom: 8px; }
.pipeline-node strong { display: block; font-family: "Space Grotesk", sans-serif; font-size: clamp(1.22rem, 1.34vw, 1.78rem); margin-bottom: 5px; }
.pipeline-node small { font-size: 0.72rem; color: var(--text-soft); }

/* Leaderboard carousel */
.leaderboard-carousel {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.leaderboard-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  pointer-events: none;
  display: flex;
  flex-direction: column;
}

.leaderboard-slide.active {
  position: relative;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.leaderboard-title {
  transition: opacity 0.35s ease;
}

.leaderboard-pips {
  display: flex;
  gap: 6px;
  align-items: center;
}

.pip {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(103, 238, 255, 0.18);
  border: 1px solid rgba(103, 238, 255, 0.22);
  transition: background 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease;
}

.pip.active {
  background: var(--cyan);
  box-shadow: 0 0 10px rgba(103, 238, 255, 0.5), 0 0 22px rgba(103, 238, 255, 0.2);
  transform: scale(1.2);
}

.leaderboard-list,
.feed-stream { display: grid; gap: 8px; }
.leaderboard-top10 {
  flex: 1 1 auto;
  min-height: 0;
  grid-template-rows: repeat(10, minmax(0, 1fr));
  padding: 2px 1px 1px;
}
.leader-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 7px 11px;
  border-radius: 18px;
  min-height: 0;
}
.leader-row.podium { border-color: rgba(103,238,255,0.22); background: linear-gradient(180deg, rgba(103,238,255,0.12), rgba(17,27,51,0.78)); box-shadow: var(--glow-cyan), inset 0 1px 0 rgba(255,255,255,0.12); }
.rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 14px;
  font-family: "Space Grotesk", monospace;
  font-size: 0.94rem;
  font-weight: 700;
  color: var(--cyan);
  text-align: center;
  background: linear-gradient(180deg, rgba(103,238,255,0.12), rgba(7,17,31,0.72));
  border: 1px solid rgba(103,238,255,0.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.leader-info {
  min-width: 0;
  display: grid;
  gap: 6px;
}
.leader-name {
  display: block;
  min-width: 0;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: 0.01em;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.leader-bar { height: 6px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,0.06); }
.leader-bar i { display: block; height: 100%; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, var(--cyan), var(--violet), var(--magenta)); box-shadow: 0 0 16px rgba(103,238,255,0.24); }
.leader-val {
  min-width: 40px;
  text-align: right;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-soft);
  white-space: nowrap;
}

.command-feed {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  padding-right: 4px;
}
.command-feed::before,
.command-feed::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 24px;
  z-index: 2;
  pointer-events: none;
}
.command-feed::before { top: 0; background: linear-gradient(180deg, rgba(8, 18, 36, 0.88), transparent); }
.command-feed::after { bottom: 0; background: linear-gradient(0deg, rgba(8, 18, 36, 0.88), transparent); }
.feed-stream { align-content: start; }
.feed-event {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: start;
  padding: 10px 12px;
  border-radius: 18px;
  transform: translateY(0);
  animation: feed-arrive 500ms ease;
}
.feed-event.fresh,
.feed-event:first-child { border-color: rgba(103,246,175,0.22); box-shadow: 0 0 24px rgba(103,246,175,0.08), inset 0 1px 0 rgba(255,255,255,0.1); }
.event-pulse { width: 10px; height: 10px; margin-top: 4px; border-radius: 50%; background: var(--green); box-shadow: 0 0 14px var(--green), 0 0 26px rgba(103,246,175,0.2); animation: dot-pulse 2.8s ease-in-out infinite; }
.event-body strong { display: block; font-size: 0.8rem; margin-bottom: 4px; }
.event-body p { font-size: 0.73rem; color: var(--text-dim); line-height: 1.34; }
.feed-event time { font-size: 0.72rem; color: var(--text-dim); white-space: nowrap; }
.feed-event.system time { color: var(--magenta); }

@keyframes pulse-flow {
  0% { left: -72px; opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { left: calc(100% + 72px); opacity: 0; }
}
@keyframes dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.48; transform: scale(0.74); }
}
@keyframes breathe {
  0%, 100% { transform: scale(1); opacity: 0.42; }
  50% { transform: scale(1.12); opacity: 0.76; }
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes feed-arrive {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 1400px), (max-aspect-ratio: 16/9) {
  html, body { overflow-y: auto; }
  .command-shell { height: auto; min-height: 100vh; }
  .presentation-frame { aspect-ratio: auto; min-height: calc(100vh - 28px); grid-template-rows: auto auto auto; }
  .hero-module,
  .hero-row,
  .command-grid,
  .left-command-stack { grid-template-columns: 1fr; grid-template-rows: auto; }
  .leaderboard-top10 { grid-template-rows: none; }
  .module-leaderboard,
  .module-feed { min-height: 520px; }
}

@media (max-width: 860px) {
  .command-shell { width: calc(100vw - 14px); padding: 7px; }
  .topbar,
  .hero-row > .glass-module,
  .command-grid > .glass-module,
  .left-command-stack > .glass-module { padding: 16px; }
  .topbar-left,
  .pipeline-flow,
  .kpi-constellation,
  .vitals-strip,
  .pipeline-metrics { grid-template-columns: 1fr; }
  .flow-connector { display: none; }
}