/* PEGGY_DASH_V2_CSS */

#page-dash.peggy-dash-v2 .dash-status-strip,
#page-dash.peggy-dash-v2 .dash-main-grid,
#page-dash.peggy-dash-v2 .dash-secondary-grid,
#page-dash.peggy-dash-v2 .dash-arc-cluster,
#page-dash.peggy-dash-v2 .dash-blade-cluster {
  display: none !important;
}

#dashV2Root {
  width: 100%;
  min-height: 500px;
  color: #f4f6f8;
  font-variant-numeric: tabular-nums;
}

.d2-shell {
  position: relative;
  width: 100%;
  min-height: 500px;
  border-radius: 16px;
  overflow: hidden;

  background:
    linear-gradient(
      145deg,
      rgba(10,13,17,.99),
      rgba(3,5,7,1)
    );

  border:
    1px solid rgba(255,255,255,.07);
}

.d2-status {
  display: flex;
  gap: 7px;

  position: absolute;
  left: 14px;
  top: 11px;

  z-index: 10;
}

.d2-chip {
  padding: 4px 8px;

  border-radius: 7px;
  border: 1px solid rgba(255,255,255,.12);

  background: rgba(5,8,10,.68);

  color: rgba(220,225,230,.74);

  font-size: .53rem;
  font-weight: 800;
  letter-spacing: .08em;
}

.d2-chip.good {
  color: #7ee0a3;
}

.d2-chip.warn {
  color: #e8bd62;
}

.d2-unit {
  color: rgba(200,207,214,.55);

  font-size: .67rem;
  font-weight: 800;
  letter-spacing: .20em;
}

.d2-info-strip {
  display: grid;
  grid-template-columns:
    repeat(6, minmax(0,1fr));

  margin-top: 10px;

  border-top:
    1px solid rgba(255,255,255,.07);
}

.d2-info {
  padding: 11px 6px 8px;
  text-align: center;
}

.d2-info + .d2-info {
  border-left:
    1px solid rgba(255,255,255,.05);
}

.d2-info small {
  display: block;

  margin-bottom: 4px;

  color: rgba(180,188,196,.46);

  font-size: .49rem;
  font-weight: 800;
  letter-spacing: .08em;
}

.d2-info strong {
  font-size: 1rem;
  font-weight: 650;
}


/* =====================================================
   OEM TOURING
   ===================================================== */

.d2-oem {
  padding: 42px 18px 14px;
}

.d2-oem-main {
  display: grid;

  grid-template-columns:
    minmax(0,1.55fr)
    minmax(180px,.65fr);

  gap: 12px;

  min-height: 340px;
}

.d2-oem-speed {
  display: flex;
  flex-direction: column;
  justify-content: center;

  padding: 10px 18px 10px 24px;
}

.d2-oem-number {
  font-size:
    clamp(8rem,23vw,14rem);

  font-weight: 300;

  line-height: .78;
  letter-spacing: -.08em;
}

.d2-oem-speed .d2-unit {
  margin-left: 8px;
  margin-top: 8px;
}

.d2-source {
  margin-left: 8px;
  margin-top: 18px;

  color: rgba(180,188,196,.43);

  font-size: .54rem;
  font-weight: 800;
  letter-spacing: .08em;
}

.d2-oem-side {
  display: flex;
  flex-direction: column;
  justify-content: center;

  padding: 16px 15px;

  border-left:
    1px solid rgba(255,255,255,.065);
}

.d2-label {
  color: rgba(184,193,202,.50);

  font-size: .56rem;
  font-weight: 800;
  letter-spacing: .12em;
}

.d2-oem-gear {
  margin-top: 5px;

  font-size: 4.2rem;
  font-weight: 400;
  line-height: 1;
}

.d2-rpm-number {
  margin-top: 28px;

  font-size: 2rem;
  font-weight: 600;
}

.d2-rpm-track {
  height: 9px;

  margin-top: 10px;

  border-radius: 999px;

  background:
    rgba(255,255,255,.08);

  overflow: hidden;
}

.d2-rpm-fill {
  height: 100%;

  width: var(--rpm-pct);

  background:
    linear-gradient(
      90deg,
      #3bbd70,
      #d2c744 62%,
      #ef8d2d 82%,
      #d94538
    );

  transition:
    width .15s linear;
}


/* =====================================================
   PERFORMANCE
   ===================================================== */

.d2-performance {
  padding: 42px 16px 14px;

  background:
    radial-gradient(
      circle at 50% 20%,
      rgba(255,80,25,.10),
      transparent 42%
    ),
    linear-gradient(
      155deg,
      rgba(9,12,16,.99),
      rgba(2,4,6,1)
    );
}

.d2-shift {
  display: grid;
  grid-template-columns:
    repeat(12,1fr);

  gap: 5px;

  margin: 4px 7% 20px;
}

.d2-shift-seg {
  height: 12px;

  border-radius: 3px;

  background:
    rgba(255,255,255,.07);
}

.d2-shift-seg.on.green {
  background: #39b96b;
}

.d2-shift-seg.on.yellow {
  background: #d4c43d;
}

.d2-shift-seg.on.orange {
  background: #ed862d;
}

.d2-shift-seg.on.red {
  background: #dc4039;
}

.d2-performance-center {
  display: grid;

  grid-template-columns:
    minmax(0,1fr)
    110px;

  align-items: center;

  min-height: 295px;
}

.d2-performance-speed {
  text-align: center;
}

.d2-performance-number {
  font-size:
    clamp(9rem,25vw,15rem);

  font-weight: 300;

  line-height: .74;
  letter-spacing: -.085em;
}

.d2-performance-side {
  border-left:
    1px solid rgba(255,255,255,.07);

  text-align: center;
}

.d2-performance-gear {
  font-size: 4.5rem;
  font-weight: 400;
  line-height: 1;
}

.d2-performance-rpm {
  margin-top: 28px;

  font-size: 1.3rem;
  font-weight: 650;
}


/* =====================================================
   CVO CUSTOM
   ===================================================== */

.d2-cvo {
  padding: 46px 20px 16px;

  background:
    radial-gradient(
      circle at 50% 44%,
      rgba(130,56,18,.22),
      transparent 48%
    ),
    linear-gradient(
      140deg,
      #090b0d,
      #020304
    );
}

.d2-cvo-arc {
  position: relative;

  width: min(620px,94%);
  height: 305px;

  margin: 0 auto;
}

.d2-cvo-svg {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;
}

.d2-arc-bg {
  fill: none;

  stroke:
    rgba(255,255,255,.08);

  stroke-width: 10;
  stroke-linecap: round;
}

