* {
  box-sizing: border-box;
}

:root {
  --bg: #1e1e1e;
  --panel: #252526;
  --toolbar: #2d2d30;
  --menu: #333333;
  --border: #3f3f46;
  --text: #ffffff;
  --muted: #bdbdbd;
  --accent: #007acc;
  --surface: #151515;
}

html,
body,
#app {
  height: 100%;
  margin: 0;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", Arial, sans-serif;
  overflow: hidden;
}

button {
  background: #3a3a3d;
  color: var(--text);
  border: 1px solid #555;
  border-radius: 4px;
  padding: 5px 10px;
  cursor: pointer;
}

button:hover {
  background: #4a4a4d;
}

button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

button.danger {
  width: 100%;
  margin-top: 12px;
  background: #651d1d;
  border-color: #923333;
}

.studio {
  height: 100vh;
  min-height: 0;
  display: grid;
  grid-template-rows: 92px 28px 40px minmax(0, 1fr) 26px;
  grid-template-columns: 230px 180px minmax(0, 1fr) 300px;
  grid-template-areas:
    "title title title title"
    "menu menu menu menu"
    "toolbar toolbar toolbar toolbar"
    "toolbox layers workspace inspector"
    "status status status status";
  overflow: hidden;
}

.titlebar {
  grid-area: title;
  background: #181818;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 12px;
}

.titlebar span {
  margin-left: 12px;
  color: var(--muted);
  font-size: 13px;
}

.title-actions {
  display: flex;
  gap: 8px;
}

.menubar {
  grid-area: menu;
  background: var(--menu);
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 0 12px;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
}

.toolbar {
  grid-area: toolbar;
  background: var(--toolbar);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border-bottom: 1px solid var(--border);
}

.divider {
  height: 22px;
  width: 1px;
  background: var(--border);
  margin: 0 6px;
}

.panel {
  background: var(--panel);
  padding: 12px;
  overflow: auto;
}

.panel h3,
.bottom-panel h3 {
  margin: 0 0 12px;
  font-size: 12px;
  text-transform: uppercase;
  color: var(--muted);
  letter-spacing: 0.08em;
}

.toolbox {
  grid-area: toolbox;
  border-right: 1px solid var(--border);
}

.tool-item {
  padding: 10px;
  margin-bottom: 6px;
  background: #2f2f31;
  border: 1px solid #3e3e42;
  border-radius: 6px;
  cursor: pointer;
}

.tool-item:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(0, 122, 204, 0.4);
}

.tool-help-button {
  width: 100%;
  margin-top: 7px;
  padding: 8px 10px;
  border: 1px solid #555;
  border-radius: 7px;
  background: #202329;
  color: #b8c0c8;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}

.tool-help-button:hover {
  border-color: #f4bf35;
  color: #fff;
}

.workspace {
  grid-area: workspace;
  background: #111;
  overflow: hidden;
  position: relative;
}

.surface-wrap {
  height: 100%;
  display: grid;
  place-items: center;
  padding: 26px;
}

.display-frame {
  width: min(92%, calc((100vh - 310px) * 2.666));
  aspect-ratio: 1920 / 720;
  background: #050505;
  border-radius: 28px;
  padding: 16px;
  box-shadow:
    0 18px 40px rgba(0,0,0,0.65),
    inset 0 0 0 1px rgba(255,255,255,0.08);
}

.design-surface {
  width: 100%;
  height: 100%;
  border-radius: 18px;
  border: 1px solid #404040;
  position: relative;
  overflow: hidden;
  background: #151515;
}

#dashboardGrid {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.07) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,0.07) 1px, transparent 1px),
    radial-gradient(circle at center, #252525, #151515);
  background-size:
    20px 20px,
    20px 20px,
    100px 100px,
    100px 100px,
    auto;
}

#widgetLayer {
  position: absolute;
  inset: 0;
}

.dashboard-widget {
  position: absolute;
  background: rgba(20, 20, 20, 0.9);
  border: 1px solid rgba(255,255,255,0.14);
  color: white;
  cursor: move;
  user-select: none;
  overflow: visible;
  box-shadow: 0 10px 22px rgba(0,0,0,0.45);
}

.widget-content {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.dashboard-widget:has(.led-tach-widget) .widget-content {
  overflow: visible;
}

.led-tach-widget,
.led-tach-widget svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  background: transparent !important;
}

.led-tach-widget {
  pointer-events: none;
}

.selected-widget {
  outline: 2px solid #0094ff;
  outline-offset: 0;
}

.resize-handle {
  position: absolute;
  width: 11px;
  height: 11px;
  background: #dff3ff;
  border: 1px solid #007acc;
  z-index: 20;
}

.handle-nw {
  left: -6px;
  top: -6px;
  cursor: nwse-resize;
}

.handle-n {
  left: calc(50% - 5px);
  top: -6px;
  cursor: ns-resize;
}

.handle-ne {
  right: -6px;
  top: -6px;
  cursor: nesw-resize;
}

.handle-e {
  right: -6px;
  top: calc(50% - 5px);
  cursor: ew-resize;
}

.handle-se {
  right: -6px;
  bottom: -6px;
  cursor: nwse-resize;
}

.handle-s {
  left: calc(50% - 5px);
  bottom: -6px;
  cursor: ns-resize;
}

.handle-sw {
  left: -6px;
  bottom: -6px;
  cursor: nesw-resize;
}

.handle-w {
  left: -6px;
  top: calc(50% - 5px);
  cursor: ew-resize;
}

.text-widget,
.image-widget,
.digital-gauge,
.clock-widget {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  text-align: center;
}

.text-widget {
  font-size: 28px;
  font-weight: 600;
}

.image-widget {
  gap: 6px;
  color: #cccccc;
}

.image-icon {
  font-size: 36px;
}

.digital-gauge {
  background:
    radial-gradient(circle at top, rgba(0, 217, 255, 0.18), transparent 45%),
    linear-gradient(180deg, #111, #050505);
  border: 1px solid rgba(255,255,255,0.12);
}

.digital-value {
  font-size: 54px;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #f5f5f5;
  text-shadow: 0 0 12px rgba(0, 217, 255, 0.55);
}

.digital-label,
.clock-label {
  font-size: 13px;
  color: #cccccc;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.clock-widget {
  background:
    radial-gradient(circle at top, rgba(255,255,255,0.08), transparent 42%),
    linear-gradient(180deg, #222, #080808);
}

.clock-time {
  font-size: 44px;
  font-weight: 700;
}

.analog-gauge {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: transparent;
  border-radius: 50%;
}

.porsche-gauge .gauge-bezel {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    linear-gradient(145deg, #666, #161616 35%, #777 55%, #050505);
  box-shadow:
    inset 0 0 12px rgba(255,255,255,0.16),
    inset 0 0 34px rgba(0,0,0,0.9),
    0 10px 24px rgba(0,0,0,0.75);
}

.porsche-gauge .gauge-face {
  width: 86%;
  height: 86%;
  position: relative;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,0.09), transparent 15%),
    radial-gradient(circle at center, #242424 0 13%, #111 14% 62%, #050505 63%);
  border: 2px solid #202020;
  box-shadow:
    inset 0 0 12px rgba(255,255,255,0.08),
    inset 0 0 35px rgba(0,0,0,0.95);
}

.gauge-brand {
  position: absolute;
  top: 20%;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 8px;
  letter-spacing: 0.28em;
  color: rgba(255,255,255,0.38);
}

.gauge-number {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: clamp(8px, 6.5%, 17px);
  font-weight: 600;
  color: #f3f0e8;
  text-shadow: 0 0 4px rgba(0,0,0,0.95);
}

.gauge-major-mark,
.gauge-minor-mark {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: center center;
  border-radius: 2px;
}

.gauge-major-mark {
  width: 2px;
  height: 14%;
  background: #f3f0e8;
  box-shadow: 0 0 3px rgba(255,255,255,0.25);
}

.gauge-minor-mark {
  width: 1px;
  height: 8%;
  background: rgba(243,240,232,0.62);
}

.gauge-needle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3px;
  height: 38%;
  background: #d91f1f;
  transform-origin: 50% 95%;
  border-radius: 4px;
  box-shadow:
    0 0 7px rgba(255, 0, 0, 0.7),
    0 0 2px rgba(255,255,255,0.8);
  z-index: 5;
}

.gauge-needle::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -8%;
  width: 9px;
  height: 18px;
  transform: translateX(-50%);
  background: #d91f1f;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.gauge-hub {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12%;
  height: 12%;
  background:
    radial-gradient(circle at 35% 35%, #666, #181818 48%, #050505);
  border: 3px solid #cfcfcf;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 6;
  box-shadow:
    inset 0 0 5px rgba(255,255,255,0.25),
    0 0 8px rgba(0,0,0,0.9);
}

.gauge-value {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 27%;
  text-align: center;
  font-size: clamp(16px, 13%, 34px);
  font-weight: 700;
  color: #f7f5ef;
  z-index: 4;
}

.gauge-units {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20%;
  text-align: center;
  font-size: clamp(8px, 5.5%, 15px);
  letter-spacing: 0.14em;
  color: #c9c5bd;
  z-index: 4;
}

.gauge-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 13%;
  text-align: center;
  font-size: clamp(7px, 5%, 13px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  z-index: 4;
}

.gauge-glass {
  pointer-events: none;
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.16), transparent 33%),
    radial-gradient(circle at 38% 25%, rgba(255,255,255,0.12), transparent 24%);
  z-index: 8;
}

.inspector {
  grid-area: inspector;
  border-left: 1px solid var(--border);
}

details {
  border: 1px solid #3e3e42;
  border-radius: 6px;
  margin-bottom: 10px;
  padding: 8px;
  background: #2b2b2d;
}

summary {
  cursor: pointer;
  color: #e8e8e8;
  font-weight: 600;
}

label {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted);
}

input {
  width: 100%;
  margin-top: 4px;
  background: #1b1b1c;
  color: var(--text);
  border: 1px solid #555;
  border-radius: 4px;
  padding: 7px;
}

.muted {
  color: var(--muted);
  font-size: 13px;
}

.bottom-panel {
  grid-area: bottom;
  display: grid;
  grid-template-columns: 230px 1fr;
  background: var(--panel);
  border-top: 1px solid var(--border);
}

.layers,
.resources {
  padding: 10px 12px;
  overflow: auto;
}

.layers {
  border-right: 1px solid var(--border);
}

.layer,
.resource {
  font-size: 13px;
  padding: 6px 8px;
  background: #2f2f31;
  border: 1px solid #3e3e42;
  border-radius: 4px;
  margin-bottom: 5px;
}

.statusbar {
  grid-area: status;
  background: var(--accent);
  color: white;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 0 10px;
  font-size: 12px;
}

/* ===== Preview Mode ===== */

body.preview-mode .titlebar,
body.preview-mode .menubar,
body.preview-mode .toolbar,
body.preview-mode .toolbox,
body.preview-mode .inspector,
body.preview-mode .bottom-panel,
body.preview-mode .statusbar{
    display:none !important;
}

body.preview-mode .studio{
    display:block;
    height:100vh;
}

body.preview-mode .workspace{
    position:fixed;
    inset:0;
    width:100vw;
    height:100vh;
}

body.preview-mode .surface-wrap{
    padding:0;
    height:100%;
}

body.preview-mode .display-frame{
    width:100%;
    height:100%;
    aspect-ratio:auto;
    border-radius:0;
    padding:0;
}

body.preview-mode #dashboardGrid,
body.preview-mode .resize-handle{
    display:none !important;
}

body.preview-mode .selected-widget{
    outline:none !important;
}

body.preview-mode .dashboard-widget{
    outline:none !important;
    box-shadow:none;
}


/* ===== Feature 009: Snap Guides and Layer Selection ===== */

#guideLayer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 50;
}

.alignment-guide {
  position: absolute;
  background: #00d9ff;
  box-shadow: 0 0 10px rgba(0, 217, 255, 0.9);
  opacity: 0.95;
}

.vertical-guide {
  top: 0;
  bottom: 0;
  width: 1px;
}

.horizontal-guide {
  left: 0;
  right: 0;
  height: 1px;
}

.layer {
  cursor: pointer;
}

.layer:hover {
  border-color: var(--accent);
}

.selected-layer {
  background: rgba(0, 122, 204, 0.32);
  border-color: #00d9ff;
  color: #ffffff;
}

body.preview-mode #guideLayer,
body.preview-mode .alignment-guide {
  display: none !important;
}


#alignmentGuides{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:50;
}

.guide-line{
  position:absolute;
  background:#00aaff;
  box-shadow:0 0 8px rgba(0,170,255,0.85);
  pointer-events:none;
}

.guide-line.vertical{
  top:0;
  bottom:0;
  width:1px;
}

.guide-line.horizontal{
  left:0;
  right:0;
  height:1px;
}

.dashboard-widget.locked-widget{
  cursor:not-allowed;
  opacity:0.92;
}

.layer.hidden-layer{
  opacity:0.45;
}

.layer.selected-layer{
  border-color:#0094ff;
  background:#18334a;
  box-shadow:0 0 0 1px rgba(0,148,255,0.45);
}


/* ===== Gauge Engine 2.0 editor integration ===== */

.tool-section-title {
  margin: 12px 0 6px;
  color: #9da8b3;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.ge2-loading {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: #aaa;
  font-size: 13px;
  background: #050505;
}


