/* Pitboard Studio sensor, OBD and performance suite */
.panel-widget-label {
  padding: 12px;
  color: #8e9ba8;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .14em;
}

.unsupported-widget {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: #ff9b45;
  font: 800 13px/1.4 system-ui, sans-serif;
}

.premium-digital,
.premium-graph,
.motion-graph-widget,
.performance-timer-widget,
.lap-timer-widget,
.motion-live-widget,
.launch-widget,
.dtc-widget,
.logger-widget,
.performance-controls-widget,
.dynamics-widget {
  width: 100%;
  height: 100%;
}

.premium-digital {
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-items: center;
  padding: 8% 9%;
  background:
    radial-gradient(circle at 50% 32%, rgba(255,255,255,.045), transparent 52%),
    linear-gradient(180deg, rgba(255,255,255,.025), rgba(0,0,0,.12));
}

.premium-digital-label {
  color: #aab4be;
  font-size: clamp(10px, 1.4vw, 18px);
  font-weight: 900;
  letter-spacing: .16em;
  text-align: center;
}

.premium-digital-reading {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .16em;
  line-height: .95;
  font-weight: 950;
  letter-spacing: -.055em;
  font-variant-numeric: tabular-nums;
}

.premium-digital-reading small {
  color: #9ba6b1;
  font-size: .26em;
  letter-spacing: .06em;
}