.d2-arc-live {
  fill: none;

  stroke:
    url(#cvoGradient);

  stroke-width: 10;
  stroke-linecap: round;

  stroke-dasharray: 100;
  stroke-dashoffset:
    calc(100 - var(--rpm-num));

  transition:
    stroke-dashoffset .16s linear;
}

.d2-cvo-center {
  position: absolute;

  left: 50%;
  top: 54%;

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

  text-align: center;
}

.d2-cvo-speed {
  font-size:
    clamp(8rem,22vw,13rem);

  font-weight: 300;

  line-height: .76;
  letter-spacing: -.075em;
}

.d2-cvo-bottom {
  display: flex;
  justify-content: center;
  align-items: center;

  gap: 38px;

  margin-top: 4px;
}

.d2-cvo-bottom small {
  display: block;

  color: rgba(188,196,204,.48);

  font-size: .48rem;
  font-weight: 800;
  letter-spacing: .10em;
}

.d2-cvo-bottom strong {
  font-size: 1.35rem;
  font-weight: 650;
}

.d2-cvo-gear strong {
  font-size: 3rem;
  font-weight: 450;
}


/* =====================================================
   WILD
   ===================================================== */

.d2-wild {
  padding: 42px 16px 16px;

  background:
    radial-gradient(
      circle at 50% 45%,
      rgba(25,87,120,.22),
      rgba(17,30,40,.10) 35%,
      rgba(3,5,7,1) 70%
    );
}

.d2-wild-stage {
  position: relative;

  width: min(520px,90%);

  aspect-ratio: 1/.72;

  margin: 0 auto;
}

.d2-orbit {
  position: absolute;

  left: 50%;
  top: 50%;

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

  border-radius: 50%;

  border:
    1px solid rgba(255,255,255,.08);
}

.d2-orbit.one {
  width: 88%;
  height: 88%;
}

.d2-orbit.two {
  width: 69%;
  height: 69%;

  border-color:
    rgba(232,117,39,.27);
}

.d2-orbit.three {
  width: 49%;
  height: 49%;

  border-color:
    rgba(70,160,190,.24);
}

.d2-orbit-progress {
  position: absolute;

  inset: 4%;

  border-radius: 50%;

  background:
    conic-gradient(
      from 220deg,
      #38bb6d 0 var(--rpm-pct),
      rgba(255,255,255,.04)
        var(--rpm-pct) 100%
    );

  -webkit-mask:
    radial-gradient(
      circle,
      transparent 0 83%,
      #000 84% 86%,
      transparent 87%
    );

  mask:
    radial-gradient(
      circle,
      transparent 0 83%,
      #000 84% 86%,
      transparent 87%
    );
}

.d2-wild-speed {
  position: absolute;

  left: 50%;
  top: 47%;

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

  font-size:
    clamp(8rem,22vw,13rem);

  font-weight: 300;

  line-height: .78;
  letter-spacing: -.08em;
}

.d2-wild-gear {
  position: absolute;

  right: 11%;
  top: 50%;

  transform:
    translateY(-50%);

  text-align: center;
}

.d2-wild-rpm {
  position: absolute;

  left: 8%;
  top: 50%;

  transform:
    translateY(-50%);

  text-align: center;
}

.d2-wild-gear strong {
  display: block;

  font-size: 3.2rem;
  font-weight: 400;
}

.d2-wild-rpm strong {
  display: block;

  font-size: 1.5rem;
  font-weight: 650;
}


/* =====================================================
   5-INCH SCREEN
   ===================================================== */

@media (max-width:650px) {

  #dashV2Root,
  .d2-shell {
    min-height: 440px;
  }

  .d2-oem-main {
    grid-template-columns:
      minmax(0,1.45fr)
      145px;

    min-height: 295px;
  }

  .d2-oem-number {
    font-size:
      clamp(6.6rem,21vw,10rem);
  }

  .d2-info-strip {
    grid-template-columns:
      repeat(3,1fr);
  }

  .d2-performance-center {
    grid-template-columns:
      1fr 90px;

    min-height: 260px;
  }

  .d2-performance-number {
    font-size:
      clamp(7rem,23vw,11rem);
  }

  .d2-cvo-arc {
    height: 265px;
  }

  .d2-cvo-speed,
  .d2-wild-speed {
    font-size:
      clamp(6.8rem,21vw,10rem);
  }

}


/* PEGGY_CVO_CLUSTER_V2_CSS */

.cvo2-shell {
  min-height: 500px;

  padding:
    8px 14px 14px;

  background:
    radial-gradient(
      ellipse at 50% 42%,
      rgba(112,47,16,.16),
      transparent 45%
    ),
    radial-gradient(
      ellipse at 50% 25%,
      rgba(205,98,29,.055),
      transparent 38%
    ),
    linear-gradient(
      155deg,
      #080a0d 0%,
      #030405 58%,
      #090503 100%
    );

  border:
    1px solid rgba(255,255,255,.075);

  box-shadow:
    inset 0 1px 0
      rgba(255,255,255,.025),
    inset 0 -24px 80px
      rgba(0,0,0,.40);
}


/* -----------------------------------------------------
   TOP / SHIFT LIGHTS
   ----------------------------------------------------- */

.cvo2-top {
  position: relative;

  height: 34px;

  display: flex;

  align-items: center;

  justify-content: center;
}


.cvo2-top-left {
  position: absolute;

  left: 2px;

  display: flex;

  gap: 5px;
}


.cvo2-alert {
  padding: 3px 7px;

  border-radius: 999px;

  font-size: .48rem;

  font-weight: 900;

  letter-spacing: .08em;
}


.cvo2-alert.subtle {
  color: rgba(225,190,115,.76);

  border:
    1px solid rgba(225,190,115,.18);

  background:
    rgba(65,45,16,.18);
}


.cvo2-alert.recording {
  color: #8df0af;

  border:
    1px solid rgba(90,220,135,.25);

  background:
    rgba(20,80,45,.22);
}


.cvo2-shift-lights {
  display: grid;

  grid-template-columns:
    repeat(10, 1fr);

  gap: 6px;

  width: min(380px, 58%);
}


.cvo2-shift-light {
  height: 9px;

  border-radius: 999px;

  background:
    rgba(255,255,255,.055);

  border:
    1px solid rgba(255,255,255,.035);

  transition:
    background .10s linear,
    box-shadow .10s linear,
    opacity .10s linear;
}


.cvo2-shift-light.on.green {
  background: #3fb66e;

  box-shadow:
    0 0 10px
    rgba(63,182,110,.52);
}


.cvo2-shift-light.on.yellow {
  background: #cfbd38;

  box-shadow:
    0 0 11px
    rgba(207,189,56,.55);
}


.cvo2-shift-light.on.orange {
  background: #e97829;

  box-shadow:
    0 0 12px
    rgba(233,120,41,.60);
}


.cvo2-shift-light.on.red {
  background: #de4237;

  box-shadow:
    0 0 14px
    rgba(222,66,55,.72);
}


/* -----------------------------------------------------
   MAIN GAUGE
   ----------------------------------------------------- */

.cvo2-stage {
  position: relative;

  width: min(760px, 100%);

  height: 365px;

  margin: 0 auto;
}


.cvo2-gauge-svg {
  position: absolute;

  inset: -14px 0 0;

  width: 100%;
  height: 100%;

  overflow: visible;
}


.cvo2-tach-track {
  fill: none;

  stroke:
    rgba(255,255,255,.065);

  stroke-width: 12;

  stroke-linecap: round;
}


.cvo2-tach-progress {
  fill: none;

  stroke:
    url(#cvo2TachGradient);

  stroke-width: 12;

  stroke-linecap: round;

  stroke-dasharray: 100;

  stroke-dashoffset:
    calc(
      100 -
      var(--cvo-rpm-pct)
    );

  transition:
    stroke-dashoffset .15s linear;
}


.cvo2-tach-glow {
  fill: none;

  stroke:
    rgba(227,111,42,.20);

  stroke-width: 20;

  stroke-linecap: round;

  stroke-dasharray: 100;

  stroke-dashoffset:
    calc(
      100 -
      var(--cvo-rpm-pct)
    );

  filter:
    url(#cvo2Glow);

  transition:
    stroke-dashoffset .15s linear;
}


.cvo2-tick {
  stroke:
    rgba(220,225,230,.22);

  stroke-width: 2;
}


.cvo2-tick.major {
  stroke:
    rgba(235,238,241,.52);

  stroke-width: 3;
}


.cvo2-tick-label {
  fill:
    rgba(225,229,233,.56);

  font-size: 17px;

  font-family:
    Arial,
    sans-serif;

  font-weight: 700;
}


.cvo2-rpm-title {
  fill:
    rgba(192,199,205,.42);

  font-size: 13px;

  font-family:
    Arial,
    sans-serif;

  font-weight: 800;

  letter-spacing: 3px;
}


/* -----------------------------------------------------
   CENTER SPEED
   ----------------------------------------------------- */

.cvo2-center {
  position: absolute;

  left: 50%;
  top: 47%;

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

  text-align: center;
}


.cvo2-speed {
  font-family:
    "Arial Narrow",
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size:
    clamp(8rem, 23vw, 13.5rem);

  font-weight: 300;

  line-height: .72;

  letter-spacing: -.075em;

  color:
    rgba(247,248,249,.985);

  text-shadow:
    0 2px 4px rgba(0,0,0,.75);
}


.cvo2-mph {
  margin-top: 10px;

  color:
    rgba(204,211,218,.62);

  font-size: .65rem;

  font-weight: 900;

  letter-spacing: .27em;
}


.cvo2-source {
  margin-top: 7px;

  color:
    rgba(182,191,199,.35);

  font-size: .46rem;

  font-weight: 800;

  letter-spacing: .10em;
}


.cvo2-speed-compare {
  margin-top: 5px;

  color:
    rgba(236,163,82,.72);

  font-size: .46rem;

  font-weight: 900;

  letter-spacing: .07em;
}


/* -----------------------------------------------------
   GEAR / RPM
   ----------------------------------------------------- */

.cvo2-gear {
  position: absolute;

  right: 17%;

  bottom: 48px;

  text-align: center;
}


.cvo2-gear span,
.cvo2-rpm-readout span {
  display: block;

  color:
    rgba(186,194,201,.43);

  font-size: .48rem;

  font-weight: 900;

  letter-spacing: .12em;
}


.cvo2-gear strong {
  display: block;

  margin-top: 2px;

  color: #f4f5f6;

  font-size: 3.2rem;

  font-weight: 400;

  line-height: 1;
}


.cvo2-rpm-readout {
  position: absolute;

  left: 16%;

  bottom: 54px;

  text-align: center;
}


.cvo2-rpm-readout strong {
  display: block;

  margin-top: 4px;

  color: rgba(242,244,246,.93);

  font-size: 1.25rem;

  font-weight: 650;
}


/* -----------------------------------------------------
   LOWER INSTRUMENT RAIL
   ----------------------------------------------------- */

.cvo2-lower {
  display: grid;

  grid-template-columns:
    1.4fr
    repeat(4, 1fr);

  align-items: center;

  min-height: 82px;

  margin-top: -5px;

  border-top:
    1px solid rgba(255,255,255,.065);

  background:
    linear-gradient(
      180deg,
      rgba(16,18,21,.34),
      rgba(5,7,8,.18)
    );
}


.cvo2-lower-stat {
  position: relative;

  min-width: 0;

  padding: 8px 10px;

  text-align: center;
}


.cvo2-lower-stat + .cvo2-lower-stat {
  border-left:
    1px solid rgba(255,255,255,.045);
}


.cvo2-lower-stat span {
  display: block;

  color:
    rgba(181,189,197,.43);

  font-size: .47rem;

  font-weight: 900;

  letter-spacing: .10em;
}


.cvo2-lower-stat strong {
  display: block;

  margin-top: 5px;

  color:
    rgba(241,243,245,.94);

  font-size: 1rem;

  font-weight: 650;
}


.cvo2-lower-stat strong.warning {
  color: #ef8732;

  text-shadow:
    0 0 9px
    rgba(239,135,50,.25);
}


/* -----------------------------------------------------
   CURVED FUEL GAUGE
   ----------------------------------------------------- */

.cvo2-fuel {
  position: relative;

  height: 78px;

  overflow: hidden;
}


.cvo2-fuel-svg {
  position: absolute;

  left: 50%;
  top: 0;

  width: 145px;
  height: 82px;

  transform:
    translateX(-50%);
}


.cvo2-fuel-track {
  fill: none;

  stroke:
    rgba(255,255,255,.07);

  stroke-width: 8;

  stroke-linecap: round;
}


.cvo2-fuel-progress {
  fill: none;

  stroke: #d8752f;

  stroke-width: 8;

  stroke-linecap: round;

  stroke-dasharray: 100;

  stroke-dashoffset:
    calc(
      100 -
      var(--cvo-fuel-pct)
    );

  transition:
    stroke-dashoffset .3s ease;
}


.cvo2-fuel.warning
.cvo2-fuel-progress {
  stroke: #df4439;

  filter:
    drop-shadow(
      0 0 4px
      rgba(223,68,57,.42)
    );
}


.cvo2-fuel-text {
  position: absolute;

  left: 50%;
  bottom: 6px;

  transform:
    translateX(-50%);

  text-align: center;
}


.cvo2-fuel-text span {
  display: block;

  color:
    rgba(184,192,200,.43);

  font-size: .45rem;

  font-weight: 900;

  letter-spacing: .11em;
}


.cvo2-fuel-text strong {
  display: block;

  margin-top: 2px;

  color: rgba(245,246,247,.95);

  font-size: 1rem;

  font-weight: 650;
}


/* -----------------------------------------------------
   FIVE-INCH DISPLAY
   ----------------------------------------------------- */

@media (max-width: 650px) {

  .cvo2-shell {
    min-height: 450px;

    padding:
      7px 9px 10px;
  }


  .cvo2-top {
    height: 28px;
  }


  .cvo2-shift-lights {
    width: 48%;

    gap: 4px;
  }


  .cvo2-shift-light {
    height: 7px;
  }


  .cvo2-stage {
    height: 315px;
  }


  .cvo2-speed {
    font-size:
      clamp(6.8rem, 21vw, 10.5rem);
  }


  .cvo2-gear {
    right: 14%;
    bottom: 44px;
  }


  .cvo2-rpm-readout {
    left: 13%;
    bottom: 49px;
  }


  .cvo2-gear strong {
    font-size: 2.6rem;
  }


  .cvo2-lower {
    min-height: 70px;

    grid-template-columns:
      1.25fr
      repeat(4, 1fr);
  }


  .cvo2-lower-stat {
    padding:
      7px 4px;
  }


  .cvo2-lower-stat strong {
    font-size: .84rem;
  }


  .cvo2-fuel {
    height: 68px;
  }


  .cvo2-fuel-svg {
    width: 126px;
    height: 69px;
  }

}



/* PEGGY_CVO_POLISH_V3_CSS */


/* =====================================================
   MAIN TACH — DEEPER, CLEANER COPPER
   ===================================================== */

.cvo2-tach-track {
  stroke:
    rgba(255,255,255,.050);

  stroke-width: 11;
}


.cvo2-tach-progress {
  stroke-width: 11;

  filter:
    drop-shadow(
      0 0 2px
      rgba(224,105,36,.24)
    );
}


.cvo2-tach-glow {
  stroke:
    rgba(229,105,38,.15);

  stroke-width: 23;
}


.cvo2-tick {
  stroke:
    rgba(221,225,230,.20);
}


.cvo2-tick.major {
  stroke:
    rgba(239,241,243,.58);
}


.cvo2-tick-label {
  fill:
    rgba(226,230,233,.66);

  font-size: 16px;
}


.cvo2-rpm-title {
  fill:
    rgba(202,208,214,.48);

  font-size: 12px;

  letter-spacing: 3.2px;
}


/* =====================================================
   SPEED — A LITTLE MORE PREMIUM
   ===================================================== */

.cvo2-speed {
  color:
    rgba(248,249,250,.99);

  text-shadow:
    0 2px 4px rgba(0,0,0,.75),
    0 0 14px rgba(255,255,255,.025);
}


.cvo2-mph {
  margin-top: 8px;

  color:
    rgba(209,215,220,.68);
}


.cvo2-source {
  margin-top: 9px;

  opacity: .74;
}


/* =====================================================
   RPM + GEAR — PULL THEM INTO THE INSTRUMENT
   ===================================================== */

.cvo2-rpm-readout {
  left: 19.5%;
  bottom: 61px;
}


.cvo2-gear {
  right: 20%;
  bottom: 56px;
}


.cvo2-rpm-readout span,
.cvo2-gear span {
  color:
    rgba(191,199,206,.48);
}


.cvo2-rpm-readout strong {
  margin-top: 5px;

  font-size: 1.32rem;

  letter-spacing: -.025em;
}


.cvo2-gear strong {
  margin-top: 3px;

  font-size: 3.35rem;

  line-height: .94;
}


/* =====================================================
   SHIFT LIGHTS
   ===================================================== */

.cvo2-shift-lights {
  gap: 5px;

  width: min(390px, 58%);
}


.cvo2-shift-light {
  height: 8px;

  opacity: .46;

  transform:
    scaleY(.82);

  transition:
    background .09s linear,
    box-shadow .09s linear,
    opacity .09s linear,
    transform .09s linear;
}


.cvo2-shift-light.on {
  opacity: 1;

  transform:
    scaleY(1);
}


.cvo2-shift-light.on.green {
  box-shadow:
    0 0 7px rgba(63,182,110,.42);
}


.cvo2-shift-light.on.yellow {
  box-shadow:
    0 0 8px rgba(207,189,56,.48);
}


.cvo2-shift-light.on.orange {
  box-shadow:
    0 0 10px rgba(233,120,41,.58);
}


.cvo2-shift-light.on.red {
  box-shadow:
    0 0 13px rgba(222,66,55,.70);
}


@keyframes cvo2RedlinePulse {

  0% {
    transform:
      scaleY(1);
    opacity: 1;
  }

  50% {
    transform:
      scaleY(1.45);
    opacity: .72;
  }

  100% {
    transform:
      scaleY(1);
    opacity: 1;
  }

}


.cvo2-shift-light.hot {
  animation:
    cvo2RedlinePulse
    .30s
    ease-in-out
    infinite;

  box-shadow:
    0 0 17px rgba(222,66,55,.90);
}


/* =====================================================
   TOP STATUS — LESS VISUAL NOISE
   ===================================================== */

.cvo2-alert {
  padding:
    3px 7px;

  font-size: .44rem;

  opacity: .74;
}


.cvo2-alert.recording {
  opacity: 1;
}


/* =====================================================
   LOWER RAIL — THINNER, MORE INSTRUMENT-LIKE
   ===================================================== */

.cvo2-lower {
  min-height: 68px;

  margin-top: -13px;

  grid-template-columns:
    1.25fr
    repeat(4, 1fr);

  border-top:
    1px solid rgba(255,255,255,.055);

  background:
    linear-gradient(
      180deg,
      rgba(14,17,20,.26),
      rgba(4,6,7,.12)
    );
}


.cvo2-lower-stat {
  padding:
    5px 8px;
}


.cvo2-lower-stat span {
  font-size: .43rem;

  color:
    rgba(183,191,198,.40);
}


.cvo2-lower-stat strong {
  margin-top: 4px;

  font-size: .94rem;
}


/* =====================================================
   FUEL ARC — SAME FAMILY AS THE TACH
   ===================================================== */

.cvo2-fuel {
  height: 66px;
}


.cvo2-fuel-svg {
  width: 136px;
  height: 69px;

  top: -4px;
}


.cvo2-fuel-track {
  stroke:
    rgba(255,255,255,.055);

  stroke-width: 7;
}


.cvo2-fuel-progress {
  stroke: #d46a29;

  stroke-width: 7;

  filter:
    drop-shadow(
      0 0 2px
      rgba(212,106,41,.22)
    );
}


.cvo2-fuel-text {
  bottom: 3px;
}


.cvo2-fuel-text span {
  color:
    rgba(185,193,200,.41);

  font-size: .42rem;
}


.cvo2-fuel-text strong {
  font-size: .94rem;
}


/* =====================================================
   TOUCH-LOCK POSITION ON DASH
   Give the instrument more room.
   ===================================================== */

body.peggy-dash-focus
#dashboardTouchLockButton {
  right: 10px;
  bottom: 10px;

  transform:
    scale(.82);

  transform-origin:
    bottom right;

  opacity: .72;
}


body.peggy-dash-focus
#dashboardTouchLockButton:hover,

body.peggy-dash-focus
#dashboardTouchLockButton:active {
  opacity: 1;
}


/* =====================================================
   5-INCH SCREEN
   ===================================================== */

@media (max-width: 650px) {

  .cvo2-stage {
    height: 310px;
  }


  .cvo2-rpm-readout {
    left: 17%;
    bottom: 54px;
  }


  .cvo2-gear {
    right: 17%;
    bottom: 49px;
  }


  .cvo2-rpm-readout strong {
    font-size: 1.12rem;
  }


  .cvo2-gear strong {
    font-size: 2.65rem;
  }


  .cvo2-lower {
    min-height: 61px;

    margin-top: -10px;
  }


  .cvo2-lower-stat {
    padding:
      4px 3px;
  }


  .cvo2-lower-stat strong {
    font-size: .80rem;
  }


  .cvo2-fuel {
    height: 59px;
  }


  .cvo2-fuel-svg {
    width: 115px;
    height: 61px;
  }


  .cvo2-fuel-text strong {
    font-size: .82rem;
  }

}



/* PEGGY_CVO_VOLT_TEMP_BARS_V1_CSS */


/* =====================================================
   LOWER MINI METERS
   ===================================================== */

.cvo2-meter-stat {
  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;
}


.cvo2-mini-meter {
  width: min(95px, 88%);

  margin-top: 7px;
}


.cvo2-mini-track {
  position: relative;

  width: 100%;
  height: 7px;

  border-radius: 999px;

  background:
    rgba(255,255,255,.065);

  overflow: hidden;
}


.cvo2-mini-fill {
  position: absolute;

  left: 0;
  top: 0;
  bottom: 0;

  border-radius: inherit;

  transition:
    width .20s ease;
}


/* =====================================================
   VOLTAGE
   11.5V -> 15.5V
   Normal motorcycle charging range emphasized.
   ===================================================== */

.cvo2-mini-meter.voltage
.cvo2-mini-fill {
  width:
    var(--cvo-voltage-pct);

  background:
    linear-gradient(
      90deg,
      #d64a3c 0%,
      #d99d37 28%,
      #46b86d 48%,
      #46b86d 82%,
      #dfa03a 92%,
      #d64a3c 100%
    );
}


/*
 * Approximate 13.5-14.8V normal zone
 * on our 11.5-15.5V visual scale.
 */
.cvo2-voltage-normal-zone {
  position: absolute;

  left: 50%;
  width: 32.5%;

  top: 0;
  bottom: 0;

  border-left:
    1px solid rgba(255,255,255,.20);

  border-right:
    1px solid rgba(255,255,255,.20);

  pointer-events: none;
}


.cvo2-mini-meter.voltage
.cvo2-mini-fill.warning {
  filter:
    drop-shadow(
      0 0 3px
      rgba(222,70,55,.55)
    );
}


/* =====================================================
   ENGINE TEMPERATURE
   120°F -> 300°F
   ===================================================== */

.cvo2-mini-meter.temp
.cvo2-mini-fill {
  width:
    var(--cvo-temp-pct);

  background:
    linear-gradient(
      90deg,
      #3bb96e 0%,
      #56ba63 40%,
      #d1bf3c 67%,
      #ec8a30 82%,
      #dc4338 100%
    );
}


.cvo2-mini-meter.temp
.cvo2-mini-fill.warning {
  box-shadow:
    0 0 6px
    rgba(220,67,56,.50);
}


/* Segmented instrument look */
.cvo2-mini-track::after {
  content: "";

  position: absolute;

  inset: 0;

  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 10px,
      rgba(3,5,7,.82) 10px 12px
    );

  pointer-events: none;
}


