/* ================= */
/* CONTROLS CAROUSEL */
/* ================= */

.controls-stage {
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  z-index: 30;
  width: min(92vw, 360px);
  height: 144px;
  pointer-events: none;
}

.carousel-main-btn,
.carousel-side-btn,
.volume-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: auto;
}

.carousel-main-btn,
.carousel-left-btn,
.carousel-right-btn {
  z-index: 35;
}

/* ========================= */
/* MAIN BUTTON BASE          */
/* ========================= */

.carousel-main-btn {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 116px;
  height: 116px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(5, 8, 18, 0.18);
  border: 2px solid transparent;
  backdrop-filter: blur(8px);
  transition:
    transform 0.25s ease,
    box-shadow 0.35s ease,
    border-color 0.4s ease,
    filter 0.25s ease;
}

.carousel-main-btn::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
}

.carousel-main-btn::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.10);
}

.carousel-main-btn:active {
  transform: translate(-50%, -50%) scale(0.96);
}

/* ========================= */
/* MODE THEMES               */
/* Outlined ring — one style */
/* per mode only color varies*/
/* ========================= */

/* ===== COMFORT ===== */
.app.mode-comfort .carousel-main-btn {
  border-color: rgba(76, 208, 122, 0.60);
  box-shadow: 0 0 20px rgba(76, 208, 122, 0.14);
}
.app.mode-comfort .main-mode-icon {
  filter: drop-shadow(0 0 10px rgba(76, 208, 122, 0.30));
}

/* ===== SPORT ===== */
.app.mode-sport .carousel-main-btn {
  border-color: rgba(255, 50, 50, 0.60);
  box-shadow: 0 0 20px rgba(255, 50, 50, 0.16);
}
.app.mode-sport .main-mode-icon {
  filter: drop-shadow(0 0 12px rgba(255, 50, 50, 0.40));
}

/* ===== TRAVEL ===== */
.app.mode-travel .carousel-main-btn {
  border-color: rgba(255, 165, 80, 0.60);
  box-shadow: 0 0 20px rgba(255, 165, 80, 0.14);
}
.app.mode-travel .main-mode-icon {
  filter: drop-shadow(0 0 10px rgba(255, 165, 80, 0.32));
}

/* ===== NON STOP ===== */
.app.mode-nonstop .carousel-main-btn {
  border-color: rgba(0, 180, 220, 0.60);
  box-shadow: 0 0 20px rgba(0, 180, 220, 0.14);
}

/* ===== RADIO 7 ===== */
.app.mode-radio7 .carousel-main-btn {
  border-color: rgba(8, 152, 83, 0.60);
  box-shadow: 0 0 20px rgba(8, 152, 83, 0.14);
}

/* ===== RAP ===== */
.app.mode-rap .carousel-main-btn {
  border-color: rgba(180, 40, 255, 0.60);
  box-shadow: 0 0 20px rgba(180, 40, 255, 0.16);
}
.app.mode-rap .main-mode-icon {
  filter: drop-shadow(0 0 12px rgba(180, 40, 255, 0.45));
}

/* ===== ROCK ===== */
.app.mode-rock .carousel-main-btn {
  border-color: rgba(255, 75, 15, 0.60);
  box-shadow: 0 0 20px rgba(255, 75, 15, 0.16);
}
.app.mode-rock .main-mode-icon {
  filter: drop-shadow(0 0 12px rgba(255, 75, 15, 0.45));
}

/* ===== DEEP ===== */
.app.mode-deep .carousel-main-btn {
  border-color: rgba(80, 60, 255, 0.60);
  box-shadow: 0 0 20px rgba(80, 60, 255, 0.15);
}
.app.mode-deep .main-mode-icon {
  filter: drop-shadow(0 0 10px rgba(80, 60, 255, 0.40));
}

/* ===== LOFI ===== */
.app.mode-lofi .carousel-main-btn {
  border-color: rgba(130, 170, 225, 0.58);
  box-shadow: 0 0 18px rgba(130, 170, 225, 0.12);
}
.app.mode-lofi .main-mode-icon {
  filter: drop-shadow(0 0 10px rgba(130, 170, 225, 0.35));
}

