#tab-settings.active {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

#tab-settings > .section-heading,
#tab-settings > .setting-block,
#tab-settings > .setting-block.calibration,
#tab-settings > .setting-block.acceleration {
  grid-column: 1 / -1;
}

#tab-settings > .setting-block:not(.calibration):not(.acceleration) {
  margin: 0;
  padding: 12px;
  border: 0;
  border-radius: 12px;
  background: #e3e4e6;
}

#tab-settings > .setting-block h3,
#tab-settings > .range-setting b,
#tab-settings > .toggle-setting b {
  color: #343d49;
  font-size: 12px;
  font-weight: 600;
}

#tab-settings > .setting-block p,
#tab-settings > .range-setting small,
#tab-settings > .toggle-setting small {
  color: #68717d;
  font-size: 10px;
  line-height: 1.5;
}

#tab-settings .drive-style {
  gap: 6px;
  margin-top: 10px;
}

#tab-settings .drive-style button,
#tab-settings .drive-style button.selected {
  min-height: 48px;
  padding: 8px 6px;
  border: 0;
  border-radius: 9px;
  background: #fff;
  color: #404a57;
  text-align: center;
}

#tab-settings .drive-style button.selected {
  background: #4c67d8;
  color: #fff;
}

#tab-settings .drive-style button small {
  color: inherit;
  opacity: .82;
  font-size: 9px;
  white-space: normal;
}

#tab-settings > .range-setting,
#tab-settings > .toggle-setting {
  min-width: 0;
  margin: 0;
  padding: 12px;
  border: 0;
  border-radius: 12px;
  background: #e3e4e6;
}

#tab-settings > .range-setting > span {
  min-height: 24px;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 2px 6px;
}

#tab-settings > .range-setting small {
  flex: 1 1 auto;
}

#tab-settings > .range-setting output {
  color: #454e5a;
  font-size: 11px;
}

#tab-settings input[type="range"] {
  height: 5px;
  margin: 11px 0 2px;
  accent-color: #4c67d8;
}

#tab-settings > .toggle-setting {
  gap: 12px;
  min-height: 68px;
  align-items: center;
}

#tab-settings > .toggle-setting > span {
  min-width: 0;
}

#tab-settings > .toggle-setting i {
  width: 20px;
  height: 20px;
  border: 1px solid #aeb5be;
  border-radius: 3px;
  background: #fff;
}

#tab-settings > .toggle-setting i:after {
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
  border-radius: 2px;
  background: transparent;
  content: "";
}

#tab-settings > .toggle-setting input:checked + i {
  border-color: #4c67d8;
  background: #4c67d8;
}

#tab-settings > .toggle-setting input:checked + i:after {
  left: 0;
  background: transparent;
  content: "✓";
  color: #fff;
  font-size: 14px;
  line-height: 18px;
  text-align: center;
}

#tab-settings > .setting-block.calibration {
  display: flex;
  min-height: 68px;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 10px 12px;
  border: 0;
  border-radius: 12px;
  background: #e3e4e6;
}

#tab-settings > .setting-block.calibration h3,
#tab-settings > .setting-block.calibration p {
  margin: 0;
}

#tab-settings > .setting-block.calibration p {
  flex: 1 1 auto;
}

#tab-settings .calibration > div {
  gap: 8px;
}

#tab-settings .calibration button {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #343d49;
  font-size: 16px;
}

#tab-settings .calibration b {
  color: #343d49;
  font-size: 12px;
}

#tab-settings .calibration .reset-btn {
  width: auto;
  min-width: 42px;
  height: 30px;
  margin-left: 0;
  border-radius: 6px;
  background: transparent;
  font-size: 10px;
}

#tab-settings > .setting-block.acceleration {
  margin: 0;
  padding: 12px;
  border: 0;
  border-radius: 12px;
  background: #e3e4e6;
}

#tab-settings .accel-options {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
}

#tab-settings .accel-options button,
#tab-settings .accel-options button.selected {
  min-width: 0;
  padding: 8px 4px;
  border: 0;
  border-radius: 7px;
  background: #fff;
  color: #3f4955;
  font-size: 10px;
  text-align: center;
}

#tab-settings .accel-options button.selected {
  background: #4c67d8;
  color: #fff;
}

#tab-settings .accel-options small {
  color: inherit;
  font-size: 8px;
  white-space: normal;
}

#tab-settings .best-time,
#tab-settings .best-time b {
  color: #59636f;
}

@media (min-width: 761px) {
  .drive-stage {
    position: sticky;
    top: 12px;
  }

  .panel-scroll {
    max-height: none;
    overflow: visible;
    flex: none;
  }
}

@media (max-width: 760px) {
  #tab-settings.active {
    grid-template-columns: minmax(0, 1fr);
  }
}

#tab-gauge .gauge-current {
  display: none;
}

#tab-gauge .section-heading {
  align-items: center;
  margin-bottom: 14px;
}

#tab-gauge .item-count {
  color: #727a86;
  font: 11px -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
}

#tab-gauge .gauge-grid {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 2px 2px 10px;
  scroll-snap-type: x mandatory;
  scrollbar-color: #c6cbd3 transparent;
}

#tab-gauge .gauge-card {
  display: flex;
  flex: 0 0 min(17rem, 78%);
  height: auto;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 8px;
  border: 2px solid transparent;
  border-radius: 16px;
  background: #e2e3e5;
  color: #56606c;
  scroll-snap-align: start;
}

#tab-gauge .gauge-card.selected {
  border-color: #4c67d8;
  background: #e4e9ff;
  color: #344d9d;
}