/* Slightly tighten number-to-meter relationship */
.cvo2-meter-stat strong {
  margin-top: 4px;
}


@media (max-width: 650px) {

  .cvo2-mini-meter {
    width: min(78px, 88%);

    margin-top: 5px;
  }


  .cvo2-mini-track {
    height: 6px;
  }

}



/* PEGGY_CLASSIC_DIALS_V2_CSS */


.cd2-shell {
  min-height: 500px;

  padding:
    8px 12px 12px;

  background:
    radial-gradient(
      ellipse at 50% 40%,
      rgba(54,58,63,.16),
      transparent 48%
    ),
    linear-gradient(
      160deg,
      #080a0d,
      #020304
    );
}


.cd2-indicators {
  height: 27px;

  display: flex;

  justify-content: center;

  gap: 7px;
}


.cd2-indicator {
  min-width: 40px;

  padding:
    3px 7px;

  border-radius: 5px;

  text-align: center;

  font-size: .48rem;

  font-weight: 900;

  letter-spacing: .10em;

  color:
    rgba(145,150,155,.25);

  border:
    1px solid rgba(255,255,255,.055);
}


.cd2-indicator.active {
  color: #7fe19f;

  background:
    rgba(30,105,55,.20);

  border-color:
    rgba(70,200,105,.28);

  box-shadow:
    0 0 9px
    rgba(60,190,100,.15);
}