/* ===== EURO ===== */
.app.mode-euro .carousel-main-btn {
  border-color: rgba(0, 212, 255, 0.60);
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.16);
}
.app.mode-euro .main-mode-icon {
  filter: drop-shadow(0 0 12px rgba(0, 212, 255, 0.40));
}

/* ===== PULSE ===== */
.app.mode-pulse .carousel-main-btn {
  border-color: rgba(160, 255, 20, 0.60);
  box-shadow: 0 0 20px rgba(160, 255, 20, 0.18);
}

/* ===== MANELE ===== */
.app.mode-manele .carousel-main-btn {
  border-color: rgba(255, 155, 0, 0.60);
  box-shadow: 0 0 20px rgba(255, 155, 0, 0.16);
}

/* ========================= */
/* SIDE BUTTONS              */
/* ========================= */

.carousel-left-btn,
.carousel-right-btn {
  position: absolute;
  top: 76px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.08), transparent 40%),
    rgba(20, 13, 15, 0.34);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 5px 18px rgba(0, 0, 0, 0.18);
  opacity: 0.96;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.carousel-left-btn {
  left: calc(50% - 108px);
}

.carousel-right-btn {
  right: calc(50% - 108px);
}

.carousel-left-btn:active,
.carousel-right-btn:active {
  transform: scale(0.95);
}

/* ========================= */
/* ICONS                     */
/* ========================= */

.main-mode-icon {
  display: none;
}

.play-icon {
  position: relative;
  z-index: 3;
  width: 30px;
  height: 30px;
  object-fit: contain;
  filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.32));
  pointer-events: none;
}

/* ========================= */
/* STREAM CONNECTING LOADER  */
/* ========================= */

@keyframes streamBar {
  0%, 100% { transform: scaleY(0.35); opacity: 0.50; }
  50%       { transform: scaleY(1);   opacity: 1.00; }
}

@keyframes signalRing {
  0%   { transform: scale(1);   opacity: 0.75; }
  100% { transform: scale(4.2); opacity: 0; }
}

.stream-loader {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  position: relative;
  z-index: 3;
  pointer-events: none;
}

.stream-loader span {
  position: absolute;
  border-radius: 50%;
}

.stream-loader span:nth-child(1) {
  width: 8px;
  height: 8px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.50);
}

.stream-loader span:nth-child(2),
.stream-loader span:nth-child(3) {
  width: 8px;
  height: 8px;
  border: 2.5px solid rgba(255, 255, 255, 0.78);
  opacity: 0;
  animation: signalRing 1.6s ease-out infinite;
}

.stream-loader span:nth-child(2) { animation-delay: 0s; }
.stream-loader span:nth-child(3) { animation-delay: 0.8s; }

.carousel-main-btn.is-connecting .play-icon {
  display: none;
}

.carousel-main-btn.is-connecting .stream-loader {
  display: flex;
}

/* ========================= */
/* STREAM CONNECT TOAST      */
/* ========================= */

.stream-toast {
  position: fixed;
  bottom: 88px;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: rgba(15, 18, 30, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 10px 20px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.88);
  pointer-events: none;
  z-index: 100;
  opacity: 0;
  transition: opacity 0.22s ease, transform 0.22s ease;
  white-space: nowrap;
  max-width: calc(100vw - 40px);
  text-align: center;
  backdrop-filter: blur(6px);
}

.stream-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.mode-icon {
  width: 24px;
  height: 24px;
  display: block;
  object-fit: contain;
  pointer-events: none;
}

/* ========================= */
/* EMBLA                     */
/* ========================= */

.embla,
.carousel-side-btn {
  display: none;
}

.embla {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 230px;
  height: 126px;
  overflow: hidden;
  opacity: 0;
  z-index: 32;
  pointer-events: auto;
}

.embla__container {
  display: flex;
  height: 100%;
}

.embla__slide {
  flex: 0 0 100%;
  min-width: 0;
  height: 100%;
}

.embla,
.embla__container,
.embla__slide {
  touch-action: pan-x;
}

/* ========================= */
/* VOLUME                    */
/* ========================= */