#tab-gauge .gauge-thumb {
  position: relative;
  display: grid;
  width: 100%;
  height: auto;
  aspect-ratio: 2.25;
  flex: none;
  place-items: center;
  overflow: hidden;
  border-radius: 10px;
  background: radial-gradient(ellipse at center, #315b82, #142a40 72%);
  color: #f5f9ff;
  font: 32px ui-monospace, SFMono-Regular, Menlo, monospace;
}

#tab-gauge .gauge-thumb:before {
  position: absolute;
  inset: 12px 18px;
  border: 1px solid #8bb9e866;
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

#tab-gauge .gauge-thumb:after {
  position: absolute;
  right: 8px;
  bottom: 7px;
  left: 8px;
  height: 2px;
  background: #80c7ff;
  content: "";
  opacity: .75;
}

#tab-gauge .gauge-thumb-0 {
  background: #10243a;
  font-size: 38px;
}

#tab-gauge .gauge-thumb-0:before {
  inset: auto 24% 18px;
  border: 0;
  border-radius: 0;
  border-top: 1px solid #8bb9e866;
}

#tab-gauge .gauge-thumb-1 {
  background: linear-gradient(145deg, #15283c, #07111d);
}

#tab-gauge .gauge-thumb-1:before {
  inset: 14px 22%;
  border: 5px solid #2c485f;
  border-bottom-color: #45b9ed;
}

#tab-gauge .gauge-thumb-1:after {
  height: 22px;
  background: linear-gradient(90deg, transparent, #5aa7d4, transparent);
  opacity: .3;
}

#tab-gauge .gauge-thumb-2,
#tab-gauge .gauge-thumb-4,
#tab-gauge .gauge-thumb-8,
#tab-gauge .gauge-thumb-9,
#tab-gauge .gauge-thumb-11 {
  background: radial-gradient(circle at center, #244360 0 30%, #0e1b29 31% 53%, #63849f 54% 57%, #0c1722 58%);
}

#tab-gauge .gauge-thumb-3,
#tab-gauge .gauge-thumb-6 {
  background: radial-gradient(circle at center, #501b22 0 31%, #180e13 32% 54%, #d74b57 55% 58%, #110e12 59%);
}

#tab-gauge .gauge-thumb-5,
#tab-gauge .gauge-thumb-7,
#tab-gauge .gauge-thumb-10 {
  background: linear-gradient(135deg, #122a3b, #07131f 55%, #1c3e56);
}

#tab-gauge .gauge-thumb-5:before,
#tab-gauge .gauge-thumb-7:before,
#tab-gauge .gauge-thumb-10:before {
  inset: 18px 12px;
  border: 1px solid #69b7da88;
  border-radius: 3px;
}

#tab-gauge .gauge-thumb-3:after,
#tab-gauge .gauge-thumb-6:after {
  background: #f26c70;
}

#tab-gauge .gauge-card > span:nth-child(2) {
  display: flex;
  align-items: baseline;
  gap: 5px;
  padding: 0 4px 2px;
}

#tab-gauge .gauge-card b {
  color: inherit;
  font-size: 12px;
}

#tab-gauge .gauge-card small {
  color: #717b87;
  font-size: 10px;
}

#tab-gauge .gauge-card .check {
  top: 13px;
  right: 13px;
  color: #fff;
  text-shadow: 0 1px 3px #0008;
}