.cd2-indicator.recording {
  color: #ff6b5f;

  border-color:
    rgba(220,75,65,.30);
}


.cd2-cluster {
  display: grid;

  grid-template-columns:
    minmax(0,1fr)
    88px
    minmax(0,1fr);

  align-items: center;

  gap: 0;
}


.cd2-dial {
  min-width: 0;

  aspect-ratio: 1 / 1;
}


.cd2-svg {
  display: block;

  width: 100%;
  height: auto;
}


.cd2-bezel {
  fill: #050607;

  stroke:
    rgba(230,234,238,.15);

  stroke-width: 6;
}


.cd2-face {
  stroke:
    rgba(255,255,255,.045);

  stroke-width: 1;
}


.cd2-tick {
  stroke:
    rgba(224,228,232,.30);

  stroke-width: 2;
}


.cd2-tick.major {
  stroke:
    rgba(242,244,246,.78);

  stroke-width: 4;
}


.cd2-tick.red {
  stroke: #d94a40;
}


.cd2-number {
  fill:
    rgba(232,235,238,.84);

  font-family:
    Arial,
    sans-serif;

  font-size: 18px;

  font-weight: 700;
}


.cd2-number.red {
  fill: #e45a4e;
}


.cd2-title {
  fill:
    rgba(184,192,200,.44);

  font-family:
    Arial,
    sans-serif;

  font-size: 11px;

  font-weight: 900;

  letter-spacing: 2px;
}


.cd2-digital {
  fill:
    rgba(247,248,249,.98);

  font-family:
    "Arial Narrow",
    Arial,
    sans-serif;

  font-size: 36px;

  font-weight: 500;
}


.cd2-unit {
  fill:
    rgba(185,193,201,.48);

  font-family:
    Arial,
    sans-serif;

  font-size: 9px;

  font-weight: 900;

  letter-spacing: 2px;
}


.cd2-needle-shadow {
  stroke:
    rgba(0,0,0,.72);

  stroke-width: 9;

  stroke-linecap: round;
}


.cd2-needle {
  stroke: #df692b;

  stroke-width: 4;

  stroke-linecap: round;

  filter:
    drop-shadow(
      0 0 3px
      rgba(223,105,43,.40)
    );
}


.cd2-hub {
  fill: #17191c;

  stroke: #a94d22;

  stroke-width: 3;
}


.cd2-hub-center {
  fill: #030405;

  stroke:
    rgba(255,255,255,.20);

  stroke-width: 2;
}


.cd2-center {
  text-align: center;
}


.cd2-name {
  color:
    rgba(221,225,229,.72);

  font-size: .50rem;

  font-weight: 900;

  letter-spacing: .13em;

  white-space: nowrap;
}


.cd2-center-rule {
  width: 30px;
  height: 1px;

  margin:
    10px auto;

  background: #a84e24;
}


.cd2-center-source {
  color:
    rgba(170,179,187,.38);

  font-size: .40rem;

  font-weight: 800;

  letter-spacing: .06em;
}


.cd2-bottom {
  display: grid;

  grid-template-columns:
    repeat(5,minmax(0,1fr));

  margin-top: -7px;

  border-top:
    1px solid rgba(255,255,255,.055);
}


.cd2-bottom > div {
  padding:
    8px 4px 5px;

  text-align: center;
}


.cd2-bottom > div + div {
  border-left:
    1px solid rgba(255,255,255,.04);
}


.cd2-bottom span {
  display: block;

  color:
    rgba(180,188,196,.40);

  font-size: .42rem;

  font-weight: 900;

  letter-spacing: .08em;
}


.cd2-bottom strong {
  display: block;

  margin-top: 4px;

  color:
    rgba(241,243,245,.95);

  font-size: .88rem;

  font-weight: 650;
}


@media (max-width:650px) {

  .cd2-shell {
    min-height: 440px;

    padding:
      6px 7px 9px;
  }


  .cd2-cluster {
    grid-template-columns:
      minmax(0,1fr)
      62px
      minmax(0,1fr);
  }


  .cd2-number {
    font-size: 16px;
  }


  .cd2-digital {
    font-size: 31px;
  }


  .cd2-name {
    font-size: .41rem;
  }


  .cd2-bottom strong {
    font-size: .76rem;
  }

}

/* PEGGY_MODERN_V2_CLUSTER */
#dashV2Root:has(.m3-shell) {
  min-height: 0;
}

.m3-shell {
  --m3-pink: #f0bedf;
  --m3-green: #35ef77;
  --m3-purple: rgba(107,51,119,.42);
  min-height: 500px;
  padding: 7px 10px 9px;
  box-sizing: border-box;
  color: #fff8fd;
  background:
    radial-gradient(ellipse at 50% 22%, var(--m3-purple), transparent 42%),
    radial-gradient(circle at 18% 45%, rgba(79,41,86,.20), transparent 31%),
    radial-gradient(circle at 82% 45%, rgba(79,41,86,.20), transparent 31%),
    linear-gradient(180deg, #171222 0%, #07070c 68%, #030407 100%);
  border: 1px solid rgba(246,200,232,.13);
  box-shadow:
    inset 0 0 70px rgba(103,43,114,.12),
    0 14px 45px rgba(0,0,0,.55);
}

.m3-shell .d2-status {
  left: 50%;
  top: 7px;
  transform: translateX(-50%);
  gap: 4px;
}

.m3-shell .d2-chip {
  padding: 3px 7px;
  border-color: rgba(255,255,255,.12);
  background: rgba(5,5,9,.70);
  font-size: .45rem;
}

.m3-top-speed {
  position: absolute;
  z-index: 8;
  top: 29px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: baseline;
  gap: 5px;
  white-space: nowrap;
}

.m3-top-speed strong {
  font-size: clamp(2.8rem, 7.4vw, 4.9rem);
  font-weight: 400;
  line-height: .86;
  letter-spacing: -.065em;
  text-shadow: 0 0 22px rgba(240,190,223,.20);
}

.m3-top-speed span {
  color: var(--m3-pink);
  font-size: .62rem;
  font-weight: 900;
}

.m3-stage {
  display: grid;
  grid-template-columns:
    34px
    minmax(0,1fr)
    minmax(126px,.52fr)
    minmax(0,1fr)
    34px;
  align-items: center;
  gap: clamp(2px,.55vw,7px);
  min-height: 415px;
  padding-top: 30px;
}

.m3-dial-wrap {
  position: relative;
  min-width: 0;
}

.m3-dial-wrap::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 5.8%;
  pointer-events: none;
  border-radius: 50%;
  border-top: 5px solid var(--m3-green);
  border-left: 2px solid rgba(53,239,119,.28);
  filter: drop-shadow(0 0 6px rgba(53,239,119,.50));
  transform: rotate(-36deg);
}

.m3-shell .cd2-dial {
  width: 100%;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,.60));
}

.m3-shell .cd2-bezel {
  fill: #0b0910;
  stroke: rgba(244,194,229,.27);
  stroke-width: 7;
}

