/* Disciply loading refinement
   - Global #authLoader: UI Lab 07 / Logo Construct.
   - Sync Confidence Center: contextual Live Data Stream.
   Visual-only: no auth, bootstrap, MT5, cache, journal or routing logic changes. */

/* --------------------------------------------------------------------------
   07 · LOGO CONSTRUCT — global Disciply loader
   Reuses the existing #authLoader markup and existing visibility triggers.
   -------------------------------------------------------------------------- */

#authLoader.auth-loader {
  padding:
    max(20px, env(safe-area-inset-top, 0px))
    max(16px, env(safe-area-inset-right, 0px))
    max(20px, env(safe-area-inset-bottom, 0px))
    max(16px, env(safe-area-inset-left, 0px));
  background:
    radial-gradient(460px 300px at 50% 46%, rgba(245, 200, 66, 0.075), transparent 68%),
    radial-gradient(760px 440px at 50% 56%, rgba(255, 255, 255, 0.018), transparent 72%),
    rgba(4, 6, 9, 0.955);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}

#authLoader .auth-loader__panel {
  position: relative;
  width: min(250px, calc(100vw - 48px));
  padding: 22px 18px 18px;
  gap: 8px;
  border: 0;
  border-radius: 24px;
  background: transparent;
  box-shadow: none;
  text-align: center;
}

#authLoader .auth-loader__orbital {
  position: relative;
  display: block;
  width: 94px;
  height: 94px;
  margin: 0 auto 5px;
  overflow: visible;
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 50%, rgba(245, 200, 66, 0.06), transparent 58%),
    rgba(255, 255, 255, 0.006);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.028),
    0 0 38px rgba(245, 200, 66, 0.035);
}

#authLoader .auth-loader__orbital::before {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 18px;
  background:
    linear-gradient(90deg, transparent 49.3%, rgba(245, 200, 66, 0.11) 49.5%, rgba(245, 200, 66, 0.11) 50.5%, transparent 50.7%),
    linear-gradient(0deg, transparent 49.3%, rgba(245, 200, 66, 0.08) 49.5%, rgba(245, 200, 66, 0.08) 50.5%, transparent 50.7%);
  opacity: 0;
  animation: disciplyConstructGuides 2.8s ease-in-out infinite;
  pointer-events: none;
}

#authLoader .auth-loader__orbital::after {
  content: "";
  position: absolute;
  left: 22px;
  top: 17px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #f5c842;
  box-shadow:
    0 56px 0 rgba(245, 200, 66, 0.7),
    52px 0 0 rgba(245, 200, 66, 0.55),
    52px 56px 0 rgba(245, 200, 66, 0.42),
    0 0 12px rgba(245, 200, 66, 0.55);
  opacity: 0;
  animation: disciplyConstructNodes 2.8s ease-in-out infinite;
  pointer-events: none;
}

#authLoader .auth-loader__ring,
#authLoader .auth-loader__core {
  position: absolute;
  display: block;
  box-sizing: border-box;
  opacity: 1;
  transform: none;
  box-shadow: none;
}

#authLoader .auth-loader__ring::before,
#authLoader .auth-loader__ring::after,
#authLoader .auth-loader__core::before,
#authLoader .auth-loader__core::after {
  content: none;
}

#authLoader .auth-loader__ring--outer {
  inset: 17px 16px 17px 23px;
  border: 2px solid transparent;
  border-top-color: #f5c842;
  border-right-color: #f5c842;
  border-bottom-color: #f5c842;
  border-radius: 0 27px 27px 0;
  filter: drop-shadow(0 0 8px rgba(245, 200, 66, 0.24));
  clip-path: inset(0 100% 0 0);
  animation: disciplyConstructOuter 2.8s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

#authLoader .auth-loader__ring--inner {
  inset: 30px 29px 30px 36px;
  border: 2px solid transparent;
  border-top-color: rgba(255, 220, 112, 0.88);
  border-right-color: rgba(255, 220, 112, 0.88);
  border-bottom-color: rgba(255, 220, 112, 0.88);
  border-radius: 0 14px 14px 0;
  clip-path: inset(0 100% 0 0);
  animation: disciplyConstructInner 2.8s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