.volume-wrap {
  position: absolute;
  left: 50%;
  bottom: 3.5%;
  transform: translateX(-50%);
  z-index: 31;
}

@media (max-width: 480px) {
  .volume-wrap {
    bottom: 5.5%;
  }
}

.volume-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.08), transparent 40%),
    rgba(20, 13, 15, 0.34);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 6px 18px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(4px);
}

.volume-btn:active {
  transform: scale(0.95);
}

.volume-icon {
  width: 30px;
  height: 30px;
  display: block;
  object-fit: contain;
  pointer-events: none;
}

.top-content {
  display: none;
}

.top-bar {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(100vw, 400px);
  z-index: 40;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 16px 8px;
}

.top-bar .weather-widget {
  position: static;
  top: auto;
  right: auto;
}

.top-left-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.app {
  --play-center-y: 52svh;
  --play-radius: 41px;
  --track-control-gap: 20px;
  --track-stack-height: 90px;
}

.settings-btn,
.language-btn,
.calculator-btn {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.72);
}

.calculator-icon {
  width: 18px;
  height: 18px;
  display: block;
  object-fit: contain;
  pointer-events: none;
}

.calculator-btn {
  position: relative;
}

.calculator-badge {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3B82F6;
  border: 2px solid rgba(14, 16, 26, 0.9);
  display: none;
  pointer-events: none;
}

.calculator-badge.visible {
  display: block;
}