.m3-shell .cd2-face {
  stroke: rgba(244,194,229,.11);
  stroke-width: 2;
}

.m3-shell .cd2-tick {
  stroke: rgba(248,213,238,.48);
}

.m3-shell .cd2-tick.major {
  stroke: rgba(255,230,247,.94);
}

.m3-shell .cd2-number,
.m3-shell .cd2-digital {
  fill: #fff5fc;
}

.m3-shell .cd2-title,
.m3-shell .cd2-unit {
  fill: rgba(244,197,231,.74);
}

.m3-shell .cd2-needle {
  stroke: #ff4078;
  stroke-width: 4;
  filter: drop-shadow(0 0 4px rgba(255,64,120,.76));
}

.m3-shell .cd2-hub {
  stroke: #f3b8dc;
}

.m3-center-panel {
  align-self: center;
  min-width: 0;
  padding-top: 42px;
  text-align: center;
}

.m3-name {
  color: var(--m3-pink);
  font-size: .52rem;
  font-weight: 900;
  letter-spacing: .21em;
}

.m3-sixth {
  min-height: 1em;
  margin-top: 10px;
  color: var(--m3-green);
  font-size: clamp(2.7rem,6.5vw,4.4rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.04em;
  opacity: 0;
  text-shadow: 0 0 14px rgba(53,239,119,.34);
}

.m3-sixth.is-active {
  opacity: 1;
}

.m3-center-line {
  width: 65%;
  height: 1px;
  margin: 9px auto 7px;
  background: linear-gradient(90deg, transparent, var(--m3-green), transparent);
  box-shadow: 0 0 8px rgba(53,239,119,.40);
}

.m3-source {
  color: rgba(255,255,255,.47);
  font-size: .42rem;
  font-weight: 850;
  letter-spacing: .09em;
  white-space: nowrap;
}

.m3-center-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  margin-top: 10px;
}

.m3-center-cards > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 5px;
  padding: 4px 6px;
  border: 1px solid rgba(240,190,223,.12);
  border-radius: 5px;
  background: rgba(255,255,255,.025);
}

.m3-center-cards span {
  color: rgba(255,255,255,.42);
  font-size: .39rem;
  font-weight: 900;
}

.m3-center-cards strong {
  font-size: .68rem;
  font-weight: 700;
}

.m3-side-meter {
  display: grid;
  grid-template-rows: 15px 174px 15px auto auto;
  justify-items: center;
  align-items: center;
  gap: 2px;
}

.m3-meter-end {
  color: rgba(255,255,255,.72);
  font-size: .50rem;
  font-weight: 900;
}

.m3-meter-rail {
  position: relative;
  width: 8px;
  height: 164px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}

.m3-meter-fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  min-height: 3px;
  border-radius: inherit;
  background: linear-gradient(0deg, #e24255 0%, #efc444 35%, var(--m3-green) 72%);
  box-shadow: 0 0 9px rgba(53,239,119,.45);
}

.m3-side-meter.temperature .m3-meter-fill {
  background: linear-gradient(0deg, var(--m3-green), #efc444 68%, #e24255);
}

.m3-meter-label {
  margin-top: 3px;
  color: rgba(255,255,255,.40);
  font-size: .39rem;
  font-weight: 900;
  letter-spacing: .08em;
}

.m3-meter-value {
  color: #fff;
  font-size: .58rem;
  font-weight: 800;
  white-space: nowrap;
}

.m3-bottom-strip {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  margin-top: -5px;
  border-top: 1px solid rgba(244,194,229,.12);
}

.m3-bottom-strip > div {
  padding: 7px 3px 3px;
  text-align: center;
}

.m3-bottom-strip > div + div {
  border-left: 1px solid rgba(244,194,229,.08);
}

.m3-bottom-strip span {
  display: block;
  color: rgba(255,255,255,.40);
  font-size: .41rem;
  font-weight: 900;
  letter-spacing: .08em;
}

.m3-bottom-strip strong {
  display: block;
  margin-top: 3px;
  color: #fff7fc;
  font-size: .78rem;
}

@media (max-width: 700px), (max-height: 520px) {
  .m3-shell {
    min-height: 440px;
    padding: 4px 6px 6px;
  }

  .m3-stage {
    grid-template-columns: 26px minmax(0,1fr) 94px minmax(0,1fr) 26px;
    min-height: 372px;
    gap: 1px;
    padding-top: 24px;
  }

  .m3-top-speed { top: 26px; }
  .m3-top-speed strong { font-size: clamp(2.5rem,7vw,3.8rem); }
  .m3-center-panel { padding-top: 37px; }
  .m3-center-cards { gap: 2px; margin-top: 6px; }
  .m3-center-cards > div { padding: 3px 4px; }
  .m3-side-meter { grid-template-rows: 13px 139px 13px auto auto; }
  .m3-meter-rail { height: 132px; width: 7px; }
  .m3-bottom-strip strong { font-size: .68rem; }
}


/* PEGGY_FUTURE_BARS_V1 */
.fb-shell {
  --fb-cyan: #20efff;
  --fb-blue: #3d7cff;
  --fb-purple: #b24cff;
  --fb-pink: #ff3aa7;
  --fb-green: #3dff9f;
  min-height: 535px;
  padding: 42px 16px 13px;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 44%, rgba(30,87,185,.18), transparent 34%),
    radial-gradient(circle at 16% 70%, rgba(162,42,255,.13), transparent 30%),
    linear-gradient(150deg, #070b1b 0%, #02040d 52%, #080313 100%);
  border-color: rgba(55,220,255,.30);
  box-shadow:
    inset 0 0 42px rgba(25,99,224,.09),
    0 0 24px rgba(15,135,255,.08);
}

.fb-shell::before,
.fb-shell::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.fb-shell::before {
  inset: 7px;
  border: 1px solid rgba(38,222,255,.12);
  border-radius: 11px;
  clip-path: polygon(0 0, 29% 0, 31% 2px, 69% 2px, 71% 0, 100% 0, 100% 100%, 72% 100%, 70% calc(100% - 2px), 30% calc(100% - 2px), 28% 100%, 0 100%);
}

.fb-shell::after {
  left: 18%;
  right: 18%;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--fb-cyan), var(--fb-purple), transparent);
  box-shadow: 0 0 15px rgba(32,239,255,.72);
}

.fb-grid {
  position: absolute;
  z-index: -2;
  inset: 0;
  opacity: .15;
  background-image:
    linear-gradient(rgba(50,153,255,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(50,153,255,.13) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 75%, transparent);
}

.fb-scan {
  position: absolute;
  z-index: -1;
  left: 3%;
  right: 3%;
  top: 49%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(32,239,255,.28), transparent);
  box-shadow: 0 0 18px rgba(32,239,255,.23);
}

.fb-shell .d2-status {
  left: 50%;
  transform: translateX(-50%);
}

.fb-shell .d2-chip {
  border-color: rgba(45,220,255,.20);
  background: rgba(2,6,18,.82);
}

.fb-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  min-height: 34px;
  padding: 1px 10px 7px;
  border-bottom: 1px solid rgba(42,219,255,.14);
}

.fb-heading > div {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.fb-heading-kicker,
.fb-heading-link {
  color: var(--fb-cyan);
  font-size: .48rem;
  font-weight: 900;
  letter-spacing: .19em;
}

.fb-heading strong {
  color: #f4f7ff;
  font-size: .78rem;
  letter-spacing: .13em;
  text-shadow: 0 0 12px rgba(50,202,255,.40);
}

.fb-heading-link {
  color: rgba(178,76,255,.87);
  letter-spacing: .10em;
}

.fb-rpm-panel {
  margin: 9px 13px 0;
}

.fb-rpm-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
  color: rgba(175,206,230,.62);
  font-size: .49rem;
  font-weight: 900;
  letter-spacing: .14em;
}

.fb-rpm-meta strong {
  color: #fff;
  font-size: .88rem;
  letter-spacing: .03em;
}

.fb-rpm-track {
  position: relative;
  height: 17px;
  overflow: hidden;
  border: 1px solid rgba(36,222,255,.19);
  background: rgba(2,8,20,.85);
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 0 100%, 6px 50%);
}

.fb-rpm-fill,
.fb-mini-fill {
  width: var(--fb-pct);
  height: 100%;
  transition: width .16s linear;
}

.fb-rpm-fill {
  background: linear-gradient(90deg, var(--fb-cyan), #3c78ff 52%, var(--fb-purple) 76%, var(--fb-pink));
  box-shadow: 0 0 16px rgba(32,239,255,.64);
}

.fb-rpm-track::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 5.7%, rgba(1,5,15,.92) 5.7% 6.8%);
}

.fb-rpm-scale {
  display: flex;
  justify-content: space-between;
  padding: 3px 2px 0;
  color: rgba(167,194,221,.48);
  font-size: .43rem;
  font-weight: 800;
}

.fb-main {
  display: grid;
  grid-template-columns: 112px minmax(0,1fr) 112px;
  align-items: center;
  gap: 15px;
  min-height: 285px;
  padding: 2px 14px 0;
}

.fb-vmeter {
  min-width: 0;
  text-align: center;
}

.fb-vmeter-label {
  margin-bottom: 6px;
  color: rgba(189,217,238,.68);
  font-size: .49rem;
  font-weight: 900;
  letter-spacing: .10em;
}

.fb-vmeter-body {
  position: relative;
  width: 31px;
  height: 152px;
  margin: 0 auto;
}

.fb-vmeter-track {
  position: absolute;
  inset: 0 7px;
  overflow: hidden;
  border: 1px solid rgba(52,222,255,.20);
  background: rgba(2,7,18,.92);
  clip-path: polygon(50% 0, 100% 5px, 100% calc(100% - 5px), 50% 100%, 0 calc(100% - 5px), 0 5px);
}