#authLoader .auth-loader__core {
  left: 22px;
  top: 17px;
  width: 4px;
  height: 60px;
  border-radius: 4px;
  background: linear-gradient(180deg, #ffe18a, #f5c842 52%, #c69318);
  box-shadow:
    0 0 13px rgba(245, 200, 66, 0.28),
    0 0 30px rgba(245, 200, 66, 0.08);
  transform-origin: 50% 0;
  transform: scaleY(0.04);
  animation: disciplyConstructStem 2.8s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

#authLoader .auth-loader__brand {
  display: block;
  margin: 3px 0 0;
  color: #f5c842;
  font: 800 12px/1.1 Inter, system-ui, sans-serif;
  letter-spacing: 0.24em;
  text-align: center;
  text-indent: 0.24em;
  text-shadow: 0 0 18px rgba(245, 200, 66, 0.12);
  animation: disciplyConstructBrand 2.8s ease-in-out infinite;
}

#authLoader .auth-loader__text {
  margin: 2px 0 0;
  color: rgba(198, 206, 218, 0.68);
  font-size: 10.5px;
  line-height: 1.45;
  letter-spacing: 0.018em;
  text-align: center;
}

#authLoader .auth-loader__bar {
  position: relative;
  width: 118px;
  height: 2px;
  margin: 8px auto 0;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  box-shadow: none;
}

#authLoader .auth-loader__bar::before,
#authLoader .auth-loader__bar::after {
  content: none;
}

#authLoader .auth-loader__bar-fill {
  position: absolute;
  inset: 0 auto 0 -42%;
  width: 42%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(245, 200, 66, 0.45), #ffe082, transparent);
  box-shadow: 0 0 9px rgba(245, 200, 66, 0.34);
  transform: none;
  animation: disciplyConstructScan 1.55s cubic-bezier(0.42, 0, 0.28, 1) infinite;
}

@keyframes disciplyConstructGuides {
  0%, 6%, 92%, 100% { opacity: 0; }
  14%, 48% { opacity: 0.78; }
  62%, 84% { opacity: 0.16; }
}

@keyframes disciplyConstructNodes {
  0%, 8%, 94%, 100% { opacity: 0; transform: scale(0.75); }
  16%, 44% { opacity: 0.72; transform: scale(1); }
  64%, 88% { opacity: 0.18; transform: scale(1); }
}

@keyframes disciplyConstructStem {
  0%, 8% { opacity: 0; transform: scaleY(0.04); }
  22% { opacity: 1; transform: scaleY(1); }
  82% { opacity: 1; transform: scaleY(1); }
  96%, 100% { opacity: 0.72; transform: scaleY(1); }
}

@keyframes disciplyConstructOuter {
  0%, 15% { opacity: 0; clip-path: inset(0 100% 0 0); }
  38% { opacity: 1; clip-path: inset(0 0 0 0); }
  82% { opacity: 1; clip-path: inset(0 0 0 0); }
  96%, 100% { opacity: 0.72; clip-path: inset(0 0 0 0); }
}

@keyframes disciplyConstructInner {
  0%, 26% { opacity: 0; clip-path: inset(0 100% 0 0); }
  48% { opacity: 1; clip-path: inset(0 0 0 0); }
  82% { opacity: 1; clip-path: inset(0 0 0 0); }
  96%, 100% { opacity: 0.66; clip-path: inset(0 0 0 0); }
}

@keyframes disciplyConstructBrand {
  0%, 38% { opacity: 0.16; transform: translateY(4px); letter-spacing: 0.31em; }
  58%, 88% { opacity: 1; transform: translateY(0); letter-spacing: 0.24em; }
  100% { opacity: 0.72; transform: translateY(0); letter-spacing: 0.24em; }
}

@keyframes disciplyConstructScan {
  0% { left: -44%; }
  70%, 100% { left: 104%; }
}

/* --------------------------------------------------------------------------
   LIVE DATA STREAM — inside Sync Confidence Center only
   This is a contextual visual layer. Existing sync values remain authoritative.
   -------------------------------------------------------------------------- */

#mt5SyncConfidenceCenter.mt5-sync-center {
  --live-stream-rgb: 245, 200, 66;
}

#mt5SyncConfidenceCenter[data-state="healthy"] {
  --live-stream-rgb: 81, 218, 143;
}

#mt5SyncConfidenceCenter[data-state="stale"] {
  --live-stream-rgb: 110, 168, 254;
}

#mt5SyncConfidenceCenter[data-state="warning"] {
  --live-stream-rgb: 245, 200, 66;
}

#mt5SyncConfidenceCenter[data-state="error"] {
  --live-stream-rgb: 255, 138, 138;
}

