:root {
  --bg: #020814;
  --panel: rgba(7, 21, 42, .84);
  --panel-strong: rgba(10, 32, 62, .94);
  --line: rgba(91, 209, 255, .42);
  --line-hot: rgba(119, 228, 255, .92);
  --gold: #f7c96d;
  --gold-soft: rgba(247, 201, 109, .22);
  --blue: #51d7ff;
  --text: #eaf8ff;
  --muted: rgba(234, 248, 255, .68);
  --danger: #ffcf70;
  --shadow: 0 0 34px rgba(81, 215, 255, .25);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: #020814;
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button {
  font: inherit;
  color: inherit;
}

.mdeck-demo {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 22%, rgba(82, 214, 255, .32), transparent 25%),
    radial-gradient(circle at 50% 62%, rgba(247, 201, 109, .18), transparent 18%),
    linear-gradient(180deg, #06162d 0%, #020814 46%, #01040b 100%);
  padding: 12px 14px calc(92px + var(--safe-bottom));
}

.starfield {
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.8) 0 1px, transparent 1.5px),
    radial-gradient(circle at 82% 22%, rgba(255,255,255,.7) 0 1px, transparent 1.5px),
    radial-gradient(circle at 66% 68%, rgba(255,255,255,.6) 0 1px, transparent 1.5px),
    radial-gradient(circle at 24% 78%, rgba(255,255,255,.5) 0 1px, transparent 1.5px);
  opacity: .8;
}

.ship-frame {
  position: absolute;
  inset: 8px;
  z-index: -2;
  border: 1px solid rgba(81, 215, 255, .28);
  border-radius: 34px;
  box-shadow:
    inset 0 0 42px rgba(81, 215, 255, .12),
    0 0 48px rgba(0,0,0,.35);
  pointer-events: none;
}

.ship-frame::before,
.ship-frame::after {
  content: "";
  position: absolute;
  top: 72px;
  bottom: 84px;
  width: 14px;
  border: 1px solid rgba(247, 201, 109, .26);
  background: linear-gradient(180deg, transparent, rgba(247, 201, 109, .12), transparent);
}

.ship-frame::before {
  left: 8px;
  border-radius: 14px 4px 4px 14px;
}

.ship-frame::after {
  right: 8px;
  border-radius: 4px 14px 14px 4px;
}

.cockpit-header {
  position: relative;
  z-index: 20;
  display: grid;
  grid-template-columns: 52px 1fr 52px;
  gap: 8px;
  align-items: center;
  padding: 6px;
  border: 1px solid rgba(81, 215, 255, .24);
  border-radius: 24px;
  background: rgba(2, 8, 20, .72);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow);
}

.brand-core {
  text-align: center;
  min-width: 0;
  padding: 4px 0 5px;
}

.eyebrow {
  margin: 0 0 3px;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 10px;
  font-weight: 800;
}

.brand-core h1 {
  margin: 0;
  font-size: clamp(24px, 7vw, 42px);
  line-height: .94;
  letter-spacing: .04em;
  text-shadow: 0 0 18px rgba(81, 215, 255, .55);
}

.subline {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 11px;
}

.top-toggle,
.edge-toggle,
.panel-head button,
.rail-pulley,
.bottom-nav button,
.lane-grid button,
.module-stack button,
.launch-button,
.rail-main {
  border: 1px solid rgba(81, 215, 255, .34);
  background:
    linear-gradient(180deg, rgba(81, 215, 255, .16), rgba(2, 8, 20, .74)),
    rgba(2, 8, 20, .76);
  box-shadow: inset 0 0 22px rgba(81, 215, 255, .12), 0 0 18px rgba(81, 215, 255, .14);
  cursor: pointer;
}

.top-toggle {
  width: 46px;
  height: 46px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  color: var(--gold);
  font-weight: 900;
}

.top-toggle span {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border-radius: 50%;
  border: 1px solid rgba(247, 201, 109, .4);
}

.edge-toggle {
  position: fixed;
  z-index: 35;
  top: 48%;
  width: 34px;
  height: 128px;
  border-radius: 18px;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  color: var(--gold);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.edge-left {
  left: 4px;
}

.edge-right {
  right: 4px;
}

.cockpit-content {
  position: relative;
  z-index: 10;
  max-width: 760px;
  margin: 0 auto;
  padding: 26px 12px 0;
  transition: transform .42s ease, opacity .42s ease;
}

.mdeck-demo[data-right="open"] .cockpit-content {
  transform: translateX(-7vw) scale(.97);
}

.mdeck-demo[data-left="open"] .cockpit-content {
  transform: translateX(7vw) scale(.97);
}

.mdeck-demo[data-left="open"][data-right="open"] .cockpit-content {
  transform: scale(.94);
}

.core-orb {
  position: relative;
  width: min(76vw, 390px);
  aspect-ratio: 1;
  margin: 8px auto -20px;
  display: grid;
  place-items: center;
}

.orb-ring {
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  border: 1px solid rgba(81, 215, 255, .34);
  box-shadow:
    inset 0 0 40px rgba(81, 215, 255, .12),
    0 0 50px rgba(81, 215, 255, .18);
}

.ring-one {
  animation: slowSpin 18s linear infinite;
}

.ring-two {
  inset: 24%;
  border-color: rgba(247, 201, 109, .28);
  animation: slowSpin 12s linear infinite reverse;
}

.orb-mark {
  font-size: clamp(96px, 30vw, 180px);
  font-weight: 950;
  color: rgba(234, 248, 255, .12);
  text-shadow: 0 0 30px rgba(81, 215, 255, .24);
}

.access-rail {
  position: relative;
  max-width: 440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 70px;
  gap: 8px;
  align-items: stretch;
}

.rail-main {
  min-height: 92px;
  border-radius: 26px 14px 14px 26px;
  padding: 15px 18px;
  text-align: left;
  overflow: hidden;
}

.rail-main strong {
  display: block;
  font-size: 23px;
  line-height: 1;
  letter-spacing: .02em;
  margin: 4px 0;
}

.rail-kicker,
.rail-note {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.rail-pulley {
  position: relative;
  border-radius: 14px 26px 26px 14px;
  color: var(--gold);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.rail-pulley::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 16%;
  bottom: 16%;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--gold), transparent);
  transform: translateX(-50%);
}

.mdeck-demo[data-right="open"] .rail-pulley {
  border-color: var(--gold);
  box-shadow: 0 0 24px rgba(247, 201, 109, .38);
}

.core-status {
  max-width: 520px;
  margin: 18px auto 0;
  padding: 18px;
  border: 1px solid rgba(81, 215, 255, .22);
  border-radius: 24px;
  background: rgba(2, 8, 20, .54);
  backdrop-filter: blur(16px);
  text-align: center;
}

.core-status h2 {
  margin: 0 0 8px;
  font-size: 20px;
}