.fb-vmeter-fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--fb-pct);
  background: linear-gradient(to top, var(--fb-cyan), var(--fb-purple) 70%, var(--fb-pink));
  box-shadow: 0 0 12px rgba(32,239,255,.66);
  transition: height .18s linear;
}

.fb-fuel .fb-vmeter-fill {
  background: linear-gradient(to top, var(--fb-cyan), var(--fb-green));
}

.fb-vmeter-track::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(to top, transparent 0 8px, rgba(1,5,15,.88) 8px 11px);
}

.fb-vmeter-limit {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(170,199,222,.40);
  font-size: .37rem;
  font-weight: 900;
  letter-spacing: .04em;
  white-space: nowrap;
}

.fb-limit-high { top: -12px; }
.fb-limit-low { bottom: -13px; }

.fb-vmeter-number {
  margin-top: 18px;
  color: #f7fbff;
  font-size: 1rem;
  font-weight: 800;
  text-shadow: 0 0 10px rgba(32,239,255,.31);
}

.fb-vmeter-number small {
  margin-left: 2px;
  color: var(--fb-cyan);
  font-size: .53rem;
}

.fb-speed-zone {
  position: relative;
  min-width: 0;
  text-align: center;
}

.fb-speed-brackets {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 205px;
  margin: 0 auto;
}

.fb-speed-brackets::before,
.fb-speed-brackets::after {
  content: "";
  position: absolute;
  top: 20px;
  bottom: 20px;
  width: 30px;
  border-top: 2px solid var(--fb-cyan);
  border-bottom: 2px solid var(--fb-purple);
  filter: drop-shadow(0 0 7px rgba(32,239,255,.50));
}

.fb-speed-brackets::before {
  left: 3%;
  border-left: 2px solid var(--fb-cyan);
  clip-path: polygon(0 0, 100% 0, 100% 3px, 5px 3px, 5px calc(100% - 3px), 100% calc(100% - 3px), 100% 100%, 0 100%);
}

.fb-speed-brackets::after {
  right: 3%;
  border-right: 2px solid var(--fb-purple);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 calc(100% - 3px), calc(100% - 5px) calc(100% - 3px), calc(100% - 5px) 3px, 0 3px);
}

.fb-speed {
  color: #f7fbff;
  font-size: clamp(6.7rem,17vw,9.2rem);
  font-weight: 280;
  line-height: .72;
  letter-spacing: -.075em;
  text-shadow:
    0 0 10px rgba(255,255,255,.12),
    0 0 28px rgba(40,148,255,.25);
}

.fb-speed-unit {
  margin-top: 12px;
  color: var(--fb-cyan);
  font-size: .67rem;
  font-weight: 900;
  letter-spacing: .27em;
}

.fb-speed-source {
  margin-top: 7px;
  color: rgba(181,204,225,.47);
  font-size: .43rem;
  font-weight: 900;
  letter-spacing: .13em;
}

.fb-sixth {
  position: absolute;
  top: 4px;
  right: 5%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity .16s ease, transform .16s ease;
}

.fb-sixth.is-active {
  opacity: 1;
  transform: translateY(0);
}

.fb-sixth span {
  color: var(--fb-green);
  font-size: 1.3rem;
  font-weight: 900;
  text-shadow: 0 0 12px rgba(61,255,159,.50);
}

.fb-sixth small {
  color: rgba(61,255,159,.62);
  font-size: .34rem;
  font-weight: 900;
  letter-spacing: .08em;
}

.fb-bottom {
  display: grid;
  grid-template-columns: 1.45fr .8fr .72fr 1fr;
  gap: 7px;
  margin: 0 8px;
}

.fb-data-card {
  position: relative;
  min-width: 0;
  min-height: 54px;
  padding: 8px 9px 6px;
  overflow: hidden;
  border: 1px solid rgba(49,211,255,.15);
  background: linear-gradient(135deg, rgba(11,25,51,.70), rgba(4,7,18,.82));
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}

.fb-data-card > span,
.fb-card-head span {
  display: block;
  color: rgba(177,203,224,.54);
  font-size: .43rem;
  font-weight: 900;
  letter-spacing: .10em;
}

.fb-data-card > strong,
.fb-card-head strong {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  color: #f2f7ff;
  font-size: .82rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fb-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.fb-card-head strong {
  margin-top: 0;
}

.fb-mini-track {
  height: 7px;
  margin-top: 8px;
  overflow: hidden;
  background: rgba(255,255,255,.07);
}

.fb-voltage-fill {
  background: linear-gradient(90deg, var(--fb-cyan), var(--fb-purple));
  box-shadow: 0 0 9px rgba(32,239,255,.55);
}

.fb-outside-card i {
  position: absolute;
  left: 0;
  bottom: 0;
  width: var(--fb-pct);
  height: 2px;
  background: var(--fb-cyan);
  box-shadow: 0 0 7px rgba(32,239,255,.65);
}

@media (max-width: 680px) {
  .fb-main {
    grid-template-columns: 88px minmax(0,1fr) 88px;
    gap: 7px;
    padding-left: 5px;
    padding-right: 5px;
  }

  .fb-speed {
    font-size: clamp(5.5rem,17vw,7.2rem);
  }

  .fb-heading-link {
    display: none;
  }
}


/* PEGGY_PANORAMIC_HUD_V1 */
.ph-shell {
  --ph-copper: #ff873c;
  --ph-orange: #ff5e30;
  --ph-pink: #ff327b;
  --ph-ice: #dff8ff;
  --ph-blue: #4cdfff;
  min-height: 535px;
  padding: 42px 14px 12px;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 50% 43%, rgba(86,33,58,.21), transparent 43%),
    radial-gradient(ellipse at 50% 0%, rgba(255,104,44,.09), transparent 42%),
    linear-gradient(180deg, #090a0f 0%, #030407 48%, #07070b 100%);
  border-color: rgba(255,126,61,.24);
  box-shadow:
    inset 0 0 48px rgba(255,76,38,.035),
    0 0 26px rgba(0,0,0,.46);
}

.ph-shell::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 7px;
  pointer-events: none;
  border: 1px solid rgba(255,149,76,.08);
  border-radius: 11px;
}

.ph-aurora {
  position: absolute;
  z-index: -1;
  left: 8%;
  right: 8%;
  top: 104px;
  height: 230px;
  opacity: .40;
  background:
    radial-gradient(ellipse at center, rgba(255,60,95,.13), transparent 63%);
  filter: blur(3px);
}

.ph-shell .d2-status {
  left: 50%;
  transform: translateX(-50%);
}

.ph-shell .d2-chip {
  border-color: rgba(255,138,63,.17);
  background: rgba(7,6,8,.84);
}

.ph-vision-strip {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr .65fr 1.35fr;
  align-items: stretch;
  min-height: 92px;
  overflow: hidden;
  border: 1px solid rgba(255,134,62,.26);
  border-radius: 4px 22px 4px 22px;
  background:
    linear-gradient(98deg, rgba(22,16,16,.94), rgba(11,9,13,.97) 48%, rgba(17,10,15,.94));
  box-shadow:
    inset 0 -1px rgba(255,255,255,.035),
    0 0 22px rgba(255,83,42,.07);
}

.ph-vision-strip::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--ph-copper) 18%, var(--ph-pink) 62%, transparent);
  box-shadow: 0 0 12px rgba(255,91,48,.48);
}

.ph-brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 9px 14px;
  border-right: 1px solid rgba(255,255,255,.055);
}

.ph-brand span,
.ph-strip-data span,
.ph-side-readout span,
.ph-tile-top span {
  color: rgba(211,216,225,.47);
  font-size: .44rem;
  font-weight: 900;
  letter-spacing: .14em;
}

.ph-brand span {
  color: var(--ph-copper);
}

.ph-brand strong {
  margin-top: 5px;
  color: #fff6f0;
  font-size: .78rem;
  letter-spacing: .13em;
  text-shadow: 0 0 13px rgba(255,108,52,.25);
}

.ph-speed-block {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  border-right: 1px solid rgba(255,255,255,.055);
}

.ph-speed-block strong {
  color: #fff;
  font-size: 4.1rem;
  font-weight: 280;
  line-height: 1;
  letter-spacing: -.07em;
}

.ph-speed-block span {
  color: var(--ph-copper);
  font-size: .57rem;
  font-weight: 900;
  letter-spacing: .12em;
}

.ph-strip-data {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  align-items: center;
  padding: 8px 7px;
}

.ph-strip-data > div {
  min-width: 0;
  padding: 0 7px;
  text-align: center;
}

.ph-strip-data > div + div {
  border-left: 1px solid rgba(255,255,255,.055);
}

.ph-strip-data span {
  display: block;
  margin-bottom: 6px;
}