.top-right-controls {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.language-btn {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.track-info {
  position: absolute;
  top: min(
    21svh,
    calc(
      var(--play-center-y) - var(--play-radius) - var(--track-control-gap) -
        var(--track-stack-height)
    )
  );
  left: 50%;
  transform: translateX(-50%);
  width: min(92vw, 340px);
  text-align: center;
  z-index: 40;
  padding: 0 12px;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.track-label {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.80);
  text-transform: uppercase;
}

.track-title {
  margin: 0;
  font-size: clamp(1.7rem, 4.5vw, 2.3rem);
  line-height: 1.05;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.track-artist {
  margin: 0;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.72);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.controls-stage {
  position: absolute;
  left: 50%;
  top: var(--play-center-y);
  transform: translate(-50%, -50%);
  z-index: 30;
  width: min(92vw, 360px);
  height: 108px;
  pointer-events: none;
}

.carousel-main-btn {
  width: 82px;
  height: 82px;
}

.carousel-main-btn:active {
  transform: translate(-50%, -50%) scale(0.96);
}

.mode-selector {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 45;
  width: min(94vw, 380px);
  height: 25vh;
  max-height: 200px;
  overflow: hidden;
  pointer-events: none;
}

.mode-gauge {
  position: relative;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.gauge-arc {
  position: absolute;
  left: 50%;
  bottom: -80px;
  width: min(90vw, 320px);
  height: 160px;
  transform: translateX(-50%);
  border-radius: 999px 999px 0 0;
  border: 1.5px solid rgba(255, 255, 255, 0.14);
  border-bottom: none;
  background: radial-gradient(
    ellipse at 50% 100%,
    rgba(255, 255, 255, 0.04) 0%,
    transparent 65%
  );
  pointer-events: none;
  z-index: 1;
}

.gauge-needle {
  position: absolute;
  left: 50%;
  bottom: -80px;
  width: 0;
  height: 165px;
  transform-origin: bottom center;
  transform: translateX(-50%) rotate(0deg);
  background: transparent;
  transition: none;
  pointer-events: none;
  z-index: 2;
}

.gauge-needle::after {
  content: '';
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  background: linear-gradient(to top, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.92));
}

.gauge-labels {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  text-align: center;
  z-index: 3;
  white-space: nowrap;
  /* button reset */
  background: none;
  border: none;
  padding: 5px 12px 5px;
  border-radius: 12px;
  cursor: pointer;
  color: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: background 0.15s ease;
  pointer-events: auto;
}

.gauge-labels:active {
  background: rgba(255, 255, 255, 0.08);
}

.gauge-current-mode {
  display: block;
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.92);
}

.gauge-subtitle {
  display: block;
  margin: 2px 0 0;
  font-size: 0.58rem;
  color: rgba(255, 255, 255, 0.44);
  letter-spacing: 0.20em;
  text-transform: uppercase;
}

.gauge-more-icon {
  display: block;
  width: 14px;
  height: 14px;
  margin-top: 4px;
  opacity: 0.48;
}

.mode-btn {
  position: absolute;
  left: 50%;
  top: 20%;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.07);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  --slot-x: -50%;
  --slot-y: 0px;
  --slot-s: 1;
  transform: translate(var(--slot-x), var(--slot-y)) scale(var(--slot-s));
  transition:
    transform 0.42s cubic-bezier(0.34, 1.15, 0.64, 1),
    opacity 0.35s ease,
    background 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;
  z-index: 4;
}

.mode-btn img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.mode-btn__emoji {
  font-size: 1.2rem;
  line-height: 1;
}

.mode-btn.active {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
}

.mode-btn[data-mode="travel"] {
  background: rgba(255, 165, 90, 0.18);
  border-color: rgba(255, 160, 80, 0.26);
}

.mode-btn.active[data-mode="travel"] {
  background: linear-gradient(135deg, rgba(255, 170, 110, 0.95), rgba(255, 120, 80, 0.95));
}

.mode-btn[data-mode="comfort"] {
  background: rgba(132, 212, 145, 0.18);
  border-color: rgba(116, 200, 130, 0.26);
}

.mode-btn.active[data-mode="comfort"] {
  background: linear-gradient(135deg, rgba(120, 210, 140, 0.95), rgba(70, 190, 120, 0.95));
}

.mode-btn[data-mode="sport"] {
  background: rgba(255, 110, 110, 0.18);
  border-color: rgba(240, 100, 100, 0.28);
}

.mode-btn.active[data-mode="sport"] {
  background: linear-gradient(135deg, rgba(255, 110, 110, 0.95), rgba(235, 70, 70, 0.95));
}

.mode-btn[data-mode="radio7"] {
  background: rgba(8, 152, 83, 0.16);
  border-color: rgba(8, 152, 83, 0.32);
}

.mode-btn.active[data-mode="radio7"] {
  background: linear-gradient(135deg, rgba(14, 210, 110, 0.95), rgba(8, 152, 83, 0.95));
}

.mode-btn[data-mode="radio7"] img {
  width: 32px;
  height: 32px;
}

.mode-btn[data-mode="nonstop"] {
  background: rgba(0, 180, 220, 0.16);
  border-color: rgba(0, 180, 220, 0.32);
}

.mode-btn.active[data-mode="nonstop"] {
  background: linear-gradient(135deg, rgba(0, 210, 255, 0.95), rgba(0, 150, 200, 0.95));
}

.mode-btn[data-mode="nonstop"] img {
  width: 32px;
  height: 32px;
}

.volume-wrap {
  display: none;
}

/* ========================= */
/* SPEED INDICATOR           */
/* ========================= */

.speed-indicator {
  position: absolute;
  right: 16px;
  bottom: 200px;
  z-index: 44;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.08), transparent 40%),
    rgba(20, 13, 15, 0.34);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 6px 18px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  pointer-events: none;
}

.speed-value {
  font-size: 1.18rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1;
  letter-spacing: -0.02em;
}

.speed-unit {
  font-size: 0.54rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.48);
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

@media (max-width: 480px) {
  .speed-indicator {
    width: 61px;
    height: 61px;
  }

  .speed-value {
    font-size: 1.04rem;
  }

  .speed-unit {
    font-size: 0.47rem;
  }
}

/* ========================= */
/* PLAYING STATE             */
/* Animated outline ring     */
/* ========================= */

.app.driving .carousel-main-btn::before,
.app.driving .carousel-main-btn::after {
  display: none;
}

.app.driving.mode-comfort .carousel-main-btn {
  background: transparent;
  filter: none;
  border: 2px solid rgba(76, 208, 122, 0.88);
  animation: outlineRingComfort 1.5s ease-in-out infinite;
}