.core-status p:last-child {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.flow-map {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  max-width: 560px;
  margin: 12px auto 0;
}

.flow-map article {
  min-height: 106px;
  padding: 12px;
  border: 1px solid rgba(81, 215, 255, .18);
  border-radius: 18px;
  background: rgba(7, 21, 42, .52);
}

.flow-map span {
  color: var(--gold);
  font-size: 11px;
  font-weight: 900;
}

.flow-map strong {
  display: block;
  margin-top: 5px;
  font-size: 13px;
}

.flow-map p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.panel {
  position: fixed;
  z-index: 45;
  top: 84px;
  bottom: calc(78px + var(--safe-bottom));
  width: min(84vw, 360px);
  padding: 14px;
  border: 1px solid rgba(81, 215, 255, .34);
  background:
    linear-gradient(180deg, rgba(9, 29, 58, .94), rgba(2, 8, 20, .94)),
    var(--panel);
  backdrop-filter: blur(22px);
  box-shadow: var(--shadow);
  transition: transform .42s ease, opacity .42s ease;
  opacity: 0;
  pointer-events: none;
}

.panel-left {
  left: 10px;
  border-radius: 28px 18px 18px 28px;
  transform: translateX(calc(-100% - 24px));
}

.panel-auth,
.panel-right {
  right: 10px;
  border-radius: 18px 28px 28px 18px;
  transform: translateX(calc(100% + 24px));
}

.mdeck-demo[data-left="open"] .panel-left,
.mdeck-demo[data-auth="open"] .panel-auth,
.mdeck-demo[data-right="open"] .panel-right {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

.panel-head {
  display: grid;
  grid-template-columns: 1fr 38px;
  gap: 8px;
  align-items: start;
  margin-bottom: 12px;
}

.panel-head h2 {
  margin: 0;
  font-size: 18px;
  line-height: 1.1;
}

.panel-head button {
  width: 38px;
  height: 38px;
  border-radius: 15px;
  color: var(--gold);
  font-size: 20px;
}

.panel-copy {
  margin: 0 0 13px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.lane-grid,
.module-stack,
.status-stack {
  display: grid;
  gap: 8px;
}

.lane-grid {
  grid-template-columns: 1fr 1fr;
}

.lane-grid button,
.module-stack button {
  min-height: 42px;
  padding: 9px 10px;
  border-radius: 15px;
  text-align: left;
  color: var(--text);
  font-size: 12px;
  font-weight: 750;
}

.status-stack div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(81, 215, 255, .18);
  border-radius: 15px;
  background: rgba(2, 8, 20, .52);
}

.status-stack span {
  color: var(--muted);
  font-size: 12px;
}

.status-stack strong {
  color: var(--gold);
  font-size: 12px;
  text-align: right;
}

.launch-button {
  width: 100%;
  min-height: 54px;
  margin-top: 12px;
  border-color: rgba(247, 201, 109, .52);
  border-radius: 20px;
  color: #06111f;
  background: linear-gradient(135deg, #ffe49d, #f7c96d 45%, #60dfff);
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.bottom-nav {
  position: fixed;
  z-index: 55;
  left: 12px;
  right: 12px;
  bottom: calc(10px + var(--safe-bottom));
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 8px;
  border: 1px solid rgba(81, 215, 255, .26);
  border-radius: 25px;
  background: rgba(2, 8, 20, .82);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow);
}

.bottom-nav button {
  min-height: 48px;
  border-radius: 18px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.bottom-nav button:hover,
.top-toggle:hover,
.edge-toggle:hover,
.rail-main:hover,
.rail-pulley:hover,
.lane-grid button:hover,
.module-stack button:hover {
  border-color: var(--line-hot);
  box-shadow: 0 0 26px rgba(81, 215, 255, .28);
}

.mdeck-demo[data-core="active"] .core-orb {
  filter: drop-shadow(0 0 32px rgba(81, 215, 255, .64));
}

.mdeck-demo[data-core="active"] .orb-ring {
  border-color: rgba(247, 201, 109, .52);
}

.mdeck-demo[data-core="active"] .rail-main {
  border-color: rgba(247, 201, 109, .62);
  box-shadow: 0 0 36px rgba(247, 201, 109, .24), inset 0 0 22px rgba(81, 215, 255, .2);
}

@keyframes slowSpin {
  to { transform: rotate(360deg); }
}

@media (max-width: 430px) {
  .mdeck-demo {
    padding-inline: 10px;
  }

  .cockpit-header {
    grid-template-columns: 46px 1fr 46px;
  }

  .top-toggle {
    width: 42px;
    height: 42px;
    border-radius: 16px;
  }

  .brand-core h1 {
    font-size: 28px;
  }

  .subline {
    font-size: 10px;
  }

  .panel {
    top: 76px;
    bottom: calc(78px + var(--safe-bottom));
    width: min(88vw, 340px);
  }

  .lane-grid {
    grid-template-columns: 1fr;
  }

  .flow-map {
    grid-template-columns: 1fr;
  }

  .flow-map article {
    min-height: auto;
  }
}

@media (min-width: 860px) {
  .mdeck-demo {
    padding-inline: 28px;
  }

  .mdeck-demo[data-right="open"] .cockpit-content {
    transform: translateX(-180px) scale(.96);
  }

  .mdeck-demo[data-left="open"] .cockpit-content {
    transform: translateX(180px) scale(.96);
  }

  .panel {
    top: 100px;
    bottom: 98px;
  }
}

/* ==========================================================
   M-DECK COCKPIT DEMO R02 POLISH
   Purpose: make the prototype feel more cinematic, less cramped,
   and stronger for live founder-side demo use.
   ========================================================== */

.panel {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(81, 215, 255, .45) rgba(2, 8, 20, .35);
}

.panel::-webkit-scrollbar {
  width: 6px;
}

.panel::-webkit-scrollbar-thumb {
  background: rgba(81, 215, 255, .45);
  border-radius: 999px;
}

.panel-head {
  grid-template-columns: minmax(0, 1fr) 38px;
}

.panel-head h2 {
  max-width: 100%;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.panel-auth .panel-head h2::after {
  content: "Person → Member → Access";
  display: block;
  margin-top: 6px;
  color: rgba(81, 215, 255, .78);
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.panel-right .panel-head h2::after {
  content: "Missionz · Review · Co-Pilot";
  display: block;
  margin-top: 6px;
  color: rgba(81, 215, 255, .78);
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.panel-left::before,
.panel-auth::before,
.panel-right::before {
  content: "";
  position: sticky;
  top: -14px;
  display: block;
  height: 3px;
  margin: -14px -14px 14px;
  background: linear-gradient(90deg, transparent, rgba(81, 215, 255, .9), rgba(247, 201, 109, .65), transparent);
  box-shadow: 0 0 24px rgba(81, 215, 255, .45);
}

.mdeck-demo[data-auth="open"] .cockpit-content {
  transform: translateX(-5vw) scale(.975);
}

.mdeck-demo[data-right="open"] .cockpit-content::after,
.mdeck-demo[data-auth="open"] .cockpit-content::after,
.mdeck-demo[data-left="open"] .cockpit-content::after {
  content: "";
  position: absolute;
  inset: 10px;
  z-index: -1;
  border-radius: 36px;
  border: 1px solid rgba(81, 215, 255, .14);
  background: radial-gradient(circle at 50% 50%, rgba(81, 215, 255, .08), transparent 60%);
  pointer-events: none;
}

.mdeck-demo[data-core="launching"] .core-orb {
  animation: launchShake .36s linear infinite;
  filter: drop-shadow(0 0 44px rgba(81, 215, 255, .9));
}

.mdeck-demo[data-core="launching"] .orb-ring {
  border-color: rgba(247, 201, 109, .72);
  box-shadow:
    inset 0 0 55px rgba(81, 215, 255, .24),
    0 0 70px rgba(247, 201, 109, .32);
}

.mdeck-demo[data-core="launching"] .access-rail::before {
  content: "LAUNCH SEQUENCE";
  position: absolute;
  left: 50%;
  top: -26px;
  transform: translateX(-50%);
  color: var(--gold);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .22em;
  text-shadow: 0 0 18px rgba(247, 201, 109, .75);
}

.mdeck-demo[data-core="launching"]::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 4;
  background:
    radial-gradient(circle at 50% 42%, rgba(81, 215, 255, .28), transparent 28%),
    linear-gradient(180deg, transparent 0%, rgba(81, 215, 255, .08) 48%, transparent 100%);
  pointer-events: none;
  animation: launchFlash .9s ease both;
}

.mdeck-demo[data-core="active"] .core-status {
  border-color: rgba(247, 201, 109, .54);
  box-shadow:
    0 0 34px rgba(247, 201, 109, .18),
    inset 0 0 28px rgba(81, 215, 255, .14);
}

.mdeck-demo[data-core="active"] .core-status h2 {
  color: var(--gold);
  text-shadow: 0 0 20px rgba(247, 201, 109, .55);
}

.launch-button.is-launching,
.rail-main.is-launching {
  pointer-events: none;
  filter: brightness(1.25);
}

.bottom-nav button[data-action="activate-core"] {
  border-color: rgba(247, 201, 109, .36);
}

@keyframes launchShake {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  25% { transform: translate3d(1px, -1px, 0) scale(1.01); }
  50% { transform: translate3d(-1px, 1px, 0) scale(1.015); }
  75% { transform: translate3d(1px, 1px, 0) scale(1.01); }
}

@keyframes launchFlash {
  0% { opacity: 0; transform: scale(.98); }
  30% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.04); }
}

@media (max-width: 430px) {
  .panel-auth,
  .panel-right,
  .panel-left {
    width: calc(100vw - 44px);
  }

  .panel-auth,
  .panel-right {
    right: 8px;
  }

  .panel-left {
    left: 8px;
  }

  .mdeck-demo[data-auth="open"] .cockpit-content,
  .mdeck-demo[data-right="open"] .cockpit-content {
    transform: translateX(-8vw) scale(.955);
  }

  .mdeck-demo[data-left="open"] .cockpit-content {
    transform: translateX(8vw) scale(.955);
  }
}

/* ==========================================================
   M-DECK COCKPIT DEMO R03 PRESENTATION FRAME
   Purpose: make the demo look like a premium mobile app cockpit
   even when viewed inside a full desktop browser.
   ========================================================== */

@media (min-width: 720px) {
  body {
    min-height: 100vh;
    display: grid;
    place-items: center;
    background:
      radial-gradient(circle at 50% 18%, rgba(81, 215, 255, .18), transparent 28%),
      radial-gradient(circle at 50% 88%, rgba(247, 201, 109, .12), transparent 28%),
      #01040b;
    padding: 24px;
  }

  .mdeck-demo {
    width: min(430px, calc(100vw - 48px));
    min-height: min(932px, calc(100vh - 48px));
    max-height: calc(100vh - 48px);
    overflow: hidden;
    border: 1px solid rgba(81, 215, 255, .36);
    border-radius: 42px;
    box-shadow:
      0 0 0 8px rgba(2, 8, 20, .88),
      0 0 0 10px rgba(247, 201, 109, .12),
      0 0 70px rgba(81, 215, 255, .28),
      0 30px 90px rgba(0, 0, 0, .72);
  }

  .mdeck-demo::before {
    content: "FOUNDER COCKPIT DEMO · PRIVATE PREVIEW";
    position: absolute;
    z-index: 70;
    left: 50%;
    top: 8px;
    transform: translateX(-50%);
    padding: 5px 10px;
    border: 1px solid rgba(247, 201, 109, .3);
    border-radius: 999px;
    background: rgba(2, 8, 20, .72);
    color: rgba(247, 201, 109, .88);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .16em;
    white-space: nowrap;
    pointer-events: none;
  }

  .cockpit-header {
    margin-top: 12px;
  }

  .edge-toggle {
    position: absolute;
    top: 48%;
  }

  .edge-left {
    left: 4px;
  }

  .edge-right {
    right: 4px;
  }

  .panel {
    position: absolute;
    top: 92px;
    bottom: 88px;
    width: calc(100% - 44px);
  }

  .panel-left {
    left: 10px;
  }

  .panel-auth,
  .panel-right {
    right: 10px;
  }

  .bottom-nav {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
  }

  .cockpit-content {
    padding-top: 18px;
  }

  .core-orb {
    width: min(78vw, 330px);
    margin-top: 2px;
  }

  .access-rail {
    max-width: 360px;
  }

  .mdeck-demo[data-right="open"] .cockpit-content,
  .mdeck-demo[data-auth="open"] .cockpit-content {
    transform: translateX(-9vw) scale(.94);
  }

  .mdeck-demo[data-left="open"] .cockpit-content {
    transform: translateX(9vw) scale(.94);
  }
}

@media (min-width: 1100px) {
  body::before {
    content: "M-Deck / Mi-Deck";
    position: fixed;
    left: 38px;
    top: 34px;
    color: rgba(234, 248, 255, .16);
    font-size: 52px;
    font-weight: 950;
    letter-spacing: .04em;
    pointer-events: none;
  }

  body::after {
    content: "Right = Auth Launch Bay   •   Center = Muniverz Core   •   Left = Affairz / GOLEZ Logic";
    position: fixed;
    right: 38px;
    bottom: 34px;
    max-width: 420px;
    color: rgba(234, 248, 255, .28);
    font-size: 13px;
    line-height: 1.5;
    text-align: right;
    pointer-events: none;
  }
}

/* ==========================================================
   M-DECK COCKPIT DEMO R04 DEMO FIT + READABILITY
   Purpose: prevent bottom nav overlap, tighten the header,
   and make the demo frame presentation-safe.
   ========================================================== */

.brand-core .eyebrow {
  max-width: 100%;
  margin-inline: auto;
  line-height: 1.25;
  letter-spacing: .12em;
}

.brand-core h1 {
  margin-top: 2px;
}

.subline {
  line-height: 1.25;
}

.core-status {
  position: relative;
  z-index: 2;
}

.flow-map {
  margin-bottom: 26px;
}

@media (min-width: 720px) {
  .mdeck-demo {
    height: min(932px, calc(100vh - 48px));
    min-height: 720px;
  }

  .cockpit-content {
    height: calc(100% - 144px);
    max-height: calc(100% - 144px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: 126px;
    scrollbar-width: none;
  }

  .cockpit-content::-webkit-scrollbar {
    display: none;
  }

  .brand-core .eyebrow {
    font-size: 8px;
    letter-spacing: .16em;
  }

  .brand-core h1 {
    font-size: 36px;
  }

  .subline {
    font-size: 10px;
  }

  .core-orb {
    width: 305px;
    margin-bottom: -28px;
  }

  .access-rail {
    max-width: 348px;
  }

  .rail-main {
    min-height: 82px;
    padding: 13px 16px;
  }

  .rail-main strong {
    font-size: 21px;
  }

  .rail-pulley {
    min-height: 82px;
  }

  .core-status {
    margin-top: 14px;
    padding: 15px;
  }

  .core-status h2 {
    font-size: 18px;
  }

  .core-status p:last-child {
    font-size: 12px;
    line-height: 1.45;
  }

  .flow-map {
    grid-template-columns: 1fr;
    margin-top: 10px;
    margin-bottom: 0;
  }

  .flow-map article {
    min-height: auto;
    padding: 10px 12px;
  }

  .flow-map article p {
    display: none;
  }

  .bottom-nav {
    background:
      linear-gradient(180deg, rgba(8, 28, 54, .94), rgba(2, 8, 20, .96));
  }
}

@media (min-width: 1100px) {
  body::before {
    left: 32px;
    top: 92px;
    color: rgba(234, 248, 255, .12);
    font-size: 50px;
  }

  body::after {
    content: "Demo Flow: 1) ID opens Authentication Launch Bay. 2) Enter Muniverz activates the center core. 3) VR opens Affairz / GOLEZ. 4) Ops or Pull opens the shared right command column.";
    right: 42px;
    bottom: 58px;
    max-width: 460px;
    color: rgba(234, 248, 255, .38);
    font-size: 13px;
    line-height: 1.55;
  }
}

@media (max-width: 430px) {
  .cockpit-content {
    padding-bottom: 120px;
  }

  .flow-map {
    margin-bottom: 18px;
  }
}

/* ==========================================================
   M-DECK COCKPIT DEMO R05 PANEL HEADER FIX
   Purpose: stop panel titles from wrapping vertically into the
   close-button column. Keep headings readable and demo-safe.
   ========================================================== */

.panel-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 40px !important;
  grid-template-areas:
    "eyebrow close"
    "title close" !important;
  column-gap: 10px !important;
  row-gap: 3px !important;
  align-items: start !important;
}

.panel-head .eyebrow {
  grid-area: eyebrow !important;
  min-width: 0 !important;
  margin: 0 !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
}

.panel-head h2 {
  grid-area: title !important;
  min-width: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  line-height: 1.08 !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  text-wrap: balance !important;
}

.panel-head button {
  grid-area: close !important;
  align-self: start !important;
  justify-self: end !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
}

.panel-auth .panel-head h2::after,
.panel-right .panel-head h2::after {
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

.panel-auth .panel-head h2 {
  font-size: 17px !important;
}

.panel-right .panel-head h2,
.panel-left .panel-head h2 {
  font-size: 18px !important;
}

@media (max-width: 430px) {
  .panel-head {
    grid-template-columns: minmax(0, 1fr) 38px !important;
  }

  .panel-auth .panel-head h2,
  .panel-right .panel-head h2,
  .panel-left .panel-head h2 {
    font-size: 16px !important;
  }
}

/* ==========================================================
   M-DECK COCKPIT DEMO R06 GUIDED TOUR
   Purpose: add a one-tap guided demo flow for tomorrow meetings.
   ========================================================== */

.demo-actions {
  max-width: 360px;
  margin: 12px auto 0;
  display: grid;
  place-items: center;
}

.demo-disclaimer {
  margin-bottom: 8px;
  padding: 6px 12px;
  border: 1px solid rgba(247, 201, 109, .32);
  border-radius: 999px;
  background: rgba(2, 8, 20, .72);
  color: rgba(247, 201, 109, .92);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .16em;
  line-height: 1.2;
  text-align: center;
}

.demo-tour-inline {
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(247, 201, 109, .48);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(247, 201, 109, .22), rgba(81, 215, 255, .16)),
    rgba(2, 8, 20, .82);
  color: var(--gold);
  box-shadow:
    inset 0 0 20px rgba(81, 215, 255, .14),
    0 0 24px rgba(247, 201, 109, .16);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
}

.demo-tour-inline:hover {
  border-color: rgba(81, 215, 255, .9);
  box-shadow:
    inset 0 0 24px rgba(81, 215, 255, .2),
    0 0 32px rgba(81, 215, 255, .26);
}

.mdeck-demo[data-tour="running"] .demo-tour-inline {
  pointer-events: none;
  color: #06111f;
  background: linear-gradient(135deg, #ffe49d, #f7c96d 45%, #60dfff);
}

.mdeck-demo[data-tour="running"] .core-status::before {
  content: "GUIDED TOUR ACTIVE";
  position: absolute;
  left: 50%;
  top: -14px;
  transform: translateX(-50%);
  padding: 4px 9px;
  border: 1px solid rgba(247, 201, 109, .45);
  border-radius: 999px;
  background: rgba(2, 8, 20, .92);
  color: var(--gold);
  font-size: 8px;
  font-weight: 950;
  letter-spacing: .18em;
  white-space: nowrap;
  box-shadow: 0 0 18px rgba(247, 201, 109, .22);
}

.mdeck-demo[data-tour="running"] .core-orb {
  filter: drop-shadow(0 0 38px rgba(81, 215, 255, .72));
}

.mdeck-demo[data-tour="complete"] .demo-tour-inline {
  border-color: rgba(81, 215, 255, .62);
}

@media (min-width: 720px) {
  .demo-actions {
    margin-top: 10px;
  }

  .demo-tour-inline {
    min-height: 40px;
    font-size: 10px;
  }
}

/* ==========================================================
   M-DECK COCKPIT DEMO R07 MEETING COPY POLISH
   Purpose: make labels clearer for live explanation.
   ========================================================== */

.panel-auth .panel-head h2::after {
  content: "Person → Member → Capability Gate" !important;
}

.panel-right .panel-head h2::after {
  content: "Missionz · Review · Founder Control" !important;
}

.brand-core .eyebrow {
  color: rgba(247, 201, 109, .96);
}

.rail-main strong {
  letter-spacing: .01em;
}

.core-status h2 {
  text-wrap: balance;
}

.demo-tour-inline {
  position: relative;
  overflow: hidden;
}

.demo-tour-inline::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  transform: translateX(-120%);
  animation: demoSweep 3s ease-in-out infinite;
}

@keyframes demoSweep {
  0%, 35% { transform: translateX(-120%); }
  70%, 100% { transform: translateX(120%); }
}

/* ==========================================================
   M-DECK COCKPIT DEMO R08 INNER BUTTON LOGIC
   Purpose: make each panel item explain its role without opening
   fake unfinished backend screens.
   ========================================================== */

.lane-grid button[data-action="show-info"],
.module-stack button[data-action="show-info"] {
  position: relative;
  overflow: hidden;
}

.lane-grid button[data-action="show-info"]::after,
.module-stack button[data-action="show-info"]::after {
  content: "Preview";
  position: absolute;
  right: 8px;
  bottom: 6px;
  color: rgba(247, 201, 109, .62);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.lane-grid button[data-action="show-info"]:focus-visible,
.module-stack button[data-action="show-info"]:focus-visible {
  outline: 2px solid rgba(247, 201, 109, .78);
  outline-offset: 2px;
}

.core-status.is-previewing {
  border-color: rgba(81, 215, 255, .62);
  box-shadow:
    0 0 30px rgba(81, 215, 255, .2),
    inset 0 0 24px rgba(247, 201, 109, .08);
}

.core-status.is-previewing::after {
  content: "LOGIC PREVIEW";
  position: absolute;
  right: 14px;
  top: 12px;
  color: rgba(81, 215, 255, .72);
  font-size: 8px;
  font-weight: 950;
  letter-spacing: .16em;
}

/* ==========================================================
   M-DECK COCKPIT DEMO R08C VISIBLE LOGIC PREVIEW HUD
   Purpose: show inner button feedback above panels so the user
   can actually see what changed during demos.
   ========================================================== */

.logic-preview-hud {
  position: fixed;
  z-index: 95;
  left: 50%;
  bottom: calc(88px + var(--safe-bottom));
  width: min(390px, calc(100vw - 34px));
  transform: translate(-50%, 22px) scale(.96);
  opacity: 0;
  pointer-events: none;
  padding: 14px 16px;
  border: 1px solid rgba(247, 201, 109, .55);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(247, 201, 109, .16), rgba(81, 215, 255, .12)),
    rgba(2, 8, 20, .94);
  backdrop-filter: blur(18px);
  box-shadow:
    0 0 34px rgba(247, 201, 109, .18),
    0 0 48px rgba(81, 215, 255, .18),
    inset 0 0 24px rgba(81, 215, 255, .12);
  transition: opacity .22s ease, transform .22s ease;
}

.mdeck-demo[data-preview="open"] .logic-preview-hud {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

.logic-preview-hud h2 {
  margin: 0 0 6px;
  color: var(--gold);
  font-size: 16px;
  line-height: 1.08;
  text-shadow: 0 0 16px rgba(247, 201, 109, .42);
}

.logic-preview-hud p:last-child {
  margin: 0;
  color: rgba(234, 248, 255, .82);
  font-size: 12px;
  line-height: 1.38;
}

.logic-preview-hud::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid rgba(81, 215, 255, .35);
  pointer-events: none;
}

@media (min-width: 720px) {
  .logic-preview-hud {
    position: absolute;
    bottom: 88px;
    width: calc(100% - 36px);
  }
}

/* ==========================================================
   M-DECK COCKPIT DEMO R11 P.RENDEZVOUS / YOP ACCESS
   Purpose: add a floating concierge-logo orb, not a normal nav tab.
   ========================================================== */

.yop-access-orb {
  position: fixed;
  z-index: 90;
  right: 18px;
  bottom: calc(76px + var(--safe-bottom));
  width: 58px;
  height: 58px;
  border: 1px solid rgba(247, 201, 109, .58);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 35%, rgba(247, 201, 109, .28), transparent 45%),
    linear-gradient(135deg, rgba(81, 215, 255, .18), rgba(2, 8, 20, .96));
  color: var(--gold);
  box-shadow:
    0 0 28px rgba(247, 201, 109, .24),
    0 0 38px rgba(81, 215, 255, .18),
    inset 0 0 20px rgba(81, 215, 255, .12);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.yop-access-orb .yop-mark {
  display: block;
  font-size: 18px;
  line-height: .9;
  font-weight: 950;
  letter-spacing: -.04em;
}

.yop-access-orb .yop-label {
  display: block;
  margin-top: -5px;
  color: rgba(234, 248, 255, .76);
  font-size: 8px;
  font-weight: 950;
  letter-spacing: .14em;
}

.yop-access-orb::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  border: 1px solid rgba(81, 215, 255, .16);
  animation: yopPulse 2.8s ease-in-out infinite;
}

.mdeck-demo[data-yop="open"] .yop-access-orb {
  border-color: rgba(81, 215, 255, .92);
  box-shadow:
    0 0 32px rgba(81, 215, 255, .34),
    0 0 42px rgba(247, 201, 109, .24),
    inset 0 0 24px rgba(247, 201, 109, .16);
}

.panel-yop {
  right: 10px;
  border-radius: 18px 28px 28px 18px;
  transform: translateX(calc(100% + 24px));
}

.mdeck-demo[data-yop="open"] .panel-yop {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

.mdeck-demo[data-yop="open"] .cockpit-content {
  transform: translateX(-7vw) scale(.97);
}

.panel-yop::before {
  content: "";
  position: sticky;
  top: -14px;
  display: block;
  height: 3px;
  margin: -14px -14px 14px;
  background: linear-gradient(90deg, transparent, rgba(247, 201, 109, .9), rgba(81, 215, 255, .65), transparent);
  box-shadow: 0 0 24px rgba(247, 201, 109, .32);
}

.yop-access-stack {
  display: grid;
  gap: 8px;
}

.yop-access-stack button {
  min-height: 44px;
  padding: 10px;
  border: 1px solid rgba(247, 201, 109, .28);
  border-radius: 15px;
  background:
    linear-gradient(135deg, rgba(247, 201, 109, .13), rgba(81, 215, 255, .1)),
    rgba(2, 8, 20, .62);
  color: var(--text);
  text-align: left;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.yop-access-stack button::after {
  content: "YoP";
  float: right;
  color: rgba(247, 201, 109, .7);
  font-size: 9px;
  letter-spacing: .12em;
}

@keyframes yopPulse {
  0%, 100% {
    opacity: .35;
    transform: scale(.94);
  }
  50% {
    opacity: .9;
    transform: scale(1.08);
  }
}

@media (min-width: 720px) {
  .yop-access-orb {
    position: absolute;
    right: 18px;
    bottom: 78px;
  }

  .panel-yop {
    right: 10px;
  }

  .mdeck-demo[data-yop="open"] .cockpit-content {
    transform: translateX(-9vw) scale(.94);
  }
}

@media (max-width: 430px) {
  .yop-access-orb {
    right: 16px;
    bottom: calc(74px + var(--safe-bottom));
    width: 54px;
    height: 54px;
  }

  .panel-yop {
    width: calc(100vw - 44px);
    right: 8px;
  }

  .mdeck-demo[data-yop="open"] .cockpit-content {
    transform: translateX(-8vw) scale(.955);
  }
}

/* ==========================================================
   M-DECK COCKPIT DEMO R12 YOP FLOAT PRIORITY
   Purpose: P.Rendezvous / YoP Access must always float above
   panels, preview HUDs, context cards, and menu content.
   ========================================================== */

.yop-access-orb {
  z-index: 180 !important;
  pointer-events: auto !important;
}

/* Keep the YoP panel below the YoP orb visually */
.panel-yop {
  z-index: 82 !important;
}

/* Keep general panels below YoP orb */
.panel,
.panel-left,
.panel-right,
.panel-auth,
.panel-vr {
  z-index: 80;
}

/* Keep the preview HUD visible, but never above YoP */
.logic-preview-hud {
  z-index: 120 !important;
}

/* When YoP is open, lift preview HUD above the orb zone instead of sitting on it */
.mdeck-demo[data-yop="open"] .logic-preview-hud {
  bottom: calc(154px + var(--safe-bottom)) !important;
}

/* Give the YoP panel extra breathing room near the orb */
.mdeck-demo[data-yop="open"] .panel-yop {
  bottom: calc(146px + var(--safe-bottom)) !important;
}

/* Add a subtle reserved glow-zone around the floating YoP access point */
.yop-access-orb::before {
  content: "";
  position: absolute;
  inset: -11px;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(247, 201, 109, .14), transparent 68%);
  z-index: -1;
  pointer-events: none;
}

/* Desktop framed preview version */
@media (min-width: 720px) {
  .yop-access-orb {
    z-index: 180 !important;
  }

  .mdeck-demo[data-yop="open"] .panel-yop {
    bottom: 150px !important;
  }

  .mdeck-demo[data-yop="open"] .logic-preview-hud {
    bottom: 154px !important;
  }
}

/* Mobile small-screen correction */
@media (max-width: 430px) {
  .mdeck-demo[data-yop="open"] .panel-yop {
    bottom: calc(140px + var(--safe-bottom)) !important;
  }

  .mdeck-demo[data-yop="open"] .logic-preview-hud {
    bottom: calc(148px + var(--safe-bottom)) !important;
  }
}

/* ==========================================================
   M-DECK COCKPIT DEMO R13 CLICK ACKNOWLEDGEMENT
   Purpose: every menu/control click gives visible feedback so
   reviewer knows the click registered.
   ========================================================== */

button[data-action],
.lane-grid button,
.module-stack button,
.yop-access-stack button,
.status-stack div,
.bottom-nav button {
  -webkit-tap-highlight-color: transparent;
}

.mdeck-click-ack {
  animation: mdeckClickAck .46s ease both !important;
}

.mdeck-click-ack-strong {
  animation: mdeckClickAckStrong .62s ease both !important;
}

/* Add a temporary glow ring around clicked controls */
button.mdeck-click-ack,
button.mdeck-click-ack-strong {
  position: relative;
  outline: 1px solid rgba(247, 201, 109, .8) !important;
  outline-offset: 3px !important;
}

/* Extra clarity for small circular/edge controls */
.top-toggle.mdeck-click-ack,
.edge-toggle.mdeck-click-ack,
.rail-pulley.mdeck-click-ack,
.yop-access-orb.mdeck-click-ack {
  filter: brightness(1.28) saturate(1.16);
}

/* Inner menu item confirmation */
.lane-grid button.mdeck-click-ack,
.module-stack button.mdeck-click-ack,
.yop-access-stack button.mdeck-click-ack {
  border-color: rgba(247, 201, 109, .9) !important;
  color: var(--gold) !important;
}

/* Bottom nav confirmation */
.bottom-nav button.mdeck-click-ack {
  color: var(--gold) !important;
  border-color: rgba(247, 201, 109, .75) !important;
}

/* Visible press motion */
@keyframes mdeckClickAck {
  0% {
    transform: scale(1);
    box-shadow: inherit;
  }
  35% {
    transform: scale(.965);
    box-shadow:
      0 0 0 3px rgba(247, 201, 109, .22),
      0 0 26px rgba(247, 201, 109, .34),
      0 0 34px rgba(81, 215, 255, .2) !important;
  }
  100% {
    transform: scale(1);
  }
}

@keyframes mdeckClickAckStrong {
  0% {
    transform: scale(1);
  }
  28% {
    transform: scale(.945);
    box-shadow:
      0 0 0 4px rgba(247, 201, 109, .3),
      0 0 34px rgba(247, 201, 109, .44),
      0 0 46px rgba(81, 215, 255, .28) !important;
  }
  100% {
    transform: scale(1);
  }
}

/* Optional tiny cockpit confirmation light */
.mdeck-demo::after {
  transition: opacity .18s ease;
}

.mdeck-demo[data-click-confirm="on"] .ship-frame {
  box-shadow:
    inset 0 0 48px rgba(247, 201, 109, .18),
    inset 0 0 42px rgba(81, 215, 255, .18),
    0 0 48px rgba(247, 201, 109, .14);
}

/* ==========================================================
   M-DECK COCKPIT DEMO R14 VAE LEFT RAIL
   Purpose: left rail becomes VAE = Virtual Actuality Ecosystem,
   matching the right-side OPS label.
   ========================================================== */

.edge-left span {
  letter-spacing: .2em;
}

.vae-definition-strip {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid rgba(247, 201, 109, .34);
  border-radius: 15px;
  background:
    linear-gradient(135deg, rgba(247, 201, 109, .14), rgba(81, 215, 255, .1)),
    rgba(2, 8, 20, .62);
}

.vae-definition-strip span {
  display: block;
  margin-bottom: 5px;
  color: var(--gold);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-weight: 950;
}

.vae-definition-strip strong {
  display: block;
  color: rgba(234, 248, 255, .82);
  font-size: 12px;
  line-height: 1.35;
}

.panel-left .panel-head h2::after {
  content: "Virtual Actuality Ecosystem";
  display: block;
  margin-top: 6px;
  color: rgba(81, 215, 255, .78);
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* ==========================================================
   M-DECK COCKPIT DEMO R15 VE REPAIR
   Purpose: restore VE = Virtual Estatez / Space-Time-Location.
   ========================================================== */

.panel-vr {
  left: 10px;
  border-radius: 28px 18px 18px 28px;
  transform: translateX(calc(-100% - 24px));
}

.mdeck-demo[data-vr="open"] .panel-vr {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

.mdeck-demo[data-vr="open"] .cockpit-content {
  transform: translateX(7vw) scale(.97);
}

.panel-vr::before {
  content: "";
  position: sticky;
  top: -14px;
  display: block;
  height: 3px;
  margin: -14px -14px 14px;
  background: linear-gradient(90deg, transparent, rgba(247, 201, 109, .9), rgba(81, 215, 255, .65), transparent);
  box-shadow: 0 0 24px rgba(247, 201, 109, .38);
}

.vr-tape-stack {
  display: grid;
  gap: 8px;
}

.vr-tape-stack div {
  padding: 10px;
  border: 1px solid rgba(81, 215, 255, .18);
  border-radius: 15px;
  background: rgba(2, 8, 20, .52);
}

.vr-tape-stack span {
  display: block;
  margin-bottom: 5px;
  color: rgba(234, 248, 255, .62);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 850;
}

.vr-tape-stack strong {
  display: block;
  color: var(--gold);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.va-definition-button {
  width: 100%;
  min-height: 46px;
  margin: 0 0 10px;
  border: 1px solid rgba(247, 201, 109, .52);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(247, 201, 109, .22), rgba(81, 215, 255, .12)),
    rgba(2, 8, 20, .82);
  color: var(--gold);
  box-shadow:
    inset 0 0 20px rgba(81, 215, 255, .12),
    0 0 24px rgba(247, 201, 109, .16);
  font-size: 13px;
  font-weight: 950;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
}

.va-definition-button::after {
  content: "Virtual Actuality";
  display: block;
  margin-top: 4px;
  color: rgba(234, 248, 255, .68);
  font-size: 9px;
  letter-spacing: .14em;
}

@media (min-width: 720px) {
  .mdeck-demo[data-vr="open"] .cockpit-content {
    transform: translateX(9vw) scale(.94);
  }
}

@media (max-width: 430px) {
  .panel-vr {
    width: calc(100vw - 44px);
    left: 8px;
  }

  .mdeck-demo[data-vr="open"] .cockpit-content {
    transform: translateX(8vw) scale(.955);
  }
}

/* ==========================================================
   M-DECK COCKPIT DEMO R16 OPS BACK OFFICE APPZ
   Purpose: add founder back-office access inside OPS:
   receipts, legal, marketing, invites, blasts, MBZ, and
   Connectionz / Plugz / Outletz logic.
   ========================================================== */

.ops-section-label {
  margin: 12px 0 8px;
  padding: 10px;
  border: 1px solid rgba(247, 201, 109, .28);
  border-radius: 15px;
  background:
    linear-gradient(135deg, rgba(247, 201, 109, .12), rgba(81, 215, 255, .08)),
    rgba(2, 8, 20, .58);
}

.ops-section-label span {
  display: block;
  margin-bottom: 5px;
  color: var(--gold);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-weight: 950;
}

.ops-section-label strong {
  display: block;
  color: rgba(234, 248, 255, .78);
  font-size: 11px;
  line-height: 1.35;
}

.ops-command-label {
  margin-top: 14px;
  border-color: rgba(81, 215, 255, .24);
}

.ops-apps-stack {
  display: grid;
  gap: 8px;
}

.ops-apps-stack button {
  position: relative;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid rgba(247, 201, 109, .28);
  border-radius: 15px;
  background:
    linear-gradient(135deg, rgba(247, 201, 109, .1), rgba(81, 215, 255, .1)),
    rgba(2, 8, 20, .62);
  color: var(--text);
  text-align: left;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
  overflow: hidden;
}

.ops-apps-stack button:hover,
.ops-apps-stack button.mdeck-click-ack {
  border-color: rgba(247, 201, 109, .82) !important;
  color: var(--gold) !important;
  box-shadow:
    0 0 24px rgba(247, 201, 109, .16),
    inset 0 0 18px rgba(81, 215, 255, .1);
}

.ops-apps-stack button::after {
  content: "OPS";
  position: absolute;
  right: 9px;
  bottom: 7px;
  color: rgba(247, 201, 109, .62);
  font-size: 8px;
  font-weight: 950;
  letter-spacing: .12em;
}

.ops-apps-stack button:nth-child(2)::after {
  content: "Receipt";
}

.ops-apps-stack button:nth-child(5)::after {
  content: "Invite";
}

.ops-apps-stack button:nth-child(6)::after {
  content: "Blast";
}

.ops-apps-stack button:nth-child(8)::after {
  content: "Relate";
}

.ops-apps-stack button:nth-child(9)::after {
  content: "Resource";
}

.ops-apps-stack button:nth-child(10)::after {
  content: "Outlet";
}

.ops-apps-stack button:nth-child(11)::after {
  content: "Credit";
}

/* ==========================================================
   M-DECK COCKPIT DEMO R19 LOGIC PREVIEW CLOSE BUTTON
   Purpose: allow the preview/info box to be dismissed after
   clicking menu items like TG Receipt Desk, Plugz, Outletz, etc.
   ========================================================== */

.logic-preview-hud {
  padding-right: 46px !important;
}

.logic-preview-close {
  position: absolute;
  z-index: 4;
  top: 9px;
  right: 10px;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(247, 201, 109, .48);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 35%, rgba(247, 201, 109, .22), transparent 55%),
    rgba(2, 8, 20, .86);
  color: var(--gold);
  display: grid;
  place-items: center;
  font-size: 18px;
  line-height: 1;
  font-weight: 900;
  cursor: pointer;
  box-shadow:
    0 0 16px rgba(247, 201, 109, .18),
    inset 0 0 12px rgba(81, 215, 255, .1);
}

.logic-preview-close:hover,
.logic-preview-close.mdeck-click-ack {
  border-color: rgba(81, 215, 255, .85) !important;
  color: #ffffff !important;
  box-shadow:
    0 0 20px rgba(81, 215, 255, .28),
    0 0 24px rgba(247, 201, 109, .18);
}

.logic-preview-close:focus-visible {
  outline: 2px solid rgba(247, 201, 109, .85);
  outline-offset: 3px;
}

/* ==========================================================
   M-DECK COCKPIT DEMO R19B PREVIEW CLOSE FIX
   Issue: Logic Preview HUD was visible but pointer-events were off,
   so the close X could not reliably receive clicks.
   ========================================================== */

.mdeck-demo[data-preview="open"] .logic-preview-hud {
  pointer-events: auto !important;
}

.logic-preview-close {
  pointer-events: auto !important;
  z-index: 260 !important;
}

.logic-preview-hud {
  z-index: 150 !important;
}

.yop-access-orb {
  z-index: 220 !important;
}

/* keep the close X safely above the preview surface */
.logic-preview-close::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
}

/* ==========================================================
   M-DECK COCKPIT DEMO R19B PREVIEW CLOSE FIX
   Issue: Logic Preview HUD was visible but pointer-events were off,
   so the close X could not reliably receive clicks.
   ========================================================== */

.mdeck-demo[data-preview="open"] .logic-preview-hud {
  pointer-events: auto !important;
}

.logic-preview-close {
  pointer-events: auto !important;
  z-index: 260 !important;
}

.logic-preview-hud {
  z-index: 150 !important;
}

.yop-access-orb {
  z-index: 220 !important;
}

/* keep the close X safely above the preview surface */
.logic-preview-close::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
}

/* ==========================================================
   M-DECK COCKPIT DEMO R20 MISSION CONTROL
   Purpose: split OPS back office from MC active mission execution.
   OPS = back office. MC = mission execution.
   ========================================================== */

.mission-control-orb {
  position: fixed;
  z-index: 92;
  right: 18px;
  bottom: calc(140px + var(--safe-bottom));
  width: 58px;
  height: 58px;
  border: 1px solid rgba(81, 215, 255, .62);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 35%, rgba(81, 215, 255, .28), transparent 48%),
    linear-gradient(135deg, rgba(247, 201, 109, .14), rgba(2, 8, 20, .96));
  color: var(--blue);
  box-shadow:
    0 0 28px rgba(81, 215, 255, .24),
    0 0 38px rgba(247, 201, 109, .12),
    inset 0 0 20px rgba(81, 215, 255, .14);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.mission-control-orb .mc-mark {
  display: block;
  font-size: 16px;
  line-height: .9;
  font-weight: 950;
  letter-spacing: -.03em;
}

.mission-control-orb .mc-label {
  display: block;
  margin-top: -5px;
  color: rgba(234, 248, 255, .72);
  font-size: 7px;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.mission-control-orb::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  border: 1px solid rgba(81, 215, 255, .18);
  animation: mcPulse 2.6s ease-in-out infinite;
}

.mdeck-demo[data-mc="open"] .mission-control-orb {
  border-color: rgba(247, 201, 109, .92);
  color: var(--gold);
  box-shadow:
    0 0 34px rgba(247, 201, 109, .24),
    0 0 42px rgba(81, 215, 255, .28),
    inset 0 0 24px rgba(81, 215, 255, .18);
}

.panel-mc {
  right: 10px;
  border-radius: 18px 28px 28px 18px;
  transform: translateX(calc(100% + 24px));
}

.mdeck-demo[data-mc="open"] .panel-mc {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

.mdeck-demo[data-mc="open"] .cockpit-content {
  transform: translateX(-7vw) scale(.97);
}

.panel-mc::before {
  content: "";
  position: sticky;
  top: -14px;
  display: block;
  height: 3px;
  margin: -14px -14px 14px;
  background: linear-gradient(90deg, transparent, rgba(81, 215, 255, .9), rgba(247, 201, 109, .65), transparent);
  box-shadow: 0 0 24px rgba(81, 215, 255, .36);
}

.mc-section-label {
  margin: 12px 0 8px;
  padding: 10px;
  border: 1px solid rgba(81, 215, 255, .3);
  border-radius: 15px;
  background:
    linear-gradient(135deg, rgba(81, 215, 255, .12), rgba(247, 201, 109, .08)),
    rgba(2, 8, 20, .58);
}

.mc-section-label span {
  display: block;
  margin-bottom: 5px;
  color: var(--blue);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-weight: 950;
}

.mc-section-label strong {
  display: block;
  color: rgba(234, 248, 255, .78);
  font-size: 11px;
  line-height: 1.35;
}

.mission-control-stack {
  display: grid;
  gap: 8px;
}

.mission-control-stack button {
  position: relative;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid rgba(81, 215, 255, .3);
  border-radius: 15px;
  background:
    linear-gradient(135deg, rgba(81, 215, 255, .11), rgba(247, 201, 109, .08)),
    rgba(2, 8, 20, .62);
  color: var(--text);
  text-align: left;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
  overflow: hidden;
}

.mission-control-stack button:hover,
.mission-control-stack button.mdeck-click-ack {
  border-color: rgba(81, 215, 255, .88) !important;
  color: var(--blue) !important;
  box-shadow:
    0 0 24px rgba(81, 215, 255, .18),
    inset 0 0 18px rgba(247, 201, 109, .08);
}

.mission-control-stack button::after {
  content: "MC";
  position: absolute;
  right: 9px;
  bottom: 7px;
  color: rgba(81, 215, 255, .7);
  font-size: 8px;
  font-weight: 950;
  letter-spacing: .12em;
}

@keyframes mcPulse {
  0%, 100% {
    opacity: .32;
    transform: scale(.94);
  }
  50% {
    opacity: .9;
    transform: scale(1.08);
  }
}

@media (min-width: 720px) {
  .mission-control-orb {
    position: absolute;
    right: 18px;
    bottom: 142px;
  }

  .panel-mc {
    right: 10px;
  }

  .mdeck-demo[data-mc="open"] .cockpit-content {
    transform: translateX(-9vw) scale(.94);
  }
}

@media (max-width: 430px) {
  .mission-control-orb {
    right: 16px;
    bottom: calc(136px + var(--safe-bottom));
    width: 54px;
    height: 54px;
  }

  .panel-mc {
    width: calc(100vw - 44px);
    right: 8px;
  }

  .mdeck-demo[data-mc="open"] .cockpit-content {
    transform: translateX(-8vw) scale(.955);
  }
}

/* Keep YoP higher than MC, but MC above normal content */
.yop-access-orb {
  z-index: 220 !important;
}

.mission-control-orb {
  z-index: 170 !important;
}

.panel-mc {
  z-index: 82 !important;
}

/* ==========================================================
   M-DECK COCKPIT DEMO R20B MC UNDER VAE
   Purpose: Mission Control belongs on the left under VAE,
   mirroring P.Rendezvous / YoP under OPS on the right.
   ========================================================== */

/* MC floating orb moves to LEFT side beneath VAE */
.mission-control-orb {
  left: 18px !important;
  right: auto !important;
  bottom: calc(140px + var(--safe-bottom)) !important;
  z-index: 170 !important;
}

/* MC panel should deploy from LEFT, not right */
.panel-mc {
  left: 10px !important;
  right: auto !important;
  border-radius: 28px 18px 18px 28px !important;
  transform: translateX(calc(-100% - 24px)) !important;
}

/* When MC opens, panel slides in from left */
.mdeck-demo[data-mc="open"] .panel-mc {
  transform: translateX(0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* When MC opens from left, content shifts right */
.mdeck-demo[data-mc="open"] .cockpit-content {
  transform: translateX(7vw) scale(.97) !important;
}

/* MC receives left-side blue command identity */
.panel-mc::before {
  background: linear-gradient(90deg, transparent, rgba(81, 215, 255, .9), rgba(247, 201, 109, .65), transparent) !important;
}

/* Desktop framed preview */
@media (min-width: 720px) {
  .mission-control-orb {
    position: absolute !important;
    left: 18px !important;
    right: auto !important;
    bottom: 142px !important;
  }

  .panel-mc {
    left: 10px !important;
    right: auto !important;
  }

  .mdeck-demo[data-mc="open"] .cockpit-content {
    transform: translateX(9vw) scale(.94) !important;
  }
}

/* Mobile correction */
@media (max-width: 430px) {
  .mission-control-orb {
    left: 16px !important;
    right: auto !important;
    bottom: calc(136px + var(--safe-bottom)) !important;
    width: 54px !important;
    height: 54px !important;
  }

  .panel-mc {
    width: calc(100vw - 44px) !important;
    left: 8px !important;
    right: auto !important;
  }

  .mdeck-demo[data-mc="open"] .cockpit-content {
    transform: translateX(8vw) scale(.955) !important;
  }
}

/* Keep the right side reserved for OPS + YoP */
.yop-access-orb {
  right: 18px !important;
  left: auto !important;
}

@media (max-width: 430px) {
  .yop-access-orb {
    right: 16px !important;
    left: auto !important;
  }
}

/* ==========================================================
   M-DECK COCKPIT DEMO R20C ALIGN MC + YOP HEIGHT
   Purpose: Mission Control and YoP Access should mirror each
   other at the same bottom height.
   ========================================================== */

/* Shared floating orb baseline */
.mission-control-orb,
.yop-access-orb {
  bottom: calc(76px + var(--safe-bottom)) !important;
  width: 58px !important;
  height: 58px !important;
}

/* MC stays left */
.mission-control-orb {
  left: 18px !important;
  right: auto !important;
}

/* YoP stays right */
.yop-access-orb {
  right: 18px !important;
  left: auto !important;
}

/* When either lower orb is open, keep its panel above the orb zone */
.mdeck-demo[data-mc="open"] .panel-mc,
.mdeck-demo[data-yop="open"] .panel-yop {
  bottom: calc(146px + var(--safe-bottom)) !important;
}

/* Logic preview also rises above both bottom floating orbs */
.mdeck-demo[data-mc="open"] .logic-preview-hud,
.mdeck-demo[data-yop="open"] .logic-preview-hud {
  bottom: calc(154px + var(--safe-bottom)) !important;
}

/* Desktop framed preview */
@media (min-width: 720px) {
  .mission-control-orb,
  .yop-access-orb {
    position: absolute !important;
    bottom: 78px !important;
    width: 58px !important;
    height: 58px !important;
  }

  .mission-control-orb {
    left: 18px !important;
    right: auto !important;
  }

  .yop-access-orb {
    right: 18px !important;
    left: auto !important;
  }

  .mdeck-demo[data-mc="open"] .panel-mc,
  .mdeck-demo[data-yop="open"] .panel-yop {
    bottom: 150px !important;
  }

  .mdeck-demo[data-mc="open"] .logic-preview-hud,
  .mdeck-demo[data-yop="open"] .logic-preview-hud {
    bottom: 154px !important;
  }
}

/* Small mobile correction */
@media (max-width: 430px) {
  .mission-control-orb,
  .yop-access-orb {
    bottom: calc(74px + var(--safe-bottom)) !important;
    width: 54px !important;
    height: 54px !important;
  }

  .mission-control-orb {
    left: 16px !important;
    right: auto !important;
  }

  .yop-access-orb {
    right: 16px !important;
    left: auto !important;
  }

  .mdeck-demo[data-mc="open"] .panel-mc,
  .mdeck-demo[data-yop="open"] .panel-yop {
    bottom: calc(140px + var(--safe-bottom)) !important;
  }

  .mdeck-demo[data-mc="open"] .logic-preview-hud,
  .mdeck-demo[data-yop="open"] .logic-preview-hud {
    bottom: calc(148px + var(--safe-bottom)) !important;
  }
}

/* Layer priority: YoP and MC float above their panels */
.yop-access-orb {
  z-index: 220 !important;
}

.mission-control-orb {
  z-index: 210 !important;
}

/* ==========================================================
   M-DECK R23A OPS → TG RECEIPT DESK LINK
   Purpose: make OPS launch the actual Receipt Desk MVP.
   ========================================================== */

.ops-app-launch-link {
  margin-top: -2px;
  min-height: 38px;
  padding: 9px 12px;
  border: 1px solid rgba(247, 201, 109, .46);
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(247, 201, 109, .2), rgba(81, 215, 255, .1)),
    rgba(2, 8, 20, .78);
  color: var(--gold);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .06em;
  text-transform: uppercase;
  box-shadow: 0 0 18px rgba(247, 201, 109, .12);
}

.ops-app-launch-link:hover {
  border-color: rgba(81, 215, 255, .88);
  color: #fff;
  box-shadow:
    0 0 22px rgba(81, 215, 255, .2),
    0 0 24px rgba(247, 201, 109, .14);
}

/* =========================================================
   R24F-B MOBILE SCREENSHOT DEMO POLISH
   Purpose: screenshot-ready founder mobile demo presentation.
   Safe layer only: no dispatch, payout, publishing, or data logic.
   ========================================================= */

.mdeck-demo {
  min-height: 100dvh;
}

.cockpit-header {
  position: relative;
  overflow: hidden;
  border-color: rgba(250, 204, 21, 0.42) !important;
  box-shadow: 0 0 32px rgba(56, 189, 248, 0.18), inset 0 0 22px rgba(250, 204, 21, 0.08);
}

.cockpit-header::before {
  content: "FOUNDER PREVIEW · MOBILE DEMO · FAIL-CLOSED";
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 4;
  padding: 6px 10px;
  border: 1px solid rgba(250, 204, 21, 0.5);
  border-radius: 999px;
  background: rgba(5, 8, 16, 0.78);
  color: #fde68a;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.brand-core {
  position: relative;
  z-index: 5;
}

.brand-core .eyebrow {
  color: #67e8f9 !important;
  letter-spacing: 0.18em !important;
  font-weight: 900 !important;
}

.brand-core h1 {
  font-size: clamp(3.2rem, 14vw, 5.2rem) !important;
  line-height: 0.92 !important;
  letter-spacing: -0.08em !important;
  text-shadow: 0 0 24px rgba(250, 204, 21, 0.32), 0 0 46px rgba(56, 189, 248, 0.18);
}

.brand-core .subline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
  color: #e2e8f0 !important;
  font-weight: 800;
}

.brand-core::after {
  content: "No auto dispatch · No public publish · Human approval required";
  display: inline-flex;
  margin-top: 10px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(34, 197, 94, 0.35);
  background: rgba(20, 83, 45, 0.2);
  color: #bbf7d0;
  font-size: 0.72rem;
  font-weight: 850;
}

.ops-app-launch-link {
  min-height: 54px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-color: rgba(250, 204, 21, 0.62) !important;
  box-shadow: 0 0 18px rgba(250, 204, 21, 0.16) !important;
  font-weight: 950 !important;
  letter-spacing: 0.02em;
}

.ops-app-launch-link::after {
  content: " →";
}

@media (max-width: 780px) {
  .cockpit-header::before {
    left: 12px;
    right: auto;
    top: 8px;
    font-size: 0.55rem;
  }

  .brand-core {
    padding-top: 30px;
  }

  .brand-core h1 {
    font-size: clamp(3.7rem, 20vw, 5.4rem) !important;
  }

  .brand-core::after {
    max-width: 92%;
    line-height: 1.25;
  }
}

/* =========================================================
   R24F-C PHONE SHELL LOCK
   Purpose: keep the outer mobile demo shell stable while
   allowing only inside cockpit content to scroll/respond.
   ========================================================= */

html,
body {
  width: 100%;
  min-height: 100%;
  overflow-x: hidden;
}

body {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background: #030712;
}

.mdeck-demo {
  width: min(100vw, 430px) !important;
  max-width: 430px !important;
  min-width: 320px !important;
  min-height: 100dvh !important;
  max-height: 932px;
  margin: 0 auto !important;
  overflow: hidden !important;
  position: relative;
  border-left: 1px solid rgba(148, 163, 184, 0.16);
  border-right: 1px solid rgba(148, 163, 184, 0.16);
}

.cockpit-content {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

.cockpit-header,
.cockpit-content,
.bottom-nav {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

img,
video,
canvas,
svg {
  max-width: 100%;
}

@media (min-width: 760px) {
  body {
    padding: 18px 0;
  }

  .mdeck-demo {
    min-height: min(100dvh, 932px) !important;
    border-radius: 34px;
    box-shadow: 0 0 60px rgba(56, 189, 248, 0.18), 0 0 0 8px rgba(15, 23, 42, 0.72);
  }
}


/* =========================================================
   R24F-D OFFICIAL M-DECK HEADER BANNER
   Purpose: use official M-Deck banner without stretching shell.
   ========================================================= */

.mdeck-banner-shell {
  width: 100%;
  max-width: 320px;
  height: 68px;
  margin: 6px auto 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.mdeck-banner-image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  transform: scale(1.05);
  clip-path: inset(8px 12px 8px 12px round 16px);
  filter:
    drop-shadow(0 0 14px rgba(56, 189, 248, 0.24))
    drop-shadow(0 0 12px rgba(250, 204, 21, 0.16));
}

h1.sr-only,
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.brand-core .subline {
  margin-top: 6px !important;
  font-size: 0.72rem !important;
}

@media (max-width: 480px) {
  .mdeck-banner-shell {
    max-width: 292px;
    height: 62px;
  }

  .mdeck-banner-image {
    clip-path: inset(9px 14px 9px 14px round 14px);
  }
}


/* =========================================================
   R24F-E HEADER LAYOUT CORRECTION
   Purpose: one founder banner only, logo larger, blue eyebrow
   under logo, and no overlap with toggles/content.
   ========================================================= */

/* kill duplicate founder preview pills/banners */
.cockpit-header::before,
.cockpit-header::after {
  content: none !important;
  display: none !important;
}

.brand-core {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: center !important;
  min-width: 0 !important;
  width: 100% !important;
  padding: 4px 0 10px !important;
  gap: 6px !important;
}

.founder-preview-banner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  min-height: 30px;
  padding: 7px 14px;
  margin: 0 auto 4px;
  border-radius: 999px;
  border: 1px solid rgba(250, 204, 21, 0.55);
  background: linear-gradient(180deg, rgba(56, 34, 8, 0.92), rgba(25, 15, 4, 0.96));
  color: #fcd34d;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  max-width: 100%;
  box-shadow: 0 0 18px rgba(250, 204, 21, 0.14);
}

.mdeck-banner-shell {
  width: 100%;
  max-width: 420px;
  height: 108px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.mdeck-banner-image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  transform: scale(1.10);
  clip-path: inset(8px 12px 8px 12px round 18px);
  filter:
    drop-shadow(0 0 16px rgba(56, 189, 248, 0.24))
    drop-shadow(0 0 12px rgba(250, 204, 21, 0.14));
}

.eyebrow-under-logo {
  margin: 0 !important;
  color: #38bdf8 !important;
  font-size: 0.74rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
}

.brand-core .subline {
  margin-top: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #cbd5e1 !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
}

.cockpit-header {
  align-items: start !important;
  padding-top: 14px !important;
  padding-bottom: 16px !important;
  min-height: 190px;
  overflow: visible !important;
}

.cockpit-header .header-side,
.cockpit-header .side-toggle,
.cockpit-header .identity-toggle,
.cockpit-header .orb-toggle {
  align-self: start !important;
  z-index: 3 !important;
}

.cockpit-content {
  position: relative;
  z-index: 1;
}

/* keep accessibility hidden heading hidden */
h1.sr-only,
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (max-width: 480px) {
  .founder-preview-banner {
    font-size: 0.60rem;
    padding: 6px 10px;
    letter-spacing: 0.12em;
  }

  .mdeck-banner-shell {
    max-width: 340px;
    height: 88px;
  }

  .mdeck-banner-image {
    transform: scale(1.08);
    clip-path: inset(9px 14px 9px 14px round 16px);
  }

  .eyebrow-under-logo {
    font-size: 0.66rem !important;
  }

  .brand-core .subline {
    font-size: 0.68rem !important;
  }

  .cockpit-header {
    min-height: 168px;
  }
}


/* =========================================================
   R24F-F HEADER REPAIR
   Keep one center gold founder bar, restore bigger official logo,
   place Muniverzal Mobile Command Deck under logo, prevent overlap.
   ========================================================= */

/* Kill the extra/smaller generated founder strip only */
body .mdeck-demo .cockpit-header::before,
body .mdeck-demo .cockpit-header::after,
body .mdeck-demo .brand-core::after {
  content: none !important;
  display: none !important;
}

/* Header should contain itself and not crash into the next content area */
body .mdeck-demo .cockpit-header {
  position: relative !important;
  overflow: visible !important;
  min-height: 210px !important;
  padding-top: 14px !important;
  padding-bottom: 18px !important;
  align-items: flex-start !important;
}

/* Main brand stack */
body .mdeck-demo .brand-core {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: center !important;
  gap: 7px !important;
  padding: 0 8px !important;
  box-sizing: border-box !important;
  z-index: 2 !important;
}

/* Keep this one: center gold founder bar */
body .mdeck-demo .founder-preview-banner {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
  min-height: 28px !important;
  max-width: 92% !important;
  padding: 7px 14px !important;
  margin: 0 auto 2px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(250, 204, 21, 0.62) !important;
  background: linear-gradient(180deg, rgba(75, 44, 8, 0.96), rgba(18, 12, 4, 0.98)) !important;
  color: #fcd34d !important;
  font-size: 0.66rem !important;
  font-weight: 950 !important;
  letter-spacing: 0.13em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  box-shadow: 0 0 18px rgba(250, 204, 21, 0.18) !important;
}

/* Bigger official logo banner */
body .mdeck-demo .mdeck-banner-shell {
  width: 100% !important;
  max-width: 390px !important;
  height: 96px !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

body .mdeck-demo .mdeck-banner-image {
  display: block !important;
  width: 112% !important;
  max-width: none !important;
  height: auto !important;
  object-fit: contain !important;
  transform: scale(1.08) !important;
  clip-path: inset(6px 10px 6px 10px round 18px) !important;
  filter:
    drop-shadow(0 0 18px rgba(56, 189, 248, 0.28))
    drop-shadow(0 0 14px rgba(250, 204, 21, 0.18)) !important;
}

/* Blue label goes under the logo */
body .mdeck-demo .eyebrow-under-logo {
  order: 3 !important;
  margin: -2px 0 0 !important;
  color: #38bdf8 !important;
  font-size: 0.72rem !important;
  font-weight: 950 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
}

/* Keep subline quiet and below the blue label */
body .mdeck-demo .brand-core .subline {
  order: 5 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #cbd5e1 !important;
  font-size: 0.70rem !important;
  font-weight: 800 !important;
}

/* Hidden text title for accessibility only */
body .mdeck-demo h1.sr-only,
body .mdeck-demo .sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Protect side toggles from getting buried */
body .mdeck-demo .cockpit-header button,
body .mdeck-demo .header-side,
body .mdeck-demo .side-toggle,
body .mdeck-demo .identity-toggle,
body .mdeck-demo .orb-toggle {
  z-index: 6 !important;
}

/* Give content below header breathing room */
body .mdeck-demo .cockpit-content {
  position: relative !important;
  z-index: 1 !important;
  margin-top: 8px !important;
}

/* Mobile fit */
@media (max-width: 480px) {
  body .mdeck-demo .cockpit-header {
    min-height: 196px !important;
    padding-top: 12px !important;
    padding-bottom: 14px !important;
  }

  body .mdeck-demo .founder-preview-banner {
    font-size: 0.58rem !important;
    padding: 6px 10px !important;
    letter-spacing: 0.11em !important;
  }

  body .mdeck-demo .mdeck-banner-shell {
    max-width: 350px !important;
    height: 88px !important;
  }

  body .mdeck-demo .mdeck-banner-image {
    width: 116% !important;
    transform: scale(1.10) !important;
  }

  body .mdeck-demo .eyebrow-under-logo {
    font-size: 0.64rem !important;
    letter-spacing: 0.13em !important;
  }

  body .mdeck-demo .brand-core .subline {
    font-size: 0.66rem !important;
  }
}


/* =========================================================
   R24F-G HEADER HARD RESET
   Purpose: strip header to logo + VE/ID toggles + one gold founder bar.
   ========================================================= */

/* Kill all generated duplicate header labels */
body .mdeck-demo .cockpit-header::before,
body .mdeck-demo .cockpit-header::after,
body .mdeck-demo .brand-core::before,
body .mdeck-demo .brand-core::after {
  content: none !important;
  display: none !important;
}

/* Lock header area so it does not overlap content */
body .mdeck-demo .cockpit-header {
  position: relative !important;
  min-height: 210px !important;
  height: 210px !important;
  padding: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: center !important;
}

/* Keep VE / ID toggles above the logo */
body .mdeck-demo .cockpit-header button,
body .mdeck-demo .header-side,
body .mdeck-demo .side-toggle,
body .mdeck-demo .identity-toggle,
body .mdeck-demo .orb-toggle {
  position: relative !important;
  z-index: 30 !important;
}

/* Brand area becomes controlled overlay */
body .mdeck-demo .brand-core {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-direction: column !important;
  padding: 12px 58px 10px !important;
  box-sizing: border-box !important;
  pointer-events: none !important;
}

/* Big official logo behind the toggles */
body .mdeck-demo .mdeck-banner-shell {
  width: 100% !important;
  max-width: 390px !important;
  height: 145px !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

body .mdeck-demo .mdeck-banner-image {
  display: block !important;
  width: 128% !important;
  max-width: none !important;
  height: auto !important;
  object-fit: contain !important;
  transform: scale(1.13) !important;
  clip-path: inset(5px 8px 5px 8px round 18px) !important;
  filter:
    drop-shadow(0 0 20px rgba(56, 189, 248, 0.30))
    drop-shadow(0 0 16px rgba(250, 204, 21, 0.18)) !important;
}

/* Keep only the gold founder bar */
body .mdeck-demo .founder-preview-banner {
  position: absolute !important;
  left: 50% !important;
  bottom: 16px !important;
  transform: translateX(-50%) !important;
  z-index: 20 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: max-content !important;
  max-width: calc(100% - 32px) !important;
  min-height: 30px !important;
  padding: 7px 14px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(250, 204, 21, 0.68) !important;
  background: linear-gradient(180deg, rgba(75, 44, 8, 0.96), rgba(18, 12, 4, 0.98)) !important;
  color: #fcd34d !important;
  font-size: 0.64rem !important;
  font-weight: 950 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  box-shadow: 0 0 20px rgba(250, 204, 21, 0.18) !important;
}

/* Hide any leftover header text */
body .mdeck-demo .brand-core .eyebrow,
body .mdeck-demo .brand-core .eyebrow-under-logo,
body .mdeck-demo .brand-core .subline {
  display: none !important;
}

/* Accessibility title stays hidden */
body .mdeck-demo h1.sr-only,
body .mdeck-demo .sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Content starts after the locked header */
body .mdeck-demo .cockpit-content {
  position: relative !important;
  z-index: 1 !important;
  margin-top: 10px !important;
}

@media (max-width: 480px) {
  body .mdeck-demo .cockpit-header {
    min-height: 196px !important;
    height: 196px !important;
  }

  body .mdeck-demo .brand-core {
    padding-left: 52px !important;
    padding-right: 52px !important;
  }

  body .mdeck-demo .mdeck-banner-shell {
    height: 132px !important;
    max-width: 360px !important;
  }

  body .mdeck-demo .mdeck-banner-image {
    width: 136% !important;
    transform: scale(1.16) !important;
  }

  body .mdeck-demo .founder-preview-banner {
    bottom: 14px !important;
    font-size: 0.56rem !important;
    padding: 6px 10px !important;
    letter-spacing: 0.10em !important;
  }
}


/* =========================================================
   R24F-H HERO LOGO + BOTTOM TOGGLES
   Purpose: scale the logo up and dock VE / ID beside
   the founder preview bar at the bottom corners.
   ========================================================= */

body .mdeck-demo .cockpit-header {
  min-height: 230px !important;
  height: 230px !important;
  overflow: hidden !important;
  position: relative !important;
}

/* Bigger hero logo */
body .mdeck-demo .brand-core {
  padding: 8px 18px 12px !important;
}

body .mdeck-demo .mdeck-banner-shell {
  max-width: 430px !important;
  height: 165px !important;
  margin: 0 auto !important;
}

body .mdeck-demo .mdeck-banner-image {
  width: 148% !important;
  transform: scale(1.18) !important;
  clip-path: inset(4px 6px 4px 6px round 18px) !important;
}

/* Founder bar stays centered at bottom */
body .mdeck-demo .founder-preview-banner {
  left: 50% !important;
  bottom: 16px !important;
  transform: translateX(-50%) !important;
  z-index: 22 !important;
}

/* Move header toggles to bottom corners */
body .mdeck-demo .cockpit-header > button:first-of-type,
body .mdeck-demo .cockpit-header .header-side:first-of-type,
body .mdeck-demo .cockpit-header .side-toggle:first-of-type {
  position: absolute !important;
  left: 18px !important;
  right: auto !important;
  top: auto !important;
  bottom: 14px !important;
  z-index: 24 !important;
}

body .mdeck-demo .cockpit-header > button:last-of-type,
body .mdeck-demo .cockpit-header .header-side:last-of-type,
body .mdeck-demo .cockpit-header .side-toggle:last-of-type,
body .mdeck-demo .cockpit-type {
  position: absolute !important;
  right: 18px !important;
  left: auto !important;
  top: auto !important;
  bottom: 14px !important;
  z-index: 24 !important;
}

/* Make sure they sit visually next to the founder bar */
body .mdeck-demo .cockpit-header button,
body .mdeck-demo .cockpit-header .header-side,
body .mdeck-demo .cockpit-header .side-toggle,
body .mdeck-demo .cockpit-header .identity-toggle {
  margin-top: 0 !important;
}

/* Mobile fit */
@media (max-width: 480px) {
  body .mdeck-demo .cockpit-header {
    min-height: 212px !important;
    height: 212px !important;
  }

  body .mdeck-demo .mdeck-banner-shell {
    max-width: 390px !important;
    height: 150px !important;
  }

  body .mdeck-demo .mdeck-banner-image {
    width: 154% !important;
    transform: scale(1.20) !important;
  }

  body .mdeck-demo .founder-preview-banner {
    bottom: 14px !important;
  }

  body .mdeck-demo .cockpit-header > button:first-of-type,
  body .mdeck-demo .cockpit-header .header-side:first-of-type,
  body .mdeck-demo .cockpit-header .side-toggle:first-of-type {
    left: 14px !important;
    bottom: 12px !important;
  }

  body .mdeck-demo .cockpit-header > button:last-of-type,
  body .mdeck-demo .cockpit-header .header-side:last-of-type,
  body .mdeck-demo .cockpit-header .side-toggle:last-of-type,
  body .mdeck-demo .cockpit-type {
    right: 14px !important;
    bottom: 12px !important;
  }
}

/* =========================================================
   R24F-I FIT FULL LOGO TOP
   Purpose: show the entire M-Deck banner full-width at the
   top of the header without cropping the logo.
   ========================================================= */

/* Remove stray generated top founder strip if any remains */
body .mdeck-demo .cockpit-header::before,
body .mdeck-demo .cockpit-header::after,
body .mdeck-demo .brand-core::before,
body .mdeck-demo .brand-core::after {
  content: none !important;
  display: none !important;
}

/* Header stays locked, but gives logo enough top space */
body .mdeck-demo .cockpit-header {
  height: 232px !important;
  min-height: 232px !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Brand stack starts at the top */
body .mdeck-demo .brand-core {
  inset: 0 !important;
  padding: 18px 12px 12px !important;
  justify-content: flex-start !important;
  align-items: center !important;
}

/* Full logo visible, centered at top */
body .mdeck-demo .mdeck-banner-shell {
  width: 100% !important;
  max-width: calc(100% - 18px) !important;
  height: 142px !important;
  margin: 0 auto !important;
  overflow: visible !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
}

/* No crop, no excessive zoom */
body .mdeck-demo .mdeck-banner-image {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  transform: none !important;
  clip-path: none !important;
  object-fit: contain !important;
  object-position: top center !important;
}

/* Founder bar stays bottom center */
body .mdeck-demo .founder-preview-banner {
  bottom: 18px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 22 !important;
}

/* Toggles stay bottom left / right beside founder bar */
body .mdeck-demo .cockpit-header > button:first-of-type,
body .mdeck-demo .cockpit-header .header-side:first-of-type,
body .mdeck-demo .cockpit-header .side-toggle:first-of-type {
  left: 18px !important;
  bottom: 14px !important;
  top: auto !important;
  right: auto !important;
  z-index: 24 !important;
}

body .mdeck-demo .cockpit-header > button:last-of-type,
body .mdeck-demo .cockpit-header .header-side:last-of-type,
body .mdeck-demo .cockpit-header .side-toggle:last-of-type,
body .mdeck-demo .cockpit-type {
  right: 18px !important;
  bottom: 14px !important;
  top: auto !important;
  left: auto !important;
  z-index: 24 !important;
}

@media (max-width: 480px) {
  body .mdeck-demo .cockpit-header {
    height: 218px !important;
    min-height: 218px !important;
  }

  body .mdeck-demo .brand-core {
    padding: 16px 10px 10px !important;
  }

  body .mdeck-demo .mdeck-banner-shell {
    max-width: calc(100% - 14px) !important;
    height: 132px !important;
  }

  body .mdeck-demo .founder-preview-banner {
    bottom: 16px !important;
  }

  body .mdeck-demo .cockpit-header > button:first-of-type,
  body .mdeck-demo .cockpit-header .header-side:first-of-type,
  body .mdeck-demo .cockpit-header .side-toggle:first-of-type {
    left: 14px !important;
    bottom: 12px !important;
  }

  body .mdeck-demo .cockpit-header > button:last-of-type,
  body .mdeck-demo .cockpit-header .header-side:last-of-type,
  body .mdeck-demo .cockpit-header .side-toggle:last-of-type,
  body .mdeck-demo .cockpit-type {
    right: 14px !important;
    bottom: 12px !important;
  }
}


/* =========================================================
   R24F-K PIN LOGO AS HEADER BACKGROUND LAYER
   Purpose: stop treating the banner like normal content.
   The logo is now pinned to the top/left/right of header.
   ========================================================= */

/* Header is the frame */
body .mdeck-demo .cockpit-header {
  position: relative !important;
  height: 228px !important;
  min-height: 228px !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Actual logo layer: flush top, flush sides */
body .mdeck-demo .mdeck-header-logo-bg {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 132px !important;
  z-index: 1 !important;
  background-image: url("./assets/brand/omdl-official-mdeck-logo.png") !important;
  background-repeat: no-repeat !important;
  background-position: top center !important;
  background-size: 100% auto !important;
  pointer-events: none !important;
}

/* Hide old logo image box so it stops creating margin/spacing */
body .mdeck-demo .mdeck-banner-shell,
body .mdeck-demo .mdeck-banner-image {
  display: none !important;
}

/* Keep brand layer from adding unwanted spacing */
body .mdeck-demo .brand-core {
  position: absolute !important;
  inset: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  z-index: 10 !important;
}

/* Keep the top founder banner in front of the logo */
body .mdeck-demo .founder-preview-banner {
  position: absolute !important;
  top: 6px !important;
  left: 50% !important;
  bottom: auto !important;
  transform: translateX(-50%) !important;
  z-index: 30 !important;
}

/* Keep VE / ID and bottom founder bar in front */
body .mdeck-demo .cockpit-header button,
body .mdeck-demo .cockpit-header .header-side,
body .mdeck-demo .cockpit-header .side-toggle,
body .mdeck-demo .cockpit-header .identity-toggle,
body .mdeck-demo .orb-toggle {
  z-index: 35 !important;
}

/* Hide leftover text */
body .mdeck-demo .brand-core .eyebrow,
body .mdeck-demo .brand-core .eyebrow-under-logo,
body .mdeck-demo .brand-core .subline {
  display: none !important;
}

/* Mobile */
@media (max-width: 480px) {
  body .mdeck-demo .cockpit-header {
    height: 214px !important;
    min-height: 214px !important;
  }

  body .mdeck-demo .mdeck-header-logo-bg {
    height: 124px !important;
    background-size: 100% auto !important;
  }

  body .mdeck-demo .founder-preview-banner {
    top: 5px !important;
  }
}


/* =========================================================
   R24F-T EXACT UNIFIED HEADER MASS LOCK

   Purpose:
   - Preserve the M-Deck banner and top preview label.
   - Compress the header container around the banner,
     Muniverzal Command Station, VE, and ID.
   - Remove excess navy space.
   - Force Command Station to black onyx and silver.
   - Override duplicated legacy R24F-L sizing rules.
   ========================================================= */

/* Shrink the entire header mass instead of redesigning it. */
body .mdeck-demo > .cockpit-header {
  height: 190px !important;
  min-height: 190px !important;
  max-height: 190px !important;
  overflow: hidden !important;
}

/* Exact Command Station target — no broad header selectors. */
body .mdeck-demo > .cockpit-header
.brand-core
.founder-preview-banner.mdeck-command-station-badge[data-command-badge="command-station"] {
  position: absolute !important;

  top: 116px !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;

  transform: translateX(-50%) !important;

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

  width: fit-content !important;
  max-width: calc(100% - 150px) !important;
  min-height: 32px !important;

  margin: 0 !important;
  padding: 0.46rem 1.08rem !important;

  border: 1px solid rgba(205, 215, 228, 0.72) !important;
  border-radius: 999px !important;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.14) 0%,
      rgba(255,255,255,0.035) 30%,
      rgba(0,0,0,0.35) 100%
    ),
    linear-gradient(
      135deg,
      #171a21 0%,
      #030407 48%,
      #11151c 100%
    ) !important;

  color: #e7ecf3 !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.28),
    inset 0 -1px 0 rgba(0,0,0,0.9),
    0 0 0 1px rgba(255,255,255,0.04),
    0 8px 18px rgba(0,0,0,0.42),
    0 0 14px rgba(186,205,226,0.10) !important;

  text-shadow:
    0 1px 0 rgba(0,0,0,0.9),
    0 0 8px rgba(215,228,242,0.14) !important;

  font-size: 0.72rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.105em !important;
  line-height: 1 !important;
  white-space: nowrap !important;

  z-index: 40 !important;
}

/* Remove the old gold decorative layers. */
body .mdeck-demo > .cockpit-header
.brand-core
.founder-preview-banner.mdeck-command-station-badge::before,
body .mdeck-demo > .cockpit-header
.brand-core
.founder-preview-banner.mdeck-command-station-badge::after {
  content: none !important;
  display: none !important;
}

/* Keep VE and ID inside the compressed header mass. */
body .mdeck-demo > .cockpit-header > .top-toggle-left {
  top: auto !important;
  right: auto !important;
  bottom: 10px !important;
  left: 18px !important;
  z-index: 41 !important;
}

body .mdeck-demo > .cockpit-header > .top-toggle-right {
  top: auto !important;
  right: 18px !important;
  bottom: 10px !important;
  left: auto !important;
  z-index: 41 !important;
}

/* Tablet and narrow preview widths. */
@media (max-width: 760px) {
  body .mdeck-demo > .cockpit-header {
    height: 178px !important;
    min-height: 178px !important;
    max-height: 178px !important;
  }

  body .mdeck-demo > .cockpit-header
  .brand-core
  .founder-preview-banner.mdeck-command-station-badge[data-command-badge="command-station"] {
    top: 103px !important;
    max-width: calc(100% - 128px) !important;
    min-height: 30px !important;
    padding: 0.42rem 0.82rem !important;
    font-size: 0.66rem !important;
    letter-spacing: 0.075em !important;
  }

  body .mdeck-demo > .cockpit-header > .top-toggle-left,
  body .mdeck-demo > .cockpit-header > .top-toggle-right {
    bottom: 8px !important;
  }
}

/* Actual phone viewport used by the MDEC mobile preview. */
@media (max-width: 480px) {
  body .mdeck-demo > .cockpit-header {
    height: 170px !important;
    min-height: 170px !important;
    max-height: 170px !important;
  }

  body .mdeck-demo > .cockpit-header
  .brand-core
  .founder-preview-banner.mdeck-command-station-badge[data-command-badge="command-station"] {
    top: 98px !important;
    max-width: calc(100% - 118px) !important;
    min-height: 29px !important;
    padding: 0.4rem 0.72rem !important;
    font-size: 0.63rem !important;
    letter-spacing: 0.065em !important;
  }

  body .mdeck-demo > .cockpit-header > .top-toggle-left {
    left: 14px !important;
    bottom: 7px !important;
  }

  body .mdeck-demo > .cockpit-header > .top-toggle-right {
    right: 14px !important;
    bottom: 7px !important;
  }
}

/* END R24F-T */

/* =========================================================
   R24F-X CANONICAL WAYFINDING MASTHEAD

   Standard sequence:
   1. Context / status rail
   2. Page identity banner
   3. Ecosystem umbrella banner
   4. Location street-sign row
   5. Page content

   Both banner images must remain fully visible.
   ========================================================= */

/* Release the masthead from legacy fixed-height positioning. */
body .mdeck-demo > .cockpit-header.muniverzal-wayfinding-masthead {
  position: relative !important;

  display: block !important;

  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  margin: 0 10px !important;
  padding: 12px 10px 10px !important;

  overflow: visible !important;
}

/* Preserve the existing preview/status rail layer. */
body .mdeck-demo >
.cockpit-header.muniverzal-wayfinding-masthead
.mdeck-header-logo-bg {
  pointer-events: none !important;
  z-index: 10 !important;
}

/* One deterministic vertical stack. */
body .mdeck-demo >
.cockpit-header.muniverzal-wayfinding-masthead
> .brand-core.masthead-stack {
  position: relative !important;

  inset: auto !important;
  transform: none !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;

  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: visible !important;
  z-index: 20 !important;
}

/* M-Deck page identity banner. */
body .mdeck-demo .masthead-page-banner {
  position: relative !important;

  width: 100% !important;
  height: auto !important;

  margin: 10px 0 6px !important;
  padding: 0 !important;

  overflow: visible !important;
}

body .mdeck-demo .masthead-page-banner
> .mdeck-banner-image {
  position: relative !important;

  inset: auto !important;
  transform: none !important;

  display: block !important;

  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;

  margin: 0 !important;

  object-fit: contain !important;
  object-position: center !important;
}

/* Complete ecosystem umbrella banner — never cropped. */
body .mdeck-demo .masthead-ecosystem-banner {
  position: relative !important;

  width: 100% !important;
  height: auto !important;

  margin: 0 0 8px !important;
  padding: 0 !important;

  overflow: hidden !important;

  border: 1px solid rgba(37, 173, 239, 0.28) !important;
  border-radius: 12px !important;

  background: #020814 !important;

  box-shadow:
    inset 0 0 18px rgba(0, 119, 190, 0.12),
    0 8px 20px rgba(0, 0, 0, 0.32) !important;
}

body .mdeck-demo .masthead-ecosystem-image {
  display: block !important;

  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;

  margin: 0 !important;

  object-fit: contain !important;
  object-position: center !important;
}

/* VE — location street sign — ID. */
body .mdeck-demo .masthead-location-row {
  position: relative !important;

  display: grid !important;
  grid-template-columns: 58px minmax(0, 1fr) 58px !important;
  align-items: center !important;
  gap: 10px !important;

  width: 100% !important;
  min-height: 58px !important;

  margin: 0 !important;
  padding: 0 !important;
}

/* Neutralize old absolute toggle placement. */
body .mdeck-demo .masthead-location-row
> .top-toggle {
  position: relative !important;

  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;

  transform: none !important;

  width: 54px !important;
  height: 54px !important;

  margin: 0 !important;

  align-self: center !important;
  justify-self: center !important;

  z-index: 30 !important;
}

/* Reusable page-location / street-sign badge. */
body .mdeck-demo .masthead-location-badge {
  position: relative !important;

  inset: auto !important;
  transform: none !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  max-width: 360px !important;
  min-height: 38px !important;

  margin: 0 auto !important;
  padding: 0.54rem 0.9rem !important;

  border: 1px solid rgba(218, 226, 238, 0.74) !important;
  border-radius: 999px !important;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.15),
      rgba(255,255,255,0.035) 32%,
      rgba(0,0,0,0.42)
    ),
    linear-gradient(
      135deg,
      #181b22,
      #030407 48%,
      #12161d
    ) !important;

  color: #edf1f6 !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.30),
    inset 0 -1px 0 rgba(0,0,0,0.92),
    0 8px 18px rgba(0,0,0,0.42),
    0 0 14px rgba(191,211,232,0.11) !important;

  text-shadow:
    0 1px 0 rgba(0,0,0,0.92),
    0 0 8px rgba(215,228,242,0.15) !important;

  font-size: clamp(0.62rem, 2vw, 0.76rem) !important;
  font-weight: 900 !important;
  letter-spacing: 0.085em !important;
  line-height: 1.1 !important;
  text-align: center !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;

  z-index: 30 !important;
}

body .mdeck-demo .masthead-location-badge::before,
body .mdeck-demo .masthead-location-badge::after {
  content: none !important;
  display: none !important;
}

/* Phone refinement without cropping either banner. */
@media (max-width: 480px) {
  body .mdeck-demo >
  .cockpit-header.muniverzal-wayfinding-masthead {
    margin-inline: 8px !important;
    padding: 10px 8px 8px !important;
  }

  body .mdeck-demo .masthead-page-banner {
    margin-top: 8px !important;
    margin-bottom: 5px !important;
  }

  body .mdeck-demo .masthead-ecosystem-banner {
    margin-bottom: 7px !important;
    border-radius: 10px !important;
  }

  body .mdeck-demo .masthead-location-row {
    grid-template-columns: 50px minmax(0, 1fr) 50px !important;
    gap: 7px !important;
    min-height: 52px !important;
  }

  body .mdeck-demo .masthead-location-row
  > .top-toggle {
    width: 48px !important;
    height: 48px !important;
  }

  body .mdeck-demo .masthead-location-badge {
    min-height: 34px !important;
    padding: 0.46rem 0.55rem !important;

    font-size: 0.59rem !important;
    letter-spacing: 0.045em !important;
  }
}

/* END R24F-X */

/* =========================================================
   R24F-Y ECOSYSTEM BACKDROP + M-DECK FOREGROUND

   Visual hierarchy:
   - Ecosystem artwork fills the complete rear banner.
   - M-Deck remains fully visible in front.
   - Neither image is cropped.
   - Location street sign remains beneath the composite.
   ========================================================= */

body .mdeck-demo .masthead-composite-banner {
  position: relative !important;

  display: block !important;

  width: 100% !important;
  height: auto !important;

  /*
   * Match the uploaded ecosystem artwork proportions.
   * This reserves enough height to display the complete image.
   */
  aspect-ratio: 2172 / 724 !important;

  margin: 10px 0 8px !important;
  padding: 0 !important;

  overflow: hidden !important;

  border: 1px solid rgba(37, 173, 239, 0.34) !important;
  border-radius: 14px !important;

  background: #020814 !important;

  box-shadow:
    inset 0 0 26px rgba(0, 119, 190, 0.18),
    0 10px 24px rgba(0, 0, 0, 0.38) !important;
}

/* Complete ecosystem artwork — rear layer, never cropped. */
body .mdeck-demo
.masthead-composite-banner
> .masthead-ecosystem-backdrop {
  position: absolute !important;

  inset: 0 !important;

  display: block !important;

  width: 100% !important;
  height: 100% !important;

  margin: 0 !important;

  object-fit: contain !important;
  object-position: center !important;

  opacity: 0.76 !important;

  filter:
    brightness(0.74)
    saturate(1.08)
    contrast(1.04) !important;

  z-index: 1 !important;
}

/* Subtle center shade helps the foreground M-Deck stay readable. */
body .mdeck-demo
.masthead-composite-banner::after {
  content: "" !important;

  position: absolute !important;
  inset: 0 !important;

  pointer-events: none !important;

  background:
    linear-gradient(
      90deg,
      rgba(1, 6, 14, 0.03) 0%,
      rgba(1, 6, 14, 0.20) 34%,
      rgba(1, 6, 14, 0.34) 50%,
      rgba(1, 6, 14, 0.20) 66%,
      rgba(1, 6, 14, 0.03) 100%
    ) !important;

  z-index: 2 !important;
}

/* Official M-Deck banner — foreground identity layer. */
body .mdeck-demo
.masthead-composite-banner
> .mdeck-banner-image.masthead-mdeck-foreground {
  position: absolute !important;

  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;

  transform: translate(-50%, -50%) !important;

  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;

  width: 91% !important;
  max-width: 91% !important;
  height: auto !important;
  max-height: 88% !important;

  margin: 0 !important;

  object-fit: contain !important;
  object-position: center !important;

  filter:
    brightness(1.08)
    contrast(1.08)
    drop-shadow(0 10px 18px rgba(0,0,0,0.70))
    drop-shadow(0 0 9px rgba(19,144,255,0.28)) !important;

  z-index: 3 !important;
}

/* The ecosystem image is no longer a separate stacked banner. */
body .mdeck-demo .masthead-ecosystem-banner {
  display: none !important;
}

/* Keep the street-sign row close to the completed banner. */
body .mdeck-demo .masthead-location-row {
  margin-top: 0 !important;
}

/* Phone fit: both complete images remain visible. */
@media (max-width: 480px) {
  body .mdeck-demo .masthead-composite-banner {
    margin-top: 8px !important;
    margin-bottom: 7px !important;
    border-radius: 11px !important;
  }

  body .mdeck-demo
  .masthead-composite-banner
  > .masthead-ecosystem-backdrop {
    object-fit: contain !important;
    opacity: 0.72 !important;
  }

  body .mdeck-demo
  .masthead-composite-banner
  > .mdeck-banner-image.masthead-mdeck-foreground {
    width: 92% !important;
    max-width: 92% !important;
    max-height: 88% !important;
  }
}

/* END R24F-Y */

/* MDEC PRIMARY MENU R07 VISUAL BLEND START
   Visual treatment only.
   Does not alter carousel behavior, selection, scrolling,
   collapse state, tooltips, icons, or content switching.
   ========================================================== */

.mdeck-demo {
  --mdec-menu-top: rgba(2, 9, 19, .99);
  --mdec-menu-middle: rgba(5, 25, 45, .98);
  --mdec-menu-bottom: rgba(10, 48, 73, .96);
  --mdec-menu-border-top: rgba(31, 76, 106, .68);
  --mdec-menu-border-middle: rgba(70, 216, 255, .52);
  --mdec-menu-border-bottom: rgba(247, 201, 109, .36);
}

/*
 * Keep the host transparent so the primary menu remains
 * visually integrated with the MDEC header and content below.
 */
.cockpit-header.mdec-mobile-header
  .mdec-mobile-header-controls {
  background: transparent !important;
}

/*
 * One exterior border.
 * Darker upper section, lighter lower section.
 */
.mdec-icon-train {
  border: 1px solid transparent !important;

  background:
    linear-gradient(
      180deg,
      var(--mdec-menu-top) 0%,
      var(--mdec-menu-middle) 52%,
      var(--mdec-menu-bottom) 100%
    ) padding-box,

    linear-gradient(
      180deg,
      var(--mdec-menu-border-top) 0%,
      var(--mdec-menu-border-middle) 58%,
      var(--mdec-menu-border-bottom) 100%
    ) border-box !important;

  box-shadow:
    inset 0 14px 24px rgba(0, 0, 0, .26),
    inset 0 -18px 28px rgba(62, 198, 247, .075),
    0 7px 18px rgba(0, 0, 0, .26) !important;
}

/*
 * Preserve the train line and moving light effect,
 * but soften the permanent line when idle.
 */
.mdec-icon-train:not(.is-traveling)::before {
  opacity: .64;
  filter: saturate(.84);
}

/*
 * Slightly blend the icon viewport into the menu surface.
 * No inner border is added.
 */
.mdec-icon-train-viewport {
  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, .10),
      rgba(27, 121, 164, .025)
    );
  border: 0 !important;
  box-shadow: none !important;
}

/*
 * Give the selected readout a subtle environmental glow
 * instead of another visible container.
 */
.mdec-icon-train-readout {
  border: 0 !important;
  border-radius: 999px;
  background:
    radial-gradient(
      ellipse at center,
      rgba(47, 181, 229, .10),
      transparent 72%
    );
  box-shadow: none !important;
}

/*
 * Match the collapse control to the lighter bottom half
 * of the menu so it visually connects to the screen below.
 */
.mdec-icon-train-collapse {
  background:
    linear-gradient(
      180deg,
      rgba(8, 36, 59, .99),
      rgba(10, 48, 73, .99)
    ) !important;

  box-shadow:
    0 6px 10px rgba(0, 0, 0, .27),
    inset 0 0 10px rgba(73, 218, 255, .12) !important;
}

/*
 * Compact mode keeps the same two-tone identity.
 */
.mdec-icon-train.is-collapsed {
  background:
    linear-gradient(
      180deg,
      rgba(2, 9, 19, .99),
      rgba(9, 43, 67, .98)
    ) padding-box,

    linear-gradient(
      180deg,
      rgba(31, 76, 106, .60),
      rgba(70, 216, 255, .48)
    ) border-box !important;
}

/* MDEC PRIMARY MENU R07 VISUAL BLEND END */

/* MDEC PRIMARY MENU R08 ELECTRIC BORDER START
   Visual-only pass.
   Keeps functionality unchanged.
   Adds thin orange / blue / white electric border energy.
   ========================================================== */

.mdeck-demo {
  --mdec-electric-orange-1: rgba(255, 142, 52, .82);
  --mdec-electric-orange-2: rgba(255, 186, 92, .70);
  --mdec-electric-blue-1: rgba(74, 219, 255, .72);
  --mdec-electric-blue-2: rgba(145, 238, 255, .64);
  --mdec-electric-white: rgba(241, 250, 255, .38);
}

/*
 * Keep border thin, but more alive and warmer.
 */
.mdec-icon-train {
  position: relative;
  border: 1px solid transparent !important;

  background:
    linear-gradient(
      180deg,
      var(--mdec-menu-top) 0%,
      var(--mdec-menu-middle) 52%,
      var(--mdec-menu-bottom) 100%
    ) padding-box,

    linear-gradient(
      125deg,
      var(--mdec-electric-orange-1) 0%,
      var(--mdec-electric-orange-2) 18%,
      var(--mdec-electric-white) 34%,
      var(--mdec-electric-blue-2) 52%,
      var(--mdec-electric-blue-1) 68%,
      var(--mdec-electric-white) 82%,
      var(--mdec-electric-orange-1) 100%
    ) border-box !important;

  box-shadow:
    inset 0 14px 24px rgba(0, 0, 0, .24),
    inset 0 -18px 28px rgba(62, 198, 247, .07),
    0 0 10px rgba(255, 151, 64, .12),
    0 0 14px rgba(60, 210, 255, .10),
    0 8px 18px rgba(0, 0, 0, .26) !important;

  animation:
    mdecElectricBorderPulse 4.2s ease-in-out infinite,
    mdecElectricBorderShift 7.5s linear infinite !important;
}

/*
 * Soft star-burn halo around the whole shell.
 * Very subtle so it does not overpower the content.
 */
.mdec-icon-train::before {
  opacity: .58 !important;
  filter: saturate(.95);
}

.mdec-icon-train::after {
  filter: blur(.15px);
}

/*
 * Add a soft outer electric aura without creating a second border.
 */
.mdec-icon-train > .mdec-icon-train-viewport::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 16px;
  pointer-events: none;
  background:
    radial-gradient(
      circle at 18% 50%,
      rgba(255, 149, 58, .10),
      transparent 28%
    ),
    radial-gradient(
      circle at 82% 50%,
      rgba(78, 220, 255, .10),
      transparent 28%
    ),
    radial-gradient(
      circle at 50% 50%,
      rgba(244, 250, 255, .04),
      transparent 46%
    );
  opacity: .9;
}

/*
 * Slightly enrich the active item glow so it matches the orange-blue shell.
 */
.mdec-icon-train-stop.is-active {
  filter:
    drop-shadow(0 0 7px rgba(255, 154, 64, .28))
    drop-shadow(0 0 7px rgba(76, 223, 255, .72))
    drop-shadow(0 0 10px rgba(247, 201, 109, .18));
}

.mdec-icon-train-stop.is-active::before {
  background:
    radial-gradient(
      circle,
      rgba(255, 154, 64, .10),
      rgba(73, 219, 255, .08) 46%,
      transparent 72%
    );
  box-shadow:
    0 0 15px rgba(255, 154, 64, .10),
    0 0 16px rgba(69, 218, 255, .16);
}

/*
 * Match the collapse tab so it feels fused to the new border tone.
 */
.mdec-icon-train-collapse {
  background:
    linear-gradient(
      180deg,
      rgba(13, 44, 67, .99),
      rgba(12, 57, 84, .99)
    ) !important;

  box-shadow:
    0 6px 10px rgba(0, 0, 0, .28),
    inset 0 0 10px rgba(255, 156, 73, .08),
    inset 0 0 10px rgba(73, 218, 255, .10) !important;
}

/*
 * Collapsed mode still keeps the electric shell identity.
 */
.mdec-icon-train.is-collapsed {
  background:
    linear-gradient(
      180deg,
      rgba(2, 9, 19, .99),
      rgba(9, 43, 67, .98)
    ) padding-box,

    linear-gradient(
      125deg,
      rgba(255, 142, 52, .78),
      rgba(245, 248, 255, .30),
      rgba(74, 219, 255, .64),
      rgba(255, 164, 70, .72)
    ) border-box !important;
}

/*
 * Animated star-burn / electric pulse.
 */
@keyframes mdecElectricBorderPulse {
  0%, 100% {
    box-shadow:
      inset 0 14px 24px rgba(0, 0, 0, .24),
      inset 0 -18px 28px rgba(62, 198, 247, .06),
      0 0 8px rgba(255, 151, 64, .10),
      0 0 12px rgba(60, 210, 255, .08),
      0 8px 18px rgba(0, 0, 0, .26);
  }

  50% {
    box-shadow:
      inset 0 14px 24px rgba(0, 0, 0, .22),
      inset 0 -18px 28px rgba(62, 198, 247, .08),
      0 0 11px rgba(255, 151, 64, .16),
      0 0 16px rgba(60, 210, 255, .14),
      0 8px 18px rgba(0, 0, 0, .24);
  }
}

@keyframes mdecElectricBorderShift {
  0% {
    filter: saturate(.98) brightness(.98);
  }

  50% {
    filter: saturate(1.05) brightness(1.01);
  }

  100% {
    filter: saturate(.98) brightness(.98);
  }
}

/* MDEC PRIMARY MENU R08 ELECTRIC BORDER END */

/* MDEC PRIMARY MENU R09 DEEP ELECTRIC BLUE START
   Darker electric-blue balance matching the MDEC robot-eye glow.
   Visual only. Carousel functionality remains unchanged.
   ========================================================== */

.mdeck-demo {
  --mdec-eye-blue-deep: rgba(12, 84, 145, .82);
  --mdec-eye-blue-core: rgba(25, 153, 224, .82);
  --mdec-eye-blue-hot: rgba(79, 217, 255, .68);
  --mdec-eye-blue-white: rgba(210, 245, 255, .34);
  --mdec-electric-orange-deep: rgba(225, 104, 35, .64);
  --mdec-electric-orange-hot: rgba(255, 161, 67, .60);
}

/*
 * Shift the menu shell toward a darker electric-blue identity.
 * Orange remains as a controlled energy accent.
 */
.mdec-icon-train {
  background:
    linear-gradient(
      180deg,
      rgba(1, 8, 18, .995) 0%,
      rgba(3, 22, 42, .99) 44%,
      rgba(5, 45, 75, .985) 100%
    ) padding-box,

    linear-gradient(
      125deg,
      var(--mdec-eye-blue-deep) 0%,
      var(--mdec-eye-blue-core) 22%,
      var(--mdec-eye-blue-white) 39%,
      var(--mdec-eye-blue-hot) 53%,
      var(--mdec-electric-orange-hot) 70%,
      var(--mdec-electric-orange-deep) 84%,
      var(--mdec-eye-blue-core) 100%
    ) border-box !important;

  box-shadow:
    inset 0 16px 26px rgba(0, 0, 0, .32),
    inset 0 -20px 30px rgba(18, 111, 170, .09),
    0 0 8px rgba(18, 112, 181, .18),
    0 0 12px rgba(59, 194, 242, .11),
    0 0 7px rgba(255, 137, 51, .07),
    0 8px 18px rgba(0, 0, 0, .30) !important;

  animation:
    mdecDeepElectricPulse 4.8s ease-in-out infinite,
    mdecDeepElectricShift 8.4s linear infinite !important;
}

/*
 * Darker idle transit line with a sharp electric-blue center.
 */
.mdec-icon-train:not(.is-traveling)::before {
  opacity: .48 !important;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(16, 91, 148, .30) 12%,
      rgba(35, 157, 220, .56) 38%,
      rgba(86, 220, 255, .62) 50%,
      rgba(35, 157, 220, .56) 62%,
      rgba(16, 91, 148, .30) 88%,
      transparent
    ) !important;

  box-shadow:
    0 0 7px rgba(44, 174, 234, .28) !important;
}

/*
 * Traveling energy remains blue-white-orange,
 * but with the blue leading the effect.
 */
.mdec-icon-train.is-traveling::after {
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(22, 113, 183, .80),
      rgba(74, 215, 255, .94),
      rgba(225, 247, 255, .76),
      rgba(255, 150, 56, .62),
      transparent
    ) !important;

  box-shadow:
    0 0 12px rgba(52, 190, 244, .72),
    0 0 7px rgba(255, 137, 51, .18) !important;
}