/* Embedded Gauge Engine 2.0 styles for editor */
.ge2-wrapper,.ge2-svg{width:100%;height:100%}.ge2-svg{overflow:visible;filter:drop-shadow(0 12px 22px rgba(0,0,0,.75))}.ge2-shadow{fill:#020202}.ge2-outer-ring{stroke:rgba(255,255,255,.15);stroke-width:.5}.ge2-ring-groove{fill:#070707;stroke:rgba(255,255,255,.08);stroke-width:.5}.ge2-inner-ring{fill:#030303;stroke:rgba(255,255,255,.25);stroke-width:.8}.ge2-face{stroke:rgba(255,255,255,.1);stroke-width:.45}.ge2-warning-arc{fill:none;stroke:#e21b1b;stroke-width:2.4;opacity:.78}.ge2-major-tick,.ge2-minor-tick{stroke:#f5f1e9;stroke-linecap:square}.ge2-major-tick{stroke-width:1.35}.ge2-minor-tick{stroke-width:.48;opacity:.84}.ge2-warning-tick{stroke:#ff1717}.ge2-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}.ge2-warning-number{fill:#ff2626}.ge2-logo{opacity:.96;filter:drop-shadow(0 1px 1px rgba(0,0,0,.9))}.ge2-insignia{font-family:'Arial Narrow','Segoe UI',Arial,sans-serif;font-size:2.7px;fill:#dad6cf;letter-spacing:.12em}.ge2-lcd rect{fill:#020202;stroke:rgba(255,255,255,.09);stroke-width:.35}.ge2-lcd-value{font-family:Consolas,'Courier New',monospace;font-size:8.4px;font-weight:600;fill:#f7f3eb}.ge2-lcd-units{font-family:'Segoe UI',Arial,sans-serif;font-size:2.8px;fill:#d1ccc3;letter-spacing:.12em}.ge2-label{font-family:'Arial Narrow','Segoe UI',Arial,sans-serif;font-size:2.45px;letter-spacing:.17em;fill:rgba(255,255,255,.58)}.ge2-needle-shadow{stroke:#000;stroke-width:2.45;stroke-linecap:round;opacity:.8;filter:blur(.55px)}.ge2-needle{stroke:#e21b1b;stroke-width:1.55;stroke-linecap:round;filter:drop-shadow(0 0 1px rgba(255,0,0,.9))}.ge2-hub-outer{fill:#070707;stroke:rgba(255,255,255,.2);stroke-width:.75}.ge2-hub-inner{fill:#1a1a1a;stroke:rgba(0,0,0,.9);stroke-width:.45}.ge2-glass-glare{fill:rgba(255,255,255,.12);opacity:.72;pointer-events:none}.ge2-glass-sweep{fill:none;stroke:rgba(255,255,255,.18);stroke-width:.6;opacity:.65;pointer-events:none}


/* ===== Gauge Engine 2.0 Sprint 2A Face Updates ===== */

.ge2-carbon-depth {
  fill: url(#ge2CarbonLight);
  opacity: .95;
  mix-blend-mode: screen;
}

.ge2-face-carbon .ge2-face {
  stroke: rgba(255,255,255,.16);
}

.ge2-face-carbon .ge2-brand-text {
  display: none !important;
}

.ge2-face-vdo .ge2-warning-tick,
.ge2-face-vdo .ge2-warning-number {
  stroke: #ff2020;
  fill: #ff2020;
}

.ge2-face-vdo .ge2-needle {
  stroke: #ff2020;
  filter: drop-shadow(0 0 2px rgba(255, 32, 32, .85));
}

.ge2-face-plainBlack .ge2-brand-text,
.ge2-face-darkGray .ge2-brand-text {
  display: none !important;
}


/* ===== Gauge Engine 2.0 Sprint 2B Corrections ===== */

/* Kill all old GT3 watermark/ghost text from every previous renderer path */
.ge2-watermark,
.oem-watermark,
.svg-watermark,
.v2-watermark,
.theme-gt3 .svg-watermark,
.oem-theme-gt3_rs .oem-watermark,
.ge2-face-gt3 .ge2-watermark {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Carbon Motorsport: stronger 3K twill effect with depth and highlights */
.ge2-face-carbon .ge2-face {
  stroke: rgba(255,255,255,.18);
  stroke-width: .75;
}

.ge2-face-carbon .ge2-carbon-depth {
  fill: none;
  opacity: 1;
}

.ge2-face-carbon .ge2-svg,
.ge2-face-carbon {
  background:
    radial-gradient(circle at 35% 24%, rgba(255,255,255,.14), transparent 18%),
    repeating-linear-gradient(38deg,
      #050505 0px,
      #101010 4px,
      #2b2b2b 7px,
      #080808 10px,
      #000 14px
    ),
    repeating-linear-gradient(-38deg,
      rgba(255,255,255,.04) 0px,
      rgba(255,255,255,.10) 3px,
      rgba(0,0,0,.25) 7px,
      rgba(0,0,0,.55) 12px
    );
  border-radius: 50%;
}

/* Carbon Motorsport has no branding, no center text, no watermark */
.ge2-face-carbon .ge2-brand-text,
.ge2-face-carbon .ge2-logo,
.ge2-face-carbon .ge2-insignia {
  display: none !important;
}

/* Plain dials are deliberately clean */
.ge2-face-plainBlack .ge2-logo,
.ge2-face-plainBlack .ge2-brand-text,
.ge2-face-plainBlack .ge2-insignia,
.ge2-face-darkGray .ge2-logo,
.ge2-face-darkGray .ge2-brand-text,
.ge2-face-darkGray .ge2-insignia {
  display: none !important;
}

/* VDO day-glo red, not orange */
.ge2-face-vdo .ge2-warning-tick {
  stroke: #ff1028 !important;
}

.ge2-face-vdo .ge2-warning-number {
  fill: #ff1028 !important;
  stroke: #000 !important;
}

.ge2-face-vdo .ge2-warning-arc {
  stroke: #ff1028 !important;
}

.ge2-face-vdo .ge2-needle {
  stroke: #ff1028 !important;
  filter: drop-shadow(0 0 3px rgba(255, 16, 40, .95));
}


/* ===== Gauge Engine 2.0 Direct Renderer ===== */

.ge2-wrapper,
.ge2-svg {
  width: 100%;
  height: 100%;
}

.ge2-svg {
  overflow: visible;
  filter: drop-shadow(0 12px 22px rgba(0,0,0,.75));
}

.ge2-shadow { fill:#020202; }
.ge2-outer-ring { stroke:rgba(255,255,255,.15); stroke-width:.5; }
.ge2-ring-groove { fill:#070707; stroke:rgba(255,255,255,.08); stroke-width:.5; }
.ge2-inner-ring { fill:#030303; stroke:rgba(255,255,255,.25); stroke-width:.8; }
.ge2-face { stroke:rgba(255,255,255,.1); stroke-width:.45; }

.ge2-warning-arc {
  fill:none;
  stroke-width:2.4;
  opacity:.78;
}

.ge2-major-tick,
.ge2-minor-tick {
  stroke:#f5f1e9;
  stroke-linecap:square;
}

.ge2-major-tick { stroke-width:1.35; }
.ge2-minor-tick { stroke-width:.48; opacity:.84; }

.ge2-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;
}

.ge2-logo {
  opacity:.96;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.9));
}

.ge2-insignia {
  font-family:"Arial Narrow","Segoe UI",Arial,sans-serif;
  font-size:2.7px;
  fill:#dad6cf;
  letter-spacing:.12em;
}

.ge2-brand-text {
  font-family:"Arial Narrow","Segoe UI",Arial,sans-serif;
  font-size:4.2px;
  letter-spacing:.22em;
  fill:#e6ddc9;
}

.ge2-lcd rect {
  fill:#020202;
  stroke:rgba(255,255,255,.09);
  stroke-width:.35;
}

.ge2-lcd-value {
  font-family:Consolas,"Courier New",monospace;
  font-size:8.4px;
  font-weight:600;
  fill:#f7f3eb;
}

.ge2-lcd-units {
  font-family:"Segoe UI",Arial,sans-serif;
  font-size:2.8px;
  fill:#d1ccc3;
  letter-spacing:.12em;
}

.ge2-label {
  font-family:"Arial Narrow","Segoe UI",Arial,sans-serif;
  font-size:2.45px;
  letter-spacing:.17em;
  fill:rgba(255,255,255,.58);
}

.ge2-needle-shadow {
  stroke:#000;
  stroke-width:2.45;
  stroke-linecap:round;
  opacity:.8;
  filter:blur(.55px);
}

.ge2-needle {
  stroke-width:1.55;
  stroke-linecap:round;
  filter:drop-shadow(0 0 1px rgba(255,0,0,.9));
}

.ge2-hub-outer {
  fill:#070707;
  stroke:rgba(255,255,255,.2);
  stroke-width:.75;
}

.ge2-hub-inner {
  fill:#1a1a1a;
  stroke:rgba(0,0,0,.9);
  stroke-width:.45;
}

.ge2-glass-glare {
  fill:rgba(255,255,255,.12);
  opacity:.72;
  pointer-events:none;
}

.ge2-glass-sweep {
  fill:none;
  stroke:rgba(255,255,255,.18);
  stroke-width:.6;
  opacity:.65;
  pointer-events:none;
}

.ge2-carbon-depth {
  fill:url(#ge2CarbonLight);
  opacity:.9;
}

.ge2-face-carbon .ge2-logo,
.ge2-face-carbon .ge2-brand-text,
.ge2-face-carbon .ge2-insignia,
.ge2-face-plainBlack .ge2-logo,
.ge2-face-plainBlack .ge2-brand-text,
.ge2-face-plainBlack .ge2-insignia,
.ge2-face-darkGray .ge2-logo,
.ge2-face-darkGray .ge2-brand-text,
.ge2-face-darkGray .ge2-insignia {
  display:none !important;
}

.ge2-face-vdo .ge2-needle {
  filter:drop-shadow(0 0 3px rgba(255,16,40,.95));
}


/* ===== Sprint 2E Instrument-first UI and user carbon texture ===== */

.ge2-face-carbon .ge2-face {
  stroke: rgba(255,255,255,.20);
  stroke-width: .75;
}

.ge2-face-carbon .ge2-carbon-depth {
  fill: url(#ge2CarbonLight);
  opacity: .72;
}

.ge2-face-carbon .ge2-logo,
.ge2-face-carbon .ge2-brand-text,
.ge2-face-carbon .ge2-insignia,
.ge2-face-carbon .ge2-label {
  display: none !important;
}


/* ===== Gauge Engine 3.0 Styles ===== */

.ge3-wrapper,
.ge3-svg {
  width: 100%;
  height: 100%;
}

.ge3-svg {
  overflow: visible;
  filter: drop-shadow(0 12px 22px rgba(0,0,0,.75));
}

.ge3-shadow { fill:#020202; }
.ge3-outer-ring { stroke:rgba(255,255,255,.15); stroke-width:.5; }
.ge3-ring-groove { fill:#070707; stroke:rgba(255,255,255,.08); stroke-width:.5; }
.ge3-inner-ring { fill:#030303; stroke:rgba(255,255,255,.25); stroke-width:.8; }
.ge3-face { stroke:rgba(255,255,255,.1); stroke-width:.45; }
.ge3-carbon-depth { fill:url(#ge3CarbonLight); opacity:.72; }

.ge3-warning-arc {
  fill:none;
  stroke-width:2.4;
  opacity:.78;
}

.ge3-major-tick,
.ge3-minor-tick {
  stroke:#f5f1e9;
  stroke-linecap:square;
}

.ge3-major-tick { stroke-width:1.35; }
.ge3-minor-tick { stroke-width:.48; opacity:.84; }

.ge3-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;
}

.ge3-logo {
  opacity:.96;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.9));
}

.ge3-insignia {
  font-family:"Arial Narrow","Segoe UI",Arial,sans-serif;
  font-size:2.7px;
  fill:#dad6cf;
  letter-spacing:.12em;
}

.ge3-brand-text {
  font-family:"Arial Narrow","Segoe UI",Arial,sans-serif;
  font-size:4.2px;
  letter-spacing:.22em;
  fill:#e6ddc9;
}

.ge3-lcd rect {
  fill:#020202;
  stroke:rgba(255,255,255,.09);
  stroke-width:.35;
}

.ge3-lcd-value {
  font-family:Consolas,"Courier New",monospace;
  font-size:8.4px;
  font-weight:600;
  fill:#f7f3eb;
}

.ge3-lcd-units {
  font-family:"Segoe UI",Arial,sans-serif;
  font-size:2.8px;
  fill:#d1ccc3;
  letter-spacing:.12em;
}

.ge3-label {
  font-family:"Arial Narrow","Segoe UI",Arial,sans-serif;
  font-size:2.45px;
  letter-spacing:.17em;
  fill:rgba(255,255,255,.58);
}

.ge3-needle-shadow {
  stroke:#000;
  stroke-width:2.45;
  stroke-linecap:round;
  opacity:.8;
  filter:blur(.55px);
}

.ge3-needle {
  stroke-width:1.55;
  stroke-linecap:round;
  filter:drop-shadow(0 0 1px rgba(255,0,0,.9));
}

.ge3-hub-outer {
  fill:#070707;
  stroke:rgba(255,255,255,.2);
  stroke-width:.75;
}

.ge3-hub-inner {
  fill:#1a1a1a;
  stroke:rgba(0,0,0,.9);
  stroke-width:.45;
}

.ge3-glass-glare {
  fill:rgba(255,255,255,.12);
  opacity:.72;
  pointer-events:none;
}

.ge3-glass-sweep {
  fill:none;
  stroke:rgba(255,255,255,.18);
  stroke-width:.6;
  opacity:.65;
  pointer-events:none;
}

.ge3-face-carbon .ge3-logo,
.ge3-face-carbon .ge3-brand-text,
.ge3-face-carbon .ge3-insignia,
.ge3-face-carbon .ge3-label,
.ge3-face-plainBlack .ge3-logo,
.ge3-face-plainBlack .ge3-brand-text,
.ge3-face-plainBlack .ge3-insignia,
.ge3-face-darkGray .ge3-logo,
.ge3-face-darkGray .ge3-brand-text,
.ge3-face-darkGray .ge3-insignia {
  display:none !important;
}

.tool-section-title {
  margin: 12px 0 6px;
  color: #9da8b3;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
}


/* ===== Sprint 3 M2 gauge controls ===== */
#propGaugeMax option[hidden] {
  display: none;
}


/* Exact fix: hide old manual Maximum field if a browser has stale markup */
#propMax {
  display: none !important;
}
label[for="propMax"] {
  display: none !important;
}


/* Low-warning/carbon fix */
.ge2-face-carbon .ge2-svg,
.ge2-face-carbon {
  background: transparent !important;
}

.ge2-face-carbon .ge2-face {
  stroke: rgba(255,255,255,.20);
  stroke-width: .75;
}

.ge2-face-carbon .ge2-carbon-depth {
  fill: url(#ge2CarbonLight);
  opacity: .55;
}


/* ===== Porsche Clock and Compass Widgets ===== */
.pc-widget,
.pc-svg {
  width: 100%;
  height: 100%;
}

.pc-svg {
  overflow: visible;
  filter: drop-shadow(0 12px 22px rgba(0,0,0,.75));
}

.pc-shadow {
  fill: #020202;
}

.pc-outer {
  fill: url(#pcBezel);
  stroke: rgba(255,255,255,.18);
  stroke-width: .5;
}

.pc-inner {
  fill: url(#pcFace);
  stroke: rgba(255,255,255,.22);
  stroke-width: .55;
}

.pc-major,
.pc-minor,

.pc-compass-face {
  fill: #070707;
  stroke: rgba(0,0,0,.95);
  stroke-width: 1.2;
}

.pc-compass-outer-band {
  fill: none;
  stroke: rgba(128,128,128,.46);
  stroke-width: 8.0;
}

.pc-compass-inner-ring {
  fill: none;
  stroke: rgba(190,190,190,.38);
  stroke-width: 4.2;
}

.pc-compass-major,
.pc-compass-minor {
  stroke: #f3f0e8;
  stroke-linecap: square;
}

.pc-major {
  stroke-width: 1.35;
}

.pc-minor {
  stroke-width: .45;
  opacity: .72;
}

.pc-number {
  fill: #f3f0e8;
  font-family: "Arial Narrow","Roboto Condensed","Segoe UI",Arial,sans-serif;
  font-size: 5.2px;
  font-weight: 700;
  paint-order: stroke;
  stroke: #000;
  stroke-width: .25;
}

.pc-red-mark {
  stroke: #ff1028;
  stroke-width: 2.2;
  stroke-linecap: round;
}

.pc-title {
  fill: #e9e6dc;
  font-family: "Arial Narrow","Segoe UI",Arial,sans-serif;
  font-size: 4.1px;
  font-weight: 700;
  letter-spacing: .14em;
  paint-order: stroke;
  stroke: #000;
  stroke-width: .35;
}

.pc-clock-silhouette {
  opacity: .62;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.9));
}

.pc-hour-hand,
.pc-minute-hand {
  stroke: #efefef;
  stroke-linecap: round;
  fill: none;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.95));
}

.pc-hour-hand {
  stroke-width: 3.4;
}

.pc-minute-hand {
  stroke-width: 2.5;
}

.pc-hand-shadow {
  stroke: rgba(0,0,0,.75);
  stroke-width: 4.2;
  stroke-linecap: round;
}

.pc-second-hand {
  stroke: #ff2d2d;
  stroke-width: .8;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.pc-hub-outer {
  fill: #101010;
  stroke: rgba(255,255,255,.22);
  stroke-width: .65;
}

.pc-hub-inner {
  fill: #252525;
  stroke: rgba(0,0,0,.9);
  stroke-width: .4;
}

.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;
}

.pc-compass-major {
  stroke-width: .9;
}

.pc-compass-minor {
  stroke-width: .35;
  opacity: .55;
}

.pc-compass-number {
  fill: #e9e6dc;
  font-family: "Arial Narrow","Segoe UI",Arial,sans-serif;
  font-size: 3.2px;
  font-weight: 600;
  paint-order: stroke;
  stroke: #000;
  stroke-width: .2;
}

.pc-cardinal {
  fill: #f3f0e8;
  font-family: "Segoe UI",Arial,sans-serif;
  font-size: 7.2px;
  font-weight: 800;
  paint-order: stroke;
  stroke: #000;
  stroke-width: .4;
}

.pc-cardinal-n {
  fill: #ff1028;
}

.pc-cardinal-small {
  fill: #e9e6dc;
  font-family: "Segoe UI",Arial,sans-serif;
  font-size: 3.4px;
  font-weight: 700;
  paint-order: stroke;
  stroke: #000;
  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-family: "Segoe UI",Arial,sans-serif;
  font-size: 8.2px;
  font-weight: 500;
  paint-order: stroke;
  stroke: #000;
  stroke-width: .35;
}

.pc-compass-dir {
  fill: #00b7ff;
  font-family: "Segoe UI",Arial,sans-serif;
  font-size: 7.2px;
  font-weight: 700;
  paint-order: stroke;
  stroke: #000;
  stroke-width: .35;
}


/* =========================================================
   Dually Studio Build 1.0.16 - Porsche Clock OEM Assets
   Scope: clock artwork only.
   ========================================================= */

.pc-title,
.pc-number,
.pc-name {
  display: none !important;
}

.pc-porsche-design-asset,
.pc-number-asset,
.pc-clock-hand,
.pc-clock-silhouette {
  pointer-events: none;
}

.pc-porsche-design-asset {
  opacity: .98;
  filter: drop-shadow(0 .6px .45px rgba(0,0,0,.95));
}

.pc-number-asset {
  opacity: .98;
  filter: drop-shadow(0 .5px .4px rgba(0,0,0,.95));
}

.pc-clock-hand {
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.95));
}

.pc-macan-silhouette {
  opacity: .66;
}

.pc-gt3rs-script {
  opacity: .78;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.95));
}

/* Keep the asset hands from mixing with old CSS line hands */
.pc-hour-hand,
.pc-minute-hand,
.pc-hand-shadow {
  display: none !important;
}

/* The asset-based hour/minute hands remain in use, but the seconds hand
   is an SVG line and MUST stay visible when Show Seconds is enabled. */
.pc-second-hand {
  display: block !important;
  stroke: #ff2d2d !important;
  stroke-width: .85 !important;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}


/* =========================================================
   Dually Studio Build 1.0.17
   Fixes:
   - Porsche clock hand direction
   - 75% gauge branding scale
   - corrected Carbon Motorsport face texture
   - optional Porsche Dashboard widget
   ========================================================= */

/* Carbon Motorsport: actual carbon weave stays on the gauge face. */
.ge2-face-carbon .ge2-face {
  stroke: rgba(255,255,255,.20);
  stroke-width: .75;
}

.ge2-face-carbon .ge2-carbon-depth {
  fill: url(#ge2CarbonLight);
  opacity: .45;
  mix-blend-mode: screen;
}

.ge2-face-carbon .ge2-logo,
.ge2-face-carbon .ge2-brand-text,
.ge2-face-carbon .ge2-insignia,
.ge2-face-carbon .ge2-label {
  display: none !important;
}

/* Porsche Dashboard template widget */
.pdash-widget,
.pdash-svg {
  width: 100%;
  height: 100%;
}

.pdash-widget {
  background: #050505;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 14px 32px rgba(0,0,0,.65);
}

.pdash-svg {
  display: block;
}

.pdash-major,
.pdash-minor {
  stroke: #f2efe7;
  stroke-linecap: square;
}

.pdash-major {
  stroke-width: 3;
}

.pdash-minor {
  stroke-width: 1.1;
  opacity: .7;
}

.pdash-needle-shadow {
  stroke: #000;
  stroke-width: 6;
  stroke-linecap: round;
  opacity: .75;
  filter: blur(1px);
}

.pdash-needle {
  stroke: #ff1028;
  stroke-width: 4;
  stroke-linecap: round;
  filter: drop-shadow(0 0 4px rgba(255,16,40,.8));
}

.pdash-clock-hand {
  stroke: #f2efe7;
  stroke-width: 4;
  stroke-linecap: round;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.95));
}