.app.driving.mode-sport .carousel-main-btn {
  background: transparent;
  filter: none;
  border: 2px solid rgba(255, 50, 50, 0.88);
  animation: outlineRingSport 1.5s ease-in-out infinite;
}

.app.driving.mode-travel .carousel-main-btn {
  background: transparent;
  filter: none;
  border: 2px solid rgba(255, 165, 80, 0.88);
  animation: outlineRingTravel 1.5s ease-in-out infinite;
}

.app.driving.mode-radio7 .carousel-main-btn {
  background: transparent;
  filter: none;
  border: 2px solid rgba(8, 152, 83, 0.88);
  animation: outlineRingRadio7 1.5s ease-in-out infinite;
}

.app.driving.mode-nonstop .carousel-main-btn {
  background: transparent;
  filter: none;
  border: 2px solid rgba(0, 180, 220, 0.88);
  animation: outlineRingNonStop 1.5s ease-in-out infinite;
}

.app.driving.mode-rap .carousel-main-btn {
  background: transparent;
  filter: none;
  border: 2px solid rgba(180, 40, 255, 0.88);
  animation: outlineRingRap 1.5s ease-in-out infinite;
}

.app.driving.mode-rock .carousel-main-btn {
  background: transparent;
  filter: none;
  border: 2px solid rgba(255, 75, 15, 0.88);
  animation: outlineRingRock 1.5s ease-in-out infinite;
}

.app.driving.mode-deep .carousel-main-btn {
  background: transparent;
  filter: none;
  border: 2px solid rgba(80, 60, 255, 0.88);
  animation: outlineRingDeep 1.5s ease-in-out infinite;
}

.app.driving.mode-lofi .carousel-main-btn {
  background: transparent;
  filter: none;
  border: 2px solid rgba(130, 170, 225, 0.88);
  animation: outlineRingLofi 1.5s ease-in-out infinite;
}

.app.driving.mode-euro .carousel-main-btn {
  background: transparent;
  filter: none;
  border: 2px solid rgba(0, 212, 255, 0.88);
  animation: outlineRingEuro 1.5s ease-in-out infinite;
}

.app.driving.mode-pulse .carousel-main-btn {
  background: transparent;
  filter: none;
  border: 2px solid rgba(160, 255, 20, 0.88);
  animation: outlineRingPulse 1.5s ease-in-out infinite;
}

.app.driving.mode-manele .carousel-main-btn {
  background: transparent;
  filter: none;
  border: 2px solid rgba(255, 155, 0, 0.88);
  animation: outlineRingManele 1.5s ease-in-out infinite;
}

.app.driving .play-icon {
  width: 38px;
  height: 38px;
}

/* ========================= */
/* GAUGE ACCENT ARC          */
/* ========================= */