/*
 * Selected icon now matches the darker blue robot-eye energy.
 */
.mdec-icon-train-stop.is-active {
  filter:
    drop-shadow(0 0 6px rgba(23, 124, 194, .62))
    drop-shadow(0 0 8px rgba(76, 218, 255, .72))
    drop-shadow(0 0 8px rgba(255, 140, 54, .16)) !important;
}

.mdec-icon-train-stop.is-active::before {
  background:
    radial-gradient(
      circle,
      rgba(71, 215, 255, .12),
      rgba(19, 109, 175, .10) 48%,
      rgba(255, 142, 52, .045) 64%,
      transparent 76%
    ) !important;

  box-shadow:
    0 0 14px rgba(28, 135, 203, .18),
    0 0 12px rgba(75, 218, 255, .12) !important;
}

/*
 * Collapse control follows the darker cockpit blue.
 */
.mdec-icon-train-collapse {
  color: rgba(87, 220, 255, .94) !important;

  background:
    linear-gradient(
      180deg,
      rgba(3, 27, 49, .995),
      rgba(5, 56, 88, .995)
    ) !important;

  box-shadow:
    0 6px 10px rgba(0, 0, 0, .31),
    inset 0 0 9px rgba(40, 170, 230, .14),
    inset 0 -5px 10px rgba(255, 137, 51, .04) !important;
}