.pdash-value {
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 34px;
  fill: #f2efe7;
  font-weight: 500;
}

.pdash-units,
.pdash-bottom-label {
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 14px;
  fill: rgba(255,255,255,.72);
  letter-spacing: .08em;
}

.pdash-bottom-number {
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 24px;
  fill: #f2efe7;
  font-weight: 400;
}


/* =========================================================
   Dually Studio Build 1.0.18
   - Carbon Motorsport weave reduced from over-zoomed 1.0.17
   - Porsche Dashboard cleaned: no carbon background, no model text
   ========================================================= */

.pdash-widget-clean {
  background:
    radial-gradient(circle at 50% 28%, #22262b, #07090c 70%, #010101);
}

.pdash-widget-clean .pdash-svg {
  background:
    radial-gradient(circle at 50% 28%, #22262b, #07090c 70%, #010101);
}

/* Keep Porsche Dashboard clean. No decorative model/watermark logos. */
.pdash-widget-clean image[href*="macan_turbo_white"],
.pdash-widget-clean image[href*="gt3_rs_white"] {
  display: none !important;
}

/* Carbon Motorsport correction: visible but not comically enlarged. */
.ge2-face-carbon .ge2-carbon-depth {
  opacity: .38;
}


/* =========================================================
   Dually Studio Build 1.0.19
   Porsche dashboard exact layout + Delete support + duller carbon
   ========================================================= */

/* Duller Carbon Motorsport weave */
.ge2-face-carbon .ge2-carbon-depth {
  opacity: .22 !important;
  filter: brightness(.62) contrast(.86) saturate(.72);
  mix-blend-mode: normal !important;
}

.ge2-face-carbon .ge2-face,
.ge3-face-carbon .ge3-face {
  filter: brightness(.82) contrast(.94);
}

/* Porsche Dashboard exact option */
.pdash-widget-exact {
  background: #030405;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 16px 36px rgba(0,0,0,.70);
}

.pdash-widget-exact .pdash-svg {
  display: block;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 50% 36%, #15181c, #030405 72%, #000);
}

.pdash-separator {
  stroke: rgba(255,255,255,.15);
  stroke-width: 1;
}

.pdash-major,
.pdash-minor {
  stroke: #f2efe7;
  stroke-linecap: square;
}

.pdash-major {
  stroke-width: 3;
}

.pdash-minor {
  stroke-width: 1.05;
  opacity: .68;
}

.pdash-scale-label {
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 18px;
  fill: #f2efe7;
  font-weight: 600;
  filter: drop-shadow(0 1px 1px #000);
}

.pdash-brand {
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 18px;
  fill: #f2efe7;
  font-weight: 500;
  letter-spacing: .16em;
}

.pdash-tiny {
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 10px;
  fill: rgba(255,255,255,.76);
}

.pdash-icon {
  font-family: "Segoe UI Symbol", "Segoe UI", Arial, sans-serif;
  font-size: 20px;
  fill: #f2efe7;
  opacity: .92;
}

.pdash-needle-shadow {
  stroke: #000;
  stroke-width: 6;
  stroke-linecap: round;
  opacity: .75;
  filter: blur(1px);
}

.pdash-needle {
  stroke: #ff1028;
  stroke-width: 4;
  stroke-linecap: round;
  filter: drop-shadow(0 0 4px rgba(255,16,40,.76));
}

.pdash-value {
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 34px;
  fill: #f2efe7;
  font-weight: 500;
}

.pdash-units,
.pdash-bottom-label {
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 14px;
  fill: rgba(255,255,255,.72);
  letter-spacing: .08em;
}

.pdash-bottom-number {
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 26px;
  fill: #f2efe7;
  font-weight: 400;
}

.pdash-bottom-icon {
  font-family: "Segoe UI Symbol", "Segoe UI", Arial, sans-serif;
  font-size: 30px;
  fill: #f2efe7;
  opacity: .9;
}

.pdash-help {
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 14px;
  fill: rgba(255,255,255,.75);
}

.pdash-help-key {
  fill: #f2efe7;
  text-decoration: underline;
}

.dually-delete-section {
  margin-top: 16px;
}

.dually-delete-button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(255,255,255,.065), rgba(0,0,0,.20));
  color: rgba(255,255,255,.92);
  font-size: 13px;
  cursor: pointer;
}

.dually-delete-button:hover {
  border-color: rgba(255,80,80,.42);
  background: linear-gradient(180deg, rgba(255,40,40,.16), rgba(0,0,0,.20));
}

.dually-delete-button span {
  color: rgba(255,255,255,.62);
  font-size: 12px;
}


/* =========================================================
   Dually Studio Build 1.0.20
   Substantially darker Carbon Motorsport face
   ========================================================= */

.ge2-face-carbon .ge2-carbon-depth {
  opacity: .14 !important;
  filter: brightness(.34) contrast(.78) saturate(.42) !important;
  mix-blend-mode: normal !important;
}

.ge2-face-carbon .ge2-face {
  filter: brightness(.56) contrast(.90) !important;
}

.ge3-face-carbon .ge3-face {
  filter: brightness(.56) contrast(.90) !important;
}


/* Porsche Dashboard 1.0.20 spacing/readability */
.pdash-widget-exact .pdash-scale-label {
  font-size: 16px;
}

.pdash-widget-exact .pdash-value {
  font-size: 31px;
}

.pdash-widget-exact .pdash-units {
  font-size: 12px;
}


/* =========================================================
   Dually Studio Build 1.0.21
   Porsche asset wordmark + seamless dark carbon
   ========================================================= */

.pdash-porsche-wordmark {
  opacity: .96;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.95));
  pointer-events: none;
}

/* Carbon Motorsport is intentionally very subdued. */
.ge2-face-carbon .ge2-carbon-depth {
  opacity: .18 !important;
  filter: brightness(.50) contrast(.88) saturate(.50) !important;
  mix-blend-mode: normal !important;
}

.ge2-face-carbon .ge2-face,
.ge3-face-carbon .ge3-face {
  filter: brightness(.48) contrast(.90) !important;
}


/* =========================================================
   Dually Studio Build 1.0.22
   GT3 RS cleanup + transparent Porsche Dashboard + signature
   ========================================================= */

.pdash-widget-exact {
  background: transparent !important;
  box-shadow: none !important;
}

.pdash-widget-exact .pdash-svg {
  background: transparent !important;
}

.pdash-signature {
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 15px;
  font-weight: 500;
  fill: rgba(255,255,255,.82);
  letter-spacing: .025em;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.95));
  pointer-events: none;
}


/* =========================================================
   Dually Studio Build 1.0.23
   Persistent numbered dashboard presets
   ========================================================= */

.dually-preset-dock {
  grid-column: 2 / 3;
  display: flex;
  align-items: center;
  min-height: 66px;
  padding: 9px 16px;
  gap: 14px;
  border-top: 1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(0,0,0,.22)),
    #0a0d10;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}

.dually-preset-title {
  flex: 0 0 auto;
  color: rgba(255,255,255,.72);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
}

.dually-preset-save {
  flex: 0 0 auto;
  min-width: 104px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(0,0,0,.20));
  color: rgba(255,255,255,.88);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.dually-preset-save:hover,
.dually-preset-save.active {
  border-color: rgba(255,185,45,.65);
  color: #ffd171;
  box-shadow: 0 0 12px rgba(255,166,0,.13);
}

.dually-preset-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dually-preset-number {
  position: relative;
  width: 42px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 5px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(0,0,0,.26)),
    #101317;
  color: rgba(255,255,255,.65);
  font-family: "Arial Narrow", "Segoe UI", Arial, sans-serif;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 3px 8px rgba(0,0,0,.30);
}

.dually-preset-number:hover {
  color: #fff;
  border-color: rgba(255,255,255,.34);
}

.dually-preset-number.saved {
  color: #f4f1e9;
}

.dually-preset-number.saved::before {
  content: "";
  position: absolute;
  top: 4px;
  right: 4px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,.68);
}

.dually-preset-number.active {
  color: #fff;
  border-color: rgba(255,255,255,.66);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    0 0 12px rgba(255,255,255,.12),
    0 3px 9px rgba(0,0,0,.42);
}

.dually-preset-number.active::after {
  content: "";
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: 3px;
  height: 2px;
  border-radius: 2px;
  background: #e21b1b;
  box-shadow: 0 0 5px rgba(226,27,27,.70);
}

.dually-preset-status {
  min-width: 220px;
  color: rgba(255,255,255,.50);
  font-size: 11px;
  line-height: 1.25;
}

/* Keep the preset bar hidden in full preview mode. */
.preview-mode .dually-preset-dock {
  display: none;
}

@media (max-width: 1200px) {
  .dually-preset-status {
    display: none;
  }

  .dually-preset-dock {
    gap: 9px;
  }

  .dually-preset-number {
    width: 36px;
  }
}


/* =========================================================
   Dually Studio Build 1.0.24
   In-display Porsche-number dashboard preset widget
   ========================================================= */

.runtime-preset-widget {
  width: 100%;
  height: 100%;
  display: grid;
  align-items: center;
  justify-content: center;
  grid-auto-flow: column;
  gap: clamp(7px, 2.3%, 18px);
  padding: 8px 14px;
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(0,0,0,.18)),
    rgba(5, 6, 8, .74);
  border: 1px solid rgba(255,255,255,.13);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    0 7px 18px rgba(0,0,0,.42);
  backdrop-filter: blur(5px);
}

.runtime-preset-count-4 {
  grid-template-columns: repeat(4, minmax(46px, 1fr));
}

.runtime-preset-count-8 {
  grid-template-columns: repeat(8, minmax(36px, 1fr));
}

.runtime-preset-button {
  position: relative;
  min-width: 0;
  height: calc(100% - 4px);
  max-height: 52px;
  padding: 8px 10px 9px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  cursor: pointer;
  opacity: .52;
  transition: opacity .12s ease, transform .12s ease, background .12s ease;
}

.runtime-preset-button img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 30px;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.95)) brightness(.92);
}

.runtime-preset-button.saved {
  opacity: .90;
}

.runtime-preset-button.empty {
  opacity: .30;
}

.runtime-preset-button:hover,
.runtime-preset-button:focus-visible {
  opacity: 1;
  background: rgba(255,255,255,.055);
  outline: none;
}

.runtime-preset-button:active {
  transform: translateY(1px);
}

.runtime-preset-button.active {
  opacity: 1;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(0,0,0,.10));
}

.runtime-preset-button.active::after {
  content: "";
  position: absolute;
  left: 20%;
  right: 20%;
  bottom: 3px;
  height: 2px;
  border-radius: 2px;
  background: #e21b1b;
  box-shadow: 0 0 6px rgba(226,27,27,.78);
}

.preview-mode .runtime-preset-button {
  pointer-events: auto;
}

.dashboard-widget:has(.runtime-preset-widget) {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.dashboard-widget:has(.runtime-preset-widget).selected-widget {
  outline-color: #0094ff;
}


/* =========================================================
   Dually Studio Build 1.0.26
   Transparent widget surrounds + compact preset widget
   ========================================================= */

/* All widget containers are transparent.
   This affects only the space around widgets, not gauge faces. */
.dashboard-widget {
  background: transparent !important;
  box-shadow: none !important;
}

.dashboard-widget:not(.selected-widget) {
  border-color: transparent !important;
}

.dashboard-widget .widget-content,
.dashboard-widget .widget-body,
.dashboard-widget .gauge-widget,
.dashboard-widget .pc-widget,
.dashboard-widget .compass-widget,
.dashboard-widget .pdash-widget {
  background: transparent !important;
}

/* Keep selection visible only while editing. */
.dashboard-widget.selected-widget {
  background: transparent !important;
}

/* Compact, transparent in-display preset widget */
.runtime-preset-widget {
  width: 100%;
  height: 100%;
  display: grid;
  align-items: center;
  justify-content: center;
  grid-auto-flow: column;
  gap: 4px !important;
  padding: 2px 4px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.runtime-preset-count-4 {
  grid-template-columns: repeat(4, minmax(24px, 1fr)) !important;
}

.runtime-preset-count-8 {
  grid-template-columns: repeat(8, minmax(20px, 1fr)) !important;
}

.runtime-preset-button {
  min-width: 0;
  height: 30px !important;
  max-height: 30px !important;
  padding: 3px 5px 5px !important;
  border: 0 !important;
  border-radius: 3px !important;
  background: transparent !important;
  box-shadow: none !important;
}

.runtime-preset-button img {
  width: 100%;
  height: 100%;
  max-height: 19px !important;
  object-fit: contain;
}

.runtime-preset-button:hover,
.runtime-preset-button:focus-visible,
.runtime-preset-button.active {
  background: rgba(255,255,255,.035) !important;
}

.runtime-preset-button.active::after {
  left: 26% !important;
  right: 26% !important;
  bottom: 1px !important;
  height: 1px !important;
}

/* No checkerboard, pattern, or artificial transparency indicator. */
.pdash-widget-exact,
.pdash-widget-exact .pdash-svg,
.runtime-preset-widget,
.dashboard-widget {
  background-image: none !important;
}


/* =========================================================
   Dually Studio 0.9.1 - Background Manager
   The grid remains visible in Studio and disappears in Preview.
   ========================================================= */

.design-surface.has-background-image {
  background-color: #111;
}

.design-surface.has-background-image #dashboardGrid {
  background:
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.07) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,0.07) 1px, transparent 1px);
  background-size:
    20px 20px,
    20px 20px,
    100px 100px,
    100px 100px;
}

.preview-mode #dashboardGrid {
  display: none;
}

.dually-preset-dock { display: none !important; }


/* Background Manager */
.design-surface.has-background-image #dashboardGrid {
  background:
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.07) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,0.07) 1px, transparent 1px);
  background-size:
    20px 20px,
    20px 20px,
    100px 100px,
    100px 100px;
}

.preview-mode #dashboardGrid {
  display: none;
}


/* =========================================================
   Dually Studio 0.9.2
   Porsche header credit + Assets cleanup
   ========================================================= */

@font-face {
  font-family: "911 Porscha";
  src: url("../assets/fonts/911-Porscha.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

.dually-title-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  height: 100%;
  min-width: 0;
}

.dually-title-line {
  display: flex;
  align-items: baseline;
  gap: 18px;
}

.dually-author-credit {
  font-family: "911 Porscha", "Segoe UI", Arial, sans-serif;
  font-size: 18px;
  line-height: 1;
  letter-spacing: .035em;
  color: #e21b1b;
  text-shadow:
    0 1px 0 rgba(255,255,255,.06),
    0 0 8px rgba(226,27,27,.22);
  white-space: nowrap;
}


/* =========================================================
   Dually Studio 0.9.3 - Live Dashboard Memories
   ========================================================= */

/* Every available memory number is full white. */
.runtime-preset-button,
.runtime-preset-button.saved,
.runtime-preset-button.empty {
  opacity: .96 !important;
}

.runtime-preset-button img {
  opacity: 1 !important;
  filter:
    drop-shadow(0 1px 1px rgba(0,0,0,.95))
    brightness(1.12) !important;
}

.runtime-preset-button.active {
  opacity: 1 !important;
}

.runtime-preset-button.active::after {
  background: #e21b1b !important;
  box-shadow: 0 0 7px rgba(226,27,27,.85) !important;
}

/* Larger, unmistakably red authorship credit. */
.dually-author-credit {
  font-size: 25px !important;
  color: #ff1a1a !important;
  font-weight: normal !important;
  letter-spacing: .045em !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.07),
    0 0 10px rgba(255,26,26,.34) !important;
}


/* Dually Studio 0.9.4 - obsolete Resources panel removed */
.resources,
.resource-list,
.resource-panel {
  display: none !important;
}


/* =========================================================
   Dually Studio 0.9.5 - Image Widget
   ========================================================= */

.image-widget-properties {
  display: none;
  margin-bottom: 10px;
}

.inspector-action {
  width: 100%;
  min-height: 34px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 5px;
  background: rgba(255,255,255,.055);
  color: rgba(255,255,255,.90);
  text-align: left;
  padding: 7px 9px;
  cursor: pointer;
}

.inspector-action:hover:not(:disabled) {
  border-color: rgba(255,255,255,.34);
  background: rgba(255,255,255,.085);
}

.image-widget {
  width: 100%;
  height: 100%;
  background: transparent;
}

.image-widget-loaded {
  display: grid;
  place-items: center;
  overflow: visible;
}

.image-widget-loaded img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: center center;
  pointer-events: none;
}

.image-widget-empty {
  display: grid;
  place-items: center;
  text-align: center;
  color: rgba(255,255,255,.58);
  border: 1px dashed rgba(255,255,255,.24);
  border-radius: 5px;
  background: rgba(0,0,0,.09);
}

.image-widget-empty .image-icon {
  font-size: 28px;
  margin-bottom: 6px;
}

.dashboard-widget:has(.image-widget) {
  background: transparent !important;
  box-shadow: none !important;
}


/* =========================================================
   Dually Studio 0.9.6 - Image Upload Clarity
   ========================================================= */

.image-widget-empty {
  cursor: default;
}

.image-widget-empty-inner {
  display: grid;
  place-items: center;
  gap: 7px;
  padding: 12px;
}