/* Single colored arc overlaid exactly on the semicircle contour */
.gauge-arc::before {
  content: '';
  position: absolute;
  inset: -1.5px;
  border-radius: 999px 999px 0 0;
  border: 1px solid transparent;
  border-bottom: none;
  pointer-events: none;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.gauge-arc::after {
  content: none;
}

.app.mode-comfort .gauge-arc::before {
  border-color: rgba(76, 208, 122, 0.58);
  box-shadow: 0 0 7px rgba(76, 208, 122, 0.18);
}

.app.mode-travel .gauge-arc::before {
  border-color: rgba(255, 165, 80, 0.58);
  box-shadow: 0 0 7px rgba(255, 165, 80, 0.18);
}

.app.mode-sport .gauge-arc::before {
  border-color: rgba(255, 50, 50, 0.58);
  box-shadow: 0 0 7px rgba(255, 50, 50, 0.18);
}

.app.mode-radio7 .gauge-arc::before {
  border-color: rgba(8, 152, 83, 0.58);
  box-shadow: 0 0 7px rgba(8, 152, 83, 0.18);
}

.app.mode-nonstop .gauge-arc::before {
  border-color: rgba(0, 210, 255, 0.58);
  box-shadow: 0 0 7px rgba(0, 210, 255, 0.18);
}

.app.mode-rap .gauge-arc::before {
  border-color: rgba(180, 40, 255, 0.58);
  box-shadow: 0 0 7px rgba(180, 40, 255, 0.18);
}

.app.mode-rock .gauge-arc::before {
  border-color: rgba(255, 75, 15, 0.58);
  box-shadow: 0 0 7px rgba(255, 75, 15, 0.18);
}

.app.mode-deep .gauge-arc::before {
  border-color: rgba(80, 60, 255, 0.58);
  box-shadow: 0 0 7px rgba(80, 60, 255, 0.18);
}

.app.mode-lofi .gauge-arc::before {
  border-color: rgba(130, 170, 225, 0.58);
  box-shadow: 0 0 7px rgba(130, 170, 225, 0.18);
}

.app.mode-euro .gauge-arc::before {
  border-color: rgba(0, 212, 255, 0.58);
  box-shadow: 0 0 7px rgba(220, 0, 180, 0.18);
}

.app.mode-pulse .gauge-arc::before {
  border-color: rgba(160, 255, 20, 0.58);
  box-shadow: 0 0 7px rgba(160, 255, 20, 0.20);
}

.app.mode-manele .gauge-arc::before {
  border-color: rgba(255, 155, 0, 0.58);
  box-shadow: 0 0 7px rgba(255, 155, 0, 0.18);
}

/* ========================= */
/* GAUGE BOTTOM GLOW         */
/* ========================= */

.gauge-bottom-glow {
  position: fixed;
  bottom: -80px;
  left: 50%;
  transform: translateX(-50%);
  width: min(52vw, 208px);
  height: 100px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 44;
  filter: blur(20px);
  animation: gaugeGlowBreathe 4s ease-in-out infinite;
  transition: background-color 0.5s ease;
  will-change: opacity;
}

.app.mode-comfort  .gauge-bottom-glow { background-color: rgba(76, 208, 122, 0.35); }
.app.mode-travel .gauge-bottom-glow { background-color: rgba(255, 165, 80, 0.35); }
.app.mode-sport .gauge-bottom-glow { background-color: rgba(255, 50, 50, 0.35); }
.app.mode-radio7   .gauge-bottom-glow { background-color: rgba(8, 152, 83, 0.35); }
.app.mode-nonstop .gauge-bottom-glow { background-color: rgba(0, 210, 255, 0.35); }
.app.mode-rap     .gauge-bottom-glow { background-color: rgba(180, 40, 255, 0.35); }
.app.mode-rock    .gauge-bottom-glow { background-color: rgba(255, 75, 15,  0.35); }
.app.mode-deep    .gauge-bottom-glow { background-color: rgba(80,  60, 255, 0.35); }
.app.mode-lofi    .gauge-bottom-glow { background-color: rgba(130, 170, 225, 0.30); }
.app.mode-euro    .gauge-bottom-glow { background-color: rgba(0,   212, 255, 0.35); }
.app.mode-pulse   .gauge-bottom-glow { background-color: rgba(160, 255, 20,  0.35); }
.app.mode-manele  .gauge-bottom-glow { background-color: rgba(255, 155, 0,   0.35); }

@keyframes gaugeGlowBreathe {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.65; }
}

/* ========================= */
/* NAV SUMMARY PILL          */
/* ========================= */

.nav-summary {
  position: fixed;
  bottom: 190px;
  left: max(16px, calc(50vw - 184px));
  z-index: 46;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px 6px 12px;
  border-radius: 20px;
  background: rgba(5, 10, 24, 0.50);
  border: 1px solid rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.22);
  font-family: inherit;
  font-size: 0.71rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  pointer-events: auto;
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.nav-summary:active {
  opacity: 0.68;
  transform: scale(0.97);
}

.nav-summary__dist {
  display: flex;
  align-items: baseline;
  gap: 2px;
}

.nav-summary__distunit {
  font-size: 0.62rem;
  color: rgba(255, 255, 255, 0.42);
}

.nav-summary__sep {
  opacity: 0.32;
  font-size: 0.68rem;
  line-height: 1;
}

.nav-summary__fuel-icon {
  width: 13px;
  height: 13px;
  display: block;
  opacity: 0.55;
  flex-shrink: 0;
  margin-left: 1px;
}