.ph-strip-data strong {
  display: block;
  overflow: hidden;
  color: #f4f6f9;
  font-size: .92rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ph-sixth {
  position: absolute;
  top: 5px;
  right: 7px;
  padding: 3px 6px;
  border: 1px solid rgba(91,255,177,.35);
  color: #5effb2;
  font-size: .52rem;
  font-weight: 900;
  letter-spacing: .07em;
  opacity: 0;
  box-shadow: 0 0 11px rgba(91,255,177,.15);
}

.ph-sixth.is-active {
  opacity: 1;
}

.ph-cockpit {
  display: grid;
  grid-template-columns: 104px minmax(0,1fr) 104px;
  align-items: center;
  min-height: 308px;
  margin-top: 4px;
}

.ph-side-readout {
  min-width: 0;
  padding: 13px 8px;
  border-top: 1px solid rgba(255,130,59,.19);
  border-bottom: 1px solid rgba(255,130,59,.09);
  background: linear-gradient(90deg, rgba(255,104,48,.035), transparent);
}

.ph-side-right {
  text-align: right;
  background: linear-gradient(270deg, rgba(255,104,48,.035), transparent);
}

.ph-side-readout span,
.ph-side-readout small {
  display: block;
}

.ph-side-readout strong {
  display: block;
  margin-top: 6px;
  overflow: hidden;
  color: #fff;
  font-size: 1rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ph-side-readout small {
  margin-top: 3px;
  color: var(--ph-copper);
  font-size: .41rem;
  font-weight: 900;
  letter-spacing: .12em;
}

.ph-rpm-horizon {
  position: relative;
  align-self: end;
  height: 284px;
  min-width: 0;
}

.ph-rpm-horizon svg {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(100%,520px);
  transform: translateX(-50%);
  overflow: visible;
}

.ph-arc-shadow,
.ph-arc-value,
.ph-arc-inner {
  fill: none;
  stroke-linecap: round;
}

.ph-arc-shadow {
  stroke: rgba(255,255,255,.07);
  stroke-width: 15;
}

.ph-arc-value {
  stroke: url(#phArcGradient);
  stroke-width: 15;
  stroke-dasharray: var(--ph-rpm) 100;
  filter: drop-shadow(0 0 8px rgba(255,91,48,.56));
  transition: stroke-dasharray .16s linear;
}

.ph-arc-inner {
  stroke: rgba(255,126,61,.12);
  stroke-width: 1.5;
  stroke-dasharray: 2 7;
}

.ph-arc-marks path {
  fill: none;
  stroke: rgba(255,236,225,.66);
  stroke-width: 3;
}

.ph-arc-numbers text {
  fill: rgba(255,239,230,.74);
  font-size: 14px;
  font-weight: 800;
}

.ph-rpm-center {
  position: absolute;
  left: 50%;
  bottom: 42px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateX(-50%);
}

.ph-rpm-center span {
  color: rgba(220,211,209,.50);
  font-size: .46rem;
  font-weight: 900;
  letter-spacing: .16em;
}

.ph-rpm-center strong {
  margin-top: 4px;
  color: #fff8f3;
  font-size: 5.2rem;
  font-weight: 280;
  line-height: 1;
  letter-spacing: -.04em;
  text-shadow: 0 0 18px rgba(255,106,50,.20);
}

.ph-rpm-center small {
  margin-top: 2px;
  color: var(--ph-copper);
  font-size: .5rem;
  font-weight: 900;
  letter-spacing: .19em;
}

.ph-source {
  position: absolute;
  left: 50%;
  bottom: 16px;
  color: rgba(211,214,221,.38);
  font-size: .41rem;
  font-weight: 900;
  letter-spacing: .13em;
  transform: translateX(-50%);
  white-space: nowrap;
}

.ph-tile-row {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 7px;
  margin: -3px 4px 0;
}

.ph-tile {
  min-width: 0;
  min-height: 61px;
  padding: 8px 9px 7px;
  overflow: hidden;
  border: 1px solid rgba(255,132,63,.13);
  border-radius: 2px 11px 2px 11px;
  background: linear-gradient(135deg, rgba(24,17,18,.78), rgba(7,7,10,.88));
}

.ph-tile-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
}

.ph-tile-top strong {
  color: #fff8f4;
  font-size: .84rem;
  white-space: nowrap;
}

.ph-tile-top small {
  margin-left: 2px;
  color: var(--ph-copper);
  font-size: .48rem;
}

.ph-tile-track {
  height: 8px;
  margin-top: 11px;
  overflow: hidden;
  background: rgba(255,255,255,.06);
}

.ph-tile-track i {
  display: block;
  width: var(--ph-pct);
  height: 100%;
  background: linear-gradient(90deg, var(--ph-copper), var(--ph-orange), var(--ph-pink));
  box-shadow: 0 0 9px rgba(255,93,45,.42);
  transition: width .16s linear;
}

.ph-fuel .ph-tile-track i {
  background: linear-gradient(90deg, #52e5ff, #5effb2);
}

.ph-voltage .ph-tile-track i {
  background: linear-gradient(90deg, #5c9dff, #c85cff);
}

.ph-live-line {
  margin-top: 10px;
  padding-top: 7px;
  border-top: 1px solid rgba(76,223,255,.14);
  color: rgba(76,223,255,.62);
  font-size: .4rem;
  font-weight: 900;
  letter-spacing: .16em;
}

@media (max-width: 680px) {
  .ph-vision-strip {
    grid-template-columns: .9fr .65fr 1.35fr;
  }

  .ph-brand {
    padding-left: 8px;
  }

  .ph-brand strong {
    font-size: .66rem;
  }

  .ph-cockpit {
    grid-template-columns: 83px minmax(0,1fr) 83px;
  }

  .ph-strip-data > div {
    padding-left: 3px;
    padding-right: 3px;
  }
}


/* PEGGY_NEON_REACTOR_V1 */
.nr-shell {
  --nr-cyan: #28f0ff;
  --nr-blue: #3d73ff;
  --nr-purple: #a94cff;
  --nr-pink: #ff3c9d;
  --nr-orange: #ff7b35;
  --nr-green: #48ff9e;
  min-height: 535px;
  padding: 42px 13px 11px;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 48%, rgba(60,68,205,.19), transparent 31%),
    radial-gradient(circle at 50% 48%, rgba(255,53,151,.08), transparent 49%),
    linear-gradient(145deg, #060817, #01030a 52%, #090313);
  border-color: rgba(40,225,255,.26);
  box-shadow:
    inset 0 0 55px rgba(44,87,255,.05),
    0 0 26px rgba(0,0,0,.48);
}

.nr-shell::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 7px;
  pointer-events: none;
  border: 1px solid rgba(48,219,255,.09);
  border-radius: 11px;
  clip-path: polygon(0 0, 38% 0, 40% 2px, 60% 2px, 62% 0, 100% 0, 100% 100%, 65% 100%, 63% calc(100% - 2px), 37% calc(100% - 2px), 35% 100%, 0 100%);
}

.nr-mesh {
  position: absolute;
  z-index: -2;
  inset: 0;
  opacity: .16;
  background-image:
    linear-gradient(rgba(49,147,255,.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(49,147,255,.11) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(circle at center, #000, transparent 76%);
}

.nr-glow {
  position: absolute;
  z-index: -1;
  left: 22%;
  right: 22%;
  top: 40%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--nr-cyan), var(--nr-pink), transparent);
  box-shadow: 0 0 20px rgba(45,183,255,.46);
}

.nr-shell .d2-status {
  left: 50%;
  transform: translateX(-50%);
}

.nr-shell .d2-chip {
  border-color: rgba(40,226,255,.18);
  background: rgba(2,5,15,.84);
}

.nr-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 39px;
  padding: 0 9px 7px;
  border-bottom: 1px solid rgba(41,225,255,.15);
}

.nr-title {
  display: flex;
  align-items: baseline;
  gap: 9px;
}

.nr-title span {
  color: var(--nr-cyan);
  font-size: .48rem;
  font-weight: 900;
  letter-spacing: .18em;
}

.nr-title strong {
  color: #f4f8ff;
  font-size: .82rem;
  letter-spacing: .14em;
  text-shadow: 0 0 12px rgba(40,240,255,.30);
}

.nr-header-pulse {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(182,203,226,.48);
  font-size: .43rem;
  font-weight: 900;
  letter-spacing: .12em;
}

.nr-header-pulse i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--nr-green);
  box-shadow: 0 0 9px var(--nr-green);
}

.nr-dashboard {
  display: grid;
  grid-template-columns: minmax(150px,.82fr) minmax(280px,1.65fr) minmax(150px,.82fr);
  align-items: center;
  gap: 10px;
  min-height: 360px;
  padding: 3px 3px 0;
}

.nr-side {
  display: grid;
  gap: 10px;
}

.nr-card {
  position: relative;
  min-width: 0;
  height: 153px;
  padding: 10px 10px 8px;
  overflow: hidden;
  border: 1px solid rgba(46,216,255,.14);
  background:
    linear-gradient(145deg, rgba(10,22,47,.76), rgba(3,6,16,.89));
  clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 11px 100%, 0 calc(100% - 11px));
}

.nr-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 36%;
  height: 2px;
  background: var(--nr-cyan);
  box-shadow: 0 0 8px rgba(40,240,255,.56);
}

.nr-engine::before { background: var(--nr-orange); }
.nr-fuel::before { background: var(--nr-green); }
.nr-voltage::before { background: var(--nr-purple); }
.nr-outside::before { background: var(--nr-blue); }

.nr-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
}

.nr-card-head span {
  color: rgba(181,205,227,.55);
  font-size: .43rem;
  font-weight: 900;
  letter-spacing: .10em;
}

.nr-card-head strong {
  color: #f5fbff;
  font-size: .9rem;
  white-space: nowrap;
}

.nr-card-head small {
  margin-left: 2px;
  color: var(--nr-cyan);
  font-size: .48rem;
}

.nr-spark {
  width: 100%;
  height: 70px;
  margin-top: 10px;
  overflow: visible;
}

.nr-spark-line,
.nr-speed-chart polyline {
  fill: none;
  stroke: var(--nr-cyan);
  stroke-width: 1.8;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 3px rgba(40,240,255,.72));
}

.nr-spark-area,
.nr-speed-chart polygon {
  fill: rgba(40,240,255,.08);
}

.nr-engine .nr-spark-line { stroke: var(--nr-orange); }
.nr-engine .nr-spark-area { fill: rgba(255,123,53,.09); }
.nr-fuel .nr-spark-line { stroke: var(--nr-green); }
.nr-fuel .nr-spark-area { fill: rgba(72,255,158,.08); }
.nr-voltage .nr-spark-line { stroke: var(--nr-purple); }
.nr-voltage .nr-spark-area { fill: rgba(169,76,255,.08); }
.nr-outside .nr-spark-line { stroke: var(--nr-blue); }
.nr-outside .nr-spark-area { fill: rgba(61,115,255,.08); }