.image-empty-title {
  color: rgba(255,255,255,.82);
  font-size: 13px;
  font-weight: 600;
}

.image-widget-choose-button {
  min-width: 128px;
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 5px;
  background: rgba(255,255,255,.075);
  color: rgba(255,255,255,.94);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  pointer-events: auto;
}

.image-widget-choose-button:hover {
  border-color: rgba(255,255,255,.42);
  background: rgba(255,255,255,.12);
}

.image-empty-hint {
  color: rgba(255,255,255,.44);
  font-size: 10px;
}


/* =========================================================
   Dually Studio 0.9.7 - Image button event fix
   ========================================================= */

.image-widget-choose-button {
  position: relative;
  z-index: 50;
  pointer-events: auto !important;
  cursor: pointer !important;
}

.image-widget-empty-inner {
  position: relative;
  z-index: 40;
  pointer-events: auto;
}

.image-widget-empty {
  pointer-events: auto;
}


/* =========================================================
   Dually Studio 0.9.8 - Image Widget Complete
   ========================================================= */

.image-property-row {
  margin-bottom: 12px;
}

.image-property-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
}

.image-property-heading label {
  margin: 0;
}

.image-property-heading span {
  color: rgba(255,255,255,.70);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.image-reset-button,
.image-layer-button {
  min-height: 29px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 4px;
  background: rgba(255,255,255,.045);
  color: rgba(255,255,255,.78);
  font-size: 11px;
  cursor: pointer;
}

.image-reset-button {
  width: 100%;
  margin-top: 5px;
}

.image-reset-button:hover:not(:disabled),
.image-layer-button:hover:not(:disabled) {
  border-color: rgba(255,255,255,.30);
  background: rgba(255,255,255,.08);
  color: #fff;
}

.image-layer-controls {
  margin-top: 12px;
}

.image-layer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 5px;
}

.design-surface.image-drop-active::after {
  content: "Drop image to add";
  position: absolute;
  inset: 12px;
  z-index: 1000;
  display: grid;
  place-items: center;
  border: 2px dashed rgba(255,255,255,.58);
  border-radius: 14px;
  background: rgba(0,0,0,.36);
  color: rgba(255,255,255,.92);
  font-size: 20px;
  font-weight: 600;
  pointer-events: none;
}

.image-widget-empty {
  transition: border-color .12s ease, background .12s ease;
}

.image-widget-empty:hover {
  border-color: rgba(255,255,255,.42);
  background: rgba(255,255,255,.035);
}


/* =========================================================
   Dually Studio 0.9.8b - Image Inspector controls
   ========================================================= */

.image-widget-properties {
  display: none;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.image-widget-properties input[type="range"] {
  width: 100%;
  pointer-events: auto;
  cursor: pointer;
}

.image-widget-properties button,
.image-widget-properties select,
.image-widget-properties input {
  pointer-events: auto;
}


/* =========================================================
   Dually Studio 0.9.9 - Reset All + Screen Power
   ========================================================= */

.danger-toolbar-button {
  border-color: rgba(255,72,72,.38) !important;
  color: #ff7c7c !important;
}

.danger-toolbar-button:hover {
  border-color: rgba(255,72,72,.75) !important;
  background: rgba(255,40,40,.13) !important;
  color: #fff !important;
}

.screen-power-widget {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: #00e676;
  cursor: pointer;
  pointer-events: auto;
}

.screen-power-widget span {
  display: block;
  font-family: "Segoe UI Symbol", "Segoe UI", Arial, sans-serif;
  font-size: min(72cqw, 72cqh);
  line-height: 1;
  filter:
    drop-shadow(0 0 4px rgba(0,230,118,.60))
    drop-shadow(0 0 11px rgba(0,230,118,.20));
  pointer-events: none;
}

.dashboard-widget:has(.screen-power-widget) {
  container-type: size;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.dashboard-widget:has(.screen-power-widget).selected-widget {
  outline-color: #00e676;
}

.dually-blackout-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: none;
  background: #000;
  cursor: pointer;
  touch-action: manipulation;
}

.dually-blackout-overlay.active {
  display: block;
}

.dually-blackout-active {
  overflow: hidden;
}


/* =========================================================
   Dually Studio 0.9.10 - Label Widget
   ========================================================= */

.label-widget-properties {
  display: none;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.label-widget-properties textarea {
  width: 100%;
  min-height: 68px;
  box-sizing: border-box;
  resize: vertical;
}

.label-widget-properties input[type="range"] {
  width: 100%;
}

.label-property-row {
  margin-top: 10px;
}

.label-property-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
}

.label-property-heading label {
  margin: 0;
}

.label-property-heading span {
  color: rgba(255,255,255,.68);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.label-widget {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 4px 8px;
  white-space: normal;
  overflow: visible;
  line-height: 1.05;
  transform-origin: center center;
  background: transparent;
}

.dashboard-widget:has(.label-widget) {
  background: transparent !important;
  box-shadow: none !important;
}

.label-inline-editing {
  outline: 1px dashed rgba(255,255,255,.55);
  background: rgba(0,0,0,.22);
  cursor: text;
  user-select: text;
}


/* =========================================================
   Dually Studio 0.9.11.1 - Duplicate Widget
   ========================================================= */

.dually-context-menu {
  position: fixed;
  z-index: 1000000;
  display: none;
  min-width: 150px;
  padding: 5px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 6px;
  background: rgba(18,20,24,.98);
  box-shadow: 0 10px 28px rgba(0,0,0,.48);
  backdrop-filter: blur(8px);
}

.dually-context-menu.open {
  display: block;
}

.dually-context-menu button {
  width: 100%;
  min-height: 34px;
  padding: 7px 10px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: rgba(255,255,255,.90);
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.dually-context-menu button:hover,
.dually-context-menu button:focus {
  background: rgba(255,255,255,.09);
  color: #fff;
  outline: none;
}


/* Dually Studio 0.9.11.3 RC1 - X/Y Position */
.position-properties {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 6px 8px;
  align-items: center;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.position-properties label {
  margin: 0;
  color: rgba(255,255,255,.65);
  font-size: 11px;
}

.position-properties input {
  width: 100%;
  box-sizing: border-box;
}


/* Dually Studio 0.9.11.4 - Grid and Snap */
.design-surface.grid-hidden #dashboardGrid {
  display: none !important;
}

#gridToggleButton[aria-pressed="true"],
#snapToggleButton[aria-pressed="true"] {
  border-color: rgba(0,230,118,.42);
  color: #72ffad;
}

#gridToggleButton[aria-pressed="false"],
#snapToggleButton[aria-pressed="false"] {
  color: rgba(255,255,255,.52);
}


/* Dually Studio 0.9.11.5 - Width and Height */
.position-properties {
  grid-template-columns: 46px 1fr;
}


/* Dually Studio 0.9.11.6 - Exact Rotation */
#propExactRotation {
  width: 100%;
  box-sizing: border-box;
}


/* =========================================================
   Dually Studio 0.9.11.7b - Correct Layers Layout
   ========================================================= */

.layers-sidebar {
  grid-area: layers;
  min-width: 0;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border-right: 1px solid var(--border);
  background: var(--panel);
}

.layers-sidebar-header {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 10px;
  border-bottom: 1px solid var(--border);
}

.layers-sidebar-header h3 {
  margin: 0;
}

#toggleLayersButton {
  width: 26px;
  min-width: 26px;
  height: 26px;
  padding: 0;
}

.layers-list {
  height: calc(100% - 44px);
  min-height: 0;
  overflow-y: auto;
  padding: 8px;
}

.layers-sidebar.collapsed {
  width: 40px;
  min-width: 40px;
}

.layers-sidebar.collapsed h3,
.layers-sidebar.collapsed .layers-list {
  display: none;
}

.layers-sidebar.collapsed .layers-sidebar-header {
  justify-content: center;
  padding: 0 6px;
}

.toolbox,
.workspace,
.inspector {
  min-height: 0;
}

.toolbox,
.inspector {
  overflow-y: auto;
}

.bottom-panel,
.resources {
  display: none !important;
}

.statusbar {
  min-height: 26px;
  max-height: 26px;
  margin: 0;
}

body.preview-mode .layers-sidebar {
  display: none !important;
}


/* =========================================================
   Dually Studio 0.9.11.8 - Preview Workspace
   ========================================================= */

body.preview-mode .titlebar,
body.preview-mode .menubar,
body.preview-mode .toolbar,
body.preview-mode .toolbox,
body.preview-mode .layers-sidebar,
body.preview-mode .inspector,
body.preview-mode .statusbar {
  display: none !important;
}

body.preview-mode .studio {
  display: block !important;
  width: 100vw;
  height: 100vh;
}

body.preview-mode .workspace {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  overflow: hidden !important;
  background: #000 !important;
}

body.preview-mode .surface-wrap {
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
}

body.preview-mode .display-frame {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  aspect-ratio: auto !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

body.preview-mode .design-surface {
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  border-radius: 0 !important;
}

body.preview-mode #dashboardGrid,
body.preview-mode #guideLayer,
body.preview-mode .resize-handle {
  display: none !important;
}

body.preview-mode .selected-widget,
body.preview-mode .dashboard-widget {
  outline: none !important;
  box-shadow: none !important;
}

.back-to-design-button {
  position: fixed;
  z-index: 100000;
  top: 14px;
  right: 14px;
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 6px;
  background: rgba(15,15,17,.82);
  color: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,.42);
  backdrop-filter: blur(8px);
}

.back-to-design-button:hover {
  background: rgba(35,35,38,.94);
}

body:not(.preview-mode) .back-to-design-button {
  display: none !important;
}


/* =========================================================
   Dually Studio 0.9.11.9 - Preview Startup Sweep
   ========================================================= */

body.preview-mode .gauge-needle,
body.preview-mode .ge2-needle,
body.preview-mode [class*="needle"] {
  transition: transform 70ms linear;
}


/* =========================================================
   Dually Studio 0.9.12.0 - Preview Ignition States
   ========================================================= */

.preview-ignition-toolbar {
  position: fixed;
  z-index: 100001;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 8px;
  background: rgba(15,15,17,.84);
  box-shadow: 0 8px 24px rgba(0,0,0,.42);
  backdrop-filter: blur(8px);
}

.preview-ignition-toolbar button {
  min-width: 58px;
}

#ignitionStateLabel {
  min-width: 44px;
  padding: 0 7px;
  color: #72ffad;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.ignition-off-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  background: #000;
}

.ignition-off-overlay.active {
  display: block;
}

body:not(.preview-mode) .preview-ignition-toolbar,
body:not(.preview-mode) .ignition-off-overlay {
  display: none !important;
}

body.preview-mode[data-ignition-state="acc"] .dashboard-widget {
  filter: brightness(.72);
}

body.preview-mode[data-ignition-state="run"] .dashboard-widget,
body.preview-mode[data-ignition-state="start"] .dashboard-widget {
  filter: none;
}


/* =========================================================
   Dually Studio 0.9.12.1 - Preview Simulator
   ========================================================= */

.preview-toolbar-divider {
  width: 1px;
  height: 24px;
  margin: 0 2px;
  background: rgba(255,255,255,.18);
}

#simulatorStateLabel {
  min-width: 48px;
  padding: 0 7px;
  color: #ffd166;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}


/* =========================================================
   Dually Studio 0.9.12.2 - RPM Screen Warning
   ========================================================= */

.rpm-warning-control {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: rgba(255,255,255,.75);
  font-size: 12px;
  white-space: nowrap;
}

.rpm-warning-control input {
  width: 78px;
  margin: 0;
  padding: 5px 6px;
}

#rpmWarningToggleButton[aria-pressed="true"] {
  border-color: rgba(255,70,70,.55);
  color: #ff8a8a;
}

#rpmWarningToggleButton[aria-pressed="false"] {
  color: rgba(255,255,255,.52);
}

.preview-rpm-flash-overlay {
  position: fixed;
  inset: 0;
  z-index: 99998;
  pointer-events: none;
  background: #ff0000;
  opacity: 0;
}

.preview-rpm-flash-overlay.active {
  animation: previewRpmFlash 280ms ease-out;
}

@keyframes previewRpmFlash {
  0% {
    opacity: .72;
  }

  100% {
    opacity: 0;
  }
}

/* Keep the RPM flash overlay available in both Design and Preview.
   Its normal opacity is zero, so it remains invisible until triggered. */


/* =========================================================
   Dually Studio 0.9.12.3 - Gauge Behavior Panel
   ========================================================= */

.gauge-behavior-panel {
  display: none;
  margin-top: 12px;
}

.gauge-behavior-panel > summary {
  color: #fff;
}

.behavior-subsection {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 5px;
  background: rgba(0,0,0,.16);
}

.behavior-subsection h4 {
  margin: 0 0 8px;
  color: rgba(255,255,255,.86);
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.behavior-subsection button {
  width: 100%;
  margin-top: 10px;
}

/* RPM controls now belong to the editor, not the Preview simulator. */
.rpm-warning-control,
#rpmWarningToggleButton {
  display: none !important;
}


/* Dually Studio 0.9.12.4a - Safe Runtime Behavior */
.preview-rpm-flash-overlay {
  transition: opacity 15ms linear;
}

.preview-rpm-flash-overlay.active {
  animation: none !important;
  opacity: .72;
}


/* Dually Studio 0.9.12.4b - Test Triple Flash Fix */
.preview-rpm-flash-overlay {
  display: block !important;
  z-index: 1000000 !important;
}


/* =========================================================
   Dually Studio 0.9.12.5 - Project Validation
   ========================================================= */

.validation-dialog {
  position: fixed;
  inset: 0;
  z-index: 2000000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0,0,0,.68);
  backdrop-filter: blur(5px);
}

.validation-dialog[hidden] {
  display: none !important;
}

.validation-card {
  width: min(620px, 94vw);
  max-height: 84vh;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 10px;
  background: #222225;
  box-shadow: 0 22px 60px rgba(0,0,0,.62);
}

.validation-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.validation-header h2 {
  margin: 0;
  font-size: 17px;
}

#closeValidationButton {
  width: 32px;
  height: 32px;
  padding: 0;
  font-size: 22px;
}

.validation-summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.validation-summary strong {
  font-size: 16px;
}

.validation-summary span {
  color: rgba(255,255,255,.67);
  font-size: 12px;
}

.validation-summary.ready strong {
  color: #72ffad;
}

.validation-summary.warning strong {
  color: #ffd166;
}

.validation-summary.error strong {
  color: #ff7777;
}

.validation-results {
  max-height: 60vh;
  overflow-y: auto;
  padding: 10px;
}

.validation-item {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 8px;
  align-items: center;
  padding: 9px 10px;
  margin-bottom: 6px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 6px;
  background: rgba(255,255,255,.025);
  font-size: 13px;
}

.validation-icon {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-weight: 800;
}

.validation-item.pass .validation-icon {
  background: rgba(0,230,118,.16);
  color: #72ffad;
}

.validation-item.warning .validation-icon {
  background: rgba(255,209,102,.16);
  color: #ffd166;
}

.validation-item.error .validation-icon {
  background: rgba(255,80,80,.17);
  color: #ff7777;
}


/* =========================================================
   Dually Studio 0.9.12.6 - Project System
   ========================================================= */

.project-menu {
  position: relative;
}

.menubar-button {
  min-height: 24px;
  padding: 2px 8px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
}

.menubar-button:hover,
.menubar-button[aria-expanded="true"] {
  background: rgba(255,255,255,.09);
}

.project-menu-dropdown {
  position: absolute;
  z-index: 100000;
  top: calc(100% + 4px);
  left: 0;
  width: 210px;
  padding: 6px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 6px;
  background: rgba(28,28,30,.98);
  box-shadow: 0 14px 34px rgba(0,0,0,.5);
}

.project-menu-dropdown[hidden] {
  display: none !important;
}

.project-menu-dropdown button {
  width: 100%;
  min-height: 32px;
  padding: 6px 9px;
  border: 0;
  background: transparent;
  text-align: left;
}

.project-menu-dropdown button:hover {
  background: rgba(255,255,255,.08);
}

.project-menu-separator {
  height: 1px;
  margin: 5px 3px;
  background: rgba(255,255,255,.10);
}

.project-settings-dialog {
  position: fixed;
  inset: 0;
  z-index: 2100000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0,0,0,.68);
  backdrop-filter: blur(5px);
}

.project-settings-dialog[hidden] {
  display: none !important;
}

.project-settings-card {
  width: min(560px, 94vw);
  max-height: 88vh;
  overflow: auto;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 10px;
  background: #222225;
  box-shadow: 0 22px 60px rgba(0,0,0,.62);
}

.project-settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.project-settings-header h2 {
  margin: 0;
  font-size: 17px;
}

#closeProjectSettingsButton,
#closeCommunityShareButton {
  width: 32px;
  height: 32px;
  padding: 0;
  font-size: 22px;
}

.project-settings-body {
  padding: 14px 16px;
}

.project-settings-body textarea {
  width: 100%;
  margin-top: 4px;
  resize: vertical;
  background: #1b1b1c;
  color: var(--text);
  border: 1px solid #555;
  border-radius: 4px;
  padding: 7px;
  font: inherit;
}

.project-settings-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px 16px;
}

.community-share-card {
  width: min(620px, 94vw);
}

.community-share-body p {
  margin: 0 0 14px;
  color: rgba(255,255,255,.72);
  line-height: 1.45;
}

.community-share-description-footer {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 6px;
  color: rgba(255,255,255,.58);
}

.community-share-description-error {
  margin: 9px 0 0 !important;
  color: #ff8484 !important;
  font-weight: 700;
}

