/* ============================================================
   QMT ROTATION DIAGRAM — Ring, Cards, Animations
   ============================================================ */

.qmt-rotation-ui {
  --qmt-stage:        420px;
  --qmt-ring:         145px;
  --qmt-center:       84px;
  --qmt-logo:         38px;

  --qmt-card-w:       148px;
  --qmt-card-min-h:   90px;
  --qmt-card-radius:  2px;
  --qmt-card-pad-x:   12px;
  --qmt-card-pad-y:   11px;

  --qmt-title-size:   12px;
  --qmt-status-size:  11px;
  --qmt-dot:          6px;
  --qmt-chart-h:      28px;

  /* Colour tokens — warm dark, gold-led */
  --qmt-bg-card:      rgba(12, 11, 10, 0.94);
  --qmt-border:       rgba(184, 150, 46, 0.15);
  --qmt-text:         #E2DED7;

  /* Desaturated accent colours */
  --qmt-green:        #6DB89A;
  --qmt-blue:         #5A8FA8;
  --qmt-orange:       #C9A84C;

  width: 100%;
}

/* ============================================================
   STAGE
   ============================================================ */
.qmt-rotation-ui__stage {
  position: relative;
  width: min(100%, var(--qmt-stage));
  margin: 0 auto;
  min-height: 360px;
  isolation: isolate;
}

/* ============================================================
   FLOOR GLOW
   ============================================================ */
.qmt-rotation-ui__floor {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--qmt-ring) * 2.8);
  height: calc(var(--qmt-ring) * 0.55);
  transform: translate(-50%, 70%);
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(184, 150, 46, 0.06) 0%,
    rgba(184, 150, 46, 0.02) 45%,
    rgba(184, 150, 46, 0) 75%
  );
  z-index: 0;
}

.qmt-rotation-ui__floor::before,
.qmt-rotation-ui__floor::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(184, 150, 46, 0.07);
}

.qmt-rotation-ui__floor::before { width: 46%; height: 46%; }
.qmt-rotation-ui__floor::after  { width: 76%; height: 76%; }

/* ============================================================
   RING
   ============================================================ */
.qmt-rotation-ui__ring-wrap {
  position: absolute;
  inset: 54% auto auto 50%;
  transform: translate(-50%, -50%);
  width: var(--qmt-ring);
  height: var(--qmt-ring);
  z-index: 2;
}

.qmt-rotation-ui__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

.qmt-rotation-ui__ring--main {
  animation: qmtSpin 12s linear infinite;
  will-change: transform;
  -webkit-animation: qmtSpin 12s linear infinite;
}

.qmt-rotation-ui__ring--main::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 215deg,
    var(--qmt-green)  0deg   85deg,
    transparent       85deg  118deg,
    var(--qmt-blue)   118deg 198deg,
    transparent       198deg 238deg,
    var(--qmt-orange) 238deg 325deg,
    transparent       325deg 360deg
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
  mask:          radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
  opacity: 0.75;
}

/* ============================================================
   ARROWS
   ============================================================ */
.qmt-rotation-ui__arrow {
  position: absolute;
  width: 9px;
  height: 11px;
  clip-path: polygon(50% 0%, 100% 100%, 50% 68%, 0% 100%);
  opacity: 0.7;
}

.qmt-rotation-ui__arrow--green  { top: 11%; left: 14%;  transform: rotate(47deg);   background: var(--qmt-green); }
.qmt-rotation-ui__arrow--blue   { top: 30%; right: -3%; transform: rotate(157deg);  background: var(--qmt-blue); }
.qmt-rotation-ui__arrow--orange { bottom: -2%; left: 31%; transform: rotate(-68deg); background: var(--qmt-orange); }

/* ============================================================
   CENTER ORB
   ============================================================ */
.qmt-rotation-ui__center {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: var(--qmt-center);
  height: var(--qmt-center);
  border-radius: 50%;
  background: radial-gradient(
    circle at 38% 32%,
    #141210,
    #080706 72%
  );
  box-shadow:
    0 0 0 1px rgba(184, 150, 46, 0.14),
    0 0 32px rgba(0, 0, 0, 0.55),
    inset 0 0 20px rgba(184, 150, 46, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
}

.qmt-rotation-ui__center::before {
  content: "";
  position: absolute;
  inset: -12%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(184, 150, 46, 0.06), transparent 65%);
  z-index: -1;
  filter: blur(8px);
}

.qmt-rotation-ui__logo {
  width: var(--qmt-logo);
  height: var(--qmt-logo);
  object-fit: contain;
  z-index: 2;
  animation: qmtLogoPulse 3.5s ease-in-out infinite;
  filter:
    drop-shadow(0 0 6px rgba(201, 168, 76, 0.22))
    drop-shadow(0 0 14px rgba(201, 168, 76, 0.10));
}

/* ============================================================
   CARDS — sharp corners, warm dark surface, gold border
   ============================================================ */
.qmt-card {
  position: absolute;
  width: var(--qmt-card-w);
  min-height: var(--qmt-card-min-h);
  padding: var(--qmt-card-pad-y) var(--qmt-card-pad-x) calc(var(--qmt-card-pad-y) * 0.8);
  border-radius: var(--qmt-card-radius);
  background: linear-gradient(160deg, #0E0C0A 0%, #080706 100%);
  border: 1px solid var(--qmt-border);
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(184, 150, 46, 0.07);
  z-index: 3;
}

/* Top gold accent line on card */
.qmt-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(184, 150, 46, 0.5) 0%,
    rgba(184, 150, 46, 0.1) 60%,
    transparent 100%
  );
  border-radius: var(--qmt-card-radius) var(--qmt-card-radius) 0 0;
}