#mt5SyncConfidenceCenter .mt5-sync-center__header { order: 0; }
#mt5SyncConfidenceCenter::before { order: 1; }
#mt5SyncConfidenceCenter::after { order: 2; }
#mt5SyncConfidenceCenter .mt5-sync-center__stats { order: 3; }
#mt5SyncConfidenceCenter .mt5-sync-center__summary { order: 4; }
#mt5SyncConfidenceCenter .mt5-sync-center__flags { order: 5; }

#mt5SyncConfidenceCenter::before {
  content: "●  LIVE DATA STREAM";
  display: block;
  width: fit-content;
  margin: -1px 0 -4px;
  color: rgba(var(--live-stream-rgb), 0.94);
  font: 800 9px/1 "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-shadow: 0 0 13px rgba(var(--live-stream-rgb), 0.28);
  animation: disciplySyncStreamBlink 1.55s ease-in-out infinite;
}

#mt5SyncConfidenceCenter::after {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 72px;
  border: 1px solid rgba(var(--live-stream-rgb), 0.13);
  border-radius: 14px;
  background-image:
    linear-gradient(90deg, transparent 0%, rgba(var(--live-stream-rgb), 0.16) 12%, rgba(var(--live-stream-rgb), 0.9) 50%, rgba(255,255,255,0.92) 56%, rgba(var(--live-stream-rgb), 0.22) 84%, transparent 100%),
    linear-gradient(90deg, transparent 0%, rgba(var(--live-stream-rgb), 0.14) 14%, rgba(var(--live-stream-rgb), 0.72) 50%, rgba(var(--live-stream-rgb), 0.96) 58%, transparent 100%),
    linear-gradient(90deg, transparent 0%, rgba(var(--live-stream-rgb), 0.12) 10%, rgba(var(--live-stream-rgb), 0.84) 46%, rgba(255,255,255,0.82) 54%, transparent 100%),
    linear-gradient(90deg, transparent 0%, rgba(var(--live-stream-rgb), 0.1) 16%, rgba(var(--live-stream-rgb), 0.76) 52%, rgba(var(--live-stream-rgb), 0.92) 60%, transparent 100%),
    linear-gradient(90deg, rgba(255,255,255,0.035), rgba(255,255,255,0.035)),
    linear-gradient(90deg, rgba(255,255,255,0.035), rgba(255,255,255,0.035)),
    linear-gradient(90deg, rgba(255,255,255,0.035), rgba(255,255,255,0.035)),
    linear-gradient(90deg, rgba(255,255,255,0.035), rgba(255,255,255,0.035)),
    linear-gradient(180deg, rgba(255,255,255,0.018), rgba(2,5,9,0.22));
  background-size:
    30% 5px,
    23% 5px,
    39% 5px,
    27% 5px,
    calc(100% - 28px) 5px,
    calc(100% - 28px) 5px,
    calc(100% - 28px) 5px,
    calc(100% - 28px) 5px,
    100% 100%;
  background-position:
    -38% 13px,
    -58% 29px,
    -28% 45px,
    -48% 61px,
    14px 13px,
    14px 29px,
    14px 45px,
    14px 61px,
    0 0;
  background-repeat: no-repeat;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.02),
    inset 0 0 28px rgba(var(--live-stream-rgb), 0.025);
  animation: disciplySyncDataStream 2.1s cubic-bezier(0.42, 0, 0.24, 1) infinite;
  pointer-events: none;
}

@keyframes disciplySyncDataStream {
  0% {
    background-position:
      -38% 13px,
      -58% 29px,
      -28% 45px,
      -48% 61px,
      14px 13px,
      14px 29px,
      14px 45px,
      14px 61px,
      0 0;
  }
  72%, 100% {
    background-position:
      138% 13px,
      154% 29px,
      142% 45px,
      150% 61px,
      14px 13px,
      14px 29px,
      14px 45px,
      14px 61px,
      0 0;
  }
}

@keyframes disciplySyncStreamBlink {
  0%, 100% { opacity: 0.98; }
  50% { opacity: 0.52; }
}