.nr-level {
  position: relative;
  height: 10px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.05);
  background: rgba(255,255,255,.045);
}

.nr-level::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 9%, rgba(1,4,12,.95) 9% 11%);
}

.nr-level i {
  display: block;
  width: var(--nr-pct);
  height: 100%;
  background: linear-gradient(90deg, var(--nr-cyan), var(--nr-blue));
  box-shadow: 0 0 9px rgba(40,240,255,.52);
  transition: width .16s linear;
}

.nr-engine .nr-level i { background: linear-gradient(90deg, var(--nr-orange), var(--nr-pink)); }
.nr-fuel .nr-level i { background: linear-gradient(90deg, var(--nr-cyan), var(--nr-green)); }
.nr-voltage .nr-level i { background: linear-gradient(90deg, var(--nr-blue), var(--nr-purple)); }

.nr-core {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 350px;
}

.nr-reactor-ring {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 246px;
  height: 246px;
  border-radius: 50%;
  background:
    radial-gradient(circle, #050816 0 59%, transparent 60%),
    conic-gradient(from 225deg,
      var(--nr-cyan) 0deg,
      var(--nr-blue) var(--nr-rpm-mid1),
      var(--nr-purple) var(--nr-rpm-mid2),
      var(--nr-pink) var(--nr-rpm-angle),
      rgba(255,255,255,.065) var(--nr-rpm-angle) 270deg,
      transparent 270deg 360deg);
  filter: drop-shadow(0 0 11px rgba(44,174,255,.25));
}

.nr-reactor-ring::before,
.nr-reactor-ring::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.nr-reactor-ring::before {
  inset: 12px;
  border: 1px dashed rgba(107,190,255,.20);
  animation: nr-spin 18s linear infinite;
}

.nr-reactor-ring::after {
  inset: 25px;
  border: 1px solid rgba(40,240,255,.11);
  box-shadow: inset 0 0 23px rgba(52,104,255,.10);
}

@keyframes nr-spin {
  to { transform: rotate(360deg); }
}

.nr-ring-grid {
  position: absolute;
  inset: 34px;
  border-radius: 50%;
  opacity: .18;
  background:
    linear-gradient(90deg, transparent 49.5%, var(--nr-cyan) 50%, transparent 50.5%),
    linear-gradient(transparent 49.5%, var(--nr-cyan) 50%, transparent 50.5%);
}

.nr-speed-value {
  position: relative;
  z-index: 2;
  color: #f7fbff;
  font-size: 6.9rem;
  font-weight: 260;
  line-height: .78;
  letter-spacing: -.08em;
  text-shadow:
    0 0 10px rgba(255,255,255,.11),
    0 0 26px rgba(44,152,255,.24);
}

.nr-speed-unit {
  position: relative;
  z-index: 2;
  margin-top: 10px;
  color: var(--nr-cyan);
  font-size: .61rem;
  font-weight: 900;
  letter-spacing: .27em;
}

.nr-sixth {
  position: absolute;
  z-index: 3;
  right: 29px;
  top: 41px;
  padding: 3px 5px;
  border: 1px solid rgba(72,255,158,.33);
  color: var(--nr-green);
  font-size: .55rem;
  font-weight: 900;
  opacity: 0;
  box-shadow: 0 0 9px rgba(72,255,158,.17);
}

.nr-sixth.is-active { opacity: 1; }

.nr-rpm-readout {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin-top: -4px;
}

.nr-rpm-readout span {
  color: rgba(182,204,226,.48);
  font-size: .42rem;
  font-weight: 900;
  letter-spacing: .11em;
}

.nr-rpm-readout strong {
  color: #fff;
  font-size: 1.15rem;
}

.nr-rpm-readout small {
  color: var(--nr-pink);
  font-size: .42rem;
  font-weight: 900;
}

.nr-speed-chart {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 82%;
  height: 29px;
  margin-top: 3px;
}

.nr-speed-chart span {
  flex: 0 0 auto;
  color: rgba(181,203,226,.42);
  font-size: .38rem;
  font-weight: 900;
  letter-spacing: .09em;
}

.nr-speed-chart svg {
  width: 100%;
  height: 25px;
  overflow: visible;
}

.nr-source {
  margin-top: 2px;
  color: rgba(183,204,224,.37);
  font-size: .39rem;
  font-weight: 900;
  letter-spacing: .12em;
}

.nr-footer {
  display: grid;
  grid-template-columns: .9fr 1.45fr .9fr;
  gap: 7px;
  margin: 0 3px;
}

.nr-strip {
  position: relative;
  min-width: 0;
  min-height: 72px;
  padding: 8px 9px 7px;
  overflow: hidden;
  border: 1px solid rgba(46,215,255,.12);
  background: linear-gradient(135deg, rgba(9,20,43,.72), rgba(3,6,15,.87));
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
}

.nr-strip > span,
.nr-strip > small {
  display: block;
  color: rgba(180,203,224,.46);
  font-size: .4rem;
  font-weight: 900;
  letter-spacing: .10em;
}

.nr-strip > strong {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: #f4f9ff;
  font-size: .86rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nr-strip > small {
  position: absolute;
  right: 9px;
  top: 9px;
  font-size: .34rem;
}

.nr-strip-meter {
  height: 6px;
  margin-top: 8px;
  overflow: hidden;
  background: rgba(255,255,255,.055);
}

.nr-strip-meter i {
  display: block;
  width: var(--nr-pct);
  height: 100%;
  background: linear-gradient(90deg, var(--nr-cyan), var(--nr-purple));
  box-shadow: 0 0 7px rgba(40,240,255,.45);
}

.nr-strip-trip .nr-strip-meter i { background: linear-gradient(90deg, var(--nr-orange), var(--nr-pink)); }
.nr-strip-odo .nr-strip-meter i { background: linear-gradient(90deg, var(--nr-purple), var(--nr-pink)); }
.nr-strip-speed .nr-strip-meter i { background: linear-gradient(90deg, var(--nr-cyan), var(--nr-green)); }

@media (max-width: 700px) {
  .nr-dashboard {
    grid-template-columns: minmax(125px,.8fr) minmax(245px,1.55fr) minmax(125px,.8fr);
    gap: 6px;
  }

  .nr-card {
    padding-left: 7px;
    padding-right: 7px;
  }

  .nr-reactor-ring {
    width: 222px;
    height: 222px;
  }

  .nr-speed-value {
    font-size: 6rem;
  }
}


/* PEGGY_ENGINE_RPM_SETTINGS_V1 */
#dashV2Root {
  position: relative;
}

#dashV2Root.d2-rpm-shift::after,
#dashV2Root.d2-rpm-redline::after {
  position: absolute;
  z-index: 80;
  left: 50%;
  top: 52px;
  min-width: 116px;
  padding: 7px 18px 6px;
  transform: translateX(-50%);
  border: 1px solid rgba(255,196,65,.72);
  border-radius: 4px;
  background: rgba(12,7,2,.92);
  color: #ffd76a;
  font-size: .72rem;
  font-weight: 950;
  letter-spacing: .20em;
  text-align: center;
  pointer-events: none;
  box-shadow:
    0 0 14px rgba(255,174,42,.42),
    inset 0 0 12px rgba(255,174,42,.10);
}

#dashV2Root.d2-rpm-shift::after {
  content: "SHIFT";
  animation: d2-shift-pulse .38s ease-in-out infinite alternate;
}

#dashV2Root.d2-rpm-redline::after {
  content: "REDLINE";
  border-color: rgba(255,45,65,.88);
  background: rgba(26,1,5,.94);
  color: #fff;
  box-shadow:
    0 0 22px rgba(255,24,55,.67),
    inset 0 0 15px rgba(255,24,55,.19);
  animation: d2-redline-flash .16s steps(2,end) infinite;
}

#dashV2Root.d2-rpm-redline .d2-shell {
  box-shadow:
    inset 0 0 35px rgba(255,20,44,.16),
    0 0 25px rgba(255,20,44,.22);
}

@keyframes d2-shift-pulse {
  from { opacity: .62; transform: translateX(-50%) scale(.98); }
  to { opacity: 1; transform: translateX(-50%) scale(1.02); }
}

@keyframes d2-redline-flash {
  0% { opacity: .42; }
  100% { opacity: 1; }
}

.rpm-settings-card input {
  width: 100%;
  box-sizing: border-box;
}

.rpm-safety-note {
  color: rgba(255,188,93,.82);
}

/* PEGGY_TELEMETRY_HANDOFF_V1 */
.d2-status {
  flex-wrap: wrap;
  justify-content: center;
}

.d2-chip.sim {
  border-color: rgba(86,179,255,.55);
  background: rgba(25,84,132,.42);
  color: #9ed7ff;
}

.d2-chip.stale {
  border-color: rgba(255,73,73,.72);
  background: rgba(116,15,25,.58);
  color: #ffb0b7;
  animation: d2-stale-pulse .8s ease-in-out infinite alternate;
}

@keyframes d2-stale-pulse {
  from { opacity: .62; }
  to { opacity: 1; }
}

/* PEGGY_DASH_LAYOUT_BUTTON_CSS_V1 */

.dash-layout-button {
  position: fixed;

  top: 8px;
  right: 72px;

  z-index: 9999;

  min-width: 82px;
  min-height: 38px;

  padding: 6px 9px;

  border-radius: 9px;

  border:
    1px solid rgba(255,255,255,.25);

  background:
    rgba(10,12,16,.80);

  color: inherit;

  font-size: .60rem;
  font-weight: 900;

  letter-spacing: .05em;

  opacity: .78;

  cursor: pointer;

  touch-action: manipulation;
}

.dash-layout-button:hover,
.dash-layout-button:active {
  opacity: 1;
}