.mdec-icon-train.is-collapsed {
  background:
    linear-gradient(
      180deg,
      rgba(1, 8, 18, .995),
      rgba(4, 42, 70, .99)
    ) padding-box,

    linear-gradient(
      125deg,
      rgba(11, 79, 137, .82),
      rgba(42, 174, 232, .70),
      rgba(207, 244, 255, .28),
      rgba(255, 146, 56, .46),
      rgba(18, 109, 175, .72)
    ) border-box !important;
}

@keyframes mdecDeepElectricPulse {
  0%, 100% {
    box-shadow:
      inset 0 16px 26px rgba(0, 0, 0, .32),
      inset 0 -20px 30px rgba(18, 111, 170, .075),
      0 0 7px rgba(18, 112, 181, .14),
      0 0 10px rgba(59, 194, 242, .08),
      0 0 6px rgba(255, 137, 51, .05),
      0 8px 18px rgba(0, 0, 0, .30);
  }

  50% {
    box-shadow:
      inset 0 16px 26px rgba(0, 0, 0, .29),
      inset 0 -20px 30px rgba(18, 111, 170, .11),
      0 0 10px rgba(18, 112, 181, .22),
      0 0 14px rgba(59, 194, 242, .14),
      0 0 7px rgba(255, 137, 51, .08),
      0 8px 18px rgba(0, 0, 0, .28);
  }
}