@media (max-width: 420px) {
  #authLoader .auth-loader__panel {
    width: min(230px, calc(100vw - 38px));
    padding-inline: 14px;
  }

  #authLoader .auth-loader__orbital {
    width: 88px;
    height: 88px;
  }

  #authLoader .auth-loader__ring--outer {
    inset: 15px 14px 15px 21px;
  }

  #authLoader .auth-loader__ring--inner {
    inset: 28px 27px 28px 34px;
  }

  #authLoader .auth-loader__core {
    left: 20px;
    top: 15px;
    height: 58px;
  }

  #authLoader .auth-loader__orbital::after {
    left: 20px;
    top: 15px;
    box-shadow:
      0 54px 0 rgba(245, 200, 66, 0.7),
      49px 0 0 rgba(245, 200, 66, 0.55),
      49px 54px 0 rgba(245, 200, 66, 0.42),
      0 0 12px rgba(245, 200, 66, 0.55);
  }

  #mt5SyncConfidenceCenter::after {
    height: 64px;
    border-radius: 12px;
    background-size:
      31% 4px,
      24% 4px,
      40% 4px,
      28% 4px,
      calc(100% - 22px) 4px,
      calc(100% - 22px) 4px,
      calc(100% - 22px) 4px,
      calc(100% - 22px) 4px,
      100% 100%;
    background-position:
      -38% 12px,
      -58% 25px,
      -28% 38px,
      -48% 51px,
      11px 12px,
      11px 25px,
      11px 38px,
      11px 51px,
      0 0;
  }

  @keyframes disciplySyncDataStream {
    0% {
      background-position:
        -38% 12px,
        -58% 25px,
        -28% 38px,
        -48% 51px,
        11px 12px,
        11px 25px,
        11px 38px,
        11px 51px,
        0 0;
    }
    72%, 100% {
      background-position:
        138% 12px,
        154% 25px,
        142% 38px,
        150% 51px,
        11px 12px,
        11px 25px,
        11px 38px,
        11px 51px,
        0 0;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  #authLoader .auth-loader__orbital::before,
  #authLoader .auth-loader__orbital::after,
  #authLoader .auth-loader__ring,
  #authLoader .auth-loader__core,
  #authLoader .auth-loader__brand,
  #authLoader .auth-loader__bar-fill,
  #mt5SyncConfidenceCenter::before,
  #mt5SyncConfidenceCenter::after {
    animation: none !important;
  }

  #authLoader .auth-loader__orbital::before,
  #authLoader .auth-loader__orbital::after {
    opacity: 0.12;
  }

  #authLoader .auth-loader__ring--outer,
  #authLoader .auth-loader__ring--inner {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }

  #authLoader .auth-loader__core {
    opacity: 1;
    transform: scaleY(1);
  }

  #authLoader .auth-loader__brand {
    opacity: 1;
    transform: none;
    letter-spacing: 0.24em;
  }

  #authLoader .auth-loader__bar-fill {
    left: 30%;
  }

  #mt5SyncConfidenceCenter::after {
    background-position:
      52% 13px,
      68% 29px,
      46% 45px,
      61% 58px,
      14px 13px,
      14px 29px,
      14px 45px,
      14px 58px,
      0 0;
  }
}

@media (max-width: 420px) and (prefers-reduced-motion: reduce) {
  #mt5SyncConfidenceCenter::after {
    background-position:
      52% 12px,
      68% 25px,
      46% 38px,
      61% 51px,
      11px 12px,
      11px 25px,
      11px 38px,
      11px 51px,
      0 0;
  }
}

/* --------------------------------------------------------------------------
   REAL MT5 SYNC STATE — visual projection of the existing confidence model
   No new requests, timers or state machines: data-state remains authoritative.
   -------------------------------------------------------------------------- */

#mt5SyncConfidenceCenter[data-state="healthy"]::before {
  content: "●  LIVE DATA · HEALTHY";
}

#mt5SyncConfidenceCenter[data-state="stale"]::before {
  content: "●  LIVE DATA · STALE";
  animation-duration: 2.35s;
}

#mt5SyncConfidenceCenter[data-state="stale"]::after {
  opacity: 0.72;
  animation-duration: 3.15s;
}

#mt5SyncConfidenceCenter[data-state="warning"]::before {
  content: "●  LIVE DATA · WARNING";
  animation-duration: 1.9s;
}

#mt5SyncConfidenceCenter[data-state="warning"]::after {
  opacity: 0.86;
  animation-duration: 2.55s;
}

#mt5SyncConfidenceCenter[data-state="error"]::before {
  content: "●  LIVE DATA · ERROR";
  animation: none;
}

#mt5SyncConfidenceCenter[data-state="error"]::after {
  opacity: 0.46;
  animation: none;
  background-position:
    52% 13px,
    68% 29px,
    46% 45px,
    61% 58px,
    14px 13px,
    14px 29px,
    14px 45px,
    14px 58px,
    0 0;
}

@media (max-width: 420px) {
  #mt5SyncConfidenceCenter[data-state="error"]::after {
    background-position:
      52% 12px,
      68% 25px,
      46% 38px,
      61% 51px,
      11px 12px,
      11px 25px,
      11px 38px,
      11px 51px,
      0 0;
  }
}