/* Match the distinct instrument families in the reference gallery. */
.gauge-wrap[data-gauge-index="0"],
.gauge-wrap[data-gauge-index="1"],
.gauge-wrap[data-gauge-index="5"],
.gauge-wrap[data-gauge-index="7"],
.gauge-wrap[data-gauge-index="10"] {
  top: 34%;
  width: min(82%, 420px);
  aspect-ratio: 2.25;
  border: 10px solid #d4d8df;
  border-radius: 16px;
  background: linear-gradient(145deg, #112940, #071522);
  box-shadow: 0 4px 14px #16324e24, inset 0 0 0 2px #fff;
}

.gauge-wrap[data-gauge-index="0"] .gauge-shadow,
.gauge-wrap[data-gauge-index="0"] .gauge-track,
.gauge-wrap[data-gauge-index="0"] .gauge-progress,
.gauge-wrap[data-gauge-index="0"] .dial,
.gauge-wrap[data-gauge-index="0"] #ticks,
.gauge-wrap[data-gauge-index="0"] #needle,
.gauge-wrap[data-gauge-index="0"] .gear-plate,
.gauge-wrap[data-gauge-index="0"] .gear-text,
.gauge-wrap[data-gauge-index="0"] #shiftLights,
.gauge-wrap[data-gauge-index="0"] .gauge-rpm-label {
  display: none;
}

.gauge-wrap[data-gauge-index="0"] .gauge-speed {
  fill: #fff;
  font-size: 92px;
}

.gauge-wrap[data-gauge-index="0"] .gauge-unit {
  fill: #c4d6e8;
}

.gauge-wrap[data-gauge-index="1"]:before {
  position: absolute;
  inset: 9px 19%;
  border: 10px solid #354d61;
  border-bottom-color: #1688e8;
  border-radius: 50%;
  content: "";
  opacity: .7;
}

.gauge-wrap[data-gauge-index="1"] .gauge-shadow,
.gauge-wrap[data-gauge-index="1"] .gauge-track,
.gauge-wrap[data-gauge-index="1"] .gauge-progress,
.gauge-wrap[data-gauge-index="1"] .dial,
.gauge-wrap[data-gauge-index="1"] #ticks,
.gauge-wrap[data-gauge-index="1"] #needle,
.gauge-wrap[data-gauge-index="1"] .gear-plate,
.gauge-wrap[data-gauge-index="1"] #shiftLights,
.gauge-wrap[data-gauge-index="1"] .gauge-rpm-label {
  display: none;
}

.gauge-wrap[data-gauge-index="1"] .gauge-speed {
  fill: #f8fbff;
  font-size: 76px;
}

.gauge-wrap[data-gauge-index="1"] .gauge-unit,
.gauge-wrap[data-gauge-index="1"] .gear-text {
  fill: #a8c4dc;
}

.gauge-wrap[data-gauge-index="3"]:before,
.gauge-wrap[data-gauge-index="7"]:before {
  position: absolute;
  top: 17%;
  left: 2%;
  width: 50%;
  aspect-ratio: 1;
  border: 8px solid #c8d1da;
  border-radius: 50%;
  background: radial-gradient(circle, #eaf4ff 0 36%, #152c42 37% 62%, #8da2b5 63% 66%, #112238 67%);
  content: "";
  opacity: .88;
}

.gauge-wrap[data-gauge-index="3"]:after,
.gauge-wrap[data-gauge-index="7"]:after {
  position: absolute;
  top: 17%;
  right: 2%;
  width: 50%;
  aspect-ratio: 1;
  border: 8px solid #c8d1da;
  border-radius: 50%;
  background: radial-gradient(circle, #eaf4ff 0 36%, #152c42 37% 62%, #8da2b5 63% 66%, #112238 67%);
  content: "";
  opacity: .88;
}

.gauge-wrap[data-gauge-index="3"] .gauge-shadow,
.gauge-wrap[data-gauge-index="3"] .gauge-track,
.gauge-wrap[data-gauge-index="3"] .gauge-progress,
.gauge-wrap[data-gauge-index="3"] .dial,
.gauge-wrap[data-gauge-index="3"] #ticks,
.gauge-wrap[data-gauge-index="3"] #needle,
.gauge-wrap[data-gauge-index="3"] .gear-plate,
.gauge-wrap[data-gauge-index="3"] .gauge-rpm-label,
.gauge-wrap[data-gauge-index="7"] .gauge-shadow,
.gauge-wrap[data-gauge-index="7"] .gauge-track,
.gauge-wrap[data-gauge-index="7"] .gauge-progress,
.gauge-wrap[data-gauge-index="7"] .dial,
.gauge-wrap[data-gauge-index="7"] #ticks,
.gauge-wrap[data-gauge-index="7"] #needle,
.gauge-wrap[data-gauge-index="7"] .gear-plate,
.gauge-wrap[data-gauge-index="7"] .gauge-rpm-label {
  display: none;
}

.gauge-wrap[data-gauge-index="3"] .gauge-speed,
.gauge-wrap[data-gauge-index="7"] .gauge-speed {
  fill: #183149;
  font-size: 54px;
}

.gauge-wrap[data-gauge-index="3"] .gauge-unit,
.gauge-wrap[data-gauge-index="7"] .gauge-unit {
  fill: #d9e8f4;
}

.gauge-wrap[data-gauge-index="5"],
.gauge-wrap[data-gauge-index="10"] {
  border-color: #253a4d;
  border-radius: 18px;
  background: linear-gradient(135deg, #071522, #163750 50%, #091827);
}

.gauge-wrap[data-gauge-index="5"] .gauge-shadow,
.gauge-wrap[data-gauge-index="5"] .gauge-track,
.gauge-wrap[data-gauge-index="5"] .gauge-progress,
.gauge-wrap[data-gauge-index="5"] .dial,
.gauge-wrap[data-gauge-index="5"] #ticks,
.gauge-wrap[data-gauge-index="5"] #needle,
.gauge-wrap[data-gauge-index="5"] .gear-plate,
.gauge-wrap[data-gauge-index="5"] #shiftLights,
.gauge-wrap[data-gauge-index="5"] .gauge-rpm-label,
.gauge-wrap[data-gauge-index="10"] .gauge-shadow,
.gauge-wrap[data-gauge-index="10"] .gauge-track,
.gauge-wrap[data-gauge-index="10"] .gauge-progress,
.gauge-wrap[data-gauge-index="10"] .dial,
.gauge-wrap[data-gauge-index="10"] #ticks,
.gauge-wrap[data-gauge-index="10"] #needle,
.gauge-wrap[data-gauge-index="10"] .gear-plate,
.gauge-wrap[data-gauge-index="10"] #shiftLights,
.gauge-wrap[data-gauge-index="10"] .gauge-rpm-label {
  display: none;
}

.gauge-wrap[data-gauge-index="5"] .gauge-speed,
.gauge-wrap[data-gauge-index="10"] .gauge-speed {
  fill: #fff;
  font-size: 76px;
}

.gauge-wrap[data-gauge-index="5"] .gauge-unit,
.gauge-wrap[data-gauge-index="10"] .gauge-unit {
  fill: #9bc8e8;
}

.gauge-wrap[data-gauge-index="5"]:before,
.gauge-wrap[data-gauge-index="10"]:before {
  position: absolute;
  inset: 14px;
  border: 1px solid #68acd477;
  border-radius: 6px;
  content: "";
}

.gauge-wrap[data-gauge-index="6"] .dial-center,
.gauge-wrap[data-gauge-index="8"] .dial-center {
  fill: #e9f7ff !important;
}

.gauge-wrap[data-gauge-index="9"] .gauge-progress,
.gauge-wrap[data-gauge-index="11"] .gauge-progress {
  stroke-width: 18;
}

@media (max-width: 760px) {
  .gauge-wrap[data-gauge-index="0"],
  .gauge-wrap[data-gauge-index="1"],
  .gauge-wrap[data-gauge-index="5"],
  .gauge-wrap[data-gauge-index="7"],
  .gauge-wrap[data-gauge-index="10"] {
    top: 34%;
    width: 86%;
  }
}

/* Each gallery option has its own cockpit layout and matching live display. */
#tab-gauge .gauge-thumb {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3px;
  background: #050607;
  color: #f7f8fa;
  font: 400 26px ui-monospace, SFMono-Regular, Menlo, monospace;
}

#tab-gauge .gauge-thumb:before,
#tab-gauge .gauge-thumb:after { display: none; }
#tab-gauge .gauge-thumb > b { position: relative; z-index: 1; font: inherit; }
#tab-gauge .gauge-thumb > small { color: #87909a; font: 5px ui-monospace, monospace; }
#tab-gauge .gauge-thumb > i { position: absolute; }
.gauge-thumb-0 { background: #000!important; }
.gauge-thumb-0 > i { bottom: 18%; left: 25%; right: 25%; height: 2px; background: #25272a; }
.gauge-thumb-1 { background: radial-gradient(ellipse, #22252a 0, #090a0c 68%)!important; }
.gauge-thumb-1 > i.mini-wheel { inset: 18% 14%; border: 8px solid #16181b; border-radius: 20px; box-shadow: inset 0 0 0 1px #383a3e; }
.gauge-thumb-1 > b { font-size: 24px!important; }
.gauge-thumb-2,
.gauge-thumb-4,
.gauge-thumb-6,
.gauge-thumb-9 { background: #030405!important; }
.gauge-thumb-2 > i.mini-dial,
.gauge-thumb-4 > i.mini-round,
.gauge-thumb-6 > i.mini-dial,
.gauge-thumb-9 > i.mini-round { width: 36%; height: 82%; border: 4px solid #111; border-radius: 50%; background: radial-gradient(circle,#171a1d 0 40%,#e4e6e5 42% 73%,#53a173 74% 77%,#121416 79%); box-shadow: 0 0 0 1px #a5aaad; }
.gauge-thumb-4 > i.mini-round,.gauge-thumb-9 > i.mini-round { width:31%; height:72%; }
.gauge-thumb-2 > b,
.gauge-thumb-4 > b,
.gauge-thumb-6 > b,
.gauge-thumb-9 > b { font-size: 11px!important; position: absolute!important; }
.gauge-thumb-3 > i.mini-dual,
.gauge-thumb-7 > i.mini-dual { left: 8%; right: 8%; top: 10%; bottom: 10%; background: radial-gradient(circle at 25% 50%,#16080a 0 17%,#aeb1b1 18% 20%,#210a0c 21% 22%,transparent 23%),radial-gradient(circle at 75% 50%,#16080a 0 17%,#aeb1b1 18% 20%,#210a0c 21% 22%,transparent 23%); }
.gauge-thumb-3 { background:#050506!important; }
.gauge-thumb-7 { background:#070a0c!important; }
.gauge-thumb-3 > b,.gauge-thumb-7 > b { position:absolute!important; font-size:11px!important; }
.gauge-thumb-5 { background:linear-gradient(145deg,#101820,#05080b)!important; }
.gauge-thumb-5 > i.mini-cockpit { inset:18% 8%; border:1px solid #434a4e; border-radius:8px; background:linear-gradient(90deg,#0c1013,#151a1d,#0a0d10); }
.gauge-thumb-5 > b { font-size:22px!important; z-index:1; }
.gauge-thumb-8 { background:#050607!important; }
.gauge-thumb-8 > i.mini-triple { inset:22% 10%; background:linear-gradient(90deg,#7a8b92 1px,transparent 1px 32%,#697780 33%,transparent 34% 66%,#697780 67%,transparent 68%); }
.gauge-thumb-8 > b { font-size:15px!important; }
.gauge-thumb-10 { background:linear-gradient(135deg,#0c1820,#101d21)!important; }
.gauge-thumb-10 > i.mini-bars { inset:20% 10%; background:linear-gradient(90deg,#21343a 18%,#48d3c0 18% 20%,transparent 20% 40%,#2aa99f 40% 42%,transparent 42% 62%,#489a97 62% 64%,transparent 64%); }
.gauge-thumb-10 > b { font-size:8px!important; }
.gauge-thumb-11 { background:#050607!important; }
.gauge-thumb-11 > i.mini-porsche { inset:17% 10%; border:1px solid #333a41; border-radius:50%; background:radial-gradient(circle at center,#0b1015 0 22%,#5074d2 23% 25%,transparent 26%); }
.gauge-thumb-11 > b { font-size:13px!important; }

#gaugeWrap[data-gauge-index="0"],
#gaugeWrap[data-gauge-index="1"],
#gaugeWrap[data-gauge-index="3"],
#gaugeWrap[data-gauge-index="5"],
#gaugeWrap[data-gauge-index="7"],
#gaugeWrap[data-gauge-index="8"],
#gaugeWrap[data-gauge-index="10"],
#gaugeWrap[data-gauge-index="11"] {
  top: 36%;
  width: min(86%, 500px);
  aspect-ratio: 2.3;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#gaugeWrap[data-gauge-index="0"]:before,
#gaugeWrap[data-gauge-index="0"]:after,
#gaugeWrap[data-gauge-index="1"]:before,
#gaugeWrap[data-gauge-index="1"]:after,
#gaugeWrap[data-gauge-index="3"]:before,
#gaugeWrap[data-gauge-index="3"]:after,
#gaugeWrap[data-gauge-index="5"]:before,
#gaugeWrap[data-gauge-index="5"]:after,
#gaugeWrap[data-gauge-index="7"]:before,
#gaugeWrap[data-gauge-index="7"]:after,
#gaugeWrap[data-gauge-index="8"]:before,
#gaugeWrap[data-gauge-index="8"]:after,
#gaugeWrap[data-gauge-index="10"]:before,
#gaugeWrap[data-gauge-index="10"]:after,
#gaugeWrap[data-gauge-index="11"]:before,
#gaugeWrap[data-gauge-index="11"]:after { content: none; }

#gaugeWrap[data-gauge-index="0"] { top: 29%; width: min(84%, 470px); }
#gaugeWrap[data-gauge-index="3"],
#gaugeWrap[data-gauge-index="7"] { top: 30%; width: min(90%, 520px); }
#gaugeWrap[data-gauge-index="5"],
#gaugeWrap[data-gauge-index="8"],
#gaugeWrap[data-gauge-index="10"],
#gaugeWrap[data-gauge-index="11"] { top: 35%; }

.dash-screen { position: absolute; inset: 0; display: block; overflow: visible; color: #f4f6f8; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.dash-speed,.dash-rpm,.dash-gear,.round-meter > b,.luce-face > b,.gauge-speed { font-family:-apple-system,BlinkMacSystemFont,"Arial",sans-serif; }
.dash-simple { position:absolute; inset:-5% 0 0; display:flex; align-items:center; flex-direction:column; color:#17191d; font-family:-apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif; }
.dash-simple b { font-size:clamp(76px,14vw,118px); font-weight:300; line-height:1; }
.dash-simple small { margin-top:14px; color:#777; font-size:16px; }
.dash-simple .dash-line { position:absolute; top:93%; left:36%; right:36%; height:4px; overflow:hidden; background:#e2e4e7; }
.dash-simple .dash-line span { display:block; width:0; height:100%; background:#4b67d8; }
.dash-steering { position:absolute; inset:5% 0; padding:14px 7%; border:12px solid #202225; border-radius:38px 38px 24px 24px; background:repeating-linear-gradient(0deg,#191b1e 0 2px,#202226 2px 4px); box-shadow:0 8px 18px #1113,inset 0 0 0 1px #404246; }
.dash-lights { display:flex; justify-content:center; gap:7px; height:15px; }
.dash-lights i { width:8px; height:8px; border-radius:50%; background:#35393d; }
.dash-lights i.lit:nth-child(-n+5) { background:#5bd56b; box-shadow:0 0 6px #39bd5b; }
.dash-lights i.lit:nth-child(n+6):nth-child(-n+10) { background:#eacb45; }
.dash-lights i.lit:nth-child(n+11) { background:#e54d47; }
.steering-body { display:flex; align-items:center; justify-content:center; gap:12px; height:82%; }
.side-keys { display:flex; flex-direction:column; gap:8px; color:#f6bd48; font-size:10px; }
.side-keys b { display:grid; width:20px; height:20px; place-items:center; border-radius:50%; background:#c53b37; }
.side-keys.right b { background:#398f70; }
.steering-screen { position:relative; display:grid; grid-template-columns:1fr 1.2fr 1fr; width:82%; height:82%; padding:12px 10px 26px; border:1px solid #34383c; border-radius:5px; background:#050607; text-align:center; }
.steering-screen > div { display:flex; align-items:center; flex-direction:column; border-right:1px solid #23262a; }
.steering-screen > div:last-of-type { border:0; }
.steering-screen small,.steering-screen em { color:#8d959b; font-size:8px; font-style:normal; }
.steering-screen b { font-size:clamp(16px,3vw,30px); font-weight:500; }
.steering-screen .steering-gear b { font-size:clamp(40px,7vw,76px); line-height:1; }
.steering-screen footer { position:absolute; right:8px; bottom:5px; left:8px; display:flex; justify-content:space-between; color:#adb4b7; font-size:8px; }
.steering-bar { position:absolute; bottom:8%; left:12%; right:12%; height:8px; background:repeating-linear-gradient(90deg,#32363a 0 8px,#191b1e 8px 10px); }
.dash-dual { position:absolute; inset:0; display:flex; align-items:center; justify-content:space-evenly; }
.round-meter { position:relative; display:flex; width:43%; aspect-ratio:1; flex-direction:column; align-items:center; justify-content:center; border:8px solid #181a1c; border-radius:50%; background:radial-gradient(circle,#140a0b 0 34%,#280d0f 35% 70%,#090a0c 72%); box-shadow:0 0 0 2px #c5c8ca,0 0 0 5px #151719,inset 0 0 22px #000; }
.round-meter:before { position:absolute; inset:5%; border:1px solid #85888a; border-radius:50%; content:""; }
.round-meter .meter-top { position:absolute; top:29%; color:#e5e7e8; font-size:clamp(7px,1vw,12px); }
.round-meter > b { margin-top:10px; font-size:clamp(28px,6vw,58px); font-weight:400; text-shadow:0 0 8px #fff7; }
.round-meter .meter-bottom { position:absolute; right:15%; bottom:16%; left:15%; display:flex; justify-content:space-between; color:#f4f5f5; font-size:clamp(9px,1.2vw,15px); }
.track-red .round-meter { background:radial-gradient(circle,#1a090a 0 36%,#350b0d 37% 77%,#12090a 78%); }
.passat-blue .round-meter { background:radial-gradient(circle,#f7f8f8 0 37%,#dfe3e5 38% 78%,#232a31 79%); color:#20252a; }
.passat-blue .round-meter .meter-top,.passat-blue .round-meter .meter-bottom { color:#252a30; }
.dash-cockpit { position:absolute; inset:14% 3%; display:grid; grid-template-columns:1fr 1fr 1fr; align-items:center; padding:20px 12px 28px; border:12px solid #171a1d; border-radius:28px; background:linear-gradient(90deg,#101820,#05080b 47%,#111c24); box-shadow:inset 0 0 0 1px #42484c,0 7px 15px #0002; text-align:center; }
.cockpit-top { position:absolute; top:9px; left:36%; right:36%; display:flex; justify-content:space-around; }
.cockpit-top i { width:8px; height:8px; border-radius:50%; background:#44d56b; box-shadow:0 0 7px #4dd574; }
.cockpit-side { display:flex; align-items:center; flex-direction:column; gap:4px; }
.cockpit-side small,.cockpit-side em,.cockpit-center small,.cockpit-center span { color:#a0acb4; font-size:clamp(7px,1vw,11px); font-style:normal; }
.cockpit-side b { font-size:clamp(22px,5vw,54px); font-weight:400; }
.cockpit-center { display:flex; align-items:center; flex-direction:column; border-right:1px solid #293138; border-left:1px solid #293138; }
.cockpit-center b { font-size:clamp(54px,10vw,106px); line-height:1; }
.cockpit-progress { position:absolute; right:8%; bottom:12px; left:8%; height:5px; background:#202c32; }
.cockpit-progress i { display:block; height:100%; background:#60c88f; }
.dash-gtr,.dash-amg,.dash-porsche { position:absolute; inset:12% 3%; padding:18px; border:1px solid #394148; border-radius:8px; background:linear-gradient(145deg,#111b22,#05080a 58%,#111820); box-shadow:inset 0 0 0 6px #13191e,0 7px 16px #0002; }
.dash-gtr header,.dash-amg header { display:flex; justify-content:space-between; color:#cfdae0; font-size:clamp(8px,1.2vw,13px); }
.dash-gtr header span:first-child { color:#ef4448; font-weight:700; }
.gtr-row { position:absolute; inset:25% 8% 28%; display:grid; grid-template-columns:1fr 1.3fr 1fr; align-items:center; text-align:center; }
.gtr-row > div { display:flex; align-items:center; flex-direction:column; border-right:1px solid #29353d; }
.gtr-row > div:last-child { border:0; }
.gtr-row small,.gtr-row em { color:#7f969f; font-size:clamp(7px,1vw,11px); font-style:normal; }
.gtr-row b { font-size:clamp(22px,4.5vw,48px); font-weight:400; }
.gtr-row .gtr-speed em { color:#ec4f50; }
.dash-gtr footer { position:absolute; right:9%; bottom:12px; left:9%; display:flex; height:5px; gap:3px; }
.dash-gtr footer i { flex:1; background:#24343a; }
.dash-gtr footer i:nth-child(-n+4) { background:#76bd72; }
.dash-amg { border-color:#55777b; background:linear-gradient(145deg,#10262a,#050b0e); }
.dash-amg header b { color:#61cfc4; font-size:clamp(12px,2vw,20px); }
.amg-value { display:flex; align-items:baseline; justify-content:center; gap:8px; margin:12px 0; }
.amg-value b { font-size:clamp(34px,7vw,70px); font-weight:300; }
.amg-value small { color:#9bafb0; }
.amg-bars { display:flex; flex-direction:column; gap:7px; }
.amg-bars i { display:block; height:5px; background:#1e3437; }
.amg-bars span { display:block; width:0; height:100%; background:#56c6ba; }
.dash-amg footer { position:absolute; right:18px; bottom:14px; left:18px; display:flex; justify-content:space-between; color:#8ea2a4; font-size:clamp(8px,1.1vw,12px); }
.dash-amg footer b { margin-left:6px; color:#f4f7f7; font-size:1.2em; }
.dash-porsche { display:grid; grid-template-columns:1fr 1.15fr 1fr; align-items:center; text-align:center; border:0; background:transparent; box-shadow:none; }
.porsche-arc,.porsche-main,.porsche-info { display:flex; align-items:center; flex-direction:column; justify-content:center; height:72%; }
.porsche-arc { border:8px solid #20252b; border-top-color:#4d6bdd; border-radius:50%; background:radial-gradient(circle,#111820 0 56%,transparent 57%); }
.porsche-arc small,.porsche-arc span,.porsche-main small,.porsche-info span { color:#6c7680; font-size:clamp(7px,1vw,11px); }
.porsche-arc b { font-size:clamp(20px,4vw,40px); font-weight:400; }
.porsche-main { border-right:1px solid #d3d8df; border-left:1px solid #d3d8df; color:#1b2430; }
.porsche-main b { font-size:clamp(48px,10vw,100px); font-weight:300; line-height:1; }
.porsche-main em { padding:2px 12px; background:#4b67d8; color:#fff; font-style:normal; }
.porsche-info b { font-size:clamp(18px,3vw,32px); }
.porsche-info i { width:64%; height:4px; margin:3px; background:#d9dfe5; }

@media (max-width: 760px) {
  #gaugeWrap[data-gauge-index="0"],#gaugeWrap[data-gauge-index="1"],#gaugeWrap[data-gauge-index="3"],#gaugeWrap[data-gauge-index="5"],#gaugeWrap[data-gauge-index="7"],#gaugeWrap[data-gauge-index="8"],#gaugeWrap[data-gauge-index="10"],#gaugeWrap[data-gauge-index="11"] { width:90%; }
  #gaugeWrap[data-gauge-index="0"] { top:29%; width:84%; }
  #gaugeWrap[data-gauge-index="3"],#gaugeWrap[data-gauge-index="7"] { top:31%; width:94%; }
  .dash-steering { border-width:8px; padding-right:3%; padding-left:3%; }
  .steering-screen { width:82%; }
  .round-meter { width:45%; border-width:5px; }
  .dash-cockpit { inset:18% 0; border-width:7px; padding-right:4px; padding-left:4px; }
  .dash-gtr,.dash-amg { inset:18% 0; padding:12px; }
  .dash-porsche { inset:15% 0; }
}

#gaugeWrap[data-gauge-index="4"] { top:34%; width:min(72%,390px); aspect-ratio:1; }
#gaugeWrap[data-gauge-index="6"] { top:30%; width:min(68%,360px); aspect-ratio:1; }
#gaugeWrap[data-gauge-index="9"] { top:35%; width:min(86%,500px); aspect-ratio:2.3; }
#gaugeWrap[data-gauge-index="4"] { top:29%; }
.dash-mini { position:absolute; inset:5%; display:flex; align-items:center; flex-direction:column; border:1px solid #d2d6d6; border-radius:50%; background:radial-gradient(circle,#f8f9f8 0 48%,#dfe3e1 49% 52%,#24292a 53% 56%,#f8f9f8 57%); color:#202528; box-shadow:0 2px 12px #0002; }
.mini-top { position:absolute; top:12%; left:18%; right:18%; display:flex; justify-content:space-between; color:#6c767b; font-size:clamp(8px,1.1vw,12px); }
.mini-ring { position:absolute; top:24%; display:grid; width:54%; aspect-ratio:1; place-items:center; border:8px solid #353b3c; border-radius:50%; background:radial-gradient(circle,#fff 0 67%,#d9dedb 68%); box-shadow:0 0 0 2px #bcc2bf; }
.mini-ring > div { display:flex; align-items:center; flex-direction:column; }
.mini-ring small { color:#667176; font-size:clamp(7px,1vw,11px); }
.mini-ring b { font-size:clamp(28px,5vw,52px); font-weight:300; line-height:1; }
.mini-ring em { margin-top:4px; padding:1px 14px; background:#48715d; color:#fff; font-size:clamp(8px,1vw,12px); font-style:normal; }
.dash-mini footer { position:absolute; right:15%; bottom:13%; left:15%; display:flex; justify-content:space-between; color:#778083; font-size:clamp(7px,1vw,11px); }
.dash-supra { position:absolute; inset:9% 3%; padding:14px 18px; border:1px solid #394148; border-radius:8px; background:linear-gradient(145deg,#111b22,#05080a 60%,#17222a); box-shadow:inset 0 0 0 5px #13191e,0 7px 16px #0002; text-align:center; }
.dash-supra header,.dash-supra footer { display:flex; justify-content:space-between; color:#8e9ca2; font-size:clamp(8px,1.1vw,12px); }
.dash-supra header b { color:#f3f5f6; font-size:clamp(11px,1.5vw,17px); letter-spacing:2px; }
.supra-center { position:absolute; top:24%; right:0; left:0; display:flex; align-items:center; flex-direction:column; }
.supra-center small { color:#a5b0b4; font-size:clamp(8px,1vw,11px); }
.supra-center > b { font-size:clamp(44px,8vw,82px); font-weight:300; line-height:1; }
.supra-center > span { padding:1px 15px; background:#4d85a3; font-size:clamp(9px,1.2vw,14px); }
.supra-arc { position:absolute; top:-16%; width:58%; height:22px; overflow:hidden; border-top:5px solid #283c47; border-radius:50%; }
.supra-arc i { display:block; width:55%; height:100%; border-top:5px solid #50a5ca; border-radius:50%; }
.dash-supra footer { position:absolute; right:9%; bottom:12px; left:9%; }
.dash-supra footer b { color:#e9eff2; }
.gauge-nav { display:flex; align-items:center; gap:8px; }
.gauge-nav button { display:grid; width:38px; height:38px; flex:none; place-items:center; border:0; border-radius:50%; background:#e5e7ea; color:#313a45; font-size:24px; line-height:1; }
.gauge-nav button:disabled { color:#aeb4bc; opacity:.62; }
.gauge-nav button:not(:disabled):hover { background:#d7dbe2; }

@media (max-width:760px) {
  .gauge-nav { gap:5px; }
  .gauge-nav .item-count { display:none; }
  .gauge-nav button { width:34px; height:34px; }
  #gaugeWrap[data-gauge-index="4"] { width:min(76%,390px); }
  #gaugeWrap[data-gauge-index="9"] { width:90%; }
}

.gauge-description { display:flex; gap:10px; align-items:baseline; padding:12px 2px 3px; border-top:1px solid #dce0e5; color:#66717c; font-size:11px; line-height:1.65; }
.gauge-description b { flex:none; color:#313b47; font-size:12px; }
.dash-luce { position:absolute; inset:0; display:grid; place-items:center; }
.luce-face { position:relative; display:flex; width:94%; aspect-ratio:1; align-items:center; flex-direction:column; border:10px solid #2b2b29; border-radius:50%; background:radial-gradient(circle,#efc834 0 69%,#d9a81e 70% 76%,#242321 77%); color:#24221c; box-shadow:0 0 0 3px #77736b,0 0 16px #0003; }
.luce-face > span { margin-top:17%; font-size:clamp(9px,1.3vw,14px); }
.luce-face > b { font-size:clamp(44px,9vw,92px); font-weight:400; line-height:1; }
.luce-marks { position:absolute; top:15%; color:#3c382b; font-size:clamp(8px,1.1vw,12px); }
.luce-pointer { position:absolute; top:18%; left:calc(50% - 2px); width:4px; height:48%; transform:rotate(calc(-135deg + var(--speed-fraction,0) * 270deg)); transform-origin:50% 67%; border-radius:4px; background:#d22d32; box-shadow:0 0 4px #a91417; }
.luce-capsule { position:absolute; right:20%; bottom:18%; left:20%; display:flex; height:19%; align-items:center; justify-content:space-around; border:2px solid #55534e; border-radius:999px; background:#121314; color:#f2f3ef; font-size:clamp(7px,1vw,11px); }
.luce-capsule b { font-size:clamp(13px,2vw,20px); }
.luce-capsule > span b { font-size:inherit; }
.mini-top { display:flex; align-items:center; }
.mini-top b { font-size:clamp(23px,4vw,40px); font-weight:400; }
.mini-top strong { font-size:clamp(16px,2.5vw,25px); }
.mini-side { position:absolute; top:42%; display:flex; align-items:center; flex-direction:column; color:#495258; }
.mini-side.left { left:9%; }.mini-side.right { right:9%; }
.mini-side small { font-size:clamp(6px,.8vw,9px); }.mini-side b { font-size:clamp(12px,2vw,20px); font-weight:400; }
.mini-side i { width:5px; height:52px; margin-top:4px; background:linear-gradient(#4b8a6d,#ccd3ce); }
.dash-mini .mini-ring { top:31%; width:43%; }
.dash-mini footer { bottom:10%; }
.chrome-audi .round-meter { border:8px solid #adb7bf; background:radial-gradient(circle,#f7f9fb 0 63%,#d5dce2 64% 78%,#49545d 79%); color:#202a33; box-shadow:0 0 0 3px #252c31,0 0 0 6px #bcc6cc; }
.chrome-audi .round-meter:after { position:absolute; top:24%; left:50%; width:3px; height:34%; transform:rotate(calc(-130deg + var(--speed-fraction,0) * 250deg)); transform-origin:50% 100%; background:#2697ee; box-shadow:0 0 5px #48aaff; content:""; }
.chrome-audi .meter-top,.chrome-audi .meter-bottom { color:#384652; }
.passat-black .round-meter { width:38%; border-color:#111619; background:radial-gradient(circle,#070a0b 0 36%,#171d20 37% 76%,#090b0d 77%); }
.passat-center { position:absolute; z-index:2; left:38%; width:24%; display:flex; min-height:64%; align-items:center; flex-direction:column; justify-content:center; border:1px solid #465057; background:linear-gradient(#12191d,#030506); color:#dbe0e1; box-shadow:0 0 9px #000; }
.passat-center small,.passat-center em { color:#9ba7aa; font-size:clamp(6px,.9vw,10px); font-style:normal; }
.passat-center b { font-size:clamp(24px,4vw,42px); font-weight:400; }
.passat-center span { font-size:clamp(8px,1vw,11px); }.passat-center span i { font-style:normal; }
.chrome-audi .round-meter .meter-top { top:27%; }
.dash-luce .luce-capsule { z-index:1; }
.dash-gtr { background:repeating-linear-gradient(35deg,#111719 0 2px,#0b1012 2px 4px); }
.dash-gtr .gtr-row { grid-template-columns:1fr 1.5fr 1fr; }
.dash-gtr .gtr-row > div { min-height:72%; justify-content:center; }
.dash-gtr .gtr-tach { border:7px solid #421316!important; border-radius:50%; background:radial-gradient(circle,#090b0c 0 44%,#251013 45% 72%,#a52328 73% 76%,#101214 77%); }
.dash-gtr .gtr-tach b { font-size:clamp(30px,6vw,62px); }
.dash-gtr .gtr-tach em { padding:2px 12px; border-radius:50%; background:#246bad; color:#fff; }
.dash-gtr .gtr-speed b { font-size:clamp(30px,6vw,62px); }
.dash-gtr .gtr-speed em { color:#8d9ba0; }
.amg-dual .round-meter { width:34%; }
.amg-overlay { position:absolute; z-index:2; left:36%; width:28%; display:flex; min-height:62%; align-items:center; flex-direction:column; justify-content:center; border:1px solid #687b80; background:linear-gradient(145deg,#18272b,#070c0e); color:#e8eeee; }
.amg-overlay small { color:#9aacad; font-size:clamp(6px,.8vw,10px); }.amg-overlay b { font-size:clamp(16px,2.5vw,28px); color:#a8d8d4; }
.amg-overlay i { width:75%; height:2px; margin:5px; background:linear-gradient(90deg,#257a78,#8ce0d2); }
.amg-overlay i:last-child { background:linear-gradient(90deg,#286d87,#80c9ed); }
.dash-supra header { justify-content:center; gap:18px; }
.supra-bar { width:25%; height:20px; border:1px solid #d77b35; }
.dash-supra header .dash-gear { padding:0 12px; color:#fff; font-size:clamp(22px,4vw,42px); }
.dash-supra .supra-center { top:31%; left:12%; width:35%; }
.dash-supra .supra-arc { top:-30%; }
.supra-side { position:absolute; top:28%; display:flex; align-items:center; flex-direction:column; color:#d4dde1; }
.supra-side.left { left:7%; }.supra-side.right { right:7%; }
.supra-side small { margin-bottom:5px; color:#8a9ba1; font-size:clamp(6px,.8vw,9px); }
.supra-side b { font-size:clamp(12px,2vw,20px); font-weight:400; }
.supra-side i { width:6px; height:6px; margin:2px 0; background:#d77b35; }
.dash-supra footer { right:24%; left:24%; }
.dash-porsche { grid-template-columns:.8fr 1fr 1.35fr 1fr; }
.porsche-main { grid-column:3; grid-row:1; border:0; }
.porsche-arc { grid-column:1; grid-row:1; }
.porsche-info { grid-column:2; grid-row:1; border-left:1px solid #d3d8df; }
.porsche-info:after { content:"12:30"; margin-top:5px; color:#68737e; font-size:clamp(8px,1vw,11px); }
.dash-porsche:after { grid-column:4; grid-row:1; width:80%; height:72%; margin:auto; border:8px solid #20252b; border-radius:50%; background:radial-gradient(circle,#101820 0 44%,#54a873 45% 47%,transparent 48%); content:""; }

@media (max-width:760px) {
  .gauge-description { display:block; font-size:10px; }
  .gauge-description b { margin-right:8px; }
  #gaugeWrap[data-gauge-index="4"] { top:29%; }
  #gaugeWrap[data-gauge-index="6"] { width:min(72%,320px); top:29%; }
  .passat-center,.amg-overlay { min-height:55%; }
}