@keyframes mdecDeepElectricShift {
  0%, 100% {
    filter: saturate(.98) brightness(.96);
  }

  50% {
    filter: saturate(1.07) brightness(1.00);
  }
}

/* MDEC PRIMARY MENU R09 DEEP ELECTRIC BLUE END */

/* MDEC PRIMARY MENU R10 ONYX METEORITE START
   Onyx / meteorite / aluminum-grade steel surface.
   Visual-only override. No carousel behavior is modified.
   ========================================================== */

/*
 * Dark onyx cockpit surface with a subtle metallic lower tone.
 * The second background layer remains the thin electric border.
 */
.mdec-icon-train {
  background:
    radial-gradient(
      ellipse at 50% -20%,
      rgba(38, 92, 128, .13),
      transparent 48%
    ),

    linear-gradient(
      108deg,
      transparent 0%,
      rgba(195, 219, 232, .022) 30%,
      rgba(183, 211, 226, .055) 46%,
      transparent 60%
    ),

    linear-gradient(
      180deg,
      rgba(1, 3, 7, .998) 0%,
      rgba(4, 8, 13, .995) 34%,
      rgba(7, 14, 20, .992) 68%,
      rgba(9, 24, 33, .988) 100%
    ) padding-box,

    linear-gradient(
      125deg,
      rgba(12, 84, 145, .84) 0%,
      rgba(25, 153, 224, .80) 22%,
      rgba(203, 242, 255, .32) 39%,
      rgba(73, 216, 255, .66) 54%,
      rgba(255, 157, 61, .58) 70%,
      rgba(219, 92, 28, .58) 84%,
      rgba(18, 108, 174, .74) 100%
    ) border-box !important;

  box-shadow:
    inset 0 18px 28px rgba(0, 0, 0, .48),
    inset 0 -18px 30px rgba(23, 85, 116, .10),
    inset 0 1px 0 rgba(219, 239, 248, .025),
    0 0 8px rgba(17, 111, 180, .15),
    0 0 6px rgba(255, 132, 45, .055),
    0 8px 18px rgba(0, 0, 0, .34) !important;
}