.community-share-confirm-button {
  border-color: #35d66c;
  background: #138a3d;
  color: #fff;
  font-weight: 800;
}

.community-share-confirm-button:hover {
  border-color: #63ee91;
  background: #18a94c;
}

#communityShareDescription[aria-invalid="true"] {
  border-color: #ff5f5f;
  box-shadow: 0 0 0 2px rgba(255,95,95,.16);
}

.statusbar {
  white-space: nowrap;
  overflow: hidden;
}

.statusbar span {
  overflow: hidden;
  text-overflow: ellipsis;
}


/* Dually Studio 0.9.12.6b - Functional Menus */
.studio-menu {
  position: relative;
}

.studio-menu-dropdown {
  left: 0;
}

.insert-menu-dropdown {
  max-height: 62vh;
  overflow-y: auto;
}

.studio-info-list {
  display: grid;
  gap: 8px;
}

.studio-info-list > div {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}


/* =========================================================
   Dually Studio 0.9.12.7 - Dashboard Package Build
   ========================================================= */

.validation-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px 16px;
  border-top: 1px solid rgba(255,255,255,.08);
}

#exportDuallyButton:not(:disabled) {
  border-color: rgba(0,230,118,.42);
  color: #72ffad;
}

#exportDuallyButton:disabled {
  cursor: not-allowed;
  opacity: .48;
}


/* =========================================================
   Dually Studio 0.9.12.8 - Porsche Wallpaper Library
   ========================================================= */

#dashboardBackgroundLayer {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  transform-origin: center;
}

#animatedWallpaperCanvas {
  display: block;
  width: 100%;
  height: 100%;
}

#animatedWallpaperCanvas[hidden] {
  display: none;
}

#dashboardBackgroundLayer.canvas-animated-wallpaper {
  background: #050608;
}

.animated-wallpaper {
  isolation: isolate;
  background-color: #050608;
}

.animated-wallpaper::before,
.animated-wallpaper::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.animated-wallpaper-carbon-light-sweep {
  background:
    radial-gradient(circle at 18% 32%, rgba(116,137,153,.16), transparent 34%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.018) 0 2px, transparent 2px 12px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.18) 0 2px, transparent 2px 12px),
    linear-gradient(115deg, #020304 0%, #10151a 48%, #030405 100%);
}

.animated-wallpaper-carbon-light-sweep::before,
.animated-wallpaper-brushed-metal-shimmer::before {
  z-index: 1;
  top: -35%;
  bottom: -35%;
  left: -58%;
  width: 48%;
  background: linear-gradient(90deg, transparent, rgba(190,220,236,.15), rgba(255,255,255,.07), transparent);
  filter: blur(18px);
  transform: skewX(-18deg);
  animation: dually-sweep-horizontal 9s linear infinite;
}

.animated-wallpaper-motorsport-redline {
  background:
    radial-gradient(circle at 76% 50%, rgba(226,12,31,.25), transparent 37%),
    linear-gradient(122deg, #030304, #170407 55%, #020203);
}

.animated-wallpaper-motorsport-redline::before {
  inset: -35% auto -35% -42%;
  width: 34%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), rgba(237,22,44,.48), rgba(255,255,255,.16), transparent);
  filter: blur(7px);
  transform: skewX(-24deg);
  animation: dually-redline-pass 7.5s ease-in-out infinite;
}