.premium-digital-footer,
.premium-graph-footer,
.performance-footer,
.lap-footer,
.motion-graph-legend {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #82909d;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.premium-digital.warning .premium-digital-reading { color: #f4c63e; }
.premium-digital.danger .premium-digital-reading {
  color: #ef4d36;
  text-shadow: 0 0 16px rgba(239,77,54,.45);
}

.premium-analog,
.motorsport-clock,
.motorsport-compass,
.gg-widget,
.attitude-widget {
  width: 100%;
  height: 100%;
  position: relative;
}

.premium-analog svg,
.motorsport-clock svg,
.motorsport-compass svg,
.gg-widget svg,
.attitude-widget svg {
  width: 100%;
  height: 100%;
  display: block;
}

.premium-gauge-rim,
.clock-outer-rim,
.compass-outer-rim,
.attitude-rim {
  fill: #05070a;
  stroke: #717b86;
  stroke-width: 1.2;
}

.premium-gauge-face,
.clock-inner-face,
.compass-inner-face {
  stroke: #202933;
  stroke-width: 1;
}
.premium-gauge-face { fill: none; }

.motorsport-clock svg,
.motorsport-compass svg {
  background:
    radial-gradient(circle at 38% 28%, rgba(255,255,255,.07), transparent 26%),
    radial-gradient(circle at center, #151b22 0, #080b0f 65%, #030405 100%);
  border-radius: 50%;
}
.premium-analog,
.premium-analog svg { background: transparent !important; }

.motorsport-clock.classic svg,
.motorsport-compass.classic svg {
  background: radial-gradient(circle, #2a2925, #11110f 68%, #050505);
}

.motorsport-clock.minimal svg,
.motorsport-compass.minimal svg {
  background: #0a0d11;
}

.motorsport-clock.industrial svg,
.motorsport-compass.industrial svg {
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.02) 0 2px, transparent 2px 5px),
    radial-gradient(circle, #1b2026, #07090c 70%);
}

.premium-gauge-track {
  fill: none;
  stroke: #4b5661;
  stroke-width: 2.3;
  stroke-linecap: round;
}
.premium-gauge-warning {
  fill: none;
  stroke: #f4c63e;
  stroke-width: 2.8;
  stroke-linecap: round;
}
.premium-gauge-danger {
  fill: none;
  stroke: #e54833;
  stroke-width: 3;
  stroke-linecap: round;
}
.premium-major-tick {
  stroke: #edf0ea;
  stroke-width: 1.25;
}
.premium-minor-tick {
  stroke: #8c98a4;
  stroke-width: .45;
}
.premium-gauge-number {
  fill: #e9ece8;
  text-anchor: middle;
  dominant-baseline: middle;
  font-size: 4.5px;
  font-weight: 800;
}
.premium-gauge-title {
  fill: #a7b2bd;
  text-anchor: middle;
  font-size: 4px;
  font-weight: 900;
  letter-spacing: .7px;
}
.premium-gauge-value {
  fill: #f3f0e7;
  text-anchor: middle;
  font-size: 10px;
  font-weight: 950;
}
.premium-gauge-unit {
  fill: #8d99a5;
  text-anchor: middle;
  font-size: 3.7px;
  font-weight: 800;
  letter-spacing: .4px;
}
.premium-gauge-needle {
  stroke-width: 2.2;
  stroke-linecap: round;
  filter: drop-shadow(0 0 2px rgba(239,91,43,.65));
}
.premium-gauge-hub {
  fill: #d9d7cf;
  stroke: #313942;
  stroke-width: .8;
}
.premium-gauge-hub-centre { fill: #1a1f24; }

.premium-led-widget {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 9px;
  padding: 12px;
}
.premium-led-widget.vertical {
  grid-template-columns: auto 1fr;
  grid-template-rows: 1fr;
}
.premium-led-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.premium-led-header strong {
  color: var(--pbs-label-color,#dbe1e6);
  font-size: var(--pbs-label-font-size,20px);
  letter-spacing: .12em;
}
.premium-led-header span {
  color: #f3f0e7;
  font-size: 16px;
  font-weight: 900;
}
.premium-led-track {
  min-height: 0;
  display: flex;
  gap: 3px;
}
.premium-led-widget.vertical .premium-led-track {
  flex-direction: column-reverse;
}
.premium-led-segment {
  flex: 1;
  min-width: 3px;
  min-height: 3px;
  border-radius: 2px;
  background: #252d35;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025);
}
.premium-led-segment.on {
  background: var(--led-color);
  box-shadow: 0 0 8px color-mix(in srgb, var(--led-color), transparent 40%);
}

.premium-graph,
.motion-graph-widget {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 6px;
  padding: 10px;
}
.premium-graph-header,
.motion-graph-header,
.motion-live-header,
.launch-header,
.performance-header,
.lap-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.premium-graph-header strong,
.motion-graph-header strong,
.motion-live-header strong,
.launch-header strong,
.performance-header strong,
.lap-header strong {
  font-size: 12px;
  letter-spacing: .12em;
}
.premium-graph-header span,
.motion-graph-header span,
.motion-live-header span,
.launch-header span,
.performance-header span,
.lap-header span {
  color: #8c98a4;
  font-size: 10px;
}
.premium-graph svg,
.motion-graph-widget svg {
  width: 100%;
  height: 100%;
  min-height: 0;
}
.premium-graph-grid {
  stroke: rgba(145,165,185,.16);
  stroke-width: 1;
}
.premium-graph-line,
.motion-line {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.motion-line { stroke-width: 2.1; }
.motion-line.x { stroke: #49a7ff; }
.motion-line.y { stroke: #53d879; }
.motion-line.z { stroke: #ef8b36; }
.motion-graph-legend .x { color: #49a7ff; }
.motion-graph-legend .y { color: #53d879; }
.motion-graph-legend .z { color: #ef8b36; }
.motion-graph-legend em {
  margin-left: auto;
  color: #82909d;
  font-style: normal;
}

.clock-track-ring {
  fill: none;
  stroke: rgba(255,255,255,.09);
  stroke-width: .7;
}
.clock-major-tick {
  stroke-width: 1.4;
}
.clock-minor-tick {
  stroke-width: .4;
  opacity: .8;
}
.clock-number {
  fill: #f1eee6;
  text-anchor: middle;
  dominant-baseline: middle;
  font-size: 6px;
  font-weight: 800;
}
.clock-brand-label,
.compass-brand-label {
  fill: #aab4be;
  text-anchor: middle;
  font-size: 3.3px;
  font-weight: 900;
  letter-spacing: .8px;
}
.clock-hour-hand,
.clock-minute-hand,
.clock-second-hand {
  transform-origin: 50px 50px;
  stroke-linecap: round;
}
.clock-hour-hand { stroke-width: 3.5; }
.clock-minute-hand { stroke-width: 2.1; }
.clock-second-hand { stroke-width: .7; }
.clock-centre {
  fill: #dcd9d0;
  stroke: #303841;
  stroke-width: .9;
}
.clock-centre-dot { fill: #171c22; }
.clock-date-window,
.compass-readout-window {
  fill: #080b0e;
  stroke: #4a555f;
  stroke-width: .5;
}
.clock-date-text,
.compass-readout-text {
  fill: #e9ece6;
  text-anchor: middle;
  font-size: 4px;
  font-weight: 900;
}
.motorsport-clock.digital,
.motorsport-compass.digital,
.motorsport-compass.tape {
  display: grid;
  place-content: center;
  text-align: center;
  padding: 8%;
  background:
    radial-gradient(circle at 50% 28%, rgba(255,255,255,.065), transparent 35%),
    linear-gradient(155deg, #171d24, #07090c 70%);
}
.motorsport-face-label,
.compass-face-label {
  color: #a7b2bd;
  font-size: clamp(9px, 1.2vw, 13px);
  font-weight: 900;
  letter-spacing: .22em;
}
.motorsport-digital-time {
  margin-top: 8px;
  color: #f3f0e7;
  font-size: clamp(36px, 6vw, 90px);
  font-weight: 950;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
.motorsport-digital-date {
  margin-top: 7px;
  color: #8e9aa6;
  font-size: clamp(10px, 1.5vw, 16px);
  font-weight: 800;
  letter-spacing: .1em;
}

.compass-major-tick { stroke-width: 1.1; }
.compass-minor-tick { stroke-width: .35; opacity: .76; }
.compass-cardinal {
  text-anchor: middle;
  dominant-baseline: middle;
  font-size: 6px;
  font-weight: 950;
}
.compass-north-arrow {
  filter: drop-shadow(0 0 2px rgba(229,72,51,.55));
}
.compass-south-arrow { fill: #e7e8e3; }
.compass-centre {
  fill: #d8d7d1;
  stroke: #303943;
  stroke-width: .8;
}
.compass-heading-bug {
  filter: drop-shadow(0 0 2px rgba(239,155,53,.55));
}
.compass-tape-window {
  position: relative;
  width: min(100%, 720px);
  height: 80px;
  margin: 15px auto 0;
  display: grid;
  grid-template-columns: repeat(17, 1fr);
  overflow: hidden;
  border-top: 1px solid #56616c;
  border-bottom: 1px solid #56616c;
  background: #080b0f;
}
.compass-tape-mark {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.compass-tape-mark i {
  width: 1px;
  height: 18px;
  background: #7f8b97;
}
.compass-tape-mark.major i {
  height: 28px;
  background: #f0eee7;
}
.compass-tape-mark span {
  margin-top: 4px;
  color: #e9ece7;
  font-size: 11px;
  font-weight: 900;
}
.compass-tape-bug {
  position: absolute;
  left: 50%;
  top: 0;
  width: 0;
  height: 0;
  transform: translateX(-50%);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 12px solid #ef8b36;
}
.compass-tape-readout {
  margin-top: 10px;
  color: #f3f0e7;
  font-size: clamp(24px, 4vw, 58px);
  font-weight: 950;
}

.premium-status,
.motion-status-widget {
  width: 100%;
  height: 100%;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 11px;
}
.status-icon,
.motion-source-icon {
  min-width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid #4b5865;
  border-radius: 8px;
  background: #070a0e;
  color: #ef8b36;
  font-size: 11px;
  font-weight: 950;
}
.status-dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #b98128;
}
.status-dot.connected {
  background: #51d679;
  box-shadow: 0 0 14px rgba(81,214,121,.55);
}
.status-copy,
.motion-status-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.status-copy strong,
.motion-status-copy strong {
  font-size: 12px;
  letter-spacing: .1em;
}
.status-copy span,
.motion-status-copy span {
  font-size: 13px;
  font-weight: 800;
}
.status-copy small,
.motion-status-copy small {
  color: #8d9aa7;
  font-size: 10px;
}

.dtc-widget {
  padding: 12px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 8px;
}
.dtc-header,
.dtc-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.dtc-header strong { letter-spacing: .1em; }
.dtc-count { color: #51d679; font-weight: 900; }
.dtc-list {
  display: grid;
  place-items: center;
  border: 1px dashed #3f4b57;
  color: #8d99a5;
}
.dtc-footer {
  color: #8996a2;
  font-size: 10px;
}
.dtc-footer button {
  min-height: 28px;
  padding: 4px 8px;
}

.logger-widget {
  padding: 12px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
}
.logger-pulse {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #6f7780;
}
.logger-widget.active .logger-pulse {
  background: #51d679;
  box-shadow: 0 0 0 4px rgba(81,214,121,.14), 0 0 16px rgba(81,214,121,.6);
  animation: pbsPulse 1.25s infinite;
}
.logger-widget > div:nth-child(2) {
  display: flex;
  flex-direction: column;
}
.logger-widget strong { letter-spacing: .1em; }
.logger-widget span,
.logger-meta { color: #8d99a5; font-size: 10px; }
@keyframes pbsPulse {
  50% { transform: scale(1.22); opacity: .72; }
}

.motion-live-widget {
  padding: 12px;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 10px;
}
.motion-value-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}
.motion-value-grid > div {
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  padding: 8px;
  border: 1px solid #2f3a45;
  border-radius: 8px;
  background: #080b0f;
}
.motion-value-grid small {
  grid-column: 1 / -1;
  color: #82909d;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
}
.motion-value-grid strong {
  font-size: clamp(18px, 2.3vw, 34px);
  font-weight: 950;
}
.motion-value-grid span {
  color: #8895a1;
  font-size: 10px;
}

.gg-widget {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 5px;
  padding: 4%;
}
.gg-widget svg { min-height: 0; }
.gg-outer {
  fill: #080b0f;
  stroke: #6b7783;
  stroke-width: 1.4;
}
.gg-ring {
  fill: none;
  stroke: rgba(165,180,195,.22);
  stroke-width: .65;
}
.gg-axis {
  stroke: rgba(190,205,220,.28);
  stroke-width: .6;
}
.gg-envelope {
  fill: rgba(78,162,255,.04);
  stroke: rgba(78,162,255,.5);
  stroke-width: .8;
  stroke-dasharray: 3 2;
}
.gg-trail-point { fill: #4ea2ff; }
.gg-live-dot { fill: #ef5b2b; }
.gg-live-glow { fill: rgba(239,91,43,.22); }
.gg-direction {
  fill: #8794a1;
  text-anchor: middle;
  font-size: 3px;
  font-weight: 900;
}
.gg-direction.side { dominant-baseline: middle; }
.gg-readout {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: #8d9aa7;
  font-size: 10px;
}
.gg-readout strong {
  color: #e8ece7;
  letter-spacing: .09em;
}

.attitude-widget {
  display: grid;
  grid-template-rows: 1fr auto;
  padding: 3%;
}
.attitude-widget svg { min-height: 0; }
.attitude-horizon {
  stroke: #f4f1e9;
  stroke-width: 1;
}
.attitude-ladder {
  stroke: #f4f1e9;
  stroke-width: .6;
}
.attitude-ladder-text {
  fill: #f4f1e9;
  font-size: 3px;
  font-weight: 800;
}
.attitude-roll-tick {
  stroke: #e8ece7;
  stroke-width: 1;
}
.attitude-aircraft {
  fill: none;
  stroke: #f4c63e;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.attitude-roll-pointer { fill: #f4c63e; }
.attitude-readout {
  display: flex;
  justify-content: space-between;
  gap: 7px;
  color: #8794a1;
  font-size: 10px;
}
.attitude-readout strong {
  color: #e7ebe6;
  letter-spacing: .08em;
}

.inclinometer-widget {
  width: 100%;
  height: 100%;
  padding: 10px;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 8px;
}
.inclinometer-title {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .1em;
}
.inclinometer-title small {
  color: #83909c;
  font-size: 9px;
}
.inclinometer-panes {
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.inclinometer-pane {
  min-width: 0;
  min-height: 0;
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  place-items: center;
  padding: 7px;
  border: 1px solid #2f3a45;
  border-radius: 10px;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
    #080b0f;
  background-size: 20px 20px;
}
.inclinometer-pane > span {
  color: #8b98a4;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .12em;
}
.inclinometer-pane > strong {
  font-size: 18px;
  font-weight: 950;
}
.inclinometer-arc {
  width: 100%;
  min-height: 0;
  display: grid;
  place-items: center;
}
.generic-vehicle {
  width: 88%;
  height: 88%;
  transform-origin: 50% 65%;
}
.generic-vehicle-body {
  fill: #aeb7c0;
  stroke: #f1f0e9;
  stroke-width: 1.2;
}
.generic-vehicle-glass {
  fill: #19232d;
  stroke: #8d99a5;
  stroke-width: 1;
}
.generic-vehicle-wheel {
  fill: #08090b;
  stroke: #aeb7c0;
  stroke-width: 1.2;
}
.generic-vehicle-ground {
  stroke: #ef8b36;
  stroke-width: 1;
}
.inclinometer-axis-only {
  width: 82%;
  height: 2px;
  background: #ef8b36;
  transform-origin: center;
}
.inclinometer-axis-only::before,
.inclinometer-axis-only::after {
  content: "";
  position: absolute;
  top: -5px;
  width: 10px;
  height: 10px;
  border: 2px solid #ef8b36;
  border-radius: 50%;
}
.inclinometer-axis-only::before { left: 0; }
.inclinometer-axis-only::after { right: 0; }

.dynamics-widget {
  position: relative;
  padding: 12px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  place-items: center;
}
.dynamics-title {
  width: 100%;
  color: #a4afba;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
}
.dynamics-main {
  color: #f3f0e7;
  font-size: clamp(32px, 5vw, 72px);
  font-weight: 950;
  line-height: .95;
}
.dynamics-main small {
  margin-left: .18em;
  color: #8d99a5;
  font-size: .3em;
}
.dynamics-foot {
  color: #84919d;
  font-size: 10px;
  font-weight: 800;
}
.yaw-dial {
  position: absolute;
  width: 68%;
  aspect-ratio: 2 / 1;
  bottom: 28%;
  border: 2px solid #4d5965;
  border-bottom: 0;
  border-radius: 100% 100% 0 0;
}
.yaw-dial span {
  position: absolute;
  bottom: -14px;
  color: #8d99a5;
  font-size: 10px;
  font-weight: 900;
}
.yaw-dial span:first-of-type { left: -5px; }
.yaw-dial span:last-of-type { right: -5px; }
.yaw-needle {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 2px;
  height: 86%;
  transform-origin: bottom;
  background: #ef5b2b;
}
.braking-track {
  width: 86%;
  height: 18px;
  overflow: hidden;
  border: 1px solid #4a5662;
  border-radius: 999px;
  background: #202830;
}
.braking-track span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #48d26f, #f4c63e 68%, #e54833);
}
.grade-road {
  width: 76%;
  height: 4px;
  position: relative;
  background: #e7ebe6;
  transform-origin: center;
}
.grade-road i {
  position: absolute;
  left: 43%;
  bottom: 4px;
  width: 14%;
  height: 18px;
  border: 2px solid #ef8b36;
  border-radius: 4px 4px 2px 2px;
}
.vertical-g-meter {
  width: 26px;
  height: 64%;
  position: absolute;
  right: 12%;
  bottom: 18%;
  overflow: hidden;
  border: 1px solid #4b5865;
  background: #202830;
}
.vertical-g-meter span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(#e54833, #f4c63e, #48d26f);
}
.vertical-g-meter .one-g {
  position: absolute;
  left: -5px;
  right: -5px;
  height: 1px;
  background: #fff;
}

.launch-widget {
  padding: 12px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 10px;
}
.launch-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.launch-metrics > div {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  padding: 8px;
  border: 1px solid #2f3a45;
  border-radius: 8px;
  background: #080b0f;
}
.launch-metrics small {
  grid-column: 1 / -1;
  color: #83909c;
  font-size: 9px;
  font-weight: 900;
}
.launch-metrics strong {
  font-size: clamp(20px, 3vw, 38px);
  font-weight: 950;
}
.launch-metrics span {
  color: #8996a2;
  font-size: 10px;
}
.launch-slip {
  height: 22px;
  position: relative;
  overflow: hidden;
  border: 1px solid #485562;
  border-radius: 5px;
  background: #202830;
}
.launch-slip span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #48d26f, #f4c63e, #e54833);
}
.launch-slip em {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
}

.score-widget {
  width: 100%;
  height: 100%;
  padding: 12px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 14px;
}
.score-ring {
  width: min(42%, 150px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(#ef8b36 var(--score), #26303a 0);
}
.score-ring::before {
  content: "";
  width: 78%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #0a0d11;
  grid-area: 1 / 1;
}
.score-ring > div {
  grid-area: 1 / 1;
  z-index: 1;
  text-align: center;
}
.score-ring strong {
  display: block;
  font-size: clamp(22px, 3.8vw, 48px);
  font-weight: 950;
}
.score-ring span {
  color: #8895a1;
  font-size: 9px;
}
.score-copy {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.score-copy > strong {
  letter-spacing: .1em;
}
.score-copy > span {
  font-size: 20px;
  font-weight: 950;
}
.score-copy > span.positive { color: #51d679; }
.score-copy > span.negative { color: #e54833; }
.score-copy small { color: #8895a1; }

.performance-timer-widget,
.lap-timer-widget {
  padding: 12px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 8px;
}
.performance-header > span {
  color: #51d679;
  font-weight: 900;
}
.performance-time,
.lap-current {
  display: grid;
  place-items: center;
  color: #f3f0e7;
  font-size: clamp(42px, 7vw, 96px);
  font-weight: 950;
  line-height: .95;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
.performance-time small {
  margin-left: .12em;
  color: #8d99a5;
  font-size: .28em;
}
.lap-footer .gain { color: #51d679; }
.lap-footer .loss { color: #e54833; }

.custom-lap-timer-widget{
  width:100%;
  height:100%;
  padding:12px;
  display:grid;
  grid-template-rows:auto minmax(50px,1fr) auto auto auto;
  gap:7px;
  overflow:hidden;
  border:1px solid #39434c;
  border-radius:12px;
  background:#0b0f14;
}
.custom-lap-timer-widget .lap-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.custom-lap-timer-widget .lap-header strong{
  color:#f7f7f7;
  font-size:18px;
  font-weight:950;
}
.custom-lap-timer-widget .lap-header span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#f4bf35;
  font-size:12px;
  text-align:right;
}
.custom-lap-timer-widget .lap-main{
  min-height:0;
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  align-items:stretch;
}
.custom-lap-timer-widget .lap-main.with-map{
  grid-template-columns:minmax(0,.9fr) minmax(150px,1.1fr);
}
.custom-lap-timer-widget .lap-current{
  display:grid;
  place-items:center;
  min-width:0;
  min-height:0;
  overflow:hidden;
  box-sizing:border-box;
  padding:0 8px;
  white-space:nowrap;
  color:#f7f7f7;
  font-size:var(--pbs-value-font-size,92px)!important;
  line-height:.9;
  font-weight:950;
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
}
.lap-track-map{
  position:relative;
  min-width:0;
  min-height:0;
  height:100%;
  display:grid;
  place-items:center;
  overflow:hidden;
  border:1px solid #2f3942;
  border-radius:8px;
  background:
    linear-gradient(rgba(80,95,108,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(80,95,108,.08) 1px,transparent 1px),
    #070a0d;
  background-size:14px 14px;
}
.lap-track-map svg{width:100%;height:100%;display:block}
.lap-map-track{
  fill:none;
  stroke:#d8dde2;
  stroke-width:2.1;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.lap-map-start,.lap-map-finish{
  fill:#ff3b30;
  stroke:#fff;
  stroke-width:.8;
}
.lap-map-gps{
  fill:#42e66f;
  stroke:#fff;
  stroke-width:.9;
  filter:drop-shadow(0 0 2px rgba(66,230,111,.85));
}
.lap-map-marker-label{
  fill:#ff5b52;
  font-size:7px;
  font-family:Arial,sans-serif;
  font-weight:900;
}
.lap-track-map>span{
  position:absolute;
  left:6px;
  bottom:4px;
  padding:1px 3px;
  border-radius:3px;
  background:rgba(0,0,0,.58);
  color:#81909d;
  font-size:7px;
  font-weight:900;
  letter-spacing:.08em;
}
.lap-track-map-fallback{min-height:0;height:100%}
.lap-map-fallback-grid{
  position:absolute;
  inset:12%;
  border:1px dashed #50606d;
  border-radius:40%;
}
.lap-map-start-fallback,.lap-map-gps-fallback{
  position:absolute;
  width:8px;
  height:8px;
  border-radius:50%;
  transform:translate(-50%,-50%);
}
.lap-map-start-fallback{left:30%;top:62%;background:#ff3b30;border:1px solid #fff}
.lap-map-gps-fallback{left:62%;top:38%;background:#42e66f;border:1px solid #fff}
.custom-lap-timer-widget .lap-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  align-items:center;
  gap:8px;
  color:#fff;
  font-size:17px;
  text-align:center;
}
.custom-lap-timer-widget .lap-stats b{font-weight:950}
.custom-lap-timer-widget .lap-runtime-status{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:15px;
  font-weight:950;
  letter-spacing:.025em;
}
.custom-lap-timer-widget .lap-runtime-status strong{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#f4bf35;
}
.custom-lap-timer-widget .lap-runtime-status span{
  flex:0 0 auto;
  color:#ff4a43;
  white-space:nowrap;
}
.custom-lap-timer-widget .lap-controls{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-top:3px;
}
.custom-lap-timer-widget .lap-controls.two-button{grid-template-columns:repeat(2,minmax(0,1fr))}
.custom-lap-timer-widget .lap-controls button{
  min-width:0;
  min-height:64px;
  padding:10px 8px;
  border:2px solid rgba(255,255,255,.16);
  border-radius:8px;
  color:#fff;
  font-size:20px;
  font-weight:950;
  letter-spacing:.035em;
  opacity:1!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 4px 12px rgba(0,0,0,.28);
}
.custom-lap-timer-widget .lap-controls button:first-child{
  border-color:#4fd87b;
  background:linear-gradient(180deg,#269f50,#126332);
}
.custom-lap-timer-widget .lap-controls button:nth-child(2){
  border-color:#ef6671;
  background:linear-gradient(180deg,#b73540,#6f1c24);
}
.custom-lap-timer-widget .lap-controls button:nth-child(3){
  border-color:#e2a43a;
  background:linear-gradient(180deg,#81570d,#4c3207);
}

.accelerometer-calibration-widget{
  width:100%;
  height:100%;
  padding:12px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  overflow:hidden;
  border:1px solid #34404b;
  border-radius:12px;
  background:#080b0f;
}
.accelerometer-calibration-copy{min-width:0;display:flex;flex-direction:column;gap:4px}
.accelerometer-calibration-copy strong{color:#fff;font-size:18px;font-weight:950;letter-spacing:.09em}
.accelerometer-calibration-copy span{color:#e2a43a;font-size:14px;font-weight:900;letter-spacing:.04em}
.accelerometer-calibration-copy small{color:#a9b4be;font-size:12px;line-height:1.3}
.accelerometer-calibration-widget button{
  min-width:120px;
  min-height:58px;
  padding:10px 16px;
  border:2px solid #59a9ff;
  border-radius:12px;
  background:linear-gradient(180deg,#246fb2,#17436f);
  color:#f2f8ff;
  font-size:14px;
  font-weight:950;
  letter-spacing:.055em;
  opacity:1!important;
}

.performance-controls-widget {
  position:relative;
  width:100%;
  height:100%;
  padding:var(--performance-pad,12px);
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  align-items:stretch;
  gap:var(--performance-gap,10px);
  overflow:hidden;
}
.performance-control-head {
  min-width:0;
  min-height:calc(42px * var(--performance-scale,1));
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:calc(10px * var(--performance-scale,1));
}
.performance-controls-widget strong {
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  letter-spacing:.1em;
  font-size:calc(16px * var(--performance-scale,1));
}
.performance-controls-widget span {
  flex:0 0 auto;
  color:#51d679;
  font-size:calc(12px * var(--performance-scale,1));
  font-weight:900;
}
.performance-buttons {
  min-width:0;
  min-height:0;
  display:grid;
  grid-template-columns:repeat(var(--performance-columns,4),var(--performance-button-size,100px));
  grid-template-rows:repeat(var(--performance-rows,1),var(--performance-button-size,100px));
  place-content:center;
  gap:var(--performance-gap,10px);
}
.performance-buttons button {
  width:var(--performance-button-size,120px);
  height:var(--performance-button-size,120px);
  min-width:0;
  min-height:0;
  padding:calc(8px * var(--performance-scale,1));
  border:calc(2px * var(--performance-scale,1)) solid #5a6570;
  border-radius:calc(14px * var(--performance-scale,1));
  opacity:1!important;
  color:#fff;
  font-size:calc(17px * var(--performance-scale,1));
  line-height:1.05;
  font-weight:950;
  letter-spacing:.045em;
  text-align:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 calc(3px * var(--performance-scale,1)) calc(10px * var(--performance-scale,1)) rgba(0,0,0,.34);
  touch-action:manipulation;
}
.performance-buttons .performance-arm{border-color:#e2a43a;background:linear-gradient(180deg,#81570d,#4c3207);color:#fff0bd}
.performance-buttons .performance-start{border-color:#54db7c;background:linear-gradient(180deg,#249b4b,#126132);color:#f2fff6}
.performance-buttons .performance-reset{border-color:#ef6671;background:linear-gradient(180deg,#b73540,#6f1c24);color:#fff4f5}
.performance-buttons .performance-results{border-color:#59a9ff;background:linear-gradient(180deg,#246fb2,#17436f);color:#f2f8ff}

@media (max-width: 1200px) {
  .motion-value-grid { grid-template-columns: repeat(2, 1fr); }
  .inclinometer-panes { grid-template-columns: 1fr; }
}

.motorsport-compass.carbon_fiber svg{
  background:
    linear-gradient(45deg,rgba(255,255,255,.025) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.025) 75%),
    linear-gradient(-45deg,rgba(255,255,255,.02) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.02) 75%),
    radial-gradient(circle at center,#1b1f23,#050608 72%);
  background-size:12px 12px,12px 12px,auto;
  background-position:0 0,6px 6px,0 0;
}
.motorsport-compass.vdo_classic svg{
  background:radial-gradient(circle at 45% 35%,#28251f,#11100d 65%,#020202 100%);
}
.motorsport-compass.plain_black svg{background:#030405}
.motorsport-compass.plain_dark_gray svg{background:radial-gradient(circle,#30343a,#15181c 72%,#07090b)}
.premium-analog.vdo_classic .premium-gauge-number,
.premium-analog.vdo_classic .premium-gauge-title,
.premium-analog.vdo_classic .premium-gauge-value,
.premium-analog.vdo_classic .premium-gauge-unit{fill:#f4f0df}
.pbs-led-tach{width:100%;height:100%;position:relative;display:grid;place-items:center;overflow:hidden}
.pbs-led-tach-label{position:absolute;z-index:3;left:4%;right:4%;top:2%;text-align:center;font-size:var(--pbs-label-font-size,20px);font-weight:900;line-height:1.05;letter-spacing:.08em;color:var(--pbs-label-color,#e6ebef);pointer-events:none}
.pbs-led-tach svg{width:100%;height:100%;display:block}
.pbs-led-tach-dot{fill:#20262c;stroke:#303943;stroke-width:.45}
.pbs-led-tach-dot.on{fill:var(--dot-color);stroke:var(--dot-color);filter:drop-shadow(0 0 2.3px var(--dot-color))}
.pbs-led-tach-dot.peak{stroke:var(--peak-color);stroke-width:1.5;filter:drop-shadow(0 0 3px var(--peak-color))}
.pbs-led-tach-meta{position:absolute;left:50%;bottom:5%;transform:translateX(-50%);display:flex;align-items:baseline;gap:5px;font-variant-numeric:tabular-nums}
.pbs-led-tach-meta strong{font-size:clamp(18px,3vw,38px);line-height:1}
.pbs-led-tach-meta span{font-size:10px;color:#929eaa;font-weight:900;letter-spacing:.1em}
.pbs-led-tach.horizontal .pbs-led-tach-meta{bottom:3%}
.logger-widget.active{outline:2px solid #51d679;outline-offset:-2px;box-shadow:inset 0 0 14px rgba(81,214,121,.18),0 0 12px rgba(81,214,121,.25)}

.logger-widget small{color:#7f8d99;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.logger-widget>div:nth-child(2){min-width:0}

.dashboard-widget.gauge-transparent{background:transparent!important;border-color:transparent!important;box-shadow:none!important}
.dashboard-widget.gauge-transparent .premium-digital,
.dashboard-widget.gauge-transparent .premium-graph,
.dashboard-widget.gauge-transparent .premium-led-widget,
.dashboard-widget.gauge-transparent .pbs-led-level,
.dashboard-widget.gauge-transparent .pbs-led-tach{background:transparent!important}
.pbs-led-level{width:100%;height:100%;display:grid;grid-template-areas:"title" "track" "value";grid-template-rows:minmax(16px,auto) minmax(0,1fr) minmax(22px,auto);gap:6px;padding:8px;background:#080b0f;border-radius:8px;overflow:hidden}
.pbs-led-level.horizontal{grid-template-areas:"title track value";grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:1fr;align-items:center}
.pbs-led-level.no-title:not(.horizontal){grid-template-areas:"track" "value";grid-template-rows:minmax(0,1fr) minmax(22px,auto)}
.pbs-led-level.horizontal.no-title{grid-template-areas:"track value";grid-template-columns:minmax(0,1fr) auto}
.pbs-led-level-title{grid-area:title;position:relative;z-index:2;align-self:center;font-size:var(--pbs-label-font-size,20px);font-weight:900;letter-spacing:.08em;color:var(--pbs-label-color,#e6ebef);text-align:center;line-height:1.1;white-space:normal}
.pbs-led-level-track{grid-area:track;min-width:0;min-height:0;display:flex;gap:4px;justify-content:center;align-items:center;overflow:hidden}
.pbs-led-level.vertical .pbs-led-level-track{flex-direction:column}
.pbs-led-level-segment{width:18px;height:18px;flex:0 0 18px;border-radius:2px;background:#252c32;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.pbs-led-level.vertical .pbs-led-level-segment{width:clamp(8px,42%,18px);height:auto;min-height:3px;flex:1 1 0}
.pbs-led-level.horizontal .pbs-led-level-segment{width:auto;height:clamp(8px,48%,18px);min-width:3px;flex:1 1 0}
.pbs-led-level-segment.on{background:var(--level-color);box-shadow:0 0 8px color-mix(in srgb,var(--level-color),transparent 45%)}
.pbs-led-level-value{grid-area:value;position:relative;z-index:2;align-self:center;display:flex;justify-content:center;align-items:baseline;gap:4px;font-variant-numeric:tabular-nums;line-height:1}
.pbs-led-level-value strong{font-size:24px}.pbs-led-level-value span{font-size:10px;color:#9ba7b2}

/* Analog gauges paint only their SVG circles. Everything outside the outer bezel stays transparent. */
.premium-analog{overflow:visible;background:transparent!important}
.premium-analog svg{background:transparent!important;border-radius:0!important;overflow:visible}
.premium-gauge-rim{fill:#05070a;stroke:#8a949f;stroke-width:1.2}
.premium-gauge-face{stroke:#202933;stroke-width:1}
.pbs-rpm-flash-overlay{position:fixed;inset:0;z-index:2147483600;pointer-events:none;background:var(--rpm-flash-color,#ff2020);opacity:0}
.pbs-rpm-flash-overlay.active{animation:pbsRpmScreenFlash .68s linear}
@keyframes pbsRpmScreenFlash{0%,100%{opacity:0}12%,28%,48%{opacity:.42}20%,38%,64%{opacity:0}}


.premium-digital-footer{justify-content:center;flex-direction:column;gap:2px;text-align:center}
.premium-digital-peak{width:100%;text-align:center}
.premium-digital-diagnostic{width:100%;text-align:center;opacity:.7;font-size:9px}


/* Premium analog instrument system: shared layout, face-skin variants only. */
.premium-analog{background:transparent!important;overflow:visible}
.premium-analog svg{background:transparent!important;overflow:visible}
.premium-gauge-case{fill:#050607;stroke:#010202;stroke-width:.7}
.premium-gauge-bezel{stroke:#090a0b;stroke-width:.45}
.premium-gauge-rim{fill:#070809;stroke:#9b9ea0;stroke-width:.48}
.premium-gauge-face{stroke:#050607;stroke-width:.8}
.premium-gauge-glass{fill:none;stroke:rgba(255,255,255,.12);stroke-width:1.2;stroke-linecap:round}
.premium-gauge-track{stroke:#23272b;stroke-width:1.2;stroke-linecap:butt}
.premium-major-tick{stroke:#f1f0e9;stroke-width:1.45;stroke-linecap:butt}
.premium-minor-tick{stroke:#d2d3cf;stroke-width:.42;stroke-linecap:butt;opacity:.92}
.premium-gauge-number{fill:#f2f0e8;font-family:"Arial Narrow","Roboto Condensed",Arial,sans-serif;font-size:5.2px;font-weight:800;text-anchor:middle;dominant-baseline:middle;letter-spacing:-.12px}
.premium-gauge-number.danger-number{fill:#ff1737}
.premium-gauge-title{font-family:"Arial Narrow","Roboto Condensed",Arial,sans-serif;font-weight:700;letter-spacing:1px;text-anchor:middle}
.premium-gauge-warning{stroke:#f4c63e;stroke-width:2.5}
.premium-gauge-danger{stroke:#ef1738;stroke-width:2.9}
.premium-gauge-readout-pod{fill:#010203;stroke:#17191c;stroke-width:.55}
.premium-gauge-value{fill:#f8f6ee;font-family:"Arial Narrow","Roboto Condensed",Arial,sans-serif;font-size:8.8px;font-weight:800;text-anchor:middle;dominant-baseline:middle}
.premium-gauge-unit{fill:#d6d3cb;font-family:"Arial Narrow","Roboto Condensed",Arial,sans-serif;font-size:2.65px;font-weight:700;letter-spacing:.8px;text-anchor:middle;dominant-baseline:middle}
.premium-gauge-needle-body{filter:none}
.premium-gauge-needle-highlight{fill:none;stroke:rgba(255,255,255,.36);stroke-width:.42;stroke-linecap:round}
.premium-gauge-hub-ring{fill:#0a0b0d;stroke:#3d4043;stroke-width:1}
.premium-gauge-hub{stroke:#050607;stroke-width:.75}
.premium-gauge-hub-highlight{fill:rgba(255,255,255,.13)}
.premium-analog.vdo_classic .premium-gauge-face{stroke:#211f1b}
.premium-analog.vdo_classic .premium-gauge-number{fill:#f1ede1}
.premium-analog.vdo_classic .premium-gauge-title{fill:#d6d0c2}
.premium-analog.carbon_fiber .premium-gauge-number{fill:#f6f5ef}
.premium-analog.carbon_fiber .premium-gauge-face{stroke:#24272a}


/* Posted speed-limit sign and state-pack manager. */
.pbs-digital-speed{position:relative}
.pbs-digital-speed strong{font-variant-numeric:tabular-nums}
.pbs-speed-peak{display:block;margin-top:5px;font-size:10px;font-style:normal;font-weight:900;letter-spacing:.08em}
.pbs-speed-limit-widget{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;background:transparent}
.pbs-speed-limit-sign{position:relative;width:min(94%,150px);aspect-ratio:.81;border:2px solid #111;border-radius:13px;background:#fff;color:#050505;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:13px 9px 9px;box-sizing:border-box;box-shadow:0 2px 5px rgba(0,0,0,.34);overflow:hidden}
.pbs-speed-limit-sign::before{content:"";position:absolute;inset:4px;border:2px solid #111;border-radius:9px;pointer-events:none}
.pbs-speed-limit-title,.pbs-speed-limit-number,.pbs-speed-limit-unit{position:relative;z-index:1}
.pbs-speed-limit-title{font-family:Arial,Helvetica,sans-serif;font-size:24px;font-weight:900;line-height:.86;text-align:center;letter-spacing:0;color:#050505}
.pbs-speed-limit-number{margin-top:14px;font-family:Arial,Helvetica,sans-serif;font-size:82px;font-weight:900;line-height:.78;letter-spacing:-.06em;color:#050505;font-variant-numeric:tabular-nums}
.pbs-speed-limit-unit{position:absolute;left:0;right:0;bottom:9px;margin:0;text-align:center;font-family:Arial,Helvetica,sans-serif;font-size:14px;font-weight:900;line-height:1;letter-spacing:0;color:#050505}
.pbs-speed-limit-widget.unavailable .pbs-speed-limit-sign{background:#fff;color:#777;filter:none}
.pbs-speed-limit-widget.unavailable .pbs-speed-limit-title,.pbs-speed-limit-widget.unavailable .pbs-speed-limit-number,.pbs-speed-limit-widget.unavailable .pbs-speed-limit-unit{color:#777}
.pbs-speed-limit-unavailable{max-width:95%;text-align:center;color:#aeb7c0;font-size:9px;font-weight:800;letter-spacing:.04em}
.pbs-speed-limit-actions button{margin-top:6px}
.pbs-speed-selected-regions{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}
.pbs-speed-selected-region{display:inline-flex!important;align-items:center;width:auto!important;padding:4px 7px;border:1px solid #3f7650;border-radius:999px;background:#0b1810;color:#d8f6df!important;font-size:9px!important;font-weight:800;line-height:1.1!important;letter-spacing:.02em}
.pbs-speed-selected-empty{margin-top:3px;color:#8fa69a;font-size:9px;font-style:italic}
.pbs-speed-region-modal{position:fixed;inset:0;z-index:2147483000;display:grid;place-items:center;padding:24px;background:rgba(0,0,0,.72)}
.pbs-speed-region-modal[hidden]{display:none}
.pbs-speed-region-card{width:min(920px,94vw);max-height:88vh;display:grid;grid-template-rows:auto auto 1fr auto;overflow:hidden;border:1px solid #46515d;border-radius:12px;background:#0b0f14;box-shadow:0 24px 80px rgba(0,0,0,.65)}
.pbs-speed-region-card>header,.pbs-speed-region-card>footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid #26313c}
.pbs-speed-region-card>footer{border-top:1px solid #26313c;border-bottom:0;justify-content:flex-end}
.pbs-speed-region-card h2{margin:0;color:#f1ead8;font-size:20px}.pbs-speed-region-card p{margin:4px 0 0;color:#8d9aa8;font-size:11px}
.pbs-speed-region-summary{padding:10px 16px;color:#b9c5d0;font-size:11px;font-weight:800;border-bottom:1px solid #202831}
.pbs-speed-region-grid{min-height:0;overflow:auto;padding:12px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pbs-speed-region-row{display:flex;align-items:flex-start;gap:8px;padding:9px;border:1px solid #2b3540;border-radius:7px;background:#0f151c;cursor:pointer}
.pbs-speed-region-row:hover{border-color:#576878}.pbs-speed-region-row input{margin-top:3px}
.pbs-speed-region-row span{min-width:0;display:grid;grid-template-columns:1fr auto;gap:2px 7px;width:100%}.pbs-speed-region-row strong{font-size:11px}.pbs-speed-region-row b{color:#ef8b36;font-size:10px}.pbs-speed-region-row small{grid-column:1/-1;color:#7f8d99;font-size:9px}
@media(max-width:760px){.pbs-speed-region-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

.pbs-speed-region-row.pending{opacity:.48}
.pbs-speed-region-row.pending:hover{border-color:#2b3540}
.pbs-speed-region-row input:disabled{cursor:not-allowed}


/* Exact Dually Studio instrument assets used by Pitboard. */
.pbs-dually-analog-face{position:relative;width:100%;height:100%;display:grid;place-items:center;overflow:visible;background:transparent}
.pbs-dually-analog-face-image,.pbs-dually-analog-overlay{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.pbs-dually-analog-face-image{object-fit:contain}
.pbs-dually-analog-overlay{overflow:visible;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
.pbs-dually-analog-value{font-family:Consolas,"Courier New",monospace;font-size:8.4px;font-weight:600;fill:#f7f3eb;dominant-baseline:alphabetic}
.pbs-dually-analog-needle-shadow{stroke:#000;stroke-width:2.45;stroke-linecap:round;opacity:.8}
.pbs-dually-analog-needle{stroke-width:1.55;stroke-linecap:round;filter:drop-shadow(0 0 1px rgba(255,0,0,.9))}
.pbs-dually-analog-hub-outer{fill:#070707;stroke:rgba(255,255,255,.2);stroke-width:.75}
.pbs-dually-analog-hub-inner{fill:#1a1a1a;stroke:rgba(0,0,0,.9);stroke-width:.45}

.pbs-dually-compass-asset{position:relative;width:100%;height:100%;overflow:hidden;background:transparent;border-radius:50%}
.pbs-dually-compass-face,.pbs-dually-compass-pointer{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transform-origin:50% 50%;pointer-events:none}
.pbs-dually-compass-face{z-index:1}
.pbs-dually-compass-pointer{z-index:2}
.pbs-dually-compass-readout{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-43%);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;text-align:center;pointer-events:none}
.pbs-dually-compass-readout strong{font-family:"Arial Narrow","Roboto Condensed",Arial,sans-serif;font-size:clamp(22px,10%,44px);font-weight:700;color:#fff;text-shadow:0 1px 3px #000}
.pbs-dually-compass-readout span{margin-top:8px;font-family:"Arial Narrow","Roboto Condensed",Arial,sans-serif;font-size:clamp(15px,6%,27px);font-weight:700;color:#fff;text-shadow:0 1px 3px #000}

/* Dually road-sign face. Text is overlaid so the posted limit remains live. */
.pbs-speed-limit-sign{position:relative!important;aspect-ratio:100/126!important;border:0!important;border-radius:0!important;background:transparent!important;padding:0!important;box-shadow:0 2px 5px rgba(0,0,0,.34)!important;overflow:visible!important;display:block!important;flex:0 0 auto}
.pbs-speed-limit-sign::before{display:none!important}
.pbs-speed-limit-face-asset{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;display:block;pointer-events:none}
.pbs-speed-limit-title{position:absolute!important;z-index:1;left:0;right:0;top:10.5%;margin:0!important;font-family:Arial,Helvetica,sans-serif!important;font-size:calc(22px * var(--speed-sign-scale,1))!important;font-weight:900!important;line-height:1.32!important;text-align:center!important;letter-spacing:0!important;color:#050505!important}
.pbs-speed-limit-number{position:absolute!important;z-index:1;left:0;right:0;top:49%;margin:0!important;font-family:Arial,Helvetica,sans-serif!important;font-size:calc(68px * var(--speed-sign-scale,1))!important;font-weight:900!important;line-height:.78!important;letter-spacing:-.045em!important;text-align:center!important;color:#050505!important;font-variant-numeric:tabular-nums}
.pbs-speed-limit-unit{position:absolute!important;z-index:1;left:0;right:0;bottom:7%!important;margin:0!important;text-align:center!important;font-family:Arial,Helvetica,sans-serif!important;font-size:calc(14px * var(--speed-sign-scale,1))!important;font-weight:900!important;line-height:1!important;letter-spacing:0!important;color:#050505!important}
.pbs-speed-limit-widget.unavailable .pbs-speed-limit-face-asset{opacity:.55}


/* Dually Gauge Engine geometry for all auxiliary analog gauges. */
.pbs-dually-generic-analog,.pbs-dually-generic-analog svg{width:100%;height:100%}
.pbs-dually-generic-analog svg{overflow:visible;filter:drop-shadow(0 12px 22px rgba(0,0,0,.75))}
.pbs-dually-shadow{fill:#020202}
.pbs-dually-outer-ring{stroke:rgba(255,255,255,.15);stroke-width:.5}
.pbs-dually-ring-groove{fill:#070707;stroke:rgba(255,255,255,.08);stroke-width:.5}
.pbs-dually-inner-ring{fill:#030303;stroke:rgba(255,255,255,.25);stroke-width:.8}
.pbs-dually-face{stroke:rgba(255,255,255,.1);stroke-width:.45}
.pbs-dually-major-tick,.pbs-dually-minor-tick{stroke:#f5f1e9;stroke-linecap:square}
.pbs-dually-major-tick{stroke-width:1.35}
.pbs-dually-minor-tick{stroke-width:.48;opacity:.84}
.pbs-dually-gauge-number{font-family:"Arial Narrow","Roboto Condensed","Segoe UI",Arial,sans-serif;font-size:6.3px;font-weight:700;fill:#f5f1e9;paint-order:stroke;stroke:#000;stroke-width:.45}
.pbs-dually-warning-arc,.pbs-dually-danger-arc{fill:none;stroke-linecap:round}
.pbs-dually-warning-arc{stroke:#ffd43b;stroke-width:2.4}
.pbs-dually-danger-arc{stroke:#ff1737;stroke-width:2.6}
.pbs-dually-gauge-logo{opacity:.96;filter:drop-shadow(0 1px 1px rgba(0,0,0,.9))}
.pbs-dually-brand-text{font-family:"Arial Narrow","Segoe UI",Arial,sans-serif;font-size:4px;font-weight:700;letter-spacing:.12em;fill:#e8e4dc}
.pbs-dually-lcd rect{fill:#020202;stroke:rgba(255,255,255,.09);stroke-width:.35}
.pbs-dually-lcd-value{font-family:Consolas,"Courier New",monospace;font-size:8.4px;font-weight:600;fill:#f7f3eb}
.pbs-dually-lcd-unit{font-family:"Segoe UI",Arial,sans-serif;font-size:2.8px;fill:#d1ccc3;letter-spacing:.12em}
.pbs-dually-bottom-label{font-family:"Arial Narrow","Segoe UI",Arial,sans-serif;font-size:2.45px;letter-spacing:.17em;fill:rgba(255,255,255,.58)}
.pbs-dually-needle-shadow{stroke:#000;stroke-width:2.45;stroke-linecap:round;opacity:.8}
.pbs-dually-needle{stroke-width:1.55;stroke-linecap:round;filter:drop-shadow(0 0 1px rgba(255,0,0,.9))}
.pbs-dually-hub-outer{fill:#070707;stroke:rgba(255,255,255,.2);stroke-width:.75}
.pbs-dually-hub-inner{fill:#1a1a1a;stroke:rgba(0,0,0,.9);stroke-width:.45}
.pbs-dually-glass-glare{fill:rgba(255,255,255,.12);opacity:.72;pointer-events:none}


/* Responsive ribbon compass geometry. */
.motorsport-compass.tape{
  width:100%;height:100%;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  gap:var(--ribbon-gap,5px);
  padding:var(--ribbon-pad,8px);
  box-sizing:border-box;
  overflow:hidden;
}
.motorsport-compass.tape .compass-face-label{
  min-height:0;
  margin:0;
  line-height:1;
  font-size:var(--ribbon-label-size,10px);
}
.compass-tape-window{
  width:100%;
  height:auto;
  min-height:0;
  margin:0;
  align-self:stretch;
  grid-template-columns:repeat(17,minmax(0,1fr));
  padding:0;
}
.compass-tape-mark{height:100%;min-width:0;justify-content:flex-start;overflow:hidden}
.compass-tape-mark i{height:var(--ribbon-minor-tick,12px);flex:0 0 var(--ribbon-minor-tick,12px)}
.compass-tape-mark.major i{height:var(--ribbon-major-tick,20px);flex-basis:var(--ribbon-major-tick,20px)}
.compass-tape-mark span{
  margin-top:max(1px,calc(var(--ribbon-gap,5px) * .5));
  font-size:var(--ribbon-mark-size,9px);
  line-height:1;
}
.compass-tape-bug{
  border-left-width:var(--ribbon-bug,8px);
  border-right-width:var(--ribbon-bug,8px);
  border-top-width:calc(var(--ribbon-bug,8px) * 1.35);
}
.compass-tape-readout{
  min-height:0;
  margin:0;
  line-height:1;
  font-size:var(--ribbon-readout-size,24px);
  white-space:nowrap;
  overflow:hidden;
}


/* Shared widget typography controls. Every dynamic widget text role maps to an inspector size. */
.parity-readout>strong,
.parity-coordinate>span,
.motorsport-parity-speed,
.motorsport-parity-rpm strong,
.premium-digital-reading,
.motion-value-grid strong,
.inclinometer-pane>strong,
.dynamics-main,
.launch-metrics strong,
.score-ring strong,
.performance-time,
.lap-current,
.pbs-led-tach-meta strong,
.pbs-led-level-value strong,
.pbs-speed-limit-number,
.pbs-dually-compass-readout strong{
  font-size:var(--pbs-value-font-size,58px)!important;
  color:var(--pbs-value-color,#fff);
}

.parity-readout>small,
.motorsport-parity-speed small,
.premium-digital-reading small,
.motion-value-grid span,
.dynamics-main small,
.launch-metrics span,
.performance-time small,
.pbs-led-tach-meta span,
.pbs-led-level-value span,
.pbs-speed-limit-unit{
  font-size:var(--pbs-unit-font-size,18px)!important;
  color:var(--pbs-unit-color,#a9b7c4)!important;
}

.parity-readout>span,
.parity-coordinate>strong,
.parity-status>strong,
.parity-control>strong,
.panel-widget-label,
.premium-digital-label,
.premium-led-header strong,
.premium-graph-header strong,
.motion-graph-header strong,
.motion-live-header strong,
.launch-header strong,
.performance-header strong,
.lap-header strong,
.status-copy strong,
.motion-status-copy strong,
.dtc-header strong,
.logger-widget strong,
.gg-readout strong,
.attitude-readout strong,
.inclinometer-title,
.dynamics-title,
.score-copy>strong,
.performance-controls-widget strong,
.pbs-led-tach-label,
.pbs-led-level-title,
.pbs-speed-limit-title{
  font-size:var(--pbs-label-font-size,20px)!important;
  color:var(--pbs-label-color,#f3f0e7)!important;
}

.premium-graph-header span,
.motion-graph-header span,
.motion-live-header span,
.launch-header span,
.performance-header span,
.lap-header span,
.status-copy span,
.motion-status-copy span,
.motion-value-grid small,
.gg-readout span,
.attitude-readout span,
.inclinometer-title small,
.inclinometer-pane>span,
.launch-metrics small,
.launch-slip em,
.score-ring span,
.score-copy>span,
.performance-controls-widget span,
.premium-digital-diagnostic,
.pbs-speed-peak,
.pbs-dually-compass-readout span{
  font-size:var(--pbs-secondary-font-size,16px)!important;
  color:var(--pbs-secondary-color,#b8c6d3);
}

.premium-digital-footer,
.premium-graph-footer,
.performance-footer,
.lap-footer,
.motion-graph-legend,
.status-copy small,
.motion-status-copy small,
.dtc-footer,
.logger-widget span,
.logger-meta,
.logger-widget small,
.dynamics-foot,
.score-copy small,
.pbs-speed-limit-unavailable{
  font-size:var(--pbs-footer-font-size,14px)!important;
  color:var(--pbs-footer-color,#8fa2b5);
}

/* SVG instrument text uses scaled equivalents so pixel-based inspector sizes remain sensible in a 100x100 viewBox. */
.premium-gauge-title,
.clock-brand-label,
.compass-brand-label,
.clock-label,
.compass-label,
.pbs-dually-brand-text,
.pbs-dually-bottom-label{
  font-size:var(--pbs-svg-label-font-size,4px)!important;
}
.premium-gauge-value,
.compass-heading,
.compass-direction,
.compass-readout-text,
.clock-date-text,
.pbs-dually-lcd-value,
.pbs-dually-analog-value{
  font-size:var(--pbs-svg-value-font-size,9px)!important;
}
.premium-gauge-number,
.clock-number,
.compass-degree,
.compass-cardinal,
.compass-minor,
.gg-direction,
.attitude-ladder-text,
.pbs-dually-gauge-number{
  font-size:var(--pbs-svg-secondary-font-size,5px)!important;
}
.premium-gauge-unit,
.pbs-dually-lcd-unit{
  font-size:var(--pbs-svg-unit-font-size,3.6px)!important;
}

/* GPS Digital Speed has four genuinely independent text sizes. */
.pbs-digital-speed>strong{font-size:var(--pbs-value-font-size,88px)!important}
.pbs-digital-speed>small{font-size:var(--pbs-unit-font-size,24px)!important}
.pbs-digital-speed>.pbs-speed-peak{font-size:var(--pbs-secondary-font-size,16px)!important}
.pbs-digital-speed>span{font-size:var(--pbs-label-font-size,18px)!important}


/* Remaining widget text surfaces participate in the same typography roles. */
.pbs-preset-button,
.parity-screen-power,
.premium-led-header>span,
.compass-tape-readout,
.motorsport-digital-time,
.motorsport-digital-date{
  font-size:var(--pbs-value-font-size,58px)!important;
  color:var(--pbs-value-color,#fff);
}
.motorsport-face-label,
.compass-face-label{
  font-size:var(--pbs-label-font-size,20px)!important;
  color:var(--pbs-label-color,#f3f0e7)!important;
}
.status-icon,
.motion-source-icon,
.dtc-count,
.yaw-dial span,
.compass-tape-mark span,
.motorsport-parity-rpm{
  font-size:var(--pbs-secondary-font-size,16px)!important;
  color:var(--pbs-secondary-color,#b8c6d3);
}
.dtc-list,
.motorsport-parity-strip,
.clock-date{
  font-size:var(--pbs-footer-font-size,14px)!important;
  color:var(--pbs-footer-color,#8fa2b5);
}

/* Exact Dually Studio road-sign typography and spacing. */
.pbs-speed-limit-sign{
  position:relative!important;
  aspect-ratio:100/126!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  padding:0!important;
  box-shadow:0 2px 5px rgba(0,0,0,.34)!important;
  overflow:visible!important;
  display:block!important;
  flex:0 0 auto
}
.pbs-speed-limit-sign::before{display:none!important}
.pbs-speed-limit-face-asset{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;display:block;pointer-events:none}
.pbs-speed-limit-title{
  position:absolute!important;z-index:4;left:0;right:0;top:8.7%!important;margin:0!important;
  font-family:Arial,Helvetica,sans-serif!important;font-size:var(--speed-sign-title-size,23.5px)!important;
  font-weight:900!important;line-height:.93!important;text-align:center!important;letter-spacing:0!important;color:#050505!important
}
.pbs-speed-limit-number{
  position:absolute!important;z-index:4;left:0;right:0;top:48.6%!important;margin:0!important;
  font-family:Arial,Helvetica,sans-serif!important;font-size:var(--speed-sign-number-size,64px)!important;
  font-weight:900!important;line-height:.78!important;letter-spacing:-.045em!important;text-align:center!important;color:#050505!important;font-variant-numeric:tabular-nums
}
.pbs-speed-limit-unit{
  position:absolute!important;z-index:4;left:0;right:0;bottom:7.1%!important;margin:0!important;
  text-align:center!important;font-family:Arial,Helvetica,sans-serif!important;font-size:var(--speed-sign-unit-size,13px)!important;
  font-weight:900!important;line-height:1!important;letter-spacing:0!important;color:#050505!important
}
.pbs-speed-limit-widget.unavailable .pbs-speed-limit-title,
.pbs-speed-limit-widget.unavailable .pbs-speed-limit-number,
.pbs-speed-limit-widget.unavailable .pbs-speed-limit-unit{color:#666!important}


/* Dually-style Bluetooth symbol-only connection status. */
.pbs-bluetooth-only{width:100%;height:100%;display:grid;place-items:center;background:transparent}
.pbs-bluetooth-symbol{width:76%;height:76%;overflow:visible}
.pbs-bt-path{fill:none;stroke:var(--bt-colour);stroke-width:6.5;stroke-linecap:round;stroke-linejoin:round}
.pbs-bt-glow{fill:rgba(0,174,239,.13)}
.pbs-bluetooth-only.connected .pbs-bluetooth-symbol{filter:drop-shadow(0 0 7px rgba(0,174,239,.38))}

/* Dually-style Data Logger: icon border itself pulses green while recording. */
.dually-logger{padding:10px 12px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:11px;border:1px solid #34404b;border-radius:10px;background:#080b0f}
.logger-icon{width:52px;height:52px;display:grid;place-items:center;border:2px solid #747b86;border-radius:10px;background:#05080b;color:#9aa3ac;box-shadow:inset 0 0 0 1px rgba(255,255,255,.035)}
.logger-icon svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.dually-logger.active{outline:0!important;border-color:#34404b!important;box-shadow:none!important}
.dually-logger.active .logger-icon{color:#d9ffe3;border-color:#51d679;box-shadow:0 0 0 3px rgba(81,214,121,.13),0 0 16px rgba(81,214,121,.58),inset 0 0 12px rgba(81,214,121,.10);animation:pbsDuallyLoggerPulse 1.2s ease-in-out infinite}
.logger-copy{min-width:0;display:flex;flex-direction:column;gap:2px}
.logger-copy small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.logger-meta{display:flex;flex-direction:column;align-items:flex-end;gap:3px;text-align:right}
.logger-meta b{color:#d7e0e7;font-size:13px;font-variant-numeric:tabular-nums}
.logger-camera-sync{color:#73dfa0!important;font-size:9px!important;font-weight:900;letter-spacing:.08em}
@keyframes pbsDuallyLoggerPulse{0%,100%{transform:scale(1);box-shadow:0 0 0 2px rgba(81,214,121,.10),0 0 8px rgba(81,214,121,.28)}50%{transform:scale(1.06);box-shadow:0 0 0 5px rgba(81,214,121,.14),0 0 22px rgba(81,214,121,.72)}}

/* Resizable camera preview placeholder in Studio; runtime replaces it with the live camera feed. */
.pbs-camera-preview{width:100%;height:100%;position:relative;overflow:hidden;border:1px solid #3d4955;border-radius:8px;background:#05080b}
.pbs-camera-preview-scene{position:absolute;inset:0;overflow:hidden;background:linear-gradient(#273441 0 42%,#171c20 42% 100%)}
.pbs-camera-horizon{position:absolute;left:0;right:0;top:42%;height:1px;background:rgba(255,255,255,.24)}
.pbs-camera-road{position:absolute;left:12%;right:12%;bottom:-18%;height:68%;clip-path:polygon(42% 0,58% 0,100% 100%,0 100%);background:linear-gradient(90deg,#262a2d,#34393d 48%,#34393d 52%,#25292c)}
.pbs-camera-road::after{content:"";position:absolute;left:49%;top:5%;bottom:0;width:2%;background:repeating-linear-gradient(to bottom,#d9d4ba 0 12%,transparent 12% 24%)}
.pbs-camera-crosshair{position:absolute;left:50%;top:50%;width:48px;height:48px;transform:translate(-50%,-50%);border:1px solid rgba(255,255,255,.35);border-radius:50%}
.pbs-camera-crosshair::before,.pbs-camera-crosshair::after{content:"";position:absolute;background:rgba(255,255,255,.35)}
.pbs-camera-crosshair::before{left:50%;top:-9px;bottom:-9px;width:1px}.pbs-camera-crosshair::after{top:50%;left:-9px;right:-9px;height:1px}
.pbs-camera-status{position:absolute;left:8px;right:8px;bottom:7px;display:flex;align-items:center;gap:6px;padding:5px 7px;border-radius:5px;background:rgba(0,0,0,.63);color:#dce4ea;font-size:9px;font-weight:900;letter-spacing:.06em}
.pbs-camera-dot{width:8px;height:8px;border-radius:50%;background:#747b86}.pbs-camera-dot.active{background:#51d679;box-shadow:0 0 8px rgba(81,214,121,.7)}
.pbs-camera-preview.inactive .pbs-camera-preview-scene{filter:grayscale(1);opacity:.42}


.pbs-camera-paused{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:8%;background:#000;text-align:center}
.pbs-camera-paused img{display:block;width:min(58%,300px);max-height:38%;object-fit:contain}
.pbs-camera-paused strong{color:#fff;font-size:clamp(18px,8%,42px);font-weight:950;letter-spacing:.12em}
.pbs-camera-paused span{color:#aeb8c0;font-size:clamp(9px,4%,18px);font-weight:800;letter-spacing:.08em}
.pbs-camera-preview.paused{background:#000;border-color:#2b3137}


/* Exact Dually Studio Porsche compass renderer. */
.pc-widget,.pc-svg{width:100%;height:100%}
.pc-widget{background:transparent!important;background-color:transparent!important;box-shadow:none!important;border:0!important;outline:0!important}
.pc-svg{overflow:visible;filter:drop-shadow(0 12px 22px rgba(0,0,0,.75));background:transparent!important;background-color:transparent!important}
.pc-shadow{fill:#020202}
.pc-outer{fill:url(#pcBezel)!important;stroke:rgba(255,255,255,.18)!important;stroke-width:.5!important}
.pc-compass-face{fill:#050505!important;stroke:rgba(0,0,0,.95);stroke-width:1.2}
.pc-compass-inner-ring{fill:none!important;stroke:url(#pcCompassInnerGrad)!important;stroke-width:4.2!important}
.pc-compass-major,.pc-compass-minor{stroke:#fff!important;stroke-linecap:square}
.pc-compass-major{stroke-width:.9}
.pc-compass-minor{stroke-width:.35;opacity:.55}
.pc-compass-number,.pc-cardinal,.pc-cardinal-small,.pc-compass-heading,.pc-compass-dir{
  font-family:"Porsche","Porsche Next","Arial Narrow","Segoe UI",Arial,sans-serif!important;
  font-weight:normal!important;
  font-style:normal!important;
  font-synthesis:none!important;
  paint-order:stroke;
  stroke:#000;
}
.pc-compass-number{fill:#e9e6dc;font-size:3.35px;stroke-width:.2}
.pc-cardinal{fill:#f3f0e8;font-size:7.1px;stroke-width:.4}
.pc-cardinal-n{fill:#ff1028}
.pc-cardinal-small{fill:#e9e6dc;font-size:3.55px;stroke-width:.25}
.pc-compass-pointer,.pc-compass-pointer-inner{fill:#ff1028;filter:drop-shadow(0 1px 1px rgba(0,0,0,.95))}
.pc-compass-pointer-inner{opacity:.95}
.pc-compass-heading{fill:#f7f3eb;font-size:8px;stroke-width:.35}
.pc-compass-dir{fill:#00b7ff;font-size:7px;stroke-width:.35}
.pc-name{fill:rgba(255,255,255,.72);font-family:"Segoe UI",Arial,sans-serif;font-size:3.8px;letter-spacing:.08em;text-transform:uppercase}


/* One-tap Data Logger preview, matching installed runtime. */
.logger-control-preview{
  display:grid!important;
  grid-template-columns:1fr!important;
  grid-template-rows:auto auto 1fr auto;
  align-content:stretch;
  gap:8px!important;
  padding:10px!important;
  min-width:0;
}
.logger-control-head{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  min-width:0;
}
.logger-control-mode,
.logger-control-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  min-width:0;
}
.logger-control-mode button,
.logger-control-actions button,
.logger-control-stop{
  min-width:0;
  min-height:42px;
  padding:9px 10px;
  border:1px solid #53616d;
  border-radius:8px;
  background:#12181e;
  color:#d7dfe5;
  font-size:11px;
  font-weight:950;
  letter-spacing:.045em;
  line-height:1.1;
  opacity:1!important;
}
.logger-control-mode button.selected{border-color:#6c9cc2;background:#163149;color:#fff}
.logger-control-actions button{min-height:54px;border-color:#3c8b57;background:#12301d;color:#dfffe7}
.logger-control-actions button.with-video{border-color:#3d75a8;background:#11283d;color:#e2f1ff}
.logger-control-stop{
  width:100%;
  min-height:58px;
  border:2px solid #d85d5d!important;
  background:#4a1616!important;
  color:#fff!important;
  font-size:14px!important;
}
.logger-control-active-note{text-align:center;color:#8ee4aa;font-size:10px;font-weight:900;letter-spacing:.08em}

/* Widget-relative Data Logger preview sizing. */
.logger-control-preview{
  --logger-scale:1;
  gap:calc(8px * var(--logger-scale))!important;
  padding:calc(10px * var(--logger-scale))!important;
  border-radius:calc(10px * var(--logger-scale))!important;
}
.logger-control-head{gap:calc(10px * var(--logger-scale))!important}
.logger-control-preview .logger-icon{
  width:calc(52px * var(--logger-scale))!important;
  height:calc(52px * var(--logger-scale))!important;
  border-radius:calc(10px * var(--logger-scale))!important;
}
.logger-control-preview .logger-icon svg{
  width:calc(34px * var(--logger-scale))!important;
  height:calc(34px * var(--logger-scale))!important;
}
.logger-control-preview .logger-copy strong{font-size:calc(12px * var(--logger-scale))!important}
.logger-control-preview .logger-copy span,
.logger-control-preview .logger-copy small{font-size:calc(10px * var(--logger-scale))!important}
.logger-control-preview .logger-meta b{font-size:calc(13px * var(--logger-scale))!important}
.logger-control-preview .logger-meta span{font-size:calc(10px * var(--logger-scale))!important}
.logger-control-mode,.logger-control-actions{gap:calc(8px * var(--logger-scale))!important}
.logger-control-mode button,
.logger-control-actions button,
.logger-control-stop{
  min-height:calc(42px * var(--logger-scale))!important;
  padding:calc(9px * var(--logger-scale)) calc(10px * var(--logger-scale))!important;
  border-radius:calc(8px * var(--logger-scale))!important;
  font-size:calc(11px * var(--logger-scale))!important;
}
.logger-control-actions button{min-height:calc(54px * var(--logger-scale))!important}
.logger-control-stop{
  min-height:calc(58px * var(--logger-scale))!important;
  font-size:calc(14px * var(--logger-scale))!important;
}
.logger-control-active-note{font-size:calc(10px * var(--logger-scale))!important}


/* Installed Data Logger parity. Studio intentionally uses the runtime class tree. */
.dashboard-widget .runtime-logger{
  width:100%;
  height:100%;
  border:1px solid #34404b!important;
  border-radius:10px;
  background:#080b0f;
  box-shadow:none!important;
  overflow:hidden;
}
.dashboard-widget .runtime-logger.active{
  border-color:#34404b!important;
  box-shadow:none!important;
}
.dashboard-widget .runtime-logger-control{
  --logger-scale:1;
  display:grid!important;
  grid-template-columns:1fr!important;
  grid-template-rows:auto auto 1fr auto;
  align-content:stretch;
  gap:calc(8px * var(--logger-scale))!important;
  padding:calc(10px * var(--logger-scale))!important;
  border-radius:calc(10px * var(--logger-scale))!important;
  min-width:0;
}
.dashboard-widget .runtime-logger-head{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:calc(10px * var(--logger-scale));
  min-width:0;
}
.dashboard-widget .runtime-logger-icon{
  width:calc(52px * var(--logger-scale))!important;
  height:calc(52px * var(--logger-scale))!important;
  display:grid;
  place-items:center;
  border:2px solid #747b86;
  border-radius:calc(10px * var(--logger-scale))!important;
  background:#05080b;
  color:#9aa3ac;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.035);
}
.dashboard-widget .runtime-logger-icon svg{
  width:calc(34px * var(--logger-scale))!important;
  height:calc(34px * var(--logger-scale))!important;
  fill:none;
  stroke:currentColor;
  stroke-width:2.3;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.dashboard-widget .runtime-logger-icon img{
  width:calc(44px * var(--logger-scale))!important;
  height:calc(44px * var(--logger-scale))!important;
  object-fit:contain;
  display:block;
}
.dashboard-widget .runtime-logger.active .runtime-logger-icon{
  color:#d9ffe3;
  border-color:#51d679;
  animation:pbsRuntimeLoggerPulse 1.2s ease-in-out infinite;
}
@keyframes pbsRuntimeLoggerPulse{
  0%,100%{transform:scale(1);box-shadow:0 0 0 2px rgba(81,214,121,.10),0 0 8px rgba(81,214,121,.28)}
  50%{transform:scale(1.06);box-shadow:0 0 0 5px rgba(81,214,121,.14),0 0 22px rgba(81,214,121,.72)}
}
.dashboard-widget .runtime-logger-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.dashboard-widget .runtime-logger-copy strong{
  color:#eef3f7!important;
  font-size:calc(12px * var(--logger-scale))!important;
  font-weight:900;
  letter-spacing:.1em;
}
.dashboard-widget .runtime-logger-copy span,
.dashboard-widget .runtime-logger-copy small{
  color:#9aa6b1!important;
  font-size:calc(10px * var(--logger-scale))!important;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.dashboard-widget .runtime-logger-time{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:2px;
  text-align:right;
}
.dashboard-widget .runtime-logger-time b{
  color:#e3e9ee;
  font-size:calc(14px * var(--logger-scale))!important;
  font-variant-numeric:tabular-nums;
}
.dashboard-widget .runtime-logger-time small{
  color:#8995a0;
  font-size:calc(9px * var(--logger-scale))!important;
}
.dashboard-widget .runtime-logger-mode,
.dashboard-widget .runtime-logger-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:calc(8px * var(--logger-scale))!important;
  min-width:0;
}
.dashboard-widget .runtime-logger-mode button,
.dashboard-widget .runtime-logger-actions button,
.dashboard-widget .runtime-logger-stop{
  min-width:0;
  min-height:calc(42px * var(--logger-scale))!important;
  padding:calc(9px * var(--logger-scale)) calc(10px * var(--logger-scale))!important;
  border:1px solid #53616d;
  border-radius:calc(8px * var(--logger-scale))!important;
  background:#12181e;
  color:#d7dfe5;
  font-size:calc(11px * var(--logger-scale))!important;
  font-weight:950;
  letter-spacing:.045em;
  line-height:1.1;
  opacity:1!important;
}
.dashboard-widget .runtime-logger-mode button.selected{
  border-color:#6c9cc2;
  background:#163149;
  color:#fff;
  box-shadow:inset 0 0 0 1px rgba(132,194,241,.16);
}
.dashboard-widget .runtime-logger-actions button{
  min-height:calc(54px * var(--logger-scale))!important;
  border-color:#3c8b57;
  background:#12301d;
  color:#dfffe7;
}
.dashboard-widget .runtime-logger-actions button.with-video{
  border-color:#3d75a8;
  background:#11283d;
  color:#e2f1ff;
}
.dashboard-widget .runtime-logger-stop{
  width:100%;
  min-height:calc(58px * var(--logger-scale))!important;
  border:2px solid #d85d5d!important;
  background:#4a1616!important;
  color:#fff!important;
  font-size:calc(14px * var(--logger-scale))!important;
}
.dashboard-widget .runtime-logger-active-note{
  text-align:center;
  color:#8ee4aa;
  font-size:calc(10px * var(--logger-scale))!important;
  font-weight:900;
  letter-spacing:.08em;
}


/* Studio Data Logger is visually live but non-interactive. This avoids browser
   disabled-button styling so the preview matches the installed APK exactly. */
.dashboard-widget .runtime-logger button[aria-disabled="true"]{
  pointer-events:none!important;
  cursor:default!important;
  opacity:1!important;
}
.dashboard-widget .runtime-logger-actions button.unavailable{
  border-color:#434b52!important;
  background:#161a1e!important;
  color:#707981!important;
}


/* Data Logger exact installed-layout parity. */
.dashboard-widget .runtime-logger-control{
  grid-template-rows:auto auto auto auto!important;
  gap:calc(7px * var(--logger-scale))!important;
  padding:calc(8px * var(--logger-scale))!important;
}
.dashboard-widget .runtime-logger-head{
  gap:calc(8px * var(--logger-scale))!important;
}
.dashboard-widget .runtime-logger-icon{
  width:calc(46px * var(--logger-scale))!important;
  height:calc(46px * var(--logger-scale))!important;
  border-radius:calc(8px * var(--logger-scale))!important;
}
.dashboard-widget .runtime-logger-icon svg{
  width:calc(29px * var(--logger-scale))!important;
  height:calc(29px * var(--logger-scale))!important;
}
.dashboard-widget .runtime-logger-mode,
.dashboard-widget .runtime-logger-actions{
  grid-template-columns:1fr!important;
  gap:calc(6px * var(--logger-scale))!important;
}
.dashboard-widget .runtime-logger-mode button,
.dashboard-widget .runtime-logger-actions button,
.dashboard-widget .runtime-logger-stop{
  min-height:calc(30px * var(--logger-scale))!important;
  padding:calc(6px * var(--logger-scale)) calc(9px * var(--logger-scale))!important;
  border-radius:calc(6px * var(--logger-scale))!important;
  font-size:calc(10px * var(--logger-scale))!important;
}
.dashboard-widget .runtime-logger-actions button{
  min-height:calc(38px * var(--logger-scale))!important;
}
.dashboard-widget .runtime-logger-stop{
  min-height:calc(42px * var(--logger-scale))!important;
  font-size:calc(11px * var(--logger-scale))!important;
}
.dashboard-widget .runtime-logger-active-note{
  font-size:calc(9px * var(--logger-scale))!important;
}


/* Finger-friendly Data Logger controls.
   Keep the four idle controls as true square touch targets:
   DAILY DRIVING / RACE / START DATA LOG / START DATA + VIDEO.
   --logger-scale is derived from the widget dimensions by the renderer so
   these controls grow and shrink with the widget. */
.runtime-logger-control{
  --logger-button-size:calc(68px * var(--logger-scale,1));
}
.runtime-logger-mode,
.runtime-logger-actions{
  grid-template-columns:repeat(2,var(--logger-button-size))!important;
  grid-template-rows:var(--logger-button-size)!important;
  justify-content:center!important;
  align-content:center!important;
  gap:calc(8px * var(--logger-scale,1))!important;
}
.runtime-logger-mode button,
.runtime-logger-actions button,
.runtime-logger-stop{
  width:var(--logger-button-size)!important;
  height:var(--logger-button-size)!important;
  min-width:var(--logger-button-size)!important;
  min-height:var(--logger-button-size)!important;
  padding:calc(7px * var(--logger-scale,1))!important;
  border-width:calc(2px * var(--logger-scale,1))!important;
  border-radius:calc(10px * var(--logger-scale,1))!important;
  font-size:calc(10px * var(--logger-scale,1))!important;
  line-height:1.12!important;
  letter-spacing:.035em!important;
  white-space:normal!important;
  overflow-wrap:anywhere;
  text-align:center;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.11),0 calc(2px * var(--logger-scale,1)) calc(7px * var(--logger-scale,1)) rgba(0,0,0,.34);
}
.runtime-logger-mode button:first-child{
  border-color:#59a9ff!important;
  background:linear-gradient(180deg,#246fb2,#17436f)!important;
  color:#f2f8ff!important;
}
.runtime-logger-mode button:nth-child(2){
  border-color:#ffad4d!important;
  background:linear-gradient(180deg,#9a5a16,#60340a)!important;
  color:#fff4dc!important;
}
.runtime-logger-actions button:first-child{
  border-color:#54db7c!important;
  background:linear-gradient(180deg,#249b4b,#126132)!important;
  color:#f2fff6!important;
}
.runtime-logger-actions button.with-video{
  border-color:#b28cff!important;
  background:linear-gradient(180deg,#7652a8,#49306f)!important;
  color:#faf5ff!important;
}
.runtime-logger-mode button.selected{
  box-shadow:inset 0 0 0 calc(2px * var(--logger-scale,1)) rgba(255,255,255,.52),0 0 calc(13px * var(--logger-scale,1)) rgba(89,169,255,.42)!important;
  filter:brightness(1.14);
}
.runtime-logger-mode button:nth-child(2).selected{
  box-shadow:inset 0 0 0 calc(2px * var(--logger-scale,1)) rgba(255,255,255,.52),0 0 calc(13px * var(--logger-scale,1)) rgba(255,173,77,.42)!important;
}
.runtime-logger-actions button:disabled,
.runtime-logger-actions button.unavailable{
  border-color:#434b52!important;
  background:#161a1e!important;
  color:#707981!important;
  box-shadow:none!important;
}
.runtime-logger-stop{
  justify-self:center!important;
  border-color:#ef6671!important;
  background:linear-gradient(180deg,#b73540,#6f1c24)!important;
  color:#fff4f5!important;
  font-size:calc(11px * var(--logger-scale,1))!important;
}
.runtime-logger-mode button:active,
.runtime-logger-actions button:active,
.runtime-logger-stop:active{
  transform:scale(.96);
  filter:brightness(1.12);
}

/* Data Logger 2x2 quadrant layout.
   The four idle controls share one grid and fill the entire area below the
   logger header. This intentionally overrides the older separate mode/action
   group sizing rules. */
.runtime-logger-control:not(.active){
  grid-template-columns:1fr!important;
  grid-template-rows:auto minmax(0,1fr)!important;
  align-content:stretch!important;
}
.runtime-logger-quad-grid{
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:repeat(2,minmax(0,1fr));
  gap:calc(8px * var(--logger-scale,1));
}
.runtime-logger-quad-grid button{
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  margin:0!important;
  padding:calc(8px * var(--logger-scale,1))!important;
  border:calc(2px * var(--logger-scale,1)) solid #5a6570!important;
  border-radius:calc(10px * var(--logger-scale,1))!important;
  font-size:calc(11px * var(--logger-scale,1))!important;
  line-height:1.08!important;
  font-weight:950!important;
  letter-spacing:.035em!important;
  white-space:normal!important;
  overflow-wrap:anywhere;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 calc(3px * var(--logger-scale,1)) calc(10px * var(--logger-scale,1)) rgba(0,0,0,.34);
}
.runtime-logger-quad-grid .logger-daily{
  border-color:#59a9ff!important;
  background:linear-gradient(180deg,#246fb2,#17436f)!important;
  color:var(--logger-daily-text-color,#f2f8ff)!important;
  font-size:var(--logger-daily-font-size,calc(11px * var(--logger-scale,1)))!important;
}
.runtime-logger-quad-grid .logger-race{
  border-color:#ffad4d!important;
  background:linear-gradient(180deg,#9a5a16,#60340a)!important;
  color:var(--logger-race-text-color,#fff4dc)!important;
  font-size:var(--logger-race-font-size,calc(11px * var(--logger-scale,1)))!important;
}
.runtime-logger-quad-grid .logger-start-data{
  border-color:#54db7c!important;
  background:linear-gradient(180deg,#249b4b,#126132)!important;
  color:var(--logger-start-data-text-color,#f2fff6)!important;
  font-size:var(--logger-start-data-font-size,calc(11px * var(--logger-scale,1)))!important;
}
.runtime-logger-quad-grid .logger-start-video{
  border-color:#b28cff!important;
  background:linear-gradient(180deg,#7652a8,#49306f)!important;
  color:var(--logger-start-video-text-color,#faf5ff)!important;
  font-size:var(--logger-start-video-font-size,calc(11px * var(--logger-scale,1)))!important;
}
.runtime-logger-quad-grid .selected{
  box-shadow:inset 0 0 0 calc(2px * var(--logger-scale,1)) rgba(255,255,255,.55),0 0 calc(13px * var(--logger-scale,1)) rgba(255,255,255,.18)!important;
  filter:brightness(1.14);
}
.runtime-logger-quad-grid .logger-start-video.unavailable,
.runtime-logger-quad-grid button:disabled{
  border-color:#434b52!important;
  background:#161a1e!important;
  color:#707981!important;
  box-shadow:none!important;
}
.runtime-logger-quad-grid button:active{
  transform:scale(.985);
  filter:brightness(1.12);
}
.runtime-logger-control.active{
  grid-template-columns:1fr!important;
  grid-template-rows:auto minmax(0,1fr) auto!important;
}
.runtime-logger-control.active .runtime-logger-stop{
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
}

/* Data Logger step separation + unmistakable selected mode. */
.runtime-logger-quad-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  grid-template-rows:minmax(0,1fr) auto minmax(0,1fr)!important;
  column-gap:calc(8px * var(--logger-scale,1))!important;
  row-gap:calc(11px * var(--logger-scale,1))!important;
}
.runtime-logger-step-divider{
  grid-column:1 / -1;
  min-width:0;
  display:grid;
  grid-template-columns:auto minmax(18px,1fr) auto;
  align-items:center;
  gap:calc(8px * var(--logger-scale,1));
  padding:calc(2px * var(--logger-scale,1)) calc(3px * var(--logger-scale,1));
  color:#9ba8b4;
  font-size:calc(8.5px * var(--logger-scale,1));
  font-weight:950;
  letter-spacing:.075em;
  line-height:1;
  white-space:nowrap;
}
.runtime-logger-step-divider i{
  display:block;
  height:max(1px,calc(1px * var(--logger-scale,1)));
  background:linear-gradient(90deg,rgba(126,141,155,.22),rgba(180,193,205,.8),rgba(126,141,155,.22));
  box-shadow:0 1px 0 rgba(255,255,255,.04);
}
.runtime-logger-quad-grid .logger-daily,
.runtime-logger-quad-grid .logger-race{
  position:relative;
}
.runtime-logger-quad-grid .logger-daily.selected,
.runtime-logger-quad-grid .logger-race.selected{
  border-color:#ff3b45!important;
  border-width:calc(4px * var(--logger-scale,1))!important;
  box-shadow:
    inset 0 0 0 calc(1px * var(--logger-scale,1)) rgba(255,255,255,.28),
    0 0 calc(5px * var(--logger-scale,1)) rgba(255,59,69,.92),
    0 0 calc(18px * var(--logger-scale,1)) rgba(255,59,69,.48)!important;
  filter:brightness(1.16) saturate(1.08);
}
.runtime-logger-quad-grid .logger-daily.selected::after,
.runtime-logger-quad-grid .logger-race.selected::after{
  content:"✓";
  position:absolute;
  top:calc(6px * var(--logger-scale,1));
  right:calc(6px * var(--logger-scale,1));
  width:calc(19px * var(--logger-scale,1));
  height:calc(19px * var(--logger-scale,1));
  display:grid;
  place-items:center;
  border:calc(2px * var(--logger-scale,1)) solid #ffd0d3;
  border-radius:50%;
  background:#e71927;
  color:#fff;
  font-size:calc(12px * var(--logger-scale,1));
  font-weight:1000;
  line-height:1;
  box-shadow:0 0 calc(8px * var(--logger-scale,1)) rgba(255,43,57,.9);
  pointer-events:none;
}


/* Data Logger saved-file actions.
   Give the file-action row a true fraction of the remaining widget height.
   This keeps OPEN LAST LOG / EMAIL LOG at roughly half the visual height
   of each of the four primary logger buttons at every widget size. */
.runtime-logger-control:not(.active){
  grid-template-rows:auto minmax(0,4.5fr) minmax(0,1fr)!important;
}
.runtime-logger-file-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:calc(8px * var(--logger-scale,1));
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
}
.runtime-logger-file-actions button{
  width:100%;
  height:100%!important;
  min-width:0;
  min-height:0!important;
  padding:calc(6px * var(--logger-scale,1)) calc(10px * var(--logger-scale,1));
  border:1px solid #51606c;
  border-radius:calc(7px * var(--logger-scale,1));
  background:#151d24;
  color:#dce7ef;
  font-size:calc(9.5px * var(--logger-scale,1));
  font-weight:950;
  letter-spacing:.055em;
}
.runtime-logger-file-actions button:first-child{border-color:#58a8df;background:#10293a}
.runtime-logger-file-actions button:last-child{border-color:#c99255;background:#332415}
.runtime-logger-file-actions button:disabled{border-color:#343e46;background:#12171b;color:#606c75;box-shadow:none}

/* Dually Studio Macan profile for all vehicle attitude graphics. */
.macan-vehicle-frame{
  width:94%;
  height:86%;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  transform-origin:50% 72%;
  pointer-events:none;
}
.macan-vehicle-image{
  display:block;
  width:100%;
  height:auto;
  max-height:100%;
  object-fit:contain;
  object-position:center bottom;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.95)) drop-shadow(0 0 4px rgba(210,220,228,.18));
  user-select:none;
  -webkit-user-drag:none;
}
.grade-road{
  position:relative!important;
  transform-origin:center bottom!important;
}
.grade-road .grade-vehicle{
  position:absolute;
  left:14%;
  bottom:4px;
  width:72%;
  height:auto;
  max-height:58px;
  object-fit:contain;
  object-position:center bottom;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.95)) drop-shadow(0 0 3px rgba(210,220,228,.16));
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
}
/* Retire the old geometric car artwork wherever legacy dashboards still carry
   generic vehicle style values. The renderer maps them to the Macan profile. */
.generic-vehicle,
.grade-road > i{
  display:none!important;
}

/* Exact Dually Off-Road Inclinometer Macan artwork + duplicated Pitboard widget. */
.macan-standard-inclinometer .inclinometer-panes,
.offroad-inclinometer-panes{
  min-height:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(8px,1.2%,14px);
}
.macan-incline-instrument{
  min-width:0;
  min-height:0;
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  padding:clamp(8px,2.2%,18px);
  border:1px solid #34404b;
  border-radius:12px;
  background:#0b1116;
}
.macan-incline-copy{
  position:relative;
  z-index:3;
  min-width:0;
}
.macan-incline-copy>span{
  display:block;
  color:#f5f7f8;
  font-size:clamp(12px,2.2vw,25px);
  font-weight:950;
  letter-spacing:.06em;
}
.macan-incline-copy>strong{
  display:block;
  margin-top:2px;
  color:#fff;
  font-size:clamp(30px,5vw,58px);
  font-weight:950;
  line-height:.95;
  font-variant-numeric:tabular-nums;
}
.macan-incline-peaks{
  margin-top:8px;
  color:#ffad19;
  font-size:clamp(9px,1.55vw,17px);
  font-weight:950;
  letter-spacing:.02em;
  white-space:nowrap;
}
.macan-incline-graphic{
  min-height:0;
  position:relative;
  overflow:hidden;
}
.macan-incline-scale{
  position:absolute;
  left:5%;
  top:5%;
  bottom:5%;
  z-index:3;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  width:55px;
  pointer-events:none;
}
.macan-incline-tick{
  display:grid;
  grid-template-columns:28px 22px;
  align-items:center;
  gap:3px;
  min-height:1px;
  color:#d2dae1;
  font-size:clamp(8px,1.1vw,13px);
  font-variant-numeric:tabular-nums;
}
.macan-incline-tick em{
  font-style:normal;
  text-align:right;
}
.macan-incline-tick i{
  display:block;
  height:3px;
  background:#35d25b;
}
.macan-incline-tick.warning i{background:#f3c53f}
.macan-incline-tick.danger i{background:#e63746}
.macan-incline-tick.danger{color:#ff665f}
.macan-incline-moving{
  position:absolute;
  left:20%;
  right:1%;
  top:7%;
  bottom:1%;
  z-index:2;
  transform:rotate(var(--inclination-angle,0deg));
  transform-origin:58% 67%;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  pointer-events:none;
}
.macan-incline-moving img{
  display:block;
  width:50%;
  max-width:260px;
  max-height:82%;
  object-fit:contain;
  object-position:center;
  user-select:none;
  -webkit-user-drag:none;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.8));
}
.macan-incline-reference{
  position:absolute;
  left:1%;
  right:1%;
  top:67%;
  height:3px;
  background:#42ddf3;
  box-shadow:0 0 6px rgba(66,221,243,.25);
}
.macan-incline-reference i{
  position:absolute;
  left:0;
  top:50%;
  width:0;
  height:0;
  transform:translateY(-50%);
  border-top:7px solid transparent;
  border-bottom:7px solid transparent;
  border-right:14px solid #42ddf3;
}
.offroad-inclinometer-widget{
  width:100%;
  height:100%;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  gap:10px;
  padding:10px;
  overflow:hidden;
  border-radius:inherit;
  background:#05080b;
}
.offroad-inclinometer-head{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.offroad-inclinometer-head strong{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#fff;
  font-size:clamp(14px,2.2vw,30px);
  font-weight:950;
  letter-spacing:.035em;
}
.offroad-inclinometer-head span{
  flex:0 0 auto;
  color:#51e674;
  font-size:clamp(9px,1.15vw,13px);
  font-weight:900;
  letter-spacing:.1em;
}
.offroad-inclinometer-foot{
  min-height:38px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:0 6px;
}
.offroad-inclinometer-foot strong{
  color:#47ff76;
  font-size:clamp(14px,2vw,23px);
  font-weight:950;
  font-variant-numeric:tabular-nums;
}
.offroad-inclinometer-foot button{
  min-width:150px;
  min-height:34px;
  padding:7px 16px;
  border:1px solid #9199a3;
  border-radius:9px;
  background:#3a3f46;
  color:#fff;
  font-size:clamp(10px,1.35vw,14px);
  font-weight:950;
}
@media(max-width:520px){
  .macan-incline-copy>strong{font-size:28px}
  .macan-incline-peaks{font-size:8px;white-space:normal}
  .macan-incline-scale{width:43px}
  .macan-incline-tick{grid-template-columns:22px 17px;font-size:8px}
}

.dashboard-widget:has(.pbs-led-tach) .widget-frame{overflow:visible!important}
.pbs-led-tach,.pbs-led-tach svg{width:100%;height:100%;display:block;overflow:visible!important;background:transparent!important}
.pbs-led-tach{pointer-events:none;position:relative}
.designer{position:relative}
.canvas-viewport{scrollbar-width:auto;scrollbar-color:#f08a35 #17202a}
.canvas-viewport::-webkit-scrollbar{width:24px;height:24px}
.canvas-viewport::-webkit-scrollbar-track{background:#111820;border:1px solid #3d4d5b}
.canvas-viewport::-webkit-scrollbar-thumb{min-width:72px;min-height:72px;border:4px solid #111820;border-radius:999px;background:#f08a35}
.pbs-canvas-grab-scrollbar{position:absolute;z-index:180;display:block;border:2px solid #6d7d8a;border-radius:14px;background:rgba(11,16,22,.96);box-shadow:0 4px 18px rgba(0,0,0,.55);touch-action:none;user-select:none;-webkit-user-select:none}
.pbs-canvas-grab-scrollbar[hidden]{display:none!important}
.pbs-canvas-grab-scrollbar.horizontal{left:8px;right:46px;bottom:8px;height:36px;padding:0 36px}
.pbs-canvas-grab-scrollbar.vertical{top:56px;right:8px;bottom:46px;width:36px;padding:36px 0}
.pbs-canvas-scroll-thumb{position:absolute;border:2px solid #ffd2a8;border-radius:999px;background:linear-gradient(180deg,#ff9c45,#d86612);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 0 10px rgba(255,138,36,.35);touch-action:none}
.pbs-canvas-grab-scrollbar.horizontal .pbs-canvas-scroll-thumb{left:36px;top:5px;height:22px}
.pbs-canvas-grab-scrollbar.vertical .pbs-canvas-scroll-thumb{top:36px;left:5px;width:22px}
.pbs-scroll-arrow{position:absolute;display:grid;place-items:center;color:#fff;font-size:20px;font-weight:950;line-height:1;touch-action:none}
.pbs-canvas-grab-scrollbar.horizontal .pbs-scroll-arrow{top:0;width:34px;height:32px}
.pbs-canvas-grab-scrollbar.horizontal .pbs-scroll-arrow.start{left:0}.pbs-canvas-grab-scrollbar.horizontal .pbs-scroll-arrow.end{right:0}
.pbs-canvas-grab-scrollbar.vertical .pbs-scroll-arrow{left:0;width:32px;height:34px}
.pbs-canvas-grab-scrollbar.vertical .pbs-scroll-arrow.start{top:0}.pbs-canvas-grab-scrollbar.vertical .pbs-scroll-arrow.end{bottom:0}
html.pbs-tablet-ui .pbs-canvas-grab-scrollbar.horizontal{left:6px;right:52px;bottom:6px;height:42px;padding-left:42px;padding-right:42px}
html.pbs-tablet-ui .pbs-canvas-grab-scrollbar.vertical{top:54px;right:6px;bottom:52px;width:42px;padding-top:42px;padding-bottom:42px}
html.pbs-tablet-ui .pbs-canvas-grab-scrollbar.horizontal .pbs-canvas-scroll-thumb{left:42px;top:6px;height:26px}
html.pbs-tablet-ui .pbs-canvas-grab-scrollbar.vertical .pbs-canvas-scroll-thumb{top:42px;left:6px;width:26px}
html.pbs-tablet-ui .pbs-scroll-arrow{font-size:24px}

/* Exact Dually Studio LED Tach CSS. Keep this block last. */
.dashboard-widget:has(.led-tach-widget) .widget-frame{
  overflow:visible!important;
}
.led-tach-widget,
.led-tach-widget svg{
  width:100%;
  height:100%;
  display:block;
  overflow:visible;
  background:transparent!important;
}
.led-tach-widget{
  pointer-events:none;
}

/* Canvas grab bars: 50% thinner visually, same travel and long finger-grab thumb. */
.pbs-canvas-grab-scrollbar.horizontal{
  height:18px!important;
  border-radius:9px!important;
}
.pbs-canvas-grab-scrollbar.vertical{
  width:18px!important;
  border-radius:9px!important;
}
.pbs-canvas-grab-scrollbar.horizontal .pbs-canvas-scroll-thumb{
  top:2px!important;
  height:10px!important;
}
.pbs-canvas-grab-scrollbar.vertical .pbs-canvas-scroll-thumb{
  left:2px!important;
  width:10px!important;
}
.pbs-canvas-grab-scrollbar.horizontal .pbs-scroll-arrow{
  height:14px!important;
  font-size:12px!important;
}
.pbs-canvas-grab-scrollbar.vertical .pbs-scroll-arrow{
  width:14px!important;
  font-size:12px!important;
}
html.pbs-tablet-ui .pbs-canvas-grab-scrollbar.horizontal{
  height:21px!important;
}
html.pbs-tablet-ui .pbs-canvas-grab-scrollbar.vertical{
  width:21px!important;
}
html.pbs-tablet-ui .pbs-canvas-grab-scrollbar.horizontal .pbs-canvas-scroll-thumb{
  top:3px!important;
  height:11px!important;
}
html.pbs-tablet-ui .pbs-canvas-grab-scrollbar.vertical .pbs-canvas-scroll-thumb{
  left:3px!important;
  width:11px!important;
}
html.pbs-tablet-ui .pbs-scroll-arrow{
  font-size:13px!important;
}


/* Data Logger transparent background must remove its own inner panel, not only the widget shell. */
.dashboard-widget .runtime-logger.runtime-logger-control.logger-transparent{
  background:transparent!important;
  border-color:transparent!important;
  box-shadow:none!important;
}


/* PITBOARD_SENSOR_DJI_PARITY_20261021 */
/* Transparent attitude keeps the coloured horizon to the bezel edge without a black annulus. */
.dashboard-widget.widget-transparent-background .attitude-rim{
  fill:none!important;
}
.dashboard-widget.widget-transparent-background .attitude-widget svg{
  background:transparent!important;
}

/* Accelerometer calibration typography follows inspector controls. */
.accelerometer-calibration-copy strong{
  font-size:var(--pbs-label-font-size,18px)!important;
  color:var(--pbs-label-color,#fff)!important;
}
.accelerometer-calibration-copy span{
  font-size:var(--pbs-secondary-font-size,14px)!important;
  color:var(--pbs-secondary-color,#e2a43a)!important;
}
.accelerometer-calibration-copy small{
  font-size:var(--pbs-footer-font-size,12px)!important;
  color:var(--pbs-footer-color,#a9b4be)!important;
}
.accelerometer-calibration-widget button{
  font-size:var(--pbs-value-font-size,14px)!important;
}