/*
 * Subtle brushed-metal / meteorite surface.
 * No visible inner border is added.
 */
.mdec-icon-train-viewport {
  border: 0 !important;
  box-shadow: none !important;

  background:
    linear-gradient(
      112deg,
      transparent 0%,
      transparent 25%,
      rgba(180, 206, 220, .028) 39%,
      rgba(221, 238, 246, .040) 47%,
      transparent 58%,
      transparent 100%
    ),

    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, .009) 0,
      rgba(255, 255, 255, .009) 1px,
      transparent 1px,
      transparent 5px
    ),

    radial-gradient(
      ellipse at center,
      rgba(25, 92, 126, .045),
      transparent 72%
    ) !important;
}

/*
 * Increase inactive icon visibility against the onyx surface
 * without competing with the active MVP.
 */
.mdec-icon-train-stop {
  color: rgba(150, 185, 208, .72);
  opacity: .74;
}

.mdec-icon-train-stop:hover,
.mdec-icon-train-stop:focus-visible {
  color: rgba(92, 221, 255, .96);
  opacity: 1;
}

/*
 * Active MVP retains orange-gold selection energy,
 * supported by the darker robot-eye blue glow.
 */
.mdec-icon-train-stop.is-active {
  color: rgba(255, 194, 93, .98) !important;
  opacity: 1 !important;

  filter:
    drop-shadow(0 0 5px rgba(20, 114, 184, .62))
    drop-shadow(0 0 8px rgba(74, 217, 255, .64))
    drop-shadow(0 0 7px rgba(255, 145, 49, .22)) !important;
}

/*
 * Labels remain small but become more legible.
 */
.mdec-icon-train-label {
  text-shadow:
    0 1px 2px rgba(0, 0, 0, .96),
    0 0 5px rgba(26, 129, 190, .14);
}

.mdec-icon-train-readout strong {
  color: rgba(255, 194, 93, .98) !important;

  text-shadow:
    0 1px 2px rgba(0, 0, 0, .98),
    0 0 7px rgba(255, 143, 48, .15);
}

.mdec-icon-train-readout span {
  color: rgba(91, 218, 255, .94) !important;

  text-shadow:
    0 1px 2px rgba(0, 0, 0, .98),
    0 0 6px rgba(47, 181, 235, .18);
}

/*
 * Collapsed mode uses the same onyx-metal material.
 */
.mdec-icon-train.is-collapsed {
  background:
    linear-gradient(
      180deg,
      rgba(1, 3, 7, .998),
      rgba(7, 18, 26, .994)
    ) padding-box,

    linear-gradient(
      125deg,
      rgba(11, 78, 137, .82),
      rgba(43, 174, 232, .68),
      rgba(203, 242, 255, .27),
      rgba(255, 146, 53, .48),
      rgba(17, 105, 171, .72)
    ) border-box !important;
}

/* MDEC PRIMARY MENU R10 ONYX METEORITE END */

/* MDEC PRIMARY MENU R11 DARK BALANCED ONYX START
   Makes the bottom as dark as the top.
   Keeps a restrained electric-blue gradient in the center.
   Visual only. No carousel behavior is modified.
   ========================================================== */

.mdec-icon-train {
  background:
    /*
     * Narrow blue atmospheric glow through the center,
     * directly behind the traveling electrical effect.
     */
    radial-gradient(
      ellipse at 50% 48%,
      rgba(20, 104, 163, .105) 0%,
      rgba(11, 64, 105, .055) 31%,
      transparent 62%
    ) padding-box,

    /*
     * Symmetrical onyx surface:
     * top and bottom are now equally dark.
     */
    linear-gradient(
      180deg,
      rgba(1, 3, 7, .999) 0%,
      rgba(2, 6, 11, .998) 25%,
      rgba(5, 15, 24, .997) 48%,
      rgba(4, 12, 20, .997) 56%,
      rgba(2, 6, 11, .998) 76%,
      rgba(1, 3, 7, .999) 100%
    ) padding-box,

    /*
     * Preserve the thin electric orange-blue outer border.
     */
    linear-gradient(
      125deg,
      rgba(12, 84, 145, .84) 0%,
      rgba(25, 153, 224, .80) 22%,
      rgba(203, 242, 255, .30) 39%,
      rgba(73, 216, 255, .66) 54%,
      rgba(255, 157, 61, .58) 70%,
      rgba(219, 92, 28, .58) 84%,
      rgba(18, 108, 174, .74) 100%
    ) border-box !important;

  /*
   * Symmetrical shadows prevent the bottom from appearing
   * lighter than the top.
   */
  box-shadow:
    inset 0 17px 27px rgba(0, 0, 0, .48),
    inset 0 -17px 27px rgba(0, 0, 0, .48),
    inset 0 0 28px rgba(18, 84, 128, .055),
    inset 0 1px 0 rgba(217, 239, 249, .020),
    0 0 8px rgba(17, 111, 180, .14),
    0 0 6px rgba(255, 132, 45, .05),
    0 8px 18px rgba(0, 0, 0, .35) !important;
}