/* Subtle divider above chart */
.qmt-card::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 36px;
  height: 1px;
  background: rgba(184, 150, 46, 0.06);
  pointer-events: none;
}

.qmt-card--top   { top: 0;    left: 50%; transform: translateX(-50%); }
.qmt-card--left  { left: 0;   bottom: 1%; }
.qmt-card--right { right: 0;  bottom: 1%; }

/* ---- Card header ---- */
.qmt-card__header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.qmt-card__dot {
  width: var(--qmt-dot);
  height: var(--qmt-dot);
  border-radius: 50%;
  flex: 0 0 var(--qmt-dot);
}

.qmt-card__dot--green  { background: var(--qmt-green);  box-shadow: 0 0 6px rgba(109, 184, 154, 0.4); }
.qmt-card__dot--blue   { background: var(--qmt-blue);   box-shadow: 0 0 6px rgba(90, 143, 168, 0.35); }
.qmt-card__dot--orange { background: var(--qmt-orange); box-shadow: 0 0 6px rgba(201, 168, 76, 0.4); }

.qmt-card__title {
  font-family: var(--qmt-font-display);
  font-size: var(--qmt-title-size);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--qmt-text);
  line-height: 1.1;
}

/* ---- Status ---- */
.qmt-card__status {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 7px;
  font-family: var(--qmt-font-body);
  font-size: var(--qmt-status-size);
  font-weight: 400;
  letter-spacing: 0.04em;
}

.qmt-card__status::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  border: 1px solid currentColor;
  flex: 0 0 5px;
}

.qmt-card__status--active {
  color: var(--qmt-green);
  text-shadow: 0 0 8px rgba(109, 184, 154, 0.35);
}

.qmt-card__status--active::before {
  background: currentColor;
  box-shadow: 0 0 5px currentColor;
}

.qmt-card__status--blue   { color: var(--qmt-blue); }
.qmt-card__status--orange { color: var(--qmt-orange); }

/* ---- Charts ---- */
.qmt-card__chart {
  display: block;
  width: 100%;
  height: var(--qmt-chart-h);
  overflow: visible;
}

.qmt-card__chart polyline {
  fill: none;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.qmt-card__chart--green  polyline { stroke: var(--qmt-green);  filter: drop-shadow(0 0 3px rgba(109, 184, 154, 0.4)); }
.qmt-card__chart--blue   polyline { stroke: var(--qmt-blue);   filter: drop-shadow(0 0 3px rgba(90, 143, 168, 0.35)); }
.qmt-card__chart--orange polyline { stroke: var(--qmt-orange); filter: drop-shadow(0 0 3px rgba(201, 168, 76, 0.4)); }

.qmt-chart-grid {
  stroke: rgba(255, 255, 255, 0.05);
  stroke-width: 0.5;
  shape-rendering: crispEdges;
}

.qmt-chart-now {
  stroke: rgba(184, 150, 46, 0.12);
  stroke-width: 0.75;
  stroke-dasharray: 3 3;
}

.qmt-chart-dot { animation: qmtDotPulse 2.2s ease-in-out infinite; }

.qmt-chart-dot--green  { fill: var(--qmt-green);  filter: drop-shadow(0 0 4px rgba(109, 184, 154, 0.6)); }
.qmt-chart-dot--blue   { fill: var(--qmt-blue);   filter: drop-shadow(0 0 4px rgba(90, 143, 168, 0.55)); }
.qmt-chart-dot--orange { fill: var(--qmt-orange); filter: drop-shadow(0 0 4px rgba(201, 168, 76, 0.6)); }

/* Active card — gold lift */
.qmt-card.is-active {
  border-color: rgba(184, 150, 46, 0.28);
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(184, 150, 46, 0.12),
    inset 0 1px 0 rgba(184, 150, 46, 0.12);
}

/* ============================================================
   KEYFRAMES
   ============================================================ */
@keyframes qmtSpin {
  to { transform: rotate(360deg); }
}
@-webkit-keyframes qmtSpin {
  to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

@keyframes qmtLogoPulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.04); }
}

@keyframes qmtDotPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.35; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 767px) {
  .qmt-rotation-ui { --qmt-stage: 100%; }
  .qmt-card--left  { left: 1%; }
  .qmt-card--right { right: 1%; }
}

@media (max-width: 560px) {
  .qmt-rotation-ui {
    --qmt-stage:       100%;
    --qmt-ring:        130px;
    --qmt-center:      74px;
    --qmt-logo:        34px;
    --qmt-card-w:      100%;
    --qmt-card-min-h:  unset;
    --qmt-chart-h:     18px;
    --qmt-card-pad-x:  12px;
    --qmt-card-pad-y:  10px;
  }

  .qmt-rotation-ui__stage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "top  top"
      "ring ring"
      "left right";
    gap: 10px;
    align-items: start;
    justify-items: center;
    min-height: unset;
    width: 100%;
  }

  .qmt-rotation-ui__floor { display: none; }

  .qmt-rotation-ui__ring-wrap,
  .qmt-card--top,
  .qmt-card--left,
  .qmt-card--right {
    position: relative;
    inset: auto;
    transform: none;
  }

  .qmt-card          { width: 100%; min-height: unset; }
  .qmt-card--top     { grid-area: top;  justify-self: stretch; }
  .qmt-rotation-ui__ring-wrap { grid-area: ring; }
  .qmt-card--left    { grid-area: left;  justify-self: stretch; }
  .qmt-card--right   { grid-area: right; justify-self: stretch; }
}

@media (max-width: 380px) {
  .qmt-rotation-ui__stage {
    grid-template-columns: 1fr;
    grid-template-areas: "top" "ring" "left" "right";
  }
}