.animated-wallpaper-gulf-917-flow {
  background: linear-gradient(118deg, #06131c, #276f84 50%, #07131b);
}

.animated-wallpaper-gulf-917-flow::before {
  inset: -60% -30%;
  background: linear-gradient(90deg, transparent 35%, rgba(255,255,255,.88) 35% 36%, #f58220 36% 45%, rgba(255,255,255,.88) 45% 46%, transparent 46%);
  transform: rotate(-14deg) translateX(-22%);
  animation: dually-gulf-flow 12s ease-in-out infinite alternate;
  opacity: .72;
}

.animated-wallpaper-chequered-flag-drift {
  background-color: #080a0d;
  background-image:
    linear-gradient(45deg, rgba(255,255,255,.075) 25%, transparent 25% 75%, rgba(255,255,255,.075) 75%),
    linear-gradient(45deg, rgba(255,255,255,.075) 25%, transparent 25% 75%, rgba(255,255,255,.075) 75%);
  background-position: 0 0, 36px 36px;
  background-size: 72px 72px;
  animation: dually-checker-drift 18s linear infinite;
}

.animated-wallpaper-chequered-flag-drift::before {
  inset: 0;
  background: radial-gradient(circle at 28% 48%, rgba(255,29,51,.16), transparent 34%);
}

.animated-wallpaper-apex-racing-line {
  background: radial-gradient(ellipse at center, #17212a, #050608 72%);
}

.animated-wallpaper-apex-racing-line::before {
  left: -12%;
  top: 24%;
  width: 124%;
  height: 82%;
  border: 5px solid rgba(245,40,58,.34);
  border-left-color: transparent;
  border-bottom-color: rgba(255,255,255,.08);
  border-radius: 50%;
  filter: drop-shadow(0 0 12px rgba(245,40,58,.25));
  animation: dually-apex-breathe 8s ease-in-out infinite;
}

.animated-wallpaper-brake-rotor-glow {
  background:
    repeating-radial-gradient(circle at 68% 50%, transparent 0 42px, rgba(171,184,195,.09) 44px 47px, transparent 49px 74px),
    radial-gradient(circle at 68% 50%, rgba(247,62,35,.24), transparent 18%, #090b0e 45%, #030405 74%);
}

.animated-wallpaper-brake-rotor-glow::before {
  width: 34%;
  aspect-ratio: 1;
  right: 15%;
  top: 50%;
  translate: 0 -50%;
  border: 3px dashed rgba(219,227,232,.16);
  border-radius: 50%;
  box-shadow: 0 0 38px rgba(255,54,26,.16) inset;
  animation: dually-rotor-spin 16s linear infinite;
}

.animated-wallpaper-telemetry-grid-scan,
.animated-wallpaper-blueprint-engineering {
  background-color: #061019;
  background-image:
    linear-gradient(rgba(43,168,224,.105) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43,168,224,.105) 1px, transparent 1px),
    radial-gradient(circle at 72% 44%, rgba(22,118,170,.24), transparent 32%);
  background-size: 48px 48px, 48px 48px, auto;
}

.animated-wallpaper-telemetry-grid-scan::before {
  inset: -12% 0 auto;
  height: 15%;
  background: linear-gradient(transparent, rgba(62,218,255,.20), transparent);
  filter: blur(6px);
  animation: dually-scan-down 7s linear infinite;
}

.animated-wallpaper-blueprint-engineering {
  background-color: #07182a;
}

.animated-wallpaper-blueprint-engineering::before {
  width: 36%;
  aspect-ratio: 1;
  right: 14%;
  top: 50%;
  translate: 0 -50%;
  border: 1px solid rgba(99,206,255,.25);
  border-radius: 50%;
  background:
    linear-gradient(90deg, transparent 49.7%, rgba(99,206,255,.22) 50%, transparent 50.3%),
    linear-gradient(transparent 49.7%, rgba(99,206,255,.22) 50%, transparent 50.3%),
    repeating-radial-gradient(circle, transparent 0 34px, rgba(99,206,255,.12) 35px 36px);
  animation: dually-blueprint-turn 24s linear infinite;
}

.animated-wallpaper-signal-wave {
  background:
    radial-gradient(ellipse at 20% 50%, rgba(0,204,224,.20), transparent 35%),
    repeating-radial-gradient(ellipse at 0 50%, transparent 0 42px, rgba(50,220,234,.08) 44px 46px, transparent 48px 88px),
    linear-gradient(90deg, #02090c, #07232a, #020507);
  background-size: auto, 125% 160%, auto;
  animation: dually-signal-travel 12s linear infinite;
}

.animated-wallpaper-signal-wave::before {
  inset: 49% 0 auto;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(73,238,242,.56), transparent);
  box-shadow: 0 0 15px rgba(73,238,242,.45);
  animation: dually-signal-pulse 4s ease-in-out infinite;
}

.animated-wallpaper-brushed-metal-shimmer {
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 5px),
    linear-gradient(105deg, #080a0c, #333a40 48%, #090b0d);
}

.animated-wallpaper-stuttgart-heritage-stripes {
  background: linear-gradient(120deg, #050608, #171a1d 52%, #050608);
}

.animated-wallpaper-stuttgart-heritage-stripes::before {
  inset: -45% -20%;
  background: linear-gradient(90deg, transparent 36%, rgba(255,255,255,.72) 36% 37%, #d7192d 37% 42%, #111 42% 46%, #d6a20d 46% 50%, rgba(255,255,255,.72) 50% 51%, transparent 51%);
  transform: rotate(-13deg) translateX(-4%);
  opacity: .42;
  animation: dually-heritage-drift 14s ease-in-out infinite alternate;
}

.animated-wallpaper-weissach-carbon-pulse {
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.025) 0 3px, transparent 3px 13px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.30) 0 3px, transparent 3px 13px),
    linear-gradient(120deg, #020303, #151819, #020303);
}

.animated-wallpaper-weissach-carbon-pulse::before {
  inset: 0 auto 0 14%;
  width: 4px;
  background: #d7192d;
  box-shadow: 0 0 12px rgba(215,25,45,.72), 0 0 55px rgba(215,25,45,.30);
  animation: dually-weissach-pulse 4.8s ease-in-out infinite;
}

.animated-wallpaper-guards-red-horizon {
  background: radial-gradient(ellipse at 50% 82%, rgba(229,25,45,.45), transparent 42%), linear-gradient(#030304, #170407 70%, #050203);
}

.animated-wallpaper-guards-red-horizon::before {
  inset: auto 6% 22%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,73,87,.78), transparent);
  box-shadow: 0 0 22px rgba(255,38,58,.58);
  animation: dually-horizon-glow 6s ease-in-out infinite;
}

.animated-wallpaper-racing-yellow-beacon {
  background: radial-gradient(circle at 72% 50%, rgba(255,205,0,.34), transparent 31%), linear-gradient(112deg, #030303, #1a1705, #020202);
}

.animated-wallpaper-racing-yellow-beacon::before {
  inset: -45% auto -45% -42%;
  width: 42%;
  background: linear-gradient(90deg, transparent, rgba(255,210,20,.23), rgba(255,243,170,.12), transparent);
  filter: blur(13px);
  transform: skewX(-18deg);
  animation: dually-yellow-beacon 10s ease-in-out infinite;
}

.animated-wallpaper-volcano-grey-rings {
  background: radial-gradient(circle at 68% 50%, #343a40, #111418 38%, #030405 72%);
}

.animated-wallpaper-volcano-grey-rings::before {
  width: 46%;
  aspect-ratio: 1;
  right: 9%;
  top: 50%;
  translate: 0 -50%;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 38px, rgba(221,229,235,.11) 40px 42px, transparent 44px 72px);
  animation: dually-rings-breathe 9s ease-in-out infinite;
}

.animated-wallpaper-drag-tree-sequence {
  background:
    radial-gradient(circle at 72% 50%, rgba(255,183,0,.10), transparent 24%),
    linear-gradient(120deg, #030404, #101315 55%, #020303);
}

.animated-wallpaper-drag-tree-sequence::before {
  left: 70%;
  top: 5%;
  width: 7%;
  height: 90%;
  border: 2px solid rgba(210,218,222,.16);
  border-radius: 999px;
  background: linear-gradient(90deg, #050607, #252a2d 50%, #050607);
  box-shadow: 0 0 28px rgba(0,0,0,.8);
}

.animated-wallpaper-drag-tree-sequence::after {
  left: calc(73.5% - 11px);
  top: 12%;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  animation: dually-drag-tree-cycle 3.2s steps(1) infinite;
}

.animated-wallpaper-led-shift-sweep {
  background:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    radial-gradient(ellipse at 50% 52%, #182026, #030405 72%);
  background-size: 100% 52px, auto;
}

.animated-wallpaper-led-shift-sweep::before {
  left: 7%;
  right: 7%;
  top: 47%;
  height: 34px;
  background:
    radial-gradient(circle, rgba(123,255,80,.85) 0 24%, rgba(31,92,35,.55) 27% 39%, transparent 42%) 0 0 / 56px 34px repeat-x;
  filter: drop-shadow(0 0 9px rgba(87,255,64,.32));
}

.animated-wallpaper-led-shift-sweep::after {
  left: 7%;
  top: 47%;
  width: 24%;
  height: 34px;
  background: linear-gradient(90deg, transparent, rgba(88,255,68,.72), #ffd000, #ff2438, transparent);
  filter: blur(7px);
  mix-blend-mode: screen;
  animation: dually-led-shift-sweep 4.6s ease-in-out infinite;
}

.animated-wallpaper-gforce-vector-field {
  background:
    linear-gradient(rgba(57,210,255,.065) 1px, transparent 1px),
    linear-gradient(90deg, rgba(57,210,255,.065) 1px, transparent 1px),
    radial-gradient(circle at center, #10232a, #030607 68%);
  background-size: 58px 58px, 58px 58px, auto;
}

.animated-wallpaper-gforce-vector-field::before {
  left: 50%;
  top: 50%;
  width: 42%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border: 2px solid rgba(72,216,255,.18);
  border-radius: 50%;
  background:
    linear-gradient(90deg, transparent 49.7%, rgba(72,216,255,.22) 50%, transparent 50.3%),
    linear-gradient(transparent 49.7%, rgba(72,216,255,.22) 50%, transparent 50.3%),
    repeating-radial-gradient(circle, transparent 0 42px, rgba(72,216,255,.10) 44px 46px);
}

.animated-wallpaper-gforce-vector-field::after {
  left: calc(50% - 10px);
  top: calc(50% - 10px);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #60f4ff;
  box-shadow: 0 0 8px #60f4ff, 0 0 35px rgba(96,244,255,.75);
  animation: dually-gforce-vector 8s ease-in-out infinite;
}

.animated-wallpaper-gps-lap-trace-pulse {
  background:
    linear-gradient(rgba(72,146,196,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(72,146,196,.05) 1px, transparent 1px),
    radial-gradient(ellipse at center, #0b1a22, #020405 74%);
  background-size: 64px 64px, 64px 64px, auto;
}

.animated-wallpaper-gps-lap-trace-pulse::before {
  left: 14%;
  top: 17%;
  width: 72%;
  height: 62%;
  border: 5px solid rgba(57,235,171,.34);
  border-left-color: transparent;
  border-bottom-color: rgba(57,235,171,.13);
  border-radius: 48% 41% 52% 39%;
  filter: drop-shadow(0 0 12px rgba(57,235,171,.23));
  transform: rotate(-8deg);
}

.animated-wallpaper-gps-lap-trace-pulse::after {
  left: 17%;
  top: 68%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 9px #fff, 0 0 28px #39ebab;
  animation: dually-lap-trace-dot 7.5s ease-in-out infinite;
}

.animated-wallpaper-topographic-contour-drift {
  background-color: #06100b;
  background-image:
    repeating-radial-gradient(ellipse at 24% 42%, transparent 0 28px, rgba(111,220,139,.115) 30px 32px, transparent 34px 58px),
    repeating-radial-gradient(ellipse at 76% 68%, transparent 0 42px, rgba(177,231,145,.085) 44px 46px, transparent 48px 82px),
    linear-gradient(125deg, #020705, #10261a 52%, #030706);
  background-size: 122% 126%, 135% 140%, auto;
  animation: dually-topo-drift 18s ease-in-out infinite alternate;
}

.animated-wallpaper-topographic-contour-drift::before {
  inset: 0;
  background: linear-gradient(110deg, transparent 35%, rgba(146,255,176,.07), transparent 64%);
  animation: dually-sweep-horizontal 14s linear infinite;
}

.animated-wallpaper-satellite-orbit-scan {
  background:
    radial-gradient(circle at 68% 50%, rgba(31,121,191,.48), rgba(6,31,56,.36) 10%, transparent 11%),
    radial-gradient(circle at 68% 50%, #071525, #010307 60%);
}

.animated-wallpaper-satellite-orbit-scan::before {
  width: 42%;
  aspect-ratio: 1;
  right: 11%;
  top: 50%;
  translate: 0 -50%;
  border: 2px solid rgba(115,202,255,.23);
  border-radius: 50%;
  box-shadow: 0 0 0 48px rgba(115,202,255,.06), 0 0 0 96px rgba(115,202,255,.04);
  background: conic-gradient(from 0deg, rgba(93,201,255,.38), transparent 14% 82%, rgba(93,201,255,.12));
  animation: dually-satellite-orbit 14s linear infinite;
}

.animated-wallpaper-satellite-orbit-scan::after {
  right: 30%;
  top: 16%;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: #d7f2ff;
  box-shadow: -14px 0 0 -4px #7acfff, 14px 0 0 -4px #7acfff, 0 0 20px #5cc9ff;
  animation: dually-satellite-blink 2.4s ease-in-out infinite;
}

.animated-wallpaper-gps-constellation-lock {
  background:
    radial-gradient(circle at 17% 23%, rgba(137,227,255,.65) 0 2px, transparent 3px),
    radial-gradient(circle at 34% 67%, rgba(137,227,255,.46) 0 2px, transparent 3px),
    radial-gradient(circle at 61% 21%, rgba(137,227,255,.58) 0 2px, transparent 3px),
    radial-gradient(circle at 81% 69%, rgba(137,227,255,.54) 0 2px, transparent 3px),
    radial-gradient(circle at 73% 38%, rgba(137,227,255,.46) 0 2px, transparent 3px),
    radial-gradient(circle at center, #071a23, #010405 72%);
}

.animated-wallpaper-gps-constellation-lock::before {
  left: 50%;
  top: 50%;
  width: 38%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border: 1px solid rgba(115,224,255,.24);
  border-radius: 50%;
  background:
    linear-gradient(90deg, transparent 49.7%, rgba(115,224,255,.18) 50%, transparent 50.3%),
    linear-gradient(transparent 49.7%, rgba(115,224,255,.18) 50%, transparent 50.3%);
  animation: dually-constellation-lock 6s ease-in-out infinite;
}

.animated-wallpaper-gps-constellation-lock::after {
  left: calc(50% - 7px);
  top: calc(50% - 7px);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #6dff93;
  box-shadow: 0 0 10px #6dff93, 0 0 30px rgba(109,255,147,.65);
}

.animated-wallpaper-obd-pid-data-stream {
  background:
    linear-gradient(rgba(54,255,180,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(54,255,180,.055) 1px, transparent 1px),
    linear-gradient(115deg, #010705, #062017 54%, #010504);
  background-size: 54px 54px, 54px 54px, auto;
  animation: dually-obd-grid 12s linear infinite;
}

.animated-wallpaper-obd-pid-data-stream::before {
  content: "010C 1720 RPM   0105 91 C   010D 63 MPH   0142 14.1 V   012F 68 %   010B 31 kPa";
  inset: 13% 5% auto;
  color: rgba(83,255,184,.30);
  font: 700 24px/2.4 monospace;
  word-spacing: 26px;
  white-space: normal;
  text-shadow: 0 0 9px rgba(63,255,175,.32);
  animation: dually-obd-text 7s linear infinite;
}

.animated-wallpaper-obd-pid-data-stream::after {
  inset: -18% 0 auto;
  height: 18%;
  background: linear-gradient(transparent, rgba(58,255,177,.16), transparent);
  filter: blur(4px);
  animation: dually-scan-down 5.6s linear infinite;
}

.animated-wallpaper-green-digital-rain {
  background:
    linear-gradient(rgba(0,255,80,.035) 1px, transparent 1px),
    radial-gradient(ellipse at center, #05220f, #000603 72%);
  background-size: 100% 42px, auto;
}

.animated-wallpaper-green-digital-rain::before {
  content: "01001101 11010010 00110101 10100110 01101001 00101110 11001001 01010111 10011010 01100101 00110110 10111001 01001011 11100100 00101101 10010110 01011001 11001010 00110101 10101100 01110010 00101101 11010100 01001011 10010110 01100101 00111010 10110100 01001101 11100010 00110101 10010110";
  inset: -95% 3% 0;
  color: rgba(75,255,123,.34);
  font: 600 19px/1.72 monospace;
  letter-spacing: 8px;
  word-spacing: 24px;
  overflow: hidden;
  text-shadow: 0 0 7px rgba(54,255,105,.42);
  animation: dually-digital-rain 8.5s linear infinite;
}

.animated-wallpaper-green-digital-rain::after {
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.66), transparent 18%, transparent 78%, rgba(0,0,0,.72));
}

@keyframes dually-sweep-horizontal { from { transform: translateX(0) skewX(-18deg); } to { transform: translateX(340%) skewX(-18deg); } }
@keyframes dually-redline-pass { 0%,15% { transform: translateX(0) skewX(-24deg); opacity: .18; } 55% { opacity: .92; } 85%,100% { transform: translateX(430%) skewX(-24deg); opacity: .15; } }
@keyframes dually-gulf-flow { from { transform: rotate(-14deg) translateX(-22%); } to { transform: rotate(-14deg) translateX(12%); } }
@keyframes dually-checker-drift { to { background-position: 72px 36px, 108px 72px; } }
@keyframes dually-apex-breathe { 0%,100% { transform: scale(.98); opacity: .55; } 50% { transform: scale(1.035); opacity: 1; } }
@keyframes dually-rotor-spin { to { rotate: 360deg; } }
@keyframes dually-scan-down { from { transform: translateY(-20%); } to { transform: translateY(850%); } }
@keyframes dually-blueprint-turn { to { rotate: 360deg; } }
@keyframes dually-signal-travel { to { background-position: 0 0, 180px 0, 0 0; } }
@keyframes dually-signal-pulse { 0%,100% { opacity: .25; transform: scaleX(.45); } 50% { opacity: 1; transform: scaleX(1); } }
@keyframes dually-heritage-drift { from { transform: rotate(-13deg) translateX(-4%); } to { transform: rotate(-13deg) translateX(7%); } }
@keyframes dually-weissach-pulse { 0%,100% { opacity: .32; transform: scaleY(.72); } 50% { opacity: 1; transform: scaleY(1); } }
@keyframes dually-horizon-glow { 0%,100% { opacity: .35; transform: scaleX(.72); } 50% { opacity: 1; transform: scaleX(1); } }
@keyframes dually-yellow-beacon { 0%,15% { transform: translateX(0) skewX(-18deg); } 80%,100% { transform: translateX(390%) skewX(-18deg); } }
@keyframes dually-rings-breathe { 0%,100% { transform: scale(.82); opacity: .28; } 50% { transform: scale(1.08); opacity: .82; } }
@keyframes dually-drag-tree-cycle {
  0%,12% { background:#dbeeff; box-shadow:0 0 15px #dbeeff, 0 34px 0 #263026, 0 68px 0 #2c260d, 0 102px 0 #2c260d, 0 136px 0 #2c260d, 0 170px 0 #092811; }
  13%,28% { background:#263026; box-shadow:0 0 0 transparent, 0 34px 15px #dbeeff, 0 68px 0 #2c260d, 0 102px 0 #2c260d, 0 136px 0 #2c260d, 0 170px 0 #092811; }
  29%,44% { background:#263026; box-shadow:0 0 0 transparent, 0 34px 0 #263026, 0 68px 17px #ffb000, 0 102px 0 #2c260d, 0 136px 0 #2c260d, 0 170px 0 #092811; }
  45%,60% { background:#263026; box-shadow:0 0 0 transparent, 0 34px 0 #263026, 0 68px 0 #2c260d, 0 102px 17px #ffb000, 0 136px 0 #2c260d, 0 170px 0 #092811; }
  61%,76% { background:#263026; box-shadow:0 0 0 transparent, 0 34px 0 #263026, 0 68px 0 #2c260d, 0 102px 0 #2c260d, 0 136px 17px #ffb000, 0 170px 0 #092811; }
  77%,100% { background:#263026; box-shadow:0 0 0 transparent, 0 34px 0 #263026, 0 68px 0 #2c260d, 0 102px 0 #2c260d, 0 136px 0 #2c260d, 0 170px 20px #27ff6f; }
}
@keyframes dually-led-shift-sweep { 0%,12% { transform:translateX(0); opacity:.22; } 55% { opacity:.95; } 82%,100% { transform:translateX(320%); opacity:.28; } }
@keyframes dually-gforce-vector { 0%,100% { transform:translate(-130px, 34px); } 28% { transform:translate(105px, -88px); } 55% { transform:translate(155px, 76px); } 78% { transform:translate(-74px, -112px); } }
@keyframes dually-lap-trace-dot { 0%,100% { transform:translate(0,0); } 25% { transform:translate(380px,-250px); } 52% { transform:translate(760px,-70px); } 76% { transform:translate(420px,120px); } }
@keyframes dually-topo-drift { from { background-position:0 0, 0 0, 0 0; } to { background-position:90px -55px, -72px 64px, 0 0; } }
@keyframes dually-satellite-orbit { to { rotate:360deg; } }
@keyframes dually-satellite-blink { 0%,100% { opacity:.42; filter:brightness(.7); } 50% { opacity:1; filter:brightness(1.35); } }
@keyframes dually-constellation-lock { 0%,100% { transform:scale(.78) rotate(0deg); opacity:.28; } 50% { transform:scale(1.08) rotate(180deg); opacity:.82; } }
@keyframes dually-obd-grid { to { background-position:54px 54px, 54px 54px, 0 0; } }
@keyframes dually-obd-text { from { transform:translateX(0); } to { transform:translateX(-12%); } }
@keyframes dually-digital-rain { from { transform:translateY(0); } to { transform:translateY(48%); } }

@media (prefers-reduced-motion: reduce) {
  .animated-wallpaper,
  .animated-wallpaper::before,
  .animated-wallpaper::after {
    animation-play-state: paused !important;
  }
}

#dashboardGrid {
  z-index: 1;
}

#alignmentGuides {
  z-index: 3;
}

#widgetLayer {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.wallpaper-library-dialog {
  position: fixed;
  inset: 0;
  z-index: 2200000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(6px);
}

.wallpaper-library-dialog[hidden] {
  display: none !important;
}

.wallpaper-library-card {
  width: min(1100px, 96vw);
  max-height: 90vh;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 11px;
  background: #222225;
  box-shadow: 0 24px 70px rgba(0,0,0,.68);
}

.wallpaper-library-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 15px 17px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}

.wallpaper-library-header h2 {
  margin: 0;
  font-size: 18px;
}

.wallpaper-library-header p {
  margin: 4px 0 0;
  color: rgba(255,255,255,.58);
  font-size: 12px;
}

#closeWallpaperLibraryButton {
  width: 34px;
  height: 34px;
  padding: 0;
  font-size: 22px;
}

.wallpaper-library-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 16px;
  max-height: 68vh;
  overflow-y: auto;
  padding: 16px;
}

.wallpaper-library-body h3 {
  margin: 0 0 10px;
  color: rgba(255,255,255,.78);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.wallpaper-category-list {
  display: grid;
  gap: 9px;
}

.wallpaper-category {
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 8px;
  background: rgba(0,0,0,.15);
}

.wallpaper-category > summary {
  min-height: 58px;
  padding: 10px 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  list-style: none;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}

.wallpaper-category > summary::-webkit-details-marker {
  display: none;
}

.wallpaper-category > summary::before {
  content: "›";
  flex: 0 0 auto;
  color: rgba(255,255,255,.55);
  font-size: 22px;
  font-weight: 800;
  transform: rotate(0deg);
  transition: transform 120ms ease;
}

.wallpaper-category[open] > summary::before {
  transform: rotate(90deg);
}

.wallpaper-category > summary:hover,
.wallpaper-category[open] > summary {
  background: rgba(255,255,255,.055);
}

.wallpaper-category > summary > span:first-of-type {
  flex: 1 1 auto;
  min-width: 0;
}

.wallpaper-category > summary strong,
.wallpaper-category > summary small {
  display: block;
}

.wallpaper-category > summary strong {
  color: #fff;
  font-size: 13px;
  letter-spacing: .015em;
}

.wallpaper-category > summary small {
  margin-top: 3px;
  color: rgba(255,255,255,.52);
  font-size: 11px;
  line-height: 1.25;
}

.wallpaper-category-count {
  min-width: 30px;
  padding: 4px 8px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  background: rgba(0,0,0,.22);
  color: rgba(255,255,255,.72);
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}

.wallpaper-category .wallpaper-thumbnail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
  padding: 0 11px 11px;
}

.wallpaper-thumbnail {
  position: relative;
  min-height: 125px;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 7px;
  background-position: center;
  background-size: cover;
  padding: 0;
}

.wallpaper-thumbnail::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 55%, rgba(0,0,0,.85));
}

.wallpaper-thumbnail span {
  position: absolute;
  z-index: 1;
  left: 10px;
  bottom: 8px;
  font-size: 12px;
  font-weight: 600;
}

.wallpaper-thumbnail.active {
  border-color: #72ffad;
  box-shadow: 0 0 0 2px rgba(0,230,118,.16);
}

.animated-wallpaper-thumbnail {
  background-color: #050709;
}

.animated-wallpaper-thumbnail em {
  position: absolute;
  z-index: 2;
  top: 8px;
  right: 8px;
  padding: 3px 6px;
  border: 1px solid rgba(114,255,173,.55);
  border-radius: 999px;
  background: rgba(0,0,0,.62);
  color: #72ffad;
  font-size: 9px;
  font-style: normal;
  font-weight: 850;
  letter-spacing: .08em;
}

.wallpaper-performance-note {
  max-width: 780px;
  padding: 7px 9px;
  border-left: 3px solid #f4bf35;
  background: rgba(244,191,53,.08);
  color: #e6d39a !important;
  line-height: 1.35 !important;
}

.wallpaper-adjustments {
  padding: 12px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 7px;
  background: rgba(0,0,0,.16);
}

.wallpaper-adjustments label {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
}

.wallpaper-adjustments input[type="range"] {
  width: 100%;
  margin: 5px 0 2px;
}

.wallpaper-library-actions {
  display: grid;
  gap: 7px;
  margin-top: 16px;
}

.wallpaper-library-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 12px 16px;
  border-top: 1px solid rgba(255,255,255,.09);
}

.wallpaper-library-footer span {
  color: rgba(255,255,255,.55);
  font-size: 11px;
}

@media (max-width: 760px) {
  .wallpaper-library-body {
    grid-template-columns: 1fr;
  }

  .wallpaper-category .wallpaper-thumbnail-grid {
    grid-template-columns: 1fr;
  }
}

/* Dually Studio 1.9.0: local-or-Community Image widget chooser. */
.image-source-dialog {
  position: fixed;
  inset: 0;
  z-index: 2300000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0, 0, 0, .78);
  backdrop-filter: blur(6px);
}
.image-source-dialog[hidden] {
  display: none !important;
}
.image-source-card {
  width: min(1050px, 96vw);
  max-height: 92vh;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 12px;
  background: #202226;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .72);
}
.image-source-header,
.image-source-footer,
.image-source-local,
.image-source-community-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.image-source-header {
  align-items: flex-start;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.image-source-header h2,
.image-source-community h3 {
  margin: 0;
}
.image-source-header p,
.image-source-community-heading p {
  margin: 4px 0 0;
  color: rgba(255, 255, 255, .6);
  font-size: 12px;
}
#closeImageSourceDialogButton {
  width: 34px;
  height: 34px;
  padding: 0;
  flex: 0 0 auto;
  font-size: 22px;
}
.image-source-local {
  margin: 16px 18px 0;
  padding: 13px 15px;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 9px;
  background: rgba(0, 0, 0, .18);
}
.image-source-local strong,
.image-source-local span {
  display: block;
}
.image-source-local span {
  margin-top: 3px;
  color: rgba(255, 255, 255, .58);
  font-size: 11px;
}
.image-source-community {
  max-height: 62vh;
  padding: 18px;
  overflow-y: auto;
}
.image-source-community-heading {
  align-items: flex-end;
  margin-bottom: 12px;
}
.image-source-community-heading a {
  color: #79e2a3;
  font-size: 12px;
}
.community-artwork-picker-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.community-artwork-picker-item {
  min-width: 0;
  padding: 8px;
  overflow: hidden;
  color: #fff;
  background: #111419;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 8px;
  text-align: left;
}
.community-artwork-picker-item:hover,
.community-artwork-picker-item:focus-visible {
  border-color: #55d187;
  box-shadow: 0 0 0 2px rgba(85, 209, 135, .15);
}
.community-artwork-picker-item.loading {
  opacity: .55;
}
.community-artwork-picker-image {
  display: grid;
  width: 100%;
  aspect-ratio: 4 / 3;
  margin-bottom: 8px;
  place-items: center;
  background-color: #090c10;
  background-image:
    linear-gradient(45deg, #181d24 25%, transparent 25%),
    linear-gradient(-45deg, #181d24 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #181d24 75%),
    linear-gradient(-45deg, transparent 75%, #181d24 75%);
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-size: 16px 16px;
  border-radius: 6px;
}
.community-artwork-picker-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.community-artwork-picker-item strong,
.community-artwork-picker-item small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.community-artwork-picker-item small {
  margin-top: 3px;
  color: rgba(255, 255, 255, .55);
}
.image-source-footer {
  padding: 12px 18px;
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.image-source-footer span {
  color: rgba(255, 255, 255, .55);
  font-size: 11px;
}
@media (max-width: 800px) {
  .community-artwork-picker-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .image-source-local,
  .image-source-footer {
    align-items: stretch;
    flex-direction: column;
  }
}


/* =========================================================
   Dually Studio 0.9.12.9 - Final Studio Polish
   ========================================================= */

.system-info-grid {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(180px, 1.3fr);
  gap: 0;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 7px;
  overflow: hidden;
}

.system-info-grid span,
.system-info-grid strong {
  padding: 9px 11px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.system-info-grid span {
  color: rgba(255,255,255,.58);
  background: rgba(0,0,0,.12);
}

.system-info-grid strong {
  color: rgba(255,255,255,.9);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.system-info-grid span:nth-last-child(-n+2),
.system-info-grid strong:nth-last-child(-n+2) {
  border-bottom: 0;
}

.project-menu-dropdown button,
.studio-menu-dropdown button {
  white-space: nowrap;
}

.validation-card,
.project-settings-card,
.wallpaper-library-card {
  animation: duallyDialogIn 120ms ease-out;
}

@keyframes duallyDialogIn {
  from {
    opacity: 0;
    transform: translateY(6px) scale(.99);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}


/* =========================================================
   Dually Studio 0.9.14 - Build APK
   ========================================================= */

.project-settings-section-title {
  margin: 18px 0 8px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.09);
  color: rgba(255,255,255,.84);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.field-help {
  display: block;
  margin: 4px 0 10px;
  color: rgba(255,255,255,.48);
  font-size: 11px;
  line-height: 1.35;
}

.apk-build-body {
  padding: 16px;
}

.apk-build-status {
  margin-bottom: 10px;
  color: rgba(255,255,255,.92);
  font-size: 15px;
  font-weight: 600;
}

.apk-build-progress {
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
}

#apkBuildProgressBar {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #006b3c, #00e676);
  transition: width 240ms ease;
}

#apkBuildProgressBar.failed {
  background: linear-gradient(90deg, #6d0010, #d5001c);
}

.apk-build-log {
  min-height: 170px;
  max-height: 300px;
  margin: 14px 0 0;
  overflow: auto;
  padding: 11px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 6px;
  background: #101011;
  color: #b9c0c5;
  font: 12px/1.5 Consolas, "Courier New", monospace;
  white-space: pre-wrap;
}


/* =========================================================
   Dually Studio 0.9.15 - Automatic Builder Discovery
   ========================================================= */

.builder-status {
  font-weight: 600;
}

.builder-status.checking {
  color: rgba(255,255,255,.58);
}

.builder-status.online {
  color: #72ffad;
}

.builder-status.offline {
  color: #ff7373;
}

.builder-settings-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 6px;
  background: rgba(0,0,0,.12);
}

.builder-settings-summary span {
  overflow-wrap: anywhere;
  color: rgba(255,255,255,.72);
  font-size: 12px;
}

.advanced-builder-settings {
  margin-top: 10px;
  padding: 11px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 6px;
  background: rgba(0,0,0,.14);
}

.advanced-builder-settings[hidden] {
  display: none !important;
}


/* =========================================================
   Dually Studio 0.9.16 - Build Experience
   ========================================================= */

.apk-patience-banner {
  display: grid;
  gap: 4px;
  margin-bottom: 16px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 190, 70, .45);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 171, 32, .18), rgba(255, 171, 32, .06));
  box-shadow: inset 4px 0 0 #ffb11f;
}

.apk-patience-banner strong {
  color: #ffd27b;
  font-size: 18px;
  letter-spacing: .01em;
}

.apk-patience-banner span {
  color: rgba(255,255,255,.78);
  font-size: 12px;
  line-height: 1.45;
}

.apk-build-stages {
  display: grid;
  gap: 6px;
  margin-top: 14px;
  padding: 11px 13px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 7px;
  background: rgba(0,0,0,.14);
}

.apk-build-stages > div {
  display: grid;
  grid-template-columns: 20px 1fr;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,.48);
  font-size: 12px;
}

.apk-build-stages > div.active {
  color: #ffffff;
  font-weight: 600;
}

.apk-build-stages > div.complete {
  color: #72ffad;
}

.apk-build-stages > div.failed {
  color: #ff7373;
}

.stage-icon {
  width: 18px;
  text-align: center;
  font-weight: 800;
}

.apk-build-success {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 14px;
  padding: 13px 15px;
  border: 1px solid rgba(0,230,118,.35);
  border-radius: 8px;
  background: rgba(0,230,118,.09);
}

.apk-build-success[hidden] {
  display: none !important;
}

.apk-success-check {
  display: grid;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  background: rgba(0,230,118,.18);
  color: #72ffad;
  font-size: 24px;
  font-weight: 900;
}

.apk-build-success > div:last-child {
  display: grid;
  gap: 3px;
}

.apk-build-success strong {
  color: #72ffad;
  font-size: 15px;
}

.apk-build-success span {
  color: rgba(255,255,255,.9);
  font-family: Consolas, "Courier New", monospace;
  overflow-wrap: anywhere;
}

.apk-build-success small {
  color: rgba(255,255,255,.55);
}

.apk-save-location-button {
  justify-self: start;
  margin-top: 9px;
  padding: 9px 14px;
  border: 1px solid #72ffad;
  border-radius: 6px;
  background: #135d36;
  color: #ffffff;
  font-weight: 800;
  cursor: pointer;
}

.apk-save-location-button:hover {
  background: #187747;
}

.apk-save-location-button:disabled {
  cursor: wait;
  opacity: .7;
}

.apk-save-location-button[hidden] {
  display: none !important;
}

.builder-status {
  cursor: help;
}


/* Dually Studio 0.9.16b native/OBD widget cleanup */
.native-widget-heading {
  color: #53d769;
}

.obd-widget-heading {
  color: #e6ad32;
}

.performance-widget-heading {
  color: #ff3b30;
}

.acardash-stats-heading {
  color: #35c9ff;
}

.tool-category {
  margin: 0;
}

.tool-category > summary.tool-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.tool-category > summary.tool-section-title::-webkit-details-marker {
  display: none;
}

.tool-category > summary.tool-section-title::after {
  content: ">";
  margin-left: 8px;
  color: currentColor;
  font-size: 13px;
  font-weight: 700;
  transform: rotate(0deg);
  transition: transform 120ms ease;
}

.tool-category[open] > summary.tool-section-title::after {
  transform: rotate(90deg);
}

.tool-category > summary.tool-section-title:hover {
  filter: brightness(1.25);
}

.native-digital-speed {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.12em;
  color: #fff;
  background: transparent;
  font-family: "911 Porscha", sans-serif;
  overflow: hidden;
}

.native-digital-speed-value {
  font-family: "911 Porscha", sans-serif !important;
  font-size: clamp(42px, 7.5vw, 112px);
  line-height: 0.9;
  font-weight: 400;
  letter-spacing: 0;
}

.native-digital-speed-units {
  align-self: flex-end;
  padding-bottom: 12%;
  font-family: "911 Porscha", sans-serif !important;
  font-size: clamp(14px, 1.8vw, 28px);
  line-height: 1;
}

.digital-value,
.porsche-digital-font {
  font-family: "911 Porscha", sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

.volume-slider-widget {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  background: rgba(10,10,10,.82);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 10px;
}

.volume-slider-icon {
  font-size: 26px;
  flex: 0 0 auto;
}

.volume-slider-control {
  width: 100%;
  min-width: 40px;
}

.volume-slider-value {
  min-width: 44px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}


/* 0.9.16c Porsche Clock variants and digital gauge fixes */
.native-digital-speed {
  justify-content: center;
}
.native-digital-speed-value {
  margin: 0;
}

.pc-inner-carbon {
  fill: url(#pcCarbonFace) !important;
}

.pc-inner-vdo {
  fill: url(#pcVdoFace) !important;
}

.pc-clock-variant-label text {
  font-family: "911 Porscha", sans-serif;
  fill: #d7d7d7;
  font-size: 7px;
  letter-spacing: .5px;
}

.pc-clock-vdo-label text {
  font-family: Arial, sans-serif;
  fill: #e7e2d8;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .6px;
}


/* 0.9.16d native speed autoscale + live data inspector */
.native-digital-speed-value {
  width: 100%;
  max-width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  overflow: hidden;
  line-height: 0.9;
  font-family: "911 Porscha", sans-serif !important;
}

/* Dually Studio 1.9.0: configurable preset numbers and digital-speed peak. */
.runtime-preset-number {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  color: var(--preset-button-color, #fff);
  font-family: "911 Porscha", "Segoe UI", sans-serif;
  font-size: clamp(18px, 2.2vw, 34px);
  font-weight: 400;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .95);
  pointer-events: none;
}
.runtime-preset-button.active::after {
  background: var(--preset-button-color, #e21b1b) !important;
  box-shadow: 0 0 7px color-mix(in srgb, var(--preset-button-color, #e21b1b) 80%, transparent) !important;
}
.native-digital-speed.with-speed-peak {
  flex-direction: column;
  gap: 0;
}
.native-digital-speed.with-speed-peak .native-digital-speed-value {
  height: 72%;
  flex: 0 0 72%;
  align-items: flex-end;
}
.native-digital-speed-peak {
  width: 100%;
  height: 28%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
  font-family: "911 Porscha", sans-serif;
  line-height: 1;
  white-space: nowrap;
}

.pc-clock-turbo-s-asset {
  opacity: 0.92;
}


/* 0.9.17a OBD connection status */
.obd-connection-widget {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 16px;
  background: rgba(10, 10, 10, .88);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 10px;
}

.obd-connection-copy {
  min-width: 0;
}

.obd-connection-device {
  font-size: 20px;
  font-weight: 600;
  color: #fff;
}

.obd-connection-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 5px;
  font-size: 14px;
  color: #bfc5cc;
}

.obd-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #d0a52e;
  flex: 0 0 auto;
}

.obd-connection-widget.connected .obd-status-dot {
  background: #45c86b;
}

.obd-connection-widget.disconnected .obd-status-dot {
  background: #b8bec5;
}

.obd-disconnect-button {
  flex: 0 0 auto;
  padding: 9px 14px;
  border-radius: 7px;
  cursor: pointer;
}


/* 0.9.17k BUILD APK centred in the entire blank area above the dashboard canvas */
.workspace {
  position: relative;
  display: block;
}

.workspace-build-bar {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: calc((100% - min(72vh, 760px)) / 2);
  min-height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 30;
  pointer-events: none;
  background: transparent;
  border: 0;
}

.top-build-apk-button {
  min-width: 250px;
  padding: 13px 38px;
  border-radius: 8px;
  border: 1px solid #63dd7c;
  background: #198a35;
  color: #ffffff;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: .08em;
  box-shadow: 0 5px 16px rgba(0,0,0,.42);
  pointer-events: auto;
}

.top-build-apk-button:hover {
  background: #22a243;
  border-color: #79ed91;
}


/* 0.9.18b Studio fixed design canvas */
.workspace {
  overflow: hidden;
}

.surface-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.display-frame {
  width: 1920px;
  height: 720px;
  flex: 0 0 auto;
  position: relative;
  transform-origin: center center;
}

.design-surface {
  width: 1920px;
  height: 720px;
  position: relative;
  overflow: hidden;
}

/* Keep the editor canvas visible on any monitor.
   JS/runtime may apply a viewing transform, but coordinates remain 1920x720. */
.canvas-resolution-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1000;
  background: rgba(0,0,0,.65);
  border: 1px solid #666;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

/* 0.9.18c ACARDASH physical-screen guide.
   Physical LCD: 1920x720. Reserved launcher: 300px. Dually viewport: 1420x720 plus 200px right built-in reserve. */
.physical-screen-guide {
  width: 1920px;
  height: 720px;
  display: flex;
  flex: 0 0 auto;
  position: relative;
  transform-origin: center center;
  background: #090909;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,.65), inset 0 0 0 1px rgba(255,255,255,.08);
}
.physical-screen-guide .display-frame {
  width: 1420px;
  height: 720px;
  padding: 0;
  border-radius: 0;
  flex: 0 0 1420px;
  transform: none !important;
  box-shadow: none;
}
.physical-screen-guide .design-surface {
  width: 1420px;
  height: 720px;
  border-radius: 0;
}
.acardash-sidebar-guide {
  width: 300px;
  height: 720px;
  flex: 0 0 300px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 34px;
  padding-top: 48px;
  background: linear-gradient(90deg,#111,#171717);
  border-right: 2px solid #555;
  box-sizing: border-box;
  user-select: none;
}
.acardash-dot {
  width: 28px; height: 28px; border-radius: 50%;
  background: #13b9e8; position: absolute; top: 22px; left: 40px;
}
.acardash-guide-icon {
  width: 78px; height: 78px; border-radius: 16px;
  display: grid; place-items: center;
  background: #f3f3f3; color: #222;
  font-size: 48px; font-weight: 700;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.24);
  padding: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  cursor: pointer;
  flex: 0 0 78px;
}
.acardash-guide-icon:hover,
.acardash-guide-icon:focus-visible {
  outline: 3px solid #ff2838;
  outline-offset: 3px;
}
.acardash-guide-icon.has-custom-launcher-image {
  background-color: transparent;
}
.acardash-home { margin-top: 14px; }
.acardash-guide-label {
  margin-top: auto; margin-bottom: 24px; text-align: center;
  color: #888; font-size: 18px; line-height: 1.25; letter-spacing: 1px;
}

.launcher-icon-card {
  width: min(670px, 94vw);
}

.launcher-icon-subtitle {
  margin: 4px 0 0;
  color: #aeb4bc;
  font-size: 12px;
}

.launcher-icon-help {
  margin: 0 0 14px;
  color: #d5d8dc;
}

.launcher-state-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.launcher-state-grid section {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  background: #18181a;
}

.launcher-state-grid h3 {
  margin: 0;
  font-size: 14px;
}

.launcher-state-preview {
  width: 123px;
  height: 97px;
  display: grid;
  place-items: center;
  border: 1px solid #555;
  border-radius: 8px;
  background-color: #0c0c0d;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: #8f959d;
  font-size: 12px;
}

.launcher-state-preview.auto-pressed-preview {
  filter: brightness(.68);
}

.launcher-secondary-button {
  font-size: 12px;
}

.launcher-icon-auto-note {
  min-height: 18px;
  margin: 12px 0 0;
  text-align: center;
  color: #ffb7bc;
  font-size: 12px;
}

.launcher-icon-actions {
  justify-content: space-between;
}

@media (max-width: 620px) {
  .launcher-state-grid {
    grid-template-columns: 1fr;
  }
}


/* 0.9.18d real Studio zoom / pan controls */
.surface-wrap {
  overflow: auto !important;
  display: block !important;
  padding: 18px;
  box-sizing: border-box;
}

.physical-screen-guide {
  margin: 0;
}

.surface-wrap.canvas-fit-active .physical-screen-guide {
  margin-left: auto;
  margin-right: auto;
}

.canvas-zoom-controls {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 2px;
}

.canvas-zoom-controls button {
  min-width: 34px;
}

#canvasZoomSlider {
  width: 140px;
  accent-color: #35b85a;
}

#canvasZoomReadout {
  min-width: 46px;
  text-align: right;
  color: #d9d9d9;
  font-variant-numeric: tabular-nums;
}

/* Give horizontal/vertical scrollbars enough contrast on the dark Studio. */
.surface-wrap::-webkit-scrollbar {
  width: 13px;
  height: 13px;
}
.surface-wrap::-webkit-scrollbar-track {
  background: #151515;
}
.surface-wrap::-webkit-scrollbar-thumb {
  background: #555;
  border: 2px solid #151515;
  border-radius: 7px;
}

/* 0.9.18e right-side ACARDASH built-in reserve */
.acardash-right-guide {
  width:200px; height:720px; flex:0 0 200px; position:relative;
  background:linear-gradient(90deg,#0b0b0b,#121212);
  border-left:2px dashed rgba(255,70,70,.65); box-sizing:border-box;
  pointer-events:none; user-select:none; color:#eee;
}
.acardash-clock-guide { position:absolute; top:48px; width:100%; text-align:center; font-size:24px; line-height:1.0; }
.acardash-clock-guide small { font-size:12px; }
.acardash-power-guide { position:absolute; bottom:48px; width:100%; text-align:center; font-size:46px; color:#39e639; }


/* 0.9.18f explicit vertical canvas pan.
   The extra top/bottom runway guarantees useful vertical movement even at Fit. */
.canvas-scroll-shell {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.canvas-scroll-shell .surface-wrap {
  position: absolute !important;
  left: 0;
  top: 0;
  right: 42px;
  bottom: 0;
  width: auto !important;
  height: auto !important;
  padding: 220px 18px !important;
  overflow-x: auto !important;
  overflow-y: scroll !important;
  scrollbar-gutter: stable both-edges !important;
}

/* Native vertical scrollbar remains visible. */
.canvas-scroll-shell .surface-wrap::-webkit-scrollbar {
  width: 16px !important;
  height: 16px !important;
}
.canvas-scroll-shell .surface-wrap::-webkit-scrollbar-thumb {
  background: #6a6a6a !important;
  border: 3px solid #151515 !important;
  border-radius: 9px !important;
}

.canvas-vertical-pan-control {
  position: absolute;
  top: 8px;
  right: 4px;
  bottom: 8px;
  width: 34px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  box-sizing: border-box;
  background: #151515;
  border: 1px solid #3a3a3a;
  border-radius: 7px;
  z-index: 50;
}

.canvas-vertical-pan-control span {
  color: #8f8f8f;
  font-size: 8px;
  line-height: 1;
}

#canvasVerticalPanSlider {
  flex: 1 1 auto;
  width: 22px;
  min-height: 120px;
  margin: 0;
  writing-mode: vertical-lr;
  direction: rtl;
  accent-color: #35b85a;
  cursor: ns-resize;
}

/* Firefox fallback for vertical range presentation. */
@supports not (writing-mode: vertical-lr) {
  #canvasVerticalPanSlider {
    transform: rotate(270deg);
    transform-origin: center;
    width: 280px;
  }
}


/* 0.9.18g RESTORE THE CANVAS WORKSPACE
   0.9.18f added a scroll shell but its parent was still the old display:block
   workspace, so the flex child collapsed to zero height. */
.workspace {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.workspace-build-bar {
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  height: 86px !important;
  min-height: 86px !important;
  flex: 0 0 86px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 20 !important;
  pointer-events: auto !important;
  background: #111 !important;
  border-bottom: 1px solid #303030 !important;
  box-sizing: border-box !important;
}

.canvas-scroll-shell {
  position: relative !important;
  flex: 1 1 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 220px !important;
  overflow: hidden !important;
}

.canvas-scroll-shell .surface-wrap {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  right: 42px !important;
  bottom: 0 !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 180px 18px !important;
  overflow-x: auto !important;
  overflow-y: scroll !important;
  display: block !important;
  box-sizing: border-box !important;
  scrollbar-gutter: stable both-edges !important;
}

/* The physical screen must always have real layout dimensions inside the scroller. */
.canvas-scroll-shell .physical-screen-guide {
  display: flex !important;
  width: 1920px !important;
  height: 720px !important;
  min-width: 1920px !important;
  min-height: 720px !important;
  flex: 0 0 auto !important;
  position: relative !important;
}

/* Keep the dedicated vertical pan control visible even when canvas is scrolled. */
.canvas-vertical-pan-control {
  display: flex !important;
}

/* Make both native scrollbars unmistakable. */
.canvas-scroll-shell .surface-wrap {
  scrollbar-width: auto !important;
  scrollbar-color: #707070 #151515 !important;
}
.canvas-scroll-shell .surface-wrap::-webkit-scrollbar {
  width: 16px !important;
  height: 16px !important;
}
.canvas-scroll-shell .surface-wrap::-webkit-scrollbar-track {
  background: #151515 !important;
}
.canvas-scroll-shell .surface-wrap::-webkit-scrollbar-thumb {
  background: #707070 !important;
  border: 3px solid #151515 !important;
  border-radius: 9px !important;
}


/* 0.9.18i matching green horizontal canvas pan control */
.canvas-scroll-shell .surface-wrap {
  bottom: 42px !important;
}

.canvas-horizontal-pan-control {
  position: absolute;
  left: 8px;
  right: 46px;
  bottom: 4px;
  height: 34px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  box-sizing: border-box;
  background: #151515;
  border: 1px solid #3a3a3a;
  border-radius: 7px;
  z-index: 50;
}

.canvas-horizontal-pan-control span {
  color: #8f8f8f;
  font-size: 8px;
  line-height: 1;
}

#canvasHorizontalPanSlider {
  flex: 1 1 auto;
  height: 22px;
  min-width: 120px;
  margin: 0;
  accent-color: #35b85a;
  cursor: ew-resize;
}


/* 0.9.19u: remove obsolete Studio canvas instruction strip */
.canvas-instructions,
.canvas-help,
.design-help,
.editor-help,
.widget-instructions,
.workspace-instructions,
.workspace-help {
  display: none !important;
}


/* 0.9.20h: Porsche clock/compass typography MUST use the uploaded 911-Porscha.ttf */
.pc-compass-number,
.pc-cardinal,
.pc-cardinal-small,
.pc-compass-heading,
.pc-compass-dir,
.pc-clock-ring-number {
  font-family: "911 Porscha" !important;
  font-weight: normal !important;
  font-style: normal !important;
}

.pc-compass-number {
  font-size: 3.35px;
}

.pc-cardinal {
  font-size: 7.1px;
}

.pc-cardinal-small {
  font-size: 3.55px;
}

.pc-compass-heading {
  font-size: 8.0px;
}

.pc-compass-dir {
  font-size: 7.0px;
}

.pc-clock-ring-number {
  fill: #f2f2f2;
  font-size: 3.55px;
  paint-order: stroke;
  stroke: #000;
  stroke-width: .18;
}

.pc-clock-ring-number.pc-clock-ring-number-red {
  fill: #ff2d2d;
}


/* 0.9.20i - exact user-supplied 911 Porscha font */
.pc-compass-number,
.pc-cardinal,
.pc-cardinal-small,
.pc-compass-heading,
.pc-compass-dir,
.pc-clock-ring-number {
  font-family: "911 Porscha" !important;
  font-weight: normal !important;
  font-style: normal !important;
  font-synthesis: none !important;
}


/* 0.9.20k final clock/compass renderer overrides */
.pc-clock-major,
.pc-clock-minor {
  stroke: #ffffff !important;
}

.pc-red-mark {
  stroke: #ff1028 !important;
}

.pc-compass-face {
  fill: #050505 !important;
}
.pc-compass-outer-band {
  fill: none !important;
  stroke: url(#pcCompassOuterGrad) !important;
  stroke-width: 8.5 !important;
}
.pc-compass-inner-ring {
  fill: none !important;
  stroke: url(#pcCompassInnerGrad) !important;
  stroke-width: 4.2 !important;
}
.pc-compass-major,
.pc-compass-minor {
  stroke: #ffffff !important;
}
.pc-compass-number,
.pc-cardinal,
.pc-cardinal-small,
.pc-compass-heading,
.pc-compass-dir {
  font-family: "911 Porscha" !important;
  font-weight: normal !important;
  font-synthesis: none !important;
}
.pc-compass-heading::before,
.pc-compass-heading::after {
  content: none !important;
  display: none !important;
}


/* 0.9.20l - clock tick color only */
.pc-widget .pc-major,
.pc-widget .pc-minor {
  stroke: #ffffff !important;
}




/* 0.9.20q - remove unwanted red compass bracket/remnant only */
.pc-compass-bracket,
.pc-heading-bracket,
.pc-heading-mark,
.pc-compass-marker {
  display: none !important;
}


/* 0.9.20r - preserve shaded outer bezel and remove only square exterior remnants */
.pc-outer {
  fill: url(#pcBezel) !important;
  stroke: rgba(255,255,255,.18) !important;
  stroke-width: .5 !important;
}

/* The rectangular SVG/widget canvas must be completely transparent.
   Circular gauge layers remain untouched and opaque. */
.pc-widget,
.pc-widget > svg,
.pc-svg {
  background: transparent !important;
  background-color: transparent !important;
}

/* Prevent wrapper effects from creating a visible square around the circular gauge. */
.pc-widget {
  box-shadow: none !important;
  border: 0 !important;
  outline: 0 !important;
}


/* 0.9.20s - compass-only cleanup */
.pc-widget .pc-compass-bracket,
.pc-widget .pc-heading-bracket,
.pc-widget .pc-heading-mark,
.pc-widget .pc-compass-marker,
.pc-widget .pc-readout-mark {
  display: none !important;
}


/* 0.9.20t - compass typography: supplied Porsche font */
.pc-compass-number,
.pc-cardinal,
.pc-cardinal-small,
.pc-compass-heading,
.pc-compass-dir {
  font-family: "Porsche", "Porsche Next", sans-serif !important;
}


/* 0.9.20u - Porsche Dashboard runtime cluster alignment only.
   Clock and compass are LOCKED and untouched. */

/* Keep all five gauges in a single overlapping visual cluster. */
.porsche-dashboard .gauge,
.porsche-dashboard-widget .gauge,
.pc-dashboard .gauge {
  position: absolute;
}

/* Outer-left gauge: pull inward to meet the left-middle gauge. */
.porsche-dashboard .gauge:nth-child(1),
.porsche-dashboard-widget .gauge:nth-child(1),
.pc-dashboard .gauge:nth-child(1) {
  transform: translateX(12%) !important;
  z-index: 1 !important;
}

/* Left-middle gauge sits below center tach. */
.porsche-dashboard .gauge:nth-child(2),
.porsche-dashboard-widget .gauge:nth-child(2),
.pc-dashboard .gauge:nth-child(2) {
  z-index: 2 !important;
}

/* CENTER TACH: always topmost. */
.porsche-dashboard .gauge:nth-child(3),
.porsche-dashboard-widget .gauge:nth-child(3),
.pc-dashboard .gauge:nth-child(3),
.porsche-dashboard .tach,
.porsche-dashboard-widget .tach,
.pc-dashboard .tach {
  z-index: 10 !important;
}

/* Right-middle gauge sits below center tach. */
.porsche-dashboard .gauge:nth-child(4),
.porsche-dashboard-widget .gauge:nth-child(4),
.pc-dashboard .gauge:nth-child(4) {
  z-index: 2 !important;
}

/* Outer-right gauge: pull inward to meet the right-middle gauge. */
.porsche-dashboard .gauge:nth-child(5),
.porsche-dashboard-widget .gauge:nth-child(5),
.pc-dashboard .gauge:nth-child(5) {
  transform: translateX(-12%) !important;
  z-index: 1 !important;
}


/* =========================================================
   Dually Studio 1.0.27
   Studioengine foundation merge
   ========================================================= */

.dashboard-widget.selected-widget {
  outline: 2px solid rgba(255, 32, 32, 0.98) !important;
  outline-offset: 2px !important;
  filter: drop-shadow(0 0 5px rgba(255, 32, 32, 0.42));
}

.resize-handle {
  width: 12px !important;
  height: 12px !important;
  background: #ffffff !important;
  border: 2px solid #e31b23 !important;
  border-radius: 50% !important;
  box-shadow:
    0 1px 4px rgba(0, 0, 0, 0.95),
    0 0 0 1px rgba(255, 255, 255, 0.22) !important;
  z-index: 80 !important;
}

#alignmentGuides .guide-line,
#guideLayer .alignment-guide {
  background: #e31b23 !important;
  box-shadow: 0 0 6px rgba(227, 27, 35, 0.9) !important;
}

/* =========================================================
   Dually Studio 1.0.41
   Studio entitlement controls
   Keeps the existing workspace build bar unchanged.
   ========================================================= */

.workspace-build-bar {
  gap: 10px !important;
  padding: 0 18px !important;
}

.top-build-apk-button,
.apk-entitlement-button {
  box-sizing: border-box;
  flex: 0 0 250px;
  width: 250px;
  min-width: 250px;
  height: 48px;
  min-height: 48px;
  margin: 0;
  padding: 10px 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  text-align: center;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.15;
  white-space: nowrap;
}

.top-build-apk-button:disabled,
#projectBuildApkButton:disabled {
  opacity: .48 !important;
  cursor: not-allowed !important;
  filter: grayscale(.72);
}

.apk-entitlement-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.apk-entitlement-panel[hidden] {
  display: none !important;
}

.apk-entitlement-button {
  border: 1px solid rgba(255,255,255,.20);
  text-decoration: none;
  pointer-events: auto;
}

.apk-compatibility-link {
  background: #3a3a3d;
  border-color: #626268;
  color: #fff;
}

.apk-compatibility-link:hover {
  background: #4a4a4d;
  border-color: #77777d;
}

.apk-subscribe-link {
  background: #198a35;
  border-color: #63dd7c;
  color: #fff;
}

.apk-subscribe-link:hover {
  background: #22a243;
  border-color: #79ed91;
}

@media (max-width: 1050px) {
  .top-build-apk-button,
  .apk-entitlement-button {
    flex-basis: 210px;
    width: 210px;
    min-width: 210px;
    font-size: 12px;
  }
}

@media (max-width: 760px) {
  .workspace-build-bar {
    height: auto !important;
    min-height: 86px !important;
    flex-wrap: wrap !important;
    padding: 10px !important;
  }

  .apk-entitlement-panel {
    flex-wrap: wrap;
  }
}

/* Interactive public Studio preview */
.guest-preview-banner {
  box-sizing: border-box;
  flex: 1 1 360px;
  min-width: 300px;
  min-height: 48px;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(255, 156, 39, .52);
  border-radius: 8px;
  background: rgba(228, 111, 11, .12);
  color: rgba(255, 255, 255, .82);
  font-size: 12px;
  line-height: 1.3;
}

.guest-preview-banner strong {
  flex: 0 0 auto;
  color: #ff9c27;
  font-size: 11px;
  letter-spacing: .08em;
}

@media (max-width: 980px) {
  .guest-preview-banner {
    order: -1;
    flex-basis: 100%;
    min-width: 100%;
  }
}

/* Guest preview project actions are deliberately unavailable. */
[data-guest-locked="true"] {
  opacity: .38 !important;
  cursor: not-allowed !important;
  filter: grayscale(.85);
}

.project-menu-dropdown [data-guest-locked="true"] {
  color: rgba(255, 255, 255, .42) !important;
}



/* Dually Studio supplied branding and Community publishing */
.studio-brand-logo-frame {
  position: relative;
  display: block;
  flex: 0 0 200px;
  width: 200px;
  height: 86px;
  overflow: hidden;
  border-radius: 5px;
}
.studio-brand-logo {
  position: absolute;
  top: -28px;
  left: 0;
  display: block;
  width: 200px;
  height: auto;
  max-width: none;
}
.dually-title-copy {
  display: grid;
  gap: 7px;
  min-width: 0;
}
.dually-title-copy span {
  margin-left: 0;
}
.dually-credit-line {
  display: flex;
  align-items: baseline;
  gap: 14px;
  min-width: 0;
}
.dually-copyright-credit {
  color: #8e98a6;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .025em;
  white-space: nowrap;
}
.dually-professional-credit {
  color: var(--muted);
  font-size: 14px;
  white-space: nowrap;
}
.publish-community-button {
  border-color: #42d66f !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(0,0,0,.18)),
    #137a34 !important;
  color: #fff !important;
  font-weight: 900 !important;
  letter-spacing: .045em;
  box-shadow: 0 0 16px rgba(46, 204, 101, .28);
}
.publish-community-button:hover:not(:disabled) {
  border-color: #76ec98 !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.17), rgba(0,0,0,.12)),
    #1a9c45 !important;
  box-shadow: 0 0 22px rgba(46, 204, 101, .42);
}
#projectPublishCommunityButton {
  color: #6bed91;
  font-weight: 800;
}
@media (max-width: 900px) {
  .studio-brand-logo-frame {
    flex-basis: 180px;
    width: 180px;
    height: 78px;
  }
  .studio-brand-logo {
    top: -25px;
    width: 180px;
  }
}


/* Premium widgets remain interactive in Studio so users can preview them. */
.feature-pack-locked {
  opacity: .76;
  cursor: pointer !important;
  position: relative;
}
.feature-pack-locked::after {
  content: "  🔒 PREVIEW";
  color: #ffc14a;
  font-size: .72em;
  font-weight: 850;
  letter-spacing: .04em;
}

.premium-preview-widget {
  border-color: rgba(255, 184, 54, .58);
}

.premium-preview-watermark {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px;
  pointer-events: none;
  text-align: center;
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(255, 184, 54, .34);
  opacity: .42;
}

.premium-preview-watermark span,
.premium-preview-watermark small {
  max-width: calc(100% - 12px);
  padding: 0;
  border-radius: 0;
  background: transparent;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .92);
  transform: rotate(-6deg);
}

.premium-preview-watermark span {
  color: #ffd06a;
  font-size: clamp(8px, .86vw, 13px);
  font-weight: 900;
  letter-spacing: .04em;
}

.premium-preview-watermark small {
  color: #ffffff;
  font-size: clamp(6px, .62vw, 10px);
  font-weight: 750;
  letter-spacing: .03em;
}


/* OBD-II trouble-code Studio preview */
.obd-dtc-widget {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  container-type: size;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: clamp(4px, 2.2%, 10px);
  padding: clamp(10px, 3.2%, 18px);
  overflow: hidden;
  border: 1px solid rgba(115, 128, 143, .62);
  border-radius: 14px;
  background:
    radial-gradient(circle at 32% 18%, rgba(42, 54, 68, .62), transparent 52%),
    rgba(8, 11, 15, .94);
  color: #fff;
  font-family: Arial, sans-serif;
}
.obd-dtc-title {
  font-size: clamp(13px, 5.8cqh, 25px);
  font-weight: 800;
  letter-spacing: .055em;
  white-space: nowrap;
}
.obd-dtc-status {
  overflow: hidden;
  color: #ffc247;
  font-size: clamp(10px, 4.2cqh, 18px);
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.obd-dtc-rows {
  min-height: 0;
  display: grid;
  grid-template-rows: repeat(3, 1fr);
}
.obd-dtc-row {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(76px, 22%) 1fr;
  align-items: center;
  border-top: 1px solid rgba(128, 141, 154, .20);
}
.obd-dtc-row span {
  color: #929eaa;
  font-size: clamp(9px, 3.8cqh, 16px);
  font-weight: 800;
}
.obd-dtc-row strong {
  overflow: hidden;
  font-size: clamp(12px, 5.2cqh, 23px);
  letter-spacing: .055em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.obd-dtc-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(8px, 3%, 16px);
}
.obd-dtc-actions button {
  min-height: 36px;
  border: 1px solid #77818d;
  border-radius: 8px;
  background: linear-gradient(#3b424b, #252a31);
  color: #fff;
  font: inherit;
  font-size: clamp(10px, 4.2cqh, 18px);
  font-weight: 800;
  pointer-events: none;
}
.obd-dtc-actions button.clear {
  color: #ff655d;
  border-color: rgba(255, 101, 93, .72);
}


/* Dually Studio 1.3.31: 4/8/10/12 dashboard presets, row or vertical stack */
.runtime-preset-horizontal {
  grid-auto-flow: column !important;
}
.runtime-preset-horizontal.runtime-preset-count-4 { grid-template-columns: repeat(4, minmax(24px, 1fr)) !important; }
.runtime-preset-horizontal.runtime-preset-count-8 { grid-template-columns: repeat(8, minmax(20px, 1fr)) !important; }
.runtime-preset-horizontal.runtime-preset-count-10 { grid-template-columns: repeat(10, minmax(16px, 1fr)) !important; }
.runtime-preset-horizontal.runtime-preset-count-12 { grid-template-columns: repeat(12, minmax(14px, 1fr)) !important; }
.runtime-preset-vertical {
  grid-auto-flow: row !important;
  grid-template-columns: minmax(24px, 1fr) !important;
  align-content: stretch !important;
}
.runtime-preset-vertical.runtime-preset-count-4 { grid-template-rows: repeat(4, minmax(22px, 1fr)) !important; }
.runtime-preset-vertical.runtime-preset-count-8 { grid-template-rows: repeat(8, minmax(18px, 1fr)) !important; }
.runtime-preset-vertical.runtime-preset-count-10 { grid-template-rows: repeat(10, minmax(16px, 1fr)) !important; }
.runtime-preset-vertical.runtime-preset-count-12 { grid-template-rows: repeat(12, minmax(14px, 1fr)) !important; }
.runtime-preset-vertical .runtime-preset-button {
  width: 100% !important;
  height: 100% !important;
  min-height: 14px !important;
  max-height: none !important;
}