/*
 * Keep the brushed-metal texture, but center the blue
 * reflection instead of allowing it to brighten the bottom.
 */
.mdec-icon-train-viewport {
  background:
    linear-gradient(
      112deg,
      transparent 0%,
      transparent 31%,
      rgba(191, 218, 231, .020) 42%,
      rgba(221, 239, 247, .032) 49%,
      transparent 59%,
      transparent 100%
    ),

    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, .007) 0,
      rgba(255, 255, 255, .007) 1px,
      transparent 1px,
      transparent 5px
    ),

    radial-gradient(
      ellipse at 50% 48%,
      rgba(28, 117, 170, .050),
      transparent 66%
    ) !important;
}

/*
 * Remove any lower-panel glow from the readout area.
 */
.mdec-icon-train-readout {
  background:
    radial-gradient(
      ellipse at center,
      rgba(27, 122, 179, .055),
      transparent 70%
    ) !important;

  box-shadow: none !important;
}

/*
 * The collapse control now connects to the darker lower edge.
 */
.mdec-icon-train-collapse {
  background:
    linear-gradient(
      180deg,
      rgba(3, 17, 29, .998),
      rgba(1, 6, 11, .999)
    ) !important;

  box-shadow:
    0 6px 10px rgba(0, 0, 0, .34),
    inset 0 0 8px rgba(34, 153, 214, .09),
    inset 0 -4px 8px rgba(0, 0, 0, .30) !important;
}

/*
 * Keep the collapsed state equally dark at both edges.
 */
.mdec-icon-train.is-collapsed {
  background:
    linear-gradient(
      180deg,
      rgba(1, 3, 7, .999) 0%,
      rgba(4, 13, 21, .997) 50%,
      rgba(1, 3, 7, .999) 100%
    ) padding-box,

    linear-gradient(
      125deg,
      rgba(11, 78, 137, .82),
      rgba(43, 174, 232, .68),
      rgba(203, 242, 255, .27),
      rgba(255, 146, 53, .48),
      rgba(17, 105, 171, .72)
    ) border-box !important;
}

/* MDEC PRIMARY MENU R11 DARK BALANCED ONYX END */

/* MDEC BEZEL R12 TEXTURED ONYX START
   Textured structural frame surrounding the cockpit.
   Visual only. Does not alter menu or application behavior.
   ========================================================== */

/*
 * Main perimeter bezel:
 * nearly black graphite with a restrained deep-blue inner seam.
 * The actual border stays thin.
 */
.ship-frame {
  border: 1px solid rgba(27, 35, 42, .96) !important;

  background: transparent !important;

  box-shadow:
    /* Hard black outer edge */
    0 0 0 1px rgba(0, 0, 0, .82),

    /* Very thin metallic graphite reflection */
    inset 0 0 0 1px rgba(96, 112, 122, .075),

    /* Deep electric-blue inner seam */
    inset 0 0 0 2px rgba(15, 73, 107, .095),

    /* Low-level cockpit depth */
    inset 0 0 34px rgba(2, 10, 17, .31),

    /* Exterior shadow */
    0 0 46px rgba(0, 0, 0, .42) !important;
}

/*
 * Side rails connecting the fastener system.
 * Textured gunmetal rather than bright gold or flat black.
 */
.ship-frame::before,
.ship-frame::after {
  border: 1px solid rgba(35, 45, 52, .94) !important;

  background:
    /*
     * Fine brushed-metal grain.
     */
    repeating-linear-gradient(
      90deg,
      rgba(210, 225, 232, .018) 0,
      rgba(210, 225, 232, .018) 1px,
      transparent 1px,
      transparent 4px
    ),

    /*
     * Slight meteorite variation through the rail.
     */
    linear-gradient(
      180deg,
      rgba(2, 4, 7, .99) 0%,
      rgba(15, 20, 24, .99) 14%,
      rgba(5, 8, 11, .995) 34%,
      rgba(17, 23, 27, .99) 52%,
      rgba(5, 9, 13, .995) 72%,
      rgba(12, 19, 24, .99) 87%,
      rgba(2, 4, 7, .99) 100%
    ) !important;

  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, .72),
    inset 0 0 8px rgba(82, 103, 114, .09),
    inset 0 0 10px rgba(15, 77, 112, .075),
    0 0 8px rgba(0, 0, 0, .48) !important;
}

/*
 * Left rail gets a faint highlight along its inside edge.
 */
.ship-frame::before {
  border-right-color: rgba(29, 92, 126, .28) !important;
}

/*
 * Right rail mirrors the same restrained inner reflection.
 */
.ship-frame::after {
  border-left-color: rgba(29, 92, 126, .28) !important;
}

/*
 * Preserve the material on smaller screens without making
 * the perimeter visually heavy.
 */
@media (max-width: 430px) {
  .ship-frame {
    border-color: rgba(24, 32, 38, .94) !important;

    box-shadow:
      0 0 0 1px rgba(0, 0, 0, .78),
      inset 0 0 0 1px rgba(86, 103, 114, .065),
      inset 0 0 0 2px rgba(14, 70, 103, .085),
      inset 0 0 26px rgba(2, 10, 17, .27),
      0 0 34px rgba(0, 0, 0, .38) !important;
  }

  .ship-frame::before,
  .ship-frame::after {
    background:
      repeating-linear-gradient(
        90deg,
        rgba(210, 225, 232, .015) 0,
        rgba(210, 225, 232, .015) 1px,
        transparent 1px,
        transparent 4px
      ),
      linear-gradient(
        180deg,
        rgba(2, 4, 7, .99),
        rgba(13, 19, 23, .99) 50%,
        rgba(2, 4, 7, .99)
      ) !important;
  }
}

/* MDEC BEZEL R12 TEXTURED ONYX END */

/* MDEC SIGNAL RAILS R13 START
   Styles the structural rails above and below VAE / OPS.
   Visual only. No positioning or behavior is modified.
   ========================================================== */

/*
 * Top and bottom perimeter lines:
 * dark structural metal with a restrained blue reflection.
 */
.ship-frame {
  border-top-color: rgba(22, 78, 108, .34) !important;
  border-bottom-color: rgba(18, 66, 94, .30) !important;
  border-left-color: rgba(22, 29, 34, .96) !important;
  border-right-color: rgba(22, 29, 34, .96) !important;
}

/*
 * Vertical signal rails extending above and below
 * the VAE and OPS fasteners.
 */
.ship-frame::before,
.ship-frame::after {
  border-color: rgba(29, 38, 44, .96) !important;

  background:
    /*
     * Thin deep-electric-blue conductor running
     * through the center of each rail.
     */
    linear-gradient(
      90deg,
      transparent 0%,
      transparent 40%,
      rgba(15, 72, 105, .18) 45%,
      rgba(48, 161, 210, .27) 49%,
      rgba(82, 216, 255, .30) 50%,
      rgba(48, 161, 210, .27) 51%,
      rgba(15, 72, 105, .18) 55%,
      transparent 60%,
      transparent 100%
    ),

    /*
     * Very faint orange energy reflection near
     * the VAE / OPS fastener position.
     */
    radial-gradient(
      ellipse at 50% 48%,
      rgba(255, 145, 52, .075),
      transparent 17%
    ),

    /*
     * Brushed graphite structure.
     */
    repeating-linear-gradient(
      90deg,
      rgba(210, 225, 232, .013) 0,
      rgba(210, 225, 232, .013) 1px,
      transparent 1px,
      transparent 4px
    ),

    linear-gradient(
      180deg,
      rgba(1, 3, 6, .995) 0%,
      rgba(10, 15, 18, .993) 18%,
      rgba(3, 6, 9, .997) 40%,
      rgba(12, 18, 22, .992) 50%,
      rgba(3, 6, 9, .997) 60%,
      rgba(10, 15, 18, .993) 82%,
      rgba(1, 3, 6, .995) 100%
    ) !important;

  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, .72),
    inset 0 0 9px rgba(31, 123, 165, .075),
    0 0 7px rgba(0, 0, 0, .46) !important;
}

/*
 * Inner-facing edge reflections.
 */
.ship-frame::before {
  border-right-color: rgba(37, 132, 174, .31) !important;
}

.ship-frame::after {
  border-left-color: rgba(37, 132, 174, .31) !important;
}

/*
 * Make the VAE and OPS fasteners feel physically mounted
 * onto the darker signal rails.
 */
.edge-toggle {
  border-color: rgba(38, 70, 86, .76) !important;

  background:
    linear-gradient(
      180deg,
      rgba(7, 18, 25, .985),
      rgba(2, 7, 11, .995)
    ) !important;

  box-shadow:
    inset 0 0 13px rgba(35, 139, 185, .09),
    inset 0 0 0 1px rgba(0, 0, 0, .48),
    0 0 9px rgba(0, 0, 0, .38) !important;
}

/*
 * When VAE opens, only the left rail receives
 * a restrained robot-eye electrical charge.
 */
.mdeck-demo[data-left="open"] .edge-left,
.mdeck-demo[data-left="open"] .ship-frame::before {
  border-color: rgba(70, 205, 249, .48) !important;

  box-shadow:
    inset 0 0 11px rgba(42, 166, 221, .15),
    0 0 10px rgba(47, 177, 231, .14),
    0 0 6px rgba(255, 143, 49, .055) !important;
}

/*
 * When OPS opens, only the right rail receives
 * the corresponding electrical charge.
 */
.mdeck-demo[data-right="open"] .edge-right,
.mdeck-demo[data-right="open"] .ship-frame::after {
  border-color: rgba(70, 205, 249, .48) !important;

  box-shadow:
    inset 0 0 11px rgba(42, 166, 221, .15),
    0 0 10px rgba(47, 177, 231, .14),
    0 0 6px rgba(255, 143, 49, .055) !important;
}

/* MDEC SIGNAL RAILS R13 END */

/* ==========================================================
   MDEC UNIFIED COMPONENT SYSTEM R14
   Purpose: unify carousel, fasteners, panel shells, module
   surfaces, signal rails, and bottom navigation with one
   manufactured MDEC material system.
   Visual only. Existing behavior remains unchanged.
   ========================================================== */

.mdeck-demo {
  --mdec-r14-onyx-0: rgba(1, 4, 8, .996);
  --mdec-r14-onyx-1: rgba(6, 12, 19, .992);
  --mdec-r14-onyx-2: rgba(11, 20, 28, .986);
  --mdec-r14-graphite-top: rgba(203, 221, 233, .055);
  --mdec-r14-graphite-mid: rgba(91, 111, 123, .030);
  --mdec-r14-seam-cold: rgba(36, 132, 176, .36);
  --mdec-r14-seam-hot: rgba(111, 231, 255, .24);
  --mdec-r14-seam-core: rgba(12, 62, 93, .92);
  --mdec-r14-focus: rgba(155, 236, 255, .96);
  --mdec-r14-active: rgba(255, 184, 84, .94);
  --mdec-r14-active-soft: rgba(255, 148, 52, .22);
  --mdec-r14-highlight: rgba(196, 243, 255, .20);
  --mdec-r14-text-strong: rgba(236, 244, 250, .94);
  --mdec-r14-text: rgba(203, 219, 230, .82);
  --mdec-r14-alert: rgba(121, 221, 255, .80);
  --mdec-r14-locked: rgba(255, 190, 94, .76);
  --mdec-r14-error: rgba(255, 124, 72, .78);
  --mdec-r14-shell-fill:
    linear-gradient(145deg, rgba(255, 255, 255, .032), transparent 22%, transparent 74%, rgba(255, 255, 255, .012)),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, .012) 0 2px, transparent 2px 8px),
    linear-gradient(180deg, var(--mdec-r14-onyx-0) 0%, var(--mdec-r14-onyx-1) 54%, var(--mdec-r14-onyx-2) 100%);
  --mdec-r14-shell-shadow:
    inset 0 1px 0 rgba(221, 237, 246, .08),
    inset 0 0 0 1px rgba(0, 0, 0, .54),
    inset 0 0 22px rgba(17, 84, 118, .11),
    0 14px 30px rgba(0, 0, 0, .34);
}

.mdec-r14-panel-shell,
.mdec-r14-info-shell,
.mdec-r14-data-stack > div,
.mdec-r14-module-stack > button,
.mdec-r14-module-stack > a,
.mdec-r14-panel-shell .panel-head button,
.va-definition-button,
.launch-button,
.rail-main,
.rail-pulley,
.mdec-r14-nav-shell,
.mdec-r14-nav-shell > button {
  position: relative;
}

.mdec-r14-panel-shell,
.mdec-r14-info-shell,
.mdec-r14-data-stack > div,
.mdec-r14-module-stack > button,
.mdec-r14-module-stack > a,
.mdec-r14-panel-shell .panel-head button,
.va-definition-button,
.rail-main,
.rail-pulley,
.mdec-r14-nav-shell,
.mdec-r14-nav-shell > button {
  border-color: rgba(22, 38, 49, .96) !important;
  background: var(--mdec-r14-shell-fill) !important;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, .52),
    inset 0 0 0 2px rgba(12, 62, 93, .18),
    inset 0 1px 0 rgba(210, 228, 239, .08),
    inset 0 0 18px rgba(15, 85, 120, .09),
    0 14px 30px rgba(0, 0, 0, .30) !important;
}

.mdec-r14-panel-shell,
.logic-preview-hud.mdec-r14-panel-shell {
  color: var(--mdec-r14-text);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, .58),
    inset 0 0 0 2px rgba(11, 60, 89, .16),
    inset 0 1px 0 rgba(218, 234, 243, .08),
    inset 0 0 26px rgba(15, 77, 109, .08),
    0 18px 36px rgba(0, 0, 0, .34) !important;
}

.mdec-r14-panel-shell .eyebrow,
.mdec-r14-info-shell span,
.mdec-r14-data-stack span {
  color: rgba(138, 224, 255, .82) !important;
  text-shadow: 0 0 8px rgba(50, 165, 215, .18);
}

.mdec-r14-panel-shell .panel-head h2,
.mdec-r14-info-shell strong,
.mdec-r14-data-stack strong,
.logic-preview-hud h2 {
  color: var(--mdec-r14-text-strong) !important;
}

.mdec-r14-panel-shell .panel-copy,
.logic-preview-hud p:last-child {
  color: rgba(206, 220, 230, .74) !important;
}

.mdec-r14-info-shell,
.mc-section-label.mdec-r14-info-shell,
.ops-section-label.mdec-r14-info-shell,
.mdec-icon-train-readout.mdec-r14-info-shell {
  border-color: rgba(20, 54, 76, .94) !important;
  background:
    linear-gradient(90deg, rgba(8, 18, 27, .92), rgba(12, 26, 36, .84) 48%, rgba(7, 16, 24, .92)),
    linear-gradient(180deg, rgba(88, 203, 244, .08), transparent 36%),
    linear-gradient(180deg, rgba(1, 4, 8, .96), rgba(9, 17, 24, .92)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, .58),
    inset 0 0 0 2px rgba(11, 63, 92, .18),
    inset 0 0 15px rgba(59, 188, 236, .08),
    0 10px 24px rgba(0, 0, 0, .24) !important;
}

.mdec-r14-module-stack > button,
.mdec-r14-module-stack > a,
.mdec-r14-panel-shell .panel-head button,
.va-definition-button,
.rail-main,
.rail-pulley,
.mdec-r14-nav-shell > button {
  color: var(--mdec-r14-text) !important;
  overflow: hidden;
}

.mdec-r14-module-stack > button::before,
.mdec-r14-module-stack > a::before,
.va-definition-button::before,
.mdec-r14-nav-shell > button::before {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(155, 236, 255, .34), transparent);
  opacity: .72;
  pointer-events: none;
}

.mdec-r14-module-stack > button,
.mdec-r14-module-stack > a,
.mdec-r14-panel-shell .panel-head button,
.va-definition-button {
  border-color: rgba(19, 51, 72, .96) !important;
}

.mdec-r14-data-stack > div {
  border-color: rgba(18, 45, 62, .94) !important;
}

.mdec-r14-node-shell,
.mdec-r14-fastener,
.mdec-r14-carousel-shell {
  border-color: rgba(18, 41, 56, .98) !important;
  background:
    radial-gradient(circle at 50% 24%, rgba(190, 242, 255, .14), transparent 38%),
    linear-gradient(145deg, rgba(255, 255, 255, .04), transparent 24%, transparent 76%, rgba(255, 255, 255, .015)),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .012) 0 2px, transparent 2px 8px),
    linear-gradient(180deg, rgba(1, 4, 8, .995) 0%, rgba(5, 11, 17, .992) 56%, rgba(11, 19, 27, .988) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(223, 239, 248, .08),
    inset 0 0 0 1px rgba(0, 0, 0, .58),
    inset 0 0 0 2px rgba(11, 62, 92, .18),
    inset 0 0 18px rgba(16, 90, 126, .13),
    0 14px 26px rgba(0, 0, 0, .34),
    0 0 12px rgba(14, 89, 132, .16) !important;
}

.mdec-r14-carousel-shell {
  border: 1px solid transparent !important;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(85, 213, 255, .12), transparent 45%),
    linear-gradient(145deg, rgba(255, 255, 255, .04), transparent 24%, transparent 76%, rgba(255, 255, 255, .012)),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .012) 0 2px, transparent 2px 8px),
    linear-gradient(180deg, rgba(1, 3, 7, .998) 0%, rgba(4, 10, 16, .995) 46%, rgba(8, 16, 22, .992) 100%) padding-box,
    linear-gradient(135deg, rgba(7, 18, 29, .98) 0%, rgba(34, 125, 171, .52) 46%, rgba(222, 246, 255, .22) 58%, rgba(255, 155, 60, .36) 82%, rgba(12, 53, 80, .96) 100%) border-box !important;
  box-shadow:
    inset 0 1px 0 rgba(226, 240, 248, .08),
    inset 0 0 0 1px rgba(0, 0, 0, .56),
    inset 0 0 22px rgba(13, 82, 118, .12),
    0 16px 30px rgba(0, 0, 0, .34),
    0 0 12px rgba(22, 102, 149, .15) !important;
}

.mdec-icon-train-stop {
  color: rgba(158, 177, 193, .76);
  opacity: .76;
}

.mdec-icon-train-stop:hover,
.mdec-icon-train-stop:focus-visible {
  color: var(--mdec-r14-focus) !important;
  opacity: 1;
}

.mdec-icon-train-stop.is-active {
  color: var(--mdec-r14-active) !important;
  filter:
    drop-shadow(0 0 7px rgba(82, 219, 255, .56))
    drop-shadow(0 0 8px rgba(255, 150, 56, .20)) !important;
}

.mdec-icon-train-stop.is-active::before {
  background:
    radial-gradient(circle, rgba(102, 225, 255, .15), rgba(255, 152, 59, .08) 54%, transparent 74%) !important;
}

.mdec-icon-train-label,
.mdec-icon-train-readout span {
  color: rgba(180, 208, 223, .84) !important;
}

.mdec-icon-train-readout strong {
  color: rgba(255, 189, 92, .98) !important;
}

.mdec-r14-nav-shell {
  border-color: rgba(20, 40, 54, .98) !important;
  background:
    linear-gradient(180deg, rgba(2, 7, 11, .97), rgba(8, 15, 22, .94)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .01) 0 2px, transparent 2px 9px) !important;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, .58),
    inset 0 0 0 2px rgba(12, 62, 93, .20),
    inset 0 0 20px rgba(16, 84, 118, .10),
    0 16px 34px rgba(0, 0, 0, .38) !important;
}

.mdec-r14-nav-shell > button {
  border-color: rgba(18, 46, 63, .94) !important;
  color: rgba(190, 208, 220, .76) !important;
}

.mdec-r14-nav-shell > button[data-action="activate-core"] {
  color: rgba(248, 226, 167, .90) !important;
}

.ship-frame {
  border-color: rgba(19, 28, 35, .98) !important;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, .84),
    inset 0 0 0 1px rgba(93, 112, 124, .08),
    inset 0 0 0 2px rgba(12, 60, 88, .14),
    inset 0 0 34px rgba(2, 10, 17, .34),
    0 0 44px rgba(0, 0, 0, .44) !important;
}

.ship-frame::before,
.ship-frame::after {
  border-color: rgba(28, 39, 47, .98) !important;
  background:
    linear-gradient(90deg, transparent 0%, transparent 42%, rgba(17, 76, 110, .20) 47%, rgba(88, 224, 255, .28) 50%, rgba(17, 76, 110, .20) 53%, transparent 58%, transparent 100%),
    radial-gradient(ellipse at 50% 48%, rgba(255, 147, 54, .065), transparent 16%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .012) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, rgba(1, 3, 6, .996) 0%, rgba(9, 14, 18, .992) 18%, rgba(3, 7, 10, .996) 50%, rgba(10, 16, 20, .992) 82%, rgba(1, 3, 6, .996) 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, .72),
    inset 0 0 10px rgba(30, 122, 165, .08),
    0 0 8px rgba(0, 0, 0, .50) !important;
}

.mdeck-demo[data-left="open"] .edge-left,
.mdeck-demo[data-right="open"] .edge-right,
.mdeck-demo[data-mc="open"] .mission-control-orb,
.mdeck-demo[data-yop="open"] .yop-access-orb {
  border-color: rgba(82, 214, 255, .58) !important;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, .54),
    inset 0 0 20px rgba(41, 170, 219, .16),
    0 0 12px rgba(49, 176, 229, .16),
    0 0 6px rgba(255, 145, 53, .08),
    0 14px 26px rgba(0, 0, 0, .34) !important;
}

.mdeck-demo[data-mc="open"] .mission-control-orb .mc-mark,
.mdeck-demo[data-yop="open"] .yop-access-orb .yop-mark,
.mdeck-demo[data-left="open"] .edge-left,
.mdeck-demo[data-right="open"] .edge-right {
  color: var(--mdec-r14-active) !important;
}

.mdec-r14-state-alert {
  border-color: rgba(55, 165, 210, .82) !important;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, .52),
    inset 0 0 16px rgba(60, 198, 241, .12),
    0 0 18px rgba(59, 190, 235, .12) !important;
}

.mdec-r14-state-locked {
  border-color: rgba(153, 112, 42, .90) !important;
  color: rgba(251, 221, 159, .92) !important;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, .54),
    inset 0 0 18px rgba(255, 177, 70, .10),
    0 0 14px rgba(255, 170, 67, .10) !important;
}

.mdec-r14-state-error {
  border-color: rgba(149, 57, 27, .96) !important;
  color: rgba(255, 202, 186, .94) !important;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, .54),
    inset 0 0 18px rgba(255, 118, 66, .12),
    0 0 14px rgba(255, 109, 63, .12) !important;
}

.mdec-r14-state-alert::after,
.mdec-r14-state-locked::after,
.mdec-r14-state-error::after {
  color: currentColor !important;
}

.mdec-r14-fastener:focus-visible,
.mdec-r14-node-shell:focus-visible,
.mdec-r14-panel-shell .panel-head button:focus-visible,
.mdec-r14-module-stack > button:focus-visible,
.mdec-r14-module-stack > a:focus-visible,
.mdec-r14-nav-shell > button:focus-visible,
.va-definition-button:focus-visible,
.launch-button:focus-visible,
.rail-main:focus-visible,
.rail-pulley:focus-visible,
.mdec-icon-train-stop:focus-visible,
.mdec-icon-train-collapse:focus-visible {
  outline: 2px solid var(--mdec-r14-focus) !important;
  outline-offset: 3px;
  border-color: rgba(116, 230, 255, .74) !important;
  box-shadow:
    0 0 0 1px rgba(4, 12, 18, .92),
    0 0 0 4px rgba(107, 228, 255, .18),
    0 0 24px rgba(107, 228, 255, .16) !important;
}

.mdec-r14-module-stack > button:hover,
.mdec-r14-module-stack > a:hover,
.mdec-r14-panel-shell .panel-head button:hover,
.mdec-r14-nav-shell > button:hover,
.va-definition-button:hover,
.launch-button:hover,
.rail-main:hover,
.rail-pulley:hover {
  border-color: rgba(94, 221, 255, .50) !important;
  color: var(--mdec-r14-text-strong) !important;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, .54),
    inset 0 0 18px rgba(61, 191, 240, .12),
    0 0 18px rgba(61, 191, 240, .10),
    0 14px 30px rgba(0, 0, 0, .30) !important;
}

.mdec-r14-nav-shell > button:hover,
.mdec-r14-nav-shell > button[data-action="activate-core"] {
  color: rgba(241, 244, 247, .94) !important;
}

@media (prefers-reduced-motion: reduce) {
  .mdec-r14-panel-shell,
  .mdec-r14-info-shell,
  .mdec-r14-fastener,
  .mdec-r14-node-shell,
  .mdec-r14-carousel-shell,
  .mdec-r14-nav-shell,
  .mdec-r14-nav-shell > button,
  .mdec-r14-module-stack > button,
  .mdec-r14-module-stack > a,
  .ship-frame,
  .ship-frame::before,
  .ship-frame::after,
  .mission-control-orb::after,
  .yop-access-orb::after {
    animation: none !important;
    transition: none !important;
  }

  .mdec-icon-train-viewport {
    scroll-behavior: auto !important;
  }
}

/* MDEC UNIFIED COMPONENT SYSTEM R14 END */

/* ==========================================================
   MDEC PLACEMENT REGISTRY & GATEWAY IA R15
   Purpose: compact five-action gateway drawers, fail-closed
   registry rendering, and viewport-safe overlay behavior.
   ========================================================== */

:root {
  --mdec-drawer-top: 132px;
  --mdec-drawer-bottom: calc(108px + env(safe-area-inset-bottom, 0px));
}

.mdeck-demo {
  --mdec-panel-side-gap: max(14px, calc(50vw - 194px));
}

.panel {
  top: var(--mdec-drawer-top) !important;
  bottom: var(--mdec-drawer-bottom) !important;
  width: min(360px, calc(100vw - 28px)) !important;
  max-height: calc(
    100dvh -
    var(--mdec-drawer-top) -
    var(--mdec-drawer-bottom)
  ) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: 0 14px 14px !important;
}

.panel-left,
.panel-vr,
.panel-mc {
  left: var(--mdec-panel-side-gap) !important;
}

.panel-right,
.panel-auth,
.panel-yop {
  right: var(--mdec-panel-side-gap) !important;
}

.panel-head {
  position: sticky;
  top: 0;
  z-index: 8;
  margin: 0 -14px 14px !important;
  padding: 14px 14px 12px !important;
  background:
    linear-gradient(180deg, rgba(2, 8, 13, .98), rgba(7, 15, 22, .92)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .01) 0 2px, transparent 2px 8px) !important;
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(28, 88, 123, .22);
}

.panel-head button {
  position: sticky;
  top: 14px;
  justify-self: end;
}

.panel-copy,
.mdec-gateway-note strong,
.mdec-gateway-action__meta {
  overflow-wrap: anywhere;
}

.mdec-gateway-note {
  margin: 0 0 10px;
  padding: 11px 12px !important;
}

.mdec-gateway-menu,
.lane-grid.mdec-gateway-menu,
.ops-apps-stack.mdec-gateway-menu,
.mission-control-stack.mdec-gateway-menu,
.yop-access-stack.mdec-gateway-menu {
  display: grid;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}

.mdec-gateway-action {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas:
    "label state"
    "meta state" !important;
  align-items: center !important;
  gap: 4px 10px !important;
  min-height: 58px !important;
  padding: 12px 13px !important;
  text-align: left !important;
}

.mdec-gateway-action::after {
  content: none !important;
  display: none !important;
}

.mdec-gateway-action__label {
  grid-area: label;
  display: block;
  color: rgba(237, 243, 248, .96);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .04em;
  line-height: 1.15;
  text-transform: uppercase;
}

.mdec-gateway-action__meta {
  grid-area: meta;
  display: block;
  color: rgba(166, 196, 212, .78);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;
}

.mdec-gateway-action__state {
  grid-area: state;
  align-self: center;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border: 1px solid rgba(41, 125, 171, .34);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)),
    rgba(4, 11, 18, .85);
  color: rgba(161, 223, 247, .90);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .10em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.mdec-gateway-action.mdec-r14-state-locked .mdec-gateway-action__state {
  border-color: rgba(167, 115, 49, .54);
  color: rgba(255, 205, 133, .94);
}

.mdec-gateway-action.mdec-r14-state-error .mdec-gateway-action__state {
  border-color: rgba(162, 69, 39, .56);
  color: rgba(255, 185, 160, .92);
}

.mdec-gateway-action.mdec-r14-state-alert .mdec-gateway-action__state {
  border-color: rgba(50, 151, 199, .48);
  color: rgba(167, 231, 255, .94);
}

.mdeck-demo[data-left="open"] .cockpit-content,
.mdeck-demo[data-vr="open"] .cockpit-content,
.mdeck-demo[data-mc="open"] .cockpit-content {
  transform: translateX(3vw) scale(.986) !important;
}

.mdeck-demo[data-right="open"] .cockpit-content,
.mdeck-demo[data-auth="open"] .cockpit-content,
.mdeck-demo[data-yop="open"] .cockpit-content {
  transform: translateX(-3vw) scale(.986) !important;
}

@media (max-width: 720px) {
  .mdeck-demo[data-left="open"] .cockpit-content,
  .mdeck-demo[data-right="open"] .cockpit-content,
  .mdeck-demo[data-auth="open"] .cockpit-content,
  .mdeck-demo[data-vr="open"] .cockpit-content,
  .mdeck-demo[data-yop="open"] .cockpit-content,
  .mdeck-demo[data-mc="open"] .cockpit-content {
    transform: none !important;
  }
}

@media (max-width: 430px) {
  :root {
    --mdec-drawer-top: 126px;
    --mdec-drawer-bottom: calc(104px + env(safe-area-inset-bottom, 0px));
  }

  .mdeck-demo {
    --mdec-panel-side-gap: 14px;
  }

  .panel {
    width: min(360px, calc(100vw - 28px)) !important;
  }

  .panel-head {
    margin-bottom: 12px !important;
    padding-top: 12px !important;
  }

  .mdec-gateway-action {
    min-height: 56px !important;
    padding-inline: 12px !important;
  }

  .mdec-gateway-action__label {
    font-size: 11px;
  }

  .mdec-gateway-action__meta {
    font-size: 9px;
  }
}

/* MDEC PLACEMENT REGISTRY & GATEWAY IA R15 END */

/* MDEC R14B FIXED DRAWER REPAIR START
   Restores the original fixed positioning for all gateway drawers.
   R14 visual styling remains unchanged.
   ========================================================== */

.panel.mdec-r14-panel-shell,
.logic-preview-hud.mdec-r14-panel-shell {
  position: fixed !important;
}

/* MDEC R14B FIXED DRAWER REPAIR END */

/* ==========================================================
   MDEC PAGE SYSTEM STABILIZATION R01 START
   ACTIVE: canonical page-shell selectors, dashboard family
   regions, disabled-state affordances, and shared ownership
   tokens. Header, drawer, dock, and icon-train positioning
   remain owned by the active R14/R15 compatibility blocks above.
   ========================================================== */

/* 1. Design tokens */
:root {
  --mdec-shell-header-height: 132px;
  --mdec-shell-dock-height: 108px;
  --mdec-shell-drawer-width: 360px;
  --mdec-shell-breakpoint-mobile: 430px;
  --mdec-shell-breakpoint-tablet: 720px;
  --mdec-shell-z-header: 20;
  --mdec-shell-z-drawer: 95;
  --mdec-shell-z-dock: 220;
  --mdec-shell-z-notification: 320;
  --mdec-shell-radius-sm: 10px;
  --mdec-shell-radius-md: 16px;
  --mdec-shell-panel-bg: rgba(5, 12, 19, .86);
  --mdec-shell-panel-border: rgba(70, 216, 255, .22);
  --mdec-shell-text-muted: rgba(180, 208, 223, .78);
  --mdec-shell-text-strong: rgba(240, 248, 252, .94);
  --mdec-shell-locked: rgba(255, 190, 94, .80);
}

/* 2. Global MDEC shell */
.mdec-shell {
  isolation: isolate;
}

.mdec-identity-header {
  z-index: var(--mdec-shell-z-header);
}

.mdec-primary-workspace {
  min-width: 0;
}

.mdec-panel-layer {
  position: fixed;
  inset: 0;
  z-index: var(--mdec-shell-z-drawer);
  pointer-events: none;
}

.mdec-notification-layer {
  position: fixed;
  left: 50%;
  bottom: calc(var(--mdec-shell-dock-height) + env(safe-area-inset-bottom, 0px) + 12px);
  z-index: var(--mdec-shell-z-notification);
  width: min(360px, calc(100vw - 28px));
  min-height: 0;
  color: var(--mdec-shell-locked);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .06em;
  line-height: 1.35;
  text-align: center;
  text-transform: uppercase;
  transform: translateX(-50%);
  pointer-events: none;
}

.mdec-notification-layer:empty {
  display: none;
}

/* 3. Shared components */
.mdec-context-strip,
.mdec-dashboard-card {
  border: 1px solid var(--mdec-shell-panel-border);
  border-radius: var(--mdec-shell-radius-md);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012)),
    var(--mdec-shell-panel-bg);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .05),
    0 10px 24px rgba(0, 0, 0, .20);
}

.mdec-dashboard-card {
  display: grid;
  gap: 5px;
  padding: 12px 13px;
  min-width: 0;
}

.mdec-dashboard-card span {
  color: rgba(138, 224, 255, .82);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
  line-height: 1.2;
  text-transform: uppercase;
}

.mdec-dashboard-card strong {
  color: var(--mdec-shell-text-strong);
  font-size: 13px;
  font-weight: 950;
  letter-spacing: .03em;
  line-height: 1.2;
  text-transform: uppercase;
}

.mdec-dashboard-card p {
  margin: 0;
  color: var(--mdec-shell-text-muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
}

/* 4. Layout-family rules */
.mdec-layout-dashboard .mdec-dashboard-regions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  width: min(100%, 420px);
  margin: 14px auto 0;
}

.mdec-primary-action-region {
  order: 1;
}

.mdec-context-strip {
  order: 2;
}

.mdec-quick-action-grid {
  order: 3;
}

/* 5. Page-specific rules */
.mdec-shell[data-mdec-page-id="mideck"] .mdec-dashboard-regions {
  grid-auto-rows: minmax(0, auto);
}

.mdec-shell[data-mdec-page-governance="locked"] .mdec-primary-action-region,
.mdec-shell[data-mdec-page-governance="locked"] .mdec-command-dock {
  filter: saturate(.55);
}

/* 6. Responsive rules */
@media (min-width: 720px) {
  .mdec-layout-dashboard .mdec-dashboard-regions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: min(100%, 760px);
  }
}

@media (max-width: 430px) {
  :root {
    --mdec-shell-header-height: 126px;
    --mdec-shell-dock-height: 104px;
  }

  .mdec-dashboard-card {
    padding: 11px 12px;
  }

  .mdec-dashboard-card strong {
    font-size: 12px;
  }
}

/* COMPATIBILITY:
   Legacy R14/R15 header, drawer, command dock, and icon-train
   rules remain active because they are the currently verified
   positioning model. They are not removed in R01 without visual
   confirmation across desktop and mobile.
   MDEC PAGE SYSTEM STABILIZATION R01 END */


/* =========================================================
   MDEC R02-MOB-001 SHORT-SCREEN PRIMARY ACTION REPAIR

   Observed failure:
   At 360 × 740, the Guided Tour action began at 791px and
   the command dock began at 1598px.

   Scope:
   Short mobile screens only.

   Purpose:
   - Keep the primary Guided Tour action in the initial view.
   - Keep the command dock reachable.
   - Preserve readable text and touch targets.
   - Leave desktop, tablet, and taller mobile layouts unchanged.
   ========================================================= */

@media (max-width: 390px) and (max-height: 760px) {
  body .mdeck-demo .cockpit-content {
    padding-top: 12px !important;
    padding-bottom:
      calc(84px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body .mdeck-demo .core-orb {
    height: 172px !important;
    min-height: 172px !important;
    margin-top: 0 !important;
    margin-bottom: -12px !important;
  }

  body .mdeck-demo
  .access-rail.mdec-primary-action-region {
    margin-top: 0 !important;
  }

  body .mdeck-demo
  .core-status.mdec-context-strip {
    min-height: 0 !important;
    margin-top: 8px !important;
    padding: 10px 14px !important;
  }

  body .mdeck-demo
  .core-status.mdec-context-strip p {
    display: none !important;
  }

  body .mdeck-demo
  .demo-actions.mdec-quick-action-grid {
    margin-top: 6px !important;
  }

  body .mdeck-demo
  .bottom-nav.mdec-command-dock {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom:
      calc(6px + env(safe-area-inset-bottom, 0px)) !important;
    width: min(calc(100vw - 24px), 420px) !important;
    transform: translateX(-50%) !important;
    z-index: var(--mdec-shell-z-dock, 220) !important;
  }
}

/* MDEC R02-MOB-001 SHORT-SCREEN PRIMARY ACTION REPAIR END */


/* =========================================================
   MDEC R02-MOB-002 LOWER CONTROL CHAMBER REPAIR

   Observed failure:
   Flow Map content remained visible behind the fixed MC and
   YoP controls after the short-screen dock repair.

   Scope:
   390px wide or less and 760px high or less.

   Purpose:
   - Mask scrolling content beneath the lower control zone.
   - Keep MC, YoP, and the command dock readable.
   - Establish the structural foundation for the future
     Scroll Chamber / Premium Billboard Chamber.
   - Preserve drawer scrolling and final-row access.
   ========================================================= */

@media (max-width: 390px) and (max-height: 760px) {
  body .mdeck-demo
  .bottom-nav.mdec-command-dock {
    isolation: isolate !important;
    overflow: visible !important;
  }

  body .mdeck-demo
  .bottom-nav.mdec-command-dock::before {
    content: "" !important;
    position: absolute !important;
    left: -12px !important;
    right: -12px !important;
    bottom: -6px !important;
    height: 132px !important;
    pointer-events: none !important;
    z-index: -1 !important;

    border-top:
      1px solid rgba(70, 216, 255, .20) !important;
    border-radius: 24px 24px 0 0 !important;

    background:
      linear-gradient(
        180deg,
        rgba(1, 7, 13, 0) 0%,
        rgba(1, 7, 13, .92) 22%,
        rgba(1, 7, 13, .985) 44%,
        rgba(1, 7, 13, .998) 100%
      ) !important;

    box-shadow:
      0 -18px 34px rgba(0, 0, 0, .44),
      inset 0 1px 0 rgba(133, 229, 255, .10) !important;
  }

  body .mdeck-demo
  .mission-control-orb,
  body .mdeck-demo
  .yop-access-orb {
    z-index:
      calc(var(--mdec-shell-z-dock, 220) + 2) !important;
  }

  body .mdeck-demo[data-mc="open"]
  .panel-mc,
  body .mdeck-demo[data-yop="open"]
  .panel-yop {
    padding-bottom: 124px !important;
  }
}

/* MDEC R02-MOB-002 LOWER CONTROL CHAMBER REPAIR END */