:root {
    --bg: #0b0d10;
    --panel: #171a20;
    --panel2: #11141a;
    --text: #f4f6f8;
    --muted: #9aa4b2;
    --line: #2b313a;
    --good: #45d483;
    --warn: #f0bf48;
    --bad: #ff6b6b;

    --accent: #343d49;
    --accent-border: #596473;
    --button-bg1: #222831;
    --button-bg2: #222831;

    --spectrum-low: #45d483;
    --spectrum-mid: #9bd267;
    --spectrum-high: #f0bf48;
    --spectrum-top: #ff6b6b;
    --peak: #ffffff;
  }

  body.theme-cvo {
    --bg: #0c0b0a;
    --panel: #1b1714;
    --panel2: #12100e;
    --text: #f2eee8;
    --muted: #b7afa5;
    --line: #625b53;

    --good: #c97943;
    --warn: #e0a061;
    --bad: #ff625d;

    --accent: #8c4d2d;
    --accent-border: #d18750;
    --button-bg1: #30231c;
    --button-bg2: #1b1511;

    --spectrum-low: #6f3d24;
    --spectrum-mid: #a85f36;
    --spectrum-high: #d18750;
    --spectrum-top: #d8d4cc;
    --peak: #d8d4cc;
  }


  body.theme-american {
    --bg: #050b17;
    --panel: #101d33;
    --panel2: #081223;
    --text: #f7f9fc;
    --muted: #acb9cd;
    --line: #405a82;

    --good: #4b9df5;
    --warn: #f0bd52;
    --bad: #ff5360;

    --accent: #b22234;
    --accent-border: #7296c5;
    --button-bg1: #173765;
    --button-bg2: #0c1e3d;

    --spectrum-low: #245aa8;
    --spectrum-mid: #f1f4f8;
    --spectrum-high: #c62f42;
    --spectrum-top: #ff5360;
    --peak: #ffffff;
  }

  body.theme-american .topbar {
    border-bottom: 2px solid #b22234;
    box-shadow:
      0 2px 0 #e8edf5,
      0 4px 0 #245aa8;
  }

  body.theme-american .bike-name {
    color: #ffffff;
    text-shadow:
      2px 0 0 #b22234,
      -2px 0 0 #245aa8;
  }

  body.theme-american .theme-toggle {
    border-color: #e8edf5;
    background:
      linear-gradient(
        135deg,
        #173765 0%,
        #173765 50%,
        #8f1d2c 50%,
        #8f1d2c 100%
      );
  }

  body.theme-american .card {
    border-color: #405a82;
    box-shadow:
      inset 3px 0 0 #b22234,
      inset -2px 0 0 #245aa8;
  }

  body.theme-american .nav {
    background:
      linear-gradient(
        180deg,
        rgba(8, 18, 35, 0.98),
        rgba(3, 8, 17, 0.99)
      );
    border-top: 2px solid #245aa8;
  }

  body.theme-american .nav button.active {
    color: #ffffff;
    border-color: #e8edf5;
    background:
      linear-gradient(
        135deg,
        #b22234 0%,
        #b22234 47%,
        #f4f6fa 47%,
        #f4f6fa 53%,
        #17477e 53%,
        #17477e 100%
      );
  }

  body.theme-american .section-title {
    color: #ffffff;
    border-left: 4px solid #b22234;
    padding-left: 8px;
  }

  * { box-sizing: border-box; }

  html, body {
    margin: 0;
    min-height: 100%;
    background: var(--bg);
    color: var(--text);
    font-family: Arial, Helvetica, sans-serif;
  }

  body {
    padding: 10px 10px 78px;
  }

  .topbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 10px;
  }

  .bike-name {
    font-size: 28px;
    font-weight: 900;
    letter-spacing: 1px;
  }

  .subtitle {
    font-size: 12px;
    color: var(--muted);
    margin-top: 3px;
  }

  .clock { text-align: right; }

  .time {
    font-size: 27px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
  }

  .date {
    font-size: 12px;
    color: var(--muted);
    margin-top: 2px;
  }

  .page {
    display: none;
  }

  .page.active {
    display: block;
  }

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

  .card {
    min-height: 112px;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: linear-gradient(180deg, var(--panel), var(--panel2));
  }

  .card.full {
    grid-column: 1 / -1;
  }

  .label {
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .8px;
    font-size: 12px;
    font-weight: 700;
  }

  .value {
    margin-top: 12px;
    font-size: 35px;
    line-height: 1;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
  }

  .unit {
    font-size: 17px;
    color: var(--muted);
    font-weight: 700;
    margin-left: 4px;
  }

  .status {
    display: inline-block;
    margin-top: 11px;
    padding: 6px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    background: #242a33;
    color: var(--muted);
  }

  .status.good {
    background: rgba(69,212,131,.13);
    color: var(--good);
  }

  .status.warn {
    background: rgba(240,191,72,.13);
    color: var(--warn);
  }

  .status.bad {
    background: rgba(255,107,107,.13);
    color: var(--bad);
  }

  .hero-speed {
    text-align: center;
    min-height: 165px;
  }

  .hero-speed .value {
    font-size: 74px;
    margin-top: 18px;
  }

  .hero-speed .unit {
    display: block;
    margin: 7px 0 0;
    font-size: 16px;
  }

  .controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin-top: 10px;
  }

  button {
    min-height: 68px;
    border: 1px solid #3b424d;
    border-radius: 12px;
    background: linear-gradient(180deg, var(--button-bg1), var(--button-bg2));
    color: var(--text);
    font-size: 17px;
    font-weight: 900;
    cursor: pointer;
    touch-action: manipulation;
  }

  button:active { transform: translateY(1px); }

  .nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 7px 9px 9px;
    background: rgba(11,13,16,.97);
    border-top: 1px solid var(--line);
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 7px;
    z-index: 100;
  }

  .nav button {
    min-height: 56px;
    font-size: 13px;
    padding-left: 4px;
    padding-right: 4px;
  }


  .theme-toggle {
    margin-top: 7px;
    min-height: 36px;
    padding: 6px 11px;
    font-size: 11px;
    border-radius: 9px;
    border: 1px solid var(--accent-border);
    background: linear-gradient(180deg, var(--button-bg1), var(--button-bg2));
    color: var(--text);
  }

  .nav button.active {
    background: var(--accent);
    border-color: var(--accent-border);
  }

  .section-title {
    font-size: 18px;
    font-weight: 900;
    margin: 2px 0 10px;
  }

  .small-line {
    color: var(--muted);
    margin-top: 9px;
    font-size: 12px;
  }


  .eq-card {
    min-height: 210px;
  }

  .eq-bars {
    height: 150px;
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    gap: 12px;
    margin-top: 14px;
  }

  .eq-column {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
  }

  .eq-track {
    width: 100%;
    max-width: 55px;
    height: 115px;
    background: #090b0e;
    border: 1px solid var(--line);
    border-radius: 8px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
  }

  .eq-fill {
    width: 100%;
    height: 0%;
    background: linear-gradient(
      to top,
      #45d483 0%,
      #f0bf48 70%,
      #ff6b6b 100%
    );
    transition: height 80ms linear;
  }

  .eq-label {
    margin-top: 7px;
    font-size: 10px;
    color: var(--muted);
    text-align: center;
    font-weight: 700;
  }

  .eq-status {
    margin-top: 8px;
    text-align: center;
  }


  .spectrum {
    height: 160px;
    display: flex;
    align-items: flex-end;
    gap: 5px;
    margin-top: 12px;
    width: 100%;
  }

  .spectrum-column {
    flex: 1;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
  }

  .spectrum-track {
    position: relative;
    width: 100%;
    max-width: 38px;
    height: 128px;
    background: #090b0e;
    border: 1px solid var(--line);
    border-radius: 5px;
    overflow: hidden;
  }

  .spectrum-fill {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 0%;
    background: linear-gradient(
      to top,
      var(--spectrum-low) 0%,
      var(--spectrum-mid) 45%,
      var(--spectrum-high) 72%,
      var(--spectrum-top) 100%
    );
    transition: height 55ms linear;
  }

  .peak-line {
    position: absolute;
    left: 1px;
    right: 1px;
    bottom: 0%;
    height: 3px;
    background: var(--peak);
    opacity: .95;
    box-shadow: 0 0 4px rgba(255,255,255,.65);
    transition: bottom 55ms linear;
  }

  .spectrum-label {
    margin-top: 5px;
    font-size: 8px;
    line-height: 1;
    color: var(--muted);
    font-weight: 700;
    white-space: nowrap;
  }


  .report-group {
    margin-bottom: 14px;
  }

  .report-heading {
    color: var(--muted);
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 1px;
    font-weight: 800;
    margin: 10px 2px 7px;
  }

  .report-table-wrap {
    overflow-x: auto;
    margin-top: 8px;
  }

  .report-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
  }

  .report-table th {
    text-align: left;
    color: var(--muted);
    padding: 7px 6px;
    border-bottom: 1px solid var(--line);
    font-size: 10px;
    text-transform: uppercase;
  }

  .report-table td {
    padding: 8px 6px;
    border-bottom: 1px solid var(--line);
    font-variant-numeric: tabular-nums;
  }

  .report-table tr:last-child td {
    border-bottom: none;
  }

  .report-mini-value {
    margin-top: 8px;
    font-size: 28px;
    font-weight: 900;
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }


  .gauge-cluster {
    display: grid;
    grid-template-columns: 1.25fr 1fr 1fr;
    gap: 9px;
    margin-bottom: 10px;
  }

  .gauge-card {
    min-width: 0;
    padding: 12px 8px 10px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: linear-gradient(180deg, var(--panel), var(--panel2));
    text-align: center;
  }

  .gauge {
    --value: 0;
    --gauge-color: var(--good);

    position: relative;
    width: min(150px, 100%);
    aspect-ratio: 1;
    margin: 5px auto 0;
    border-radius: 50%;

    background:
      radial-gradient(
        circle at center,
        var(--panel2) 0 55%,
        transparent 56%
      ),
      conic-gradient(
        from 225deg,
        var(--gauge-color) 0deg,
        var(--gauge-color) calc(var(--value) * 2.7deg),
        #30353d calc(var(--value) * 2.7deg),
        #30353d 270deg,
        transparent 270deg,
        transparent 360deg
      );
  }

  .gauge::after {
    content: "";
    position: absolute;
    inset: 9%;
    border-radius: 50%;
    border: 1px solid var(--line);
    pointer-events: none;
  }

  .gauge-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 4px;
  }

  .gauge-number {
    font-size: clamp(25px, 5vw, 42px);
    line-height: 1;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
  }

  .gauge-unit {
    margin-top: 5px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
  }

  .gauge-name {
    margin-top: 7px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .7px;
  }

  .gauge-scale {
    margin-top: 2px;
    color: var(--muted);
    font-size: 9px;
  }

  .tach-gauge {
    --gauge-color: var(--warn);
  }

  .fuel-gauge {
    --gauge-color: var(--good);
  }

  .gauge-demo {
    text-align: center;
    margin: 0 0 10px;
  }

  @media (max-width: 520px) {
    .gauge-cluster {
      grid-template-columns: 1.2fr 1fr 1fr;
      gap: 5px;
    }

    .gauge-card {
      padding: 8px 4px;
    }

    .gauge-number {
      font-size: 25px;
    }

    .gauge-unit {
      font-size: 9px;
    }

    .gauge-name {
      font-size: 9px;
    }

    .gauge-scale {
      display: none;
    }
  }


  .maintenance-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
  }

  .maintenance-form label {
    display: block;
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 4px;
  }

  .maintenance-form input,
  .maintenance-form select {
    width: 100%;
    min-height: 44px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--panel2);
    color: var(--text);
    font-size: 16px;
  }

  .maintenance-button {
    width: 100%;
    margin-top: 9px;
    min-height: 48px;
  }

  .maintenance-detail {
    margin-top: 7px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
  }

  .maintenance-history {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    font-size: 12px;
  }

  .maintenance-history th,
  .maintenance-history td {
    padding: 7px 5px;
    border-bottom: 1px solid var(--line);
    text-align: left;
  }

  .maintenance-history th {
    color: var(--muted);
    font-size: 10px;
    text-transform: uppercase;
  }

  @media (min-width: 850px) {
    body { padding: 14px 14px 86px; }
    .grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
    }
    .card.full { grid-column: 1 / -1; }
    .hero-speed { grid-column: span 2; }
    .controls { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .nav {
      max-width: 800px;
      left: 50%;
      right: auto;
      width: calc(100% - 20px);
      transform: translateX(-50%);
      border: 1px solid var(--line);
      border-bottom: 0;
      border-radius: 14px 14px 0 0;
    }
  }

/* PEGGY_LIVE_TRIP_REPORTS_V1 */

button:disabled {
  opacity: 0.30;
  cursor: not-allowed;
  filter: grayscale(70%);
}

.trip-history-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  font-size: 14px;
}

.trip-history-table th,
.trip-history-table td {
  padding: 8px 7px;
  text-align: left;
  border-bottom: 1px solid rgba(255,255,255,.12);
}

.trip-history-table th {
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: .70;
}

.trip-history-empty {
  padding: 15px 0 4px;
  opacity: .65;
}


  .led-mode-button.selected {
    color: var(--text);
    border-color: var(--accent-border);
    background: var(--accent);
    box-shadow:
      0 0 0 2px var(--accent-border),
      0 0 14px color-mix(
        in srgb,
        var(--accent-border) 55%,
        transparent
      );
    transform: translateY(-1px);
  }

  body.theme-american
  .led-mode-button.selected {
    color: #ffffff;
    border-color: #e8edf5;
    background:
      linear-gradient(
        135deg,
        #b22234 0%,
        #b22234 47%,
        #f4f6fa 47%,
        #f4f6fa 53%,
        #17477e 53%,
        #17477e 100%
      );
  }

  .led-mode-button.selected::after {
    content: "  ✓";
    font-weight: 900;
  }


  .quick-show-card {
    min-height: auto;
  }

  .quick-scene-grid {
    display: grid;
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
  }

  .quick-scene-button {
    min-height: 52px;
    padding: 8px 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px solid var(--line);
    background:
      linear-gradient(
        180deg,
        var(--button-bg1),
        var(--button-bg2)
      );
    color: var(--text);
  }

  .quick-scene-button.selected {
    color: var(--text);
    border-color: var(--accent-border);
    background: var(--accent);
    box-shadow:
      0 0 0 2px var(--accent-border),
      0 0 14px color-mix(
        in srgb,
        var(--accent-border) 55%,
        transparent
      );
  }

  .quick-scene-button.selected::after {
    content: "  ▶";
    font-weight: 900;
  }

  body.theme-american
  .quick-scene-button.selected {
    color: #ffffff;
    border-color: #e8edf5;
    background:
      linear-gradient(
        135deg,
        #b22234 0%,
        #b22234 47%,
        #f4f6fa 47%,
        #f4f6fa 53%,
        #17477e 53%,
        #17477e 100%
      );
  }

  .quick-show-actions {
    margin-top: 10px;
  }

  .show-blackout-button {
    width: 100%;
    min-height: 54px;
    border: 2px solid #ff665f;
    background:
      linear-gradient(
        180deg,
        #8d1717,
        #4b0909
      );
    color: #ffffff;
    font-weight: 900;
  }

  .show-blackout-button:disabled {
    opacity: 0.55;
  }

  .quick-scene-empty {
    grid-column: 1 / -1;
    padding: 14px;
    color: var(--muted);
    text-align: center;
    border: 1px dashed var(--line);
    border-radius: 8px;
  }

  @media (min-width: 900px) {
    .quick-scene-grid {
      grid-template-columns:
        repeat(3, minmax(0, 1fr));
    }
  }


/* PEGGY_WLED_LIVE_V1 */

.wled-page-grid {
  gap: 12px;
}

.wled-summary-card,
.wled-live-card,
.wled-quick-card {
  min-height: auto;
}

.wled-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 6px;
}

.wled-summary-title {
  font-size: 26px;
}

.wled-power-button {
  min-width: 190px;
  min-height: 54px;
}

.wled-power-button.power-on {
  border-color: #4bd37b;
  box-shadow: 0 0 14px rgba(75, 211, 123, .32);
}

.wled-quick-controls {
  margin-top: 10px;
}

.wled-control-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 10px;
}

.wled-control-block {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .025);
}

.wled-effect-block {
  grid-column: 1 / -1;
}

.wled-control-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .6px;
}

.wled-control-heading strong {
  color: var(--text);
}

.wled-range {
  width: 100%;
  height: 34px;
  accent-color: var(--accent-border);
  cursor: pointer;
}

.wled-color-picker {
  width: 100%;
  height: 48px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--button-bg1);
  cursor: pointer;
}

.wled-effect-select {
  width: 100%;
  min-height: 48px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--button-bg1);
  color: var(--text);
  font: inherit;
}

#wledCurrentState {
  margin-top: 9px;
}

#wled-live-message,
#buttonMessage {
  margin-top: 12px;
}

@media (max-width: 700px) {
  .wled-control-grid {
    grid-template-columns: 1fr;
  }

  .wled-effect-block {
    grid-column: auto;
  }

  .wled-summary-row {
    align-items: stretch;
    flex-direction: column;
  }

  .wled-power-button {
    width: 100%;
  }
}


/* PEGGY_WLED_ZONES_V1 */

.wled-zone-card {
  min-height: auto;
}

.wled-zone-grid {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin-top: 10px;
}

.wled-zone-button {
  min-height: 50px;
  padding: 8px 10px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wled-zone-button.selected {
  color: var(--text);
  border-color: var(--accent-border);
  background: var(--accent);
  box-shadow:
    0 0 0 2px var(--accent-border),
    0 0 14px color-mix(
      in srgb,
      var(--accent-border) 50%,
      transparent
    );
}

body.theme-american
.wled-zone-button.selected {
  color: #ffffff;
  border-color: #e8edf5;
  background:
    linear-gradient(
      135deg,
      #b22234 0%,
      #b22234 47%,
      #f4f6fa 47%,
      #f4f6fa 53%,
      #17477e 53%,
      #17477e 100%
    );
}

.wled-zone-button.selected::after {
  content: "  ✓";
  font-weight: 900;
}

#wledZoneDescription {
  margin-top: 11px;
}

@media (max-width: 700px) {
  .wled-zone-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}


/* PEGGY_WLED_QUICK_COLORS_V1 */

.wled-color-card {
  min-height: auto;
}

.wled-color-grid {
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(125px, 1fr));
  gap: 9px;
  margin-top: 10px;
}

.wled-color-button {
  position: relative;
  min-height: 52px;
  padding: 9px 8px;
  overflow: hidden;
  color: #ffffff;
  border: 2px solid rgba(255, 255, 255, .28);
  background:
    linear-gradient(
      rgba(0, 0, 0, .08),
      rgba(0, 0, 0, .22)
    ),
    var(--swatch);
  text-shadow:
    0 1px 2px rgba(0, 0, 0, .9),
    0 0 5px rgba(0, 0, 0, .75);
}

.wled-color-button.light-swatch {
  color: #07111f;
  text-shadow:
    0 1px 1px rgba(255, 255, 255, .55);
}

.wled-color-button.selected {
  border-color: #ffffff;
  box-shadow:
    0 0 0 3px var(--accent-border),
    0 0 18px var(--swatch);
  transform: translateY(-1px);
}

.wled-color-button.selected::after {
  content: "✓";
  position: absolute;
  top: 4px;
  right: 7px;
  width: 20px;
  height: 20px;
  line-height: 20px;
  color: #ffffff;
  border-radius: 50%;
  background: rgba(0, 0, 0, .72);
  text-shadow: none;
}

.wled-color-help {
  margin-top: 11px;
}

@media (max-width: 700px) {
  .wled-color-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}


/* PEGGY_QUICK_ACTIONS_CLEANUP */

.wled-quick-controls {
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
}


/* PEGGY_HALLOWEEN_THEME_V1 */

.theme-select {
  min-width: 190px;
  padding: 10px 34px 10px 12px;
  color: var(--text);
  border: 1px solid var(--accent-border);
  border-radius: 10px;
  background-color: var(--panel);
  font-weight: 900;
  text-align: center;
  cursor: pointer;
}

.theme-select option {
  color: #ffffff;
  background: #111111;
  font-weight: 800;
}

body.theme-halloween {
  --bg: #050303;
  --panel: #17090c;
  --panel2: #0d0507;
  --text: #fff3e8;
  --muted: #c9a9a2;
  --line: #64101c;

  --good: #ff7417;
  --warn: #ff9d24;
  --bad: #ff1838;

  --accent: #9f0018;
  --accent-border: #ff3b1f;
  --button-bg1: #4c0710;
  --button-bg2: #120507;

  --spectrum-low: #7e0014;
  --spectrum-mid: #d31824;
  --spectrum-high: #ff6b13;
  --spectrum-top: #ffd02b;
  --peak: #fff0dc;

  background-color: #050303;
  background-image:
    radial-gradient(
      circle at 12% 18%,
      rgba(125, 0, 19, .16),
      transparent 23%
    ),
    radial-gradient(
      circle at 86% 62%,
      rgba(255, 74, 0, .07),
      transparent 20%
    ),
    linear-gradient(
      145deg,
      #050303,
      #0e0306 52%,
      #020202
    );
}

body.theme-halloween .topbar {
  border-bottom: 3px solid #8f0016;
  box-shadow:
    0 2px 0 #ff5a14,
    0 6px 18px rgba(178, 0, 25, .45);
}

body.theme-halloween .bike-name {
  color: #fff2df;
  text-shadow:
    2px 2px 0 #770012,
    0 0 7px #f01628,
    0 0 15px rgba(255, 72, 0, .65);
}

body.theme-halloween .theme-select {
  color: #fff2e4;
  border: 2px solid #d7192e;
  background:
    linear-gradient(
      180deg,
      #730012,
      #260208 48%,
      #090405
    );
  box-shadow:
    inset 0 2px 0 rgba(255, 111, 35, .34),
    0 0 12px rgba(217, 0, 32, .38);
}

body.theme-halloween .card {
  border-color: #67101c;
  background:
    linear-gradient(
      150deg,
      rgba(44, 7, 13, .96),
      rgba(12, 5, 7, .98) 60%
    );
  box-shadow:
    inset 4px 0 0 #850015,
    inset -1px 0 0 #ff5b18,
    0 5px 15px rgba(0, 0, 0, .5);
}

body.theme-halloween .section-title,
body.theme-halloween .label {
  color: #ffb16b;
  text-shadow:
    0 0 8px rgba(255, 60, 20, .35);
}

body.theme-halloween button:not(
  .wled-color-button
):not(
  .show-blackout-button
) {
  color: #fff5e9;
  border-color: #8f1625;
  background:
    radial-gradient(
      circle at 17% 0,
      #bc001d 0 8px,
      transparent 9px
    ),
    radial-gradient(
      circle at 47% 0,
      #780011 0 12px,
      transparent 13px
    ),
    radial-gradient(
      circle at 78% 0,
      #a90019 0 7px,
      transparent 8px
    ),
    linear-gradient(
      180deg,
      #760012 0,
      #3d070d 18px,
      #160608 55%,
      #090405 100%
    );
  box-shadow:
    inset 0 2px 0 rgba(255, 91, 38, .28),
    inset 0 -3px 8px rgba(0, 0, 0, .75),
    0 3px 7px rgba(0, 0, 0, .55);
  text-shadow:
    1px 2px 0 #340006,
    0 0 5px rgba(255, 74, 20, .35);
}

body.theme-halloween button:not(
  .wled-color-button
):not(
  .show-blackout-button
):hover {
  border-color: #ff5127;
  filter: brightness(1.18);
  box-shadow:
    0 0 13px rgba(255, 22, 48, .65);
}

body.theme-halloween .nav {
  border-top: 2px solid #8f0016;
  background:
    linear-gradient(
      180deg,
      rgba(31, 4, 9, .98),
      rgba(3, 2, 2, .99)
    );
}

body.theme-halloween .nav button.active,
body.theme-halloween .led-mode-button.selected,
body.theme-halloween .quick-scene-button.selected,
body.theme-halloween .wled-zone-button.selected {
  color: #ffffff;
  border-color: #ff6a20;
  background:
    radial-gradient(
      circle at 20% 0,
      #ff1738 0 10px,
      transparent 11px
    ),
    radial-gradient(
      circle at 58% 0,
      #b0001b 0 14px,
      transparent 15px
    ),
    linear-gradient(
      180deg,
      #d00020,
      #760011 45%,
      #270207
    );
  box-shadow:
    0 0 0 2px #5e000e,
    0 0 16px rgba(255, 37, 24, .8),
    inset 0 2px 0 rgba(255, 177, 78, .55);
}

body.theme-halloween
.wled-color-button.selected {
  border-color: #ff6a20;
  box-shadow:
    0 0 0 3px #65000f,
    0 0 17px rgba(255, 44, 22, .85);
}

body.theme-halloween
.show-blackout-button {
  border-color: #ff6a20;
  background:
    linear-gradient(
      180deg,
      #d00020,
      #66000f 48%,
      #180205
    );
  box-shadow:
    0 0 15px rgba(255, 20, 35, .55);
}

body.theme-halloween input[type="range"],
body.theme-halloween input[type="color"] {
  accent-color: #e00022;
}

@media (max-width: 700px) {
  .theme-select {
    min-width: 170px;
    max-width: 190px;
    font-size: 12px;
  }
}

/* PEGGY_HALLOWEEN_DRIPS_V3 */

body.theme-halloween button:not(
  .wled-color-button
) {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/*
  Narrow blood edge with several small drips.
  Maximum depth is only 14px.
*/
body.theme-halloween button:not(
  .wled-color-button
)::before {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;

  top: 0;
  left: 0;
  width: 100%;
  height: 14px;

  opacity: .82;

  background:
    linear-gradient(
      180deg,
      #e00024 0%,
      #a10018 55%,
      #63000e 100%
    );

  clip-path: polygon(
    0 0,
    100% 0,
    100% 31%,

    93% 31%,
    93% 58%,
    92% 75%,
    91% 58%,
    91% 31%,

    76% 31%,
    76% 48%,
    75% 58%,
    74% 48%,
    74% 31%,

    57% 31%,
    57% 72%,
    56% 100%,
    55% 72%,
    55% 31%,

    37% 31%,
    37% 51%,
    36% 67%,
    35% 51%,
    35% 31%,

    18% 31%,
    18% 62%,
    17% 84%,
    16% 62%,
    16% 31%,

    0 31%
  );

  filter:
    drop-shadow(
      0 1px 1px rgba(20, 0, 3, .8)
    )
    drop-shadow(
      0 0 2px rgba(255, 20, 35, .4)
    );
}

/* Brighten only the thin blood edge when selected. */
body.theme-halloween .nav button.active::before,
body.theme-halloween
.led-mode-button.selected::before,
body.theme-halloween
.quick-scene-button.selected::before,
body.theme-halloween
.wled-zone-button.selected::before {
  background:
    linear-gradient(
      180deg,
      #ff3150,
      #cf001f 58%,
      #790011
    );
}

/* Guarantee that button labels remain bright. */
body.theme-halloween button {
  color: #fff7ed;
  text-shadow:
    0 2px 2px #000000,
    0 0 4px #000000;
}


/* PEGGY_THEME_PACK_V1 */

body.theme-ghost {
  --bg: #050200;
  --panel: #180704;
  --panel2: #090201;
  --text: #fff2df;
  --muted: #caa890;
  --line: #712108;

  --good: #ff7417;
  --warn: #ffad32;
  --bad: #ff2b16;

  --accent: #c93700;
  --accent-border: #ff791a;
  --button-bg1: #481004;
  --button-bg2: #120301;

  --spectrum-low: #651000;
  --spectrum-mid: #d83b00;
  --spectrum-high: #ff861c;
  --spectrum-top: #ffe078;
  --peak: #fff2df;

  background:
    radial-gradient(
      circle at 15% 10%,
      #c9370033,
      transparent 24%
    ),
    linear-gradient(
      145deg,
      #050200,
      #090201
    );
}

body.theme-ghost .topbar {
  border-bottom: 2px solid #ff791a;
  box-shadow:
    0 3px 14px #ff5a0066;
}

body.theme-ghost .bike-name {
  color: #fff2df;
  text-shadow:
    0 0 7px #ff5a00,
    2px 2px 0 #000000;
}

body.theme-ghost .card {
  border-color: #712108;
  box-shadow:
    inset 3px 0 0 #c93700,
    0 4px 12px rgba(0, 0, 0, .48);
}

body.theme-ghost .theme-select {
  color: #fff2df;
  border-color: #ff791a;
  background:
    linear-gradient(
      180deg,
      #481004,
      #120301
    );
  box-shadow:
    0 0 9px #ff5a0066;
}

body.theme-ghost .nav button.active,
body.theme-ghost .led-mode-button.selected,
body.theme-ghost .quick-scene-button.selected,
body.theme-ghost .wled-zone-button.selected {
  color: #fff2df;
  border-color: #ff791a;
  background: linear-gradient(135deg,#130200 0%,#6e1000 30%,#ff4a00 58%,#ffb21a 73%,#491000 100%);
  box-shadow:
    0 0 0 2px #c93700,
    0 0 15px #ff5a0099;
}

body.theme-ghost
.wled-color-button.selected {
  border-color: #ff791a;
  box-shadow:
    0 0 0 3px #c93700,
    0 0 15px #ff5a0099;
}

body.theme-cyberpunk {
  --bg: #04030e;
  --panel: #100b25;
  --panel2: #080516;
  --text: #f9efff;
  --muted: #b7a9cc;
  --line: #493b7c;

  --good: #20f6e9;
  --warn: #ffe436;
  --bad: #ff277d;

  --accent: #d7148a;
  --accent-border: #25e7ff;
  --button-bg1: #251251;
  --button-bg2: #0c0820;

  --spectrum-low: #19d8ff;
  --spectrum-mid: #894cff;
  --spectrum-high: #ff21a6;
  --spectrum-top: #ffe33d;
  --peak: #f9efff;

  background:
    radial-gradient(
      circle at 15% 10%,
      #d7148a33,
      transparent 24%
    ),
    linear-gradient(
      145deg,
      #04030e,
      #080516
    );
}

body.theme-cyberpunk .topbar {
  border-bottom: 2px solid #25e7ff;
  box-shadow:
    0 3px 14px #f225ff66;
}

body.theme-cyberpunk .bike-name {
  color: #f9efff;
  text-shadow:
    0 0 7px #f225ff,
    2px 2px 0 #000000;
}

body.theme-cyberpunk .card {
  border-color: #493b7c;
  box-shadow:
    inset 3px 0 0 #d7148a,
    0 4px 12px rgba(0, 0, 0, .48);
}

body.theme-cyberpunk .theme-select {
  color: #f9efff;
  border-color: #25e7ff;
  background:
    linear-gradient(
      180deg,
      #251251,
      #0c0820
    );
  box-shadow:
    0 0 9px #f225ff66;
}

body.theme-cyberpunk .nav button.active,
body.theme-cyberpunk .led-mode-button.selected,
body.theme-cyberpunk .quick-scene-button.selected,
body.theme-cyberpunk .wled-zone-button.selected {
  color: #f9efff;
  border-color: #25e7ff;
  background: linear-gradient(135deg,#13e6f4 0%,#1250a8 34%,#8a1fd1 58%,#ff188e 100%);
  box-shadow:
    0 0 0 2px #d7148a,
    0 0 15px #f225ff99;
}

body.theme-cyberpunk
.wled-color-button.selected {
  border-color: #25e7ff;
  box-shadow:
    0 0 0 3px #d7148a,
    0 0 15px #f225ff99;
}

body.theme-toxic {
  --bg: #030703;
  --panel: #111b0d;
  --panel2: #080e06;
  --text: #efffd9;
  --muted: #9eb58a;
  --line: #425b29;

  --good: #91ff27;
  --warn: #d7ff26;
  --bad: #ff4d19;

  --accent: #528d16;
  --accent-border: #aaff21;
  --button-bg1: #263a13;
  --button-bg2: #0c1407;

  --spectrum-low: #1e7e22;
  --spectrum-mid: #68cf1d;
  --spectrum-high: #c6ff27;
  --spectrum-top: #f3ff80;
  --peak: #efffd9;

  background:
    radial-gradient(
      circle at 15% 10%,
      #528d1633,
      transparent 24%
    ),
    linear-gradient(
      145deg,
      #030703,
      #080e06
    );
}

body.theme-toxic .topbar {
  border-bottom: 2px solid #aaff21;
  box-shadow:
    0 3px 14px #95ff2066;
}

body.theme-toxic .bike-name {
  color: #efffd9;
  text-shadow:
    0 0 7px #95ff20,
    2px 2px 0 #000000;
}

body.theme-toxic .card {
  border-color: #425b29;
  box-shadow:
    inset 3px 0 0 #528d16,
    0 4px 12px rgba(0, 0, 0, .48);
}

body.theme-toxic .theme-select {
  color: #efffd9;
  border-color: #aaff21;
  background:
    linear-gradient(
      180deg,
      #263a13,
      #0c1407
    );
  box-shadow:
    0 0 9px #95ff2066;
}

body.theme-toxic .nav button.active,
body.theme-toxic .led-mode-button.selected,
body.theme-toxic .quick-scene-button.selected,
body.theme-toxic .wled-zone-button.selected {
  color: #efffd9;
  border-color: #aaff21;
  background: repeating-linear-gradient(135deg,#93db15 0 18px,#162208 18px 34px);
  box-shadow:
    0 0 0 2px #528d16,
    0 0 15px #95ff2099;
}

body.theme-toxic
.wled-color-button.selected {
  border-color: #aaff21;
  box-shadow:
    0 0 0 3px #528d16,
    0 0 15px #95ff2099;
}

body.theme-ice {
  --bg: #020813;
  --panel: #091a2b;
  --panel2: #04101e;
  --text: #f3fbff;
  --muted: #a5bfd1;
  --line: #315c79;

  --good: #7deaff;
  --warn: #d6f4ff;
  --bad: #ff637c;

  --accent: #147daf;
  --accent-border: #a3efff;
  --button-bg1: #17456a;
  --button-bg2: #071829;

  --spectrum-low: #136ca1;
  --spectrum-mid: #3dc9e8;
  --spectrum-high: #a4eeff;
  --spectrum-top: #ffffff;
  --peak: #f3fbff;

  background:
    radial-gradient(
      circle at 15% 10%,
      #147daf33,
      transparent 24%
    ),
    linear-gradient(
      145deg,
      #020813,
      #04101e
    );
}

body.theme-ice .topbar {
  border-bottom: 2px solid #a3efff;
  box-shadow:
    0 3px 14px #75dcff66;
}

body.theme-ice .bike-name {
  color: #f3fbff;
  text-shadow:
    0 0 7px #75dcff,
    2px 2px 0 #000000;
}

body.theme-ice .card {
  border-color: #315c79;
  box-shadow:
    inset 3px 0 0 #147daf,
    0 4px 12px rgba(0, 0, 0, .48);
}

body.theme-ice .theme-select {
  color: #f3fbff;
  border-color: #a3efff;
  background:
    linear-gradient(
      180deg,
      #17456a,
      #071829
    );
  box-shadow:
    0 0 9px #75dcff66;
}

body.theme-ice .nav button.active,
body.theme-ice .led-mode-button.selected,
body.theme-ice .quick-scene-button.selected,
body.theme-ice .wled-zone-button.selected {
  color: #f3fbff;
  border-color: #a3efff;
  background: linear-gradient(135deg,#e8fcff 0%,#7ad9ef 24%,#247db6 57%,#092c55 100%);
  box-shadow:
    0 0 0 2px #147daf,
    0 0 15px #75dcff99;
}

body.theme-ice
.wled-color-button.selected {
  border-color: #a3efff;
  box-shadow:
    0 0 0 3px #147daf,
    0 0 15px #75dcff99;
}

body.theme-harley {
  --bg: #070706;
  --panel: #181511;
  --panel2: #0d0b09;
  --text: #f0eee9;
  --muted: #aaa49a;
  --line: #605c55;

  --good: #e87823;
  --warn: #e6a04f;
  --bad: #f34c36;

  --accent: #a84912;
  --accent-border: #d3d5d5;
  --button-bg1: #33251c;
  --button-bg2: #15110d;

  --spectrum-low: #8b3e13;
  --spectrum-mid: #d07126;
  --spectrum-high: #c7c9c9;
  --spectrum-top: #ffffff;
  --peak: #f0eee9;

  background:
    radial-gradient(
      circle at 15% 10%,
      #a8491233,
      transparent 24%
    ),
    linear-gradient(
      145deg,
      #070706,
      #0d0b09
    );
}

body.theme-harley .topbar {
  border-bottom: 2px solid #d3d5d5;
  box-shadow:
    0 3px 14px #ed741e66;
}

body.theme-harley .bike-name {
  color: #f0eee9;
  text-shadow:
    0 0 7px #ed741e,
    2px 2px 0 #000000;
}

body.theme-harley .card {
  border-color: #605c55;
  box-shadow:
    inset 3px 0 0 #a84912,
    0 4px 12px rgba(0, 0, 0, .48);
}

body.theme-harley .theme-select {
  color: #f0eee9;
  border-color: #d3d5d5;
  background:
    linear-gradient(
      180deg,
      #33251c,
      #15110d
    );
  box-shadow:
    0 0 9px #ed741e66;
}

body.theme-harley .nav button.active,
body.theme-harley .led-mode-button.selected,
body.theme-harley .quick-scene-button.selected,
body.theme-harley .wled-zone-button.selected {
  color: #f0eee9;
  border-color: #d3d5d5;
  background: linear-gradient(135deg,#202020 0%,#747474 24%,#e8e8e8 43%,#a94712 46%,#f06b1a 68%,#25140c 100%);
  box-shadow:
    0 0 0 2px #a84912,
    0 0 15px #ed741e99;
}

body.theme-harley
.wled-color-button.selected {
  border-color: #d3d5d5;
  box-shadow:
    0 0 0 3px #a84912,
    0 0 15px #ed741e99;
}

body.theme-military {
  --bg: #0a0d07;
  --panel: #1b2115;
  --panel2: #10140c;
  --text: #eee8d5;
  --muted: #aaa991;
  --line: #575c3c;

  --good: #a8c66c;
  --warn: #d9ad59;
  --bad: #d95643;

  --accent: #596b36;
  --accent-border: #c19a51;
  --button-bg1: #3a4328;
  --button-bg2: #171d10;

  --spectrum-low: #536536;
  --spectrum-mid: #82954e;
  --spectrum-high: #c3a25d;
  --spectrum-top: #eee4bd;
  --peak: #eee8d5;

  background:
    radial-gradient(
      circle at 15% 10%,
      #596b3633,
      transparent 24%
    ),
    linear-gradient(
      145deg,
      #0a0d07,
      #10140c
    );
}

body.theme-military .topbar {
  border-bottom: 2px solid #c19a51;
  box-shadow:
    0 3px 14px #b99a5566;
}

body.theme-military .bike-name {
  color: #eee8d5;
  text-shadow:
    0 0 7px #b99a55,
    2px 2px 0 #000000;
}

body.theme-military .card {
  border-color: #575c3c;
  box-shadow:
    inset 3px 0 0 #596b36,
    0 4px 12px rgba(0, 0, 0, .48);
}

body.theme-military .theme-select {
  color: #eee8d5;
  border-color: #c19a51;
  background:
    linear-gradient(
      180deg,
      #3a4328,
      #171d10
    );
  box-shadow:
    0 0 9px #b99a5566;
}

body.theme-military .nav button.active,
body.theme-military .led-mode-button.selected,
body.theme-military .quick-scene-button.selected,
body.theme-military .wled-zone-button.selected {
  color: #eee8d5;
  border-color: #c19a51;
  background: linear-gradient(135deg,#807044 0%,#394526 48%,#171d10 49%,#66743f 100%);
  box-shadow:
    0 0 0 2px #596b36,
    0 0 15px #b99a5599;
}

body.theme-military
.wled-color-button.selected {
  border-color: #c19a51;
  box-shadow:
    0 0 0 3px #596b36,
    0 0 15px #b99a5599;
}

body.theme-christmas {
  --bg: #031008;
  --panel: #0a2414;
  --panel2: #06140c;
  --text: #fff8e8;
  --muted: #bad0bd;
  --line: #356443;

  --good: #48d66d;
  --warn: #f4cf58;
  --bad: #ff4053;

  --accent: #af1028;
  --accent-border: #efd56b;
  --button-bg1: #164c2a;
  --button-bg2: #081a0e;

  --spectrum-low: #168542;
  --spectrum-mid: #e12a3d;
  --spectrum-high: #f0cf58;
  --spectrum-top: #ffffff;
  --peak: #fff8e8;

  background:
    radial-gradient(
      circle at 15% 10%,
      #af102833,
      transparent 24%
    ),
    linear-gradient(
      145deg,
      #031008,
      #06140c
    );
}

body.theme-christmas .topbar {
  border-bottom: 2px solid #efd56b;
  box-shadow:
    0 3px 14px #ff334966;
}

body.theme-christmas .bike-name {
  color: #fff8e8;
  text-shadow:
    0 0 7px #ff3349,
    2px 2px 0 #000000;
}

body.theme-christmas .card {
  border-color: #356443;
  box-shadow:
    inset 3px 0 0 #af1028,
    0 4px 12px rgba(0, 0, 0, .48);
}

body.theme-christmas .theme-select {
  color: #fff8e8;
  border-color: #efd56b;
  background:
    linear-gradient(
      180deg,
      #164c2a,
      #081a0e
    );
  box-shadow:
    0 0 9px #ff334966;
}

body.theme-christmas .nav button.active,
body.theme-christmas .led-mode-button.selected,
body.theme-christmas .quick-scene-button.selected,
body.theme-christmas .wled-zone-button.selected {
  color: #fff8e8;
  border-color: #efd56b;
  background: linear-gradient(135deg,#b20f28 0 44%,#f5e8c8 44% 51%,#126b37 51% 100%);
  box-shadow:
    0 0 0 2px #af1028,
    0 0 15px #ff334999;
}

body.theme-christmas
.wled-color-button.selected {
  border-color: #efd56b;
  box-shadow:
    0 0 0 3px #af1028,
    0 0 15px #ff334999;
}

body.theme-night {
  --bg: #000000;
  --panel: #090303;
  --panel2: #030101;
  --text: #bd4b4b;
  --muted: #713636;
  --line: #351010;

  --good: #8c3939;
  --warn: #a44732;
  --bad: #d14848;

  --accent: #581010;
  --accent-border: #7c2727;
  --button-bg1: #190505;
  --button-bg2: #050101;

  --spectrum-low: #451111;
  --spectrum-mid: #792323;
  --spectrum-high: #a53a3a;
  --spectrum-top: #c55656;
  --peak: #bd4b4b;

  background:
    radial-gradient(
      circle at 15% 10%,
      #58101033,
      transparent 24%
    ),
    linear-gradient(
      145deg,
      #000000,
      #030101
    );
}

body.theme-night .topbar {
  border-bottom: 2px solid #7c2727;
  box-shadow:
    0 3px 14px #6d171766;
}

body.theme-night .bike-name {
  color: #bd4b4b;
  text-shadow:
    0 0 7px #6d1717,
    2px 2px 0 #000000;
}

body.theme-night .card {
  border-color: #351010;
  box-shadow:
    inset 3px 0 0 #581010,
    0 4px 12px rgba(0, 0, 0, .48);
}

body.theme-night .theme-select {
  color: #bd4b4b;
  border-color: #7c2727;
  background:
    linear-gradient(
      180deg,
      #190505,
      #050101
    );
  box-shadow:
    0 0 9px #6d171766;
}

body.theme-night .nav button.active,
body.theme-night .led-mode-button.selected,
body.theme-night .quick-scene-button.selected,
body.theme-night .wled-zone-button.selected {
  color: #bd4b4b;
  border-color: #7c2727;
  background: linear-gradient(180deg,#581010,#200505);
  box-shadow:
    0 0 0 2px #581010,
    0 0 15px #6d171799;
}

body.theme-night
.wled-color-button.selected {
  border-color: #7c2727;
  box-shadow:
    0 0 0 3px #581010,
    0 0 15px #6d171799;
}

body.theme-synthwave {
  --bg: #070318;
  --panel: #171035;
  --panel2: #0c0722;
  --text: #fff2ff;
  --muted: #c0a8db;
  --line: #533b85;

  --good: #2de2e6;
  --warn: #ffe84a;
  --bad: #ff3864;

  --accent: #e52ca7;
  --accent-border: #2de2e6;
  --button-bg1: #3a1766;
  --button-bg2: #12082b;

  --spectrum-low: #2de2e6;
  --spectrum-mid: #7b4bff;
  --spectrum-high: #f52cb5;
  --spectrum-top: #ffed4a;
  --peak: #fff2ff;

  background:
    radial-gradient(
      circle at 15% 10%,
      #e52ca733,
      transparent 24%
    ),
    linear-gradient(
      145deg,
      #070318,
      #0c0722
    );
}

body.theme-synthwave .topbar {
  border-bottom: 2px solid #2de2e6;
  box-shadow:
    0 3px 14px #fb2ab566;
}

body.theme-synthwave .bike-name {
  color: #fff2ff;
  text-shadow:
    0 0 7px #fb2ab5,
    2px 2px 0 #000000;
}

body.theme-synthwave .card {
  border-color: #533b85;
  box-shadow:
    inset 3px 0 0 #e52ca7,
    0 4px 12px rgba(0, 0, 0, .48);
}

body.theme-synthwave .theme-select {
  color: #fff2ff;
  border-color: #2de2e6;
  background:
    linear-gradient(
      180deg,
      #3a1766,
      #12082b
    );
  box-shadow:
    0 0 9px #fb2ab566;
}

body.theme-synthwave .nav button.active,
body.theme-synthwave .led-mode-button.selected,
body.theme-synthwave .quick-scene-button.selected,
body.theme-synthwave .wled-zone-button.selected {
  color: #fff2ff;
  border-color: #2de2e6;
  background: linear-gradient(180deg,#ff2eaf 0%,#812bd1 48%,#174ac6 76%,#14cfd5 100%);
  box-shadow:
    0 0 0 2px #e52ca7,
    0 0 15px #fb2ab599;
}

body.theme-synthwave
.wled-color-button.selected {
  border-color: #2de2e6;
  box-shadow:
    0 0 0 3px #e52ca7,
    0 0 15px #fb2ab599;
}

body.theme-steampunk {
  --bg: #0c0804;
  --panel: #24180d;
  --panel2: #130d07;
  --text: #f0dfbd;
  --muted: #b5a17e;
  --line: #665038;

  --good: #c68a3c;
  --warn: #e3ad59;
  --bad: #cf4e32;

  --accent: #7d431d;
  --accent-border: #d29a4d;
  --button-bg1: #493019;
  --button-bg2: #1a1008;

  --spectrum-low: #71431d;
  --spectrum-mid: #a7672d;
  --spectrum-high: #d39b50;
  --spectrum-top: #f5ddb0;
  --peak: #f0dfbd;

  background:
    radial-gradient(
      circle at 15% 10%,
      #7d431d33,
      transparent 24%
    ),
    linear-gradient(
      145deg,
      #0c0804,
      #130d07
    );
}

body.theme-steampunk .topbar {
  border-bottom: 2px solid #d29a4d;
  box-shadow:
    0 3px 14px #c9863f66;
}

body.theme-steampunk .bike-name {
  color: #f0dfbd;
  text-shadow:
    0 0 7px #c9863f,
    2px 2px 0 #000000;
}

body.theme-steampunk .card {
  border-color: #665038;
  box-shadow:
    inset 3px 0 0 #7d431d,
    0 4px 12px rgba(0, 0, 0, .48);
}

body.theme-steampunk .theme-select {
  color: #f0dfbd;
  border-color: #d29a4d;
  background:
    linear-gradient(
      180deg,
      #493019,
      #1a1008
    );
  box-shadow:
    0 0 9px #c9863f66;
}

body.theme-steampunk .nav button.active,
body.theme-steampunk .led-mode-button.selected,
body.theme-steampunk .quick-scene-button.selected,
body.theme-steampunk .wled-zone-button.selected {
  color: #f0dfbd;
  border-color: #d29a4d;
  background: linear-gradient(135deg,#4e2c13,#b87432 35%,#edc47b 49%,#765020 53%,#2a180b 100%);
  box-shadow:
    0 0 0 2px #7d431d,
    0 0 15px #c9863f99;
}

body.theme-steampunk
.wled-color-button.selected {
  border-color: #d29a4d;
  box-shadow:
    0 0 0 3px #7d431d,
    0 0 15px #c9863f99;
}


/* GHOST RIDER — embers and flame */
body.theme-ghost button:not(.wled-color-button) {
  text-shadow:
    0 2px 2px #000000,
    0 0 7px rgba(255, 87, 0, .75);
}

body.theme-ghost .section-title {
  color: #ff9a32;
}

/* CYBERPUNK — opposing neon edges */
body.theme-cyberpunk .card {
  box-shadow:
    inset 3px 0 0 #ff1a9c,
    inset -2px 0 0 #23eaff,
    0 0 10px rgba(140, 40, 255, .35);
}

/* TOXIC — warning-style headings */
body.theme-toxic .section-title {
  color: #c8ff35;
  text-shadow: 0 0 8px #67b510;
}

/* ICE — cold glass panels */
body.theme-ice .card {
  background:
    linear-gradient(
      145deg,
      rgba(18, 54, 82, .94),
      rgba(3, 15, 29, .98)
    );
  box-shadow:
    inset 2px 2px 0 rgba(210, 250, 255, .20),
    0 0 11px rgba(90, 206, 255, .28);
}

/* OLD-SCHOOL HARLEY — chrome and orange */
body.theme-harley .section-title {
  color: #e47a2d;
  text-shadow: 1px 1px 0 #000000;
}

/* MILITARY — squared, equipment-style controls */
body.theme-military button,
body.theme-military .theme-select,
body.theme-military .card {
  border-radius: 3px;
}

body.theme-military .label,
body.theme-military .section-title {
  letter-spacing: 1.5px;
}

/* CHRISTMAS — warm decorative panel glow */
body.theme-christmas .card {
  box-shadow:
    inset 3px 0 0 #b3132d,
    inset -2px 0 0 #197342,
    0 0 9px rgba(240, 207, 88, .18);
}

/* NIGHT RIDE — deliberately dim to reduce glare */
body.theme-night {
  filter: brightness(.78);
}

body.theme-night .time,
body.theme-night .bike-name {
  text-shadow: none;
}

body.theme-night .card {
  box-shadow:
    inset 2px 0 0 #3d0d0d;
}

/* SYNTHWAVE — horizon glow */
body.theme-synthwave .topbar {
  box-shadow:
    0 2px 0 #ff2eaf,
    0 4px 0 #7d42ff,
    0 6px 0 #27dce2,
    0 9px 18px rgba(244, 42, 190, .35);
}

/* STEAMPUNK — brass instrument styling */
body.theme-steampunk .card {
  border-width: 2px;
  box-shadow:
    inset 3px 0 0 #9b6128,
    inset -2px 0 0 #4d2c13,
    0 5px 12px rgba(0, 0, 0, .55);
}

body.theme-steampunk .label,
body.theme-steampunk .section-title {
  color: #d6a45f;
}


/* PEGGY_USMC_THEME_V1 */

body.theme-usmc {
  --bg: #03060b;
  --panel: #101a2a;
  --panel2: #070c14;
  --text: #fff8e7;
  --muted: #b8b1a1;
  --line: #594c31;

  --good: #d6ad45;
  --warn: #f0c965;
  --bad: #ee314d;

  --accent: #a8112a;
  --accent-border: #d6ad45;
  --button-bg1: #202c42;
  --button-bg2: #090f1b;

  --spectrum-low: #152a4b;
  --spectrum-mid: #a8112a;
  --spectrum-high: #d6ad45;
  --spectrum-top: #fff1bd;
  --peak: #ffffff;

  background:
    radial-gradient(
      circle at 10% 10%,
      rgba(173, 17, 43, .18),
      transparent 28%
    ),
    linear-gradient(
      145deg,
      #020509,
      #091321 55%,
      #020305
    );
}

/* Scarlet and gold dress stripe */
body.theme-usmc .topbar {
  position: relative;
  border-bottom: 3px solid #a8112a;
  box-shadow:
    0 3px 0 #d6ad45,
    0 7px 17px rgba(168, 17, 42, .35);
}

/* EGA beside PEGGY SUE */
body.theme-usmc .bike-name {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff7dc;
  text-shadow:
    2px 2px 0 #000000,
    0 0 8px rgba(214, 173, 69, .45);
}

body.theme-usmc .bike-name::before {
  content: "";
  flex: 0 0 49px;
  width: 49px;
  height: 49px;

  background-image:
    url("theme-icons/usmc-ega.svg?v=2");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  filter:
    drop-shadow(
      0 0 4px rgba(214, 173, 69, .65)
    );
}

/* Marine motto */
body.theme-usmc .subtitle::after {
  content: "  •  SEMPER FIDELIS";
  color: #d6ad45;
  font-weight: 900;
  letter-spacing: 1px;
}

/* Scarlet and gold card edges */
body.theme-usmc .card {
  border-color: #4e493d;
  background:
    linear-gradient(
      145deg,
      rgba(21, 32, 51, .97),
      rgba(5, 9, 16, .99)
    );

  box-shadow:
    inset 4px 0 0 #a8112a,
    inset -2px 0 0 #d6ad45,
    0 5px 13px rgba(0, 0, 0, .55);
}

body.theme-usmc .section-title,
body.theme-usmc .label {
  color: #e6c26b;
  letter-spacing: 1px;
}

/* Dress-blue control buttons */
body.theme-usmc button:not(
  .wled-color-button
) {
  color: #fff8e7;
  border-color: #625536;
  background:
    linear-gradient(
      180deg,
      #26344d,
      #101a2b 52%,
      #070c14
    );

  box-shadow:
    inset 0 2px 0 rgba(255, 226, 154, .12),
    0 4px 8px rgba(0, 0, 0, .5);

  text-shadow:
    0 2px 2px #000000;
}

/* Scarlet, white and gold selected controls */
body.theme-usmc .nav button.active,
body.theme-usmc
.led-mode-button.selected,
body.theme-usmc
.quick-scene-button.selected,
body.theme-usmc
.wled-zone-button.selected {
  color: #ffffff;
  border-color: #f0cf75;

  background:
    linear-gradient(
      135deg,
      #a8112a 0%,
      #a8112a 43%,
      #f5edda 43%,
      #f5edda 49%,
      #d6ad45 49%,
      #d6ad45 55%,
      #101a2a 55%,
      #101a2a 100%
    );

  box-shadow:
    0 0 0 2px #6e0b1b,
    0 0 15px rgba(214, 173, 69, .55);
}

body.theme-usmc
.wled-color-button.selected {
  border-color: #f0cf75;

  box-shadow:
    0 0 0 3px #a8112a,
    0 0 16px rgba(214, 173, 69, .7);
}

body.theme-usmc .theme-select {
  color: #fff8e7;
  border: 2px solid #d6ad45;

  background:
    linear-gradient(
      180deg,
      #a8112a,
      #65091a 47%,
      #111b2c
    );

  box-shadow:
    0 0 10px rgba(214, 173, 69, .45);
}

body.theme-usmc .status.good {
  color: #ffe18e;
  border-color: #876a26;
  background: rgba(96, 70, 15, .34);
}

/* Slightly smaller emblem on the 5-inch screen */
@media (max-width: 700px) {
  body.theme-usmc .bike-name {
    gap: 7px;
  }

  body.theme-usmc .bike-name::before {
    flex-basis: 40px;
    width: 40px;
    height: 40px;
  }

  body.theme-usmc .subtitle::after {
    letter-spacing: .4px;
  }
}


/* PEGGY_REAL_EGA_SIZE_V1 */

body.theme-usmc .bike-name::before {
  flex: 0 0 55px;
  width: 55px;
  height: 60px;
  background-size: contain;
}

@media (max-width: 700px) {
  body.theme-usmc .bike-name::before {
    flex-basis: 46px;
    width: 46px;
    height: 51px;
  }
}


/* PEGGY_HALF_LIFE_2_THEME_V1 */

body.theme-hl2 {
  --bg: #080807;
  --panel: #191816;
  --panel2: #0d0d0c;
  --text: #e7dfd1;
  --muted: #a59b8c;
  --line: #4a443b;

  --good: #6ea0b6;
  --warn: #ed781b;
  --bad: #d1432f;

  --accent: #b94d0d;
  --accent-border: #ef7a1b;
  --button-bg1: #34312c;
  --button-bg2: #141311;

  --spectrum-low: #497d93;
  --spectrum-mid: #d86417;
  --spectrum-high: #f5a02b;
  --spectrum-top: #e4d8bd;
  --peak: #ffffff;

  background:
    radial-gradient(
      circle at 12% 8%,
      rgba(202, 78, 7, .16),
      transparent 23%
    ),
    linear-gradient(
      145deg,
      #070706,
      #12100d 55%,
      #050505
    );

  font-family:
    "Arial Narrow",
    "Roboto Condensed",
    Arial,
    sans-serif;
}

/* Subtle CRT scanlines */
body.theme-hl2::before {
  content: "";
  position: fixed;
  z-index: 9998;
  pointer-events: none;

  inset: 0;

  background:
    repeating-linear-gradient(
      180deg,
      transparent 0,
      transparent 3px,
      rgba(255, 155, 70, .035) 4px
    );
}

/* Industrial header with Citadel skyline */
body.theme-hl2 .topbar {
  position: relative;

  border-bottom: 3px solid #c65410;

  background-image:
    url("theme-icons/hl2-citadel.svg?v=1");
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: 310px 96px;

  box-shadow:
    0 2px 0 #312a22,
    0 5px 15px rgba(218, 87, 11, .26);
}

/* Lambda beside PEGGY SUE */
body.theme-hl2 .bike-name {
  display: flex;
  align-items: center;
  gap: 9px;

  color: #f0e5d3;

  text-shadow:
    2px 2px 0 #000000,
    0 0 7px rgba(228, 97, 17, .50);
}

body.theme-hl2 .bike-name::before {
  content: "";
  flex: 0 0 50px;

  width: 50px;
  height: 50px;

  background-image:
    url("theme-icons/hl2-lambda.svg?v=1");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  filter:
    drop-shadow(
      0 0 5px rgba(237, 111, 22, .60)
    );
}

/* City designation */
body.theme-hl2 .bike-name::after {
  content: "C17";

  margin-left: 3px;
  padding: 3px 5px;

  color: #78a9bf;
  border: 1px solid #426475;
  background: rgba(8, 16, 20, .72);

  font-size: 11px;
  letter-spacing: 2px;
  text-shadow: none;
}

/* Resistance network identification */
body.theme-hl2 .subtitle::after {
  content: "  //  RESISTANCE NETWORK";

  color: #dc6818;
  font-weight: 900;
  letter-spacing: 1px;
}

/* Industrial square panels */
body.theme-hl2 .card {
  border-radius: 2px;
  border-color: #50483e;

  background-color: #151412;
  background-image:
    url("theme-icons/hl2-lambda.svg?v=1"),
    linear-gradient(
      145deg,
      rgba(34, 32, 28, .98),
      rgba(11, 11, 10, .99)
    );

  background-repeat:
    no-repeat,
    no-repeat;

  background-position:
    right -19px bottom -23px,
    center;

  background-size:
    87px 87px,
    cover;

  box-shadow:
    inset 4px 0 0 #a6410a,
    inset -1px 0 0 #567b8b,
    0 5px 13px rgba(0, 0, 0, .60);
}

/* Crowbar decals on Bike page */
body.theme-hl2 #page-bike .card {
  background-image:
    url("theme-icons/hl2-crowbar.svg?v=1"),
    linear-gradient(
      145deg,
      rgba(34, 32, 28, .98),
      rgba(11, 11, 10, .99)
    );

  background-position:
    right 7px bottom 3px,
    center;

  background-size:
    88px 88px,
    cover;
}

/* Combine-style decals on Lights page */
body.theme-hl2 #page-lights .card {
  background-image:
    url("theme-icons/hl2-combine.svg?v=1"),
    linear-gradient(
      145deg,
      rgba(24, 29, 31, .98),
      rgba(9, 10, 10, .99)
    );

  background-position:
    right 7px bottom 4px,
    center;

  background-size:
    82px 82px,
    cover;
}

/* Citadel decals on Show page */
body.theme-hl2 #page-show .card {
  background-image:
    url("theme-icons/hl2-citadel.svg?v=1"),
    linear-gradient(
      145deg,
      rgba(32, 29, 25, .98),
      rgba(10, 10, 9, .99)
    );

  background-position:
    right bottom,
    center;

  background-size:
    175px 56px,
    cover;
}

body.theme-hl2 .section-title,
body.theme-hl2 .label {
  color: #db7020;
  letter-spacing: 1.2px;

  text-shadow:
    0 0 5px rgba(216, 95, 17, .28);
}

/* HEV/industrial buttons */
body.theme-hl2 button:not(
  .wled-color-button
) {
  color: #e8dfcf;
  border-radius: 2px;
  border-color: #514b42;

  background:
    linear-gradient(
      180deg,
      #3a3731,
      #22201c 48%,
      #11100e
    );

  box-shadow:
    inset 0 2px 0 rgba(240, 155, 79, .10),
    inset 3px 0 0 #6a2b08,
    0 4px 8px rgba(0, 0, 0, .58);

  text-shadow:
    0 2px 2px #000000;
}

/* Hazard-striped selected buttons */
body.theme-hl2 .nav button.active,
body.theme-hl2
.led-mode-button.selected,
body.theme-hl2
.quick-scene-button.selected,
body.theme-hl2
.wled-zone-button.selected {
  color: #ffffff;
  border-color: #f28a2e;

  background:
    linear-gradient(
      rgba(31, 23, 17, .22),
      rgba(31, 23, 17, .22)
    ),
    repeating-linear-gradient(
      135deg,
      #df6817 0,
      #df6817 17px,
      #211d18 17px,
      #211d18 34px
    );

  box-shadow:
    0 0 0 2px #6f2d08,
    0 0 14px rgba(232, 102, 18, .66);

  text-shadow:
    0 2px 3px #000000,
    0 0 4px #000000;
}

/* Combine-blue online indicators */
body.theme-hl2 .status.good {
  color: #a7d7e8;
  border-color: #4e7d91;
  background: rgba(24, 67, 86, .42);

  box-shadow:
    0 0 9px rgba(94, 168, 196, .28);
}

/* HEV orange warnings */
body.theme-hl2 .status.warn {
  color: #ffa24d;
  border-color: #a6470d;
  background: rgba(108, 41, 4, .38);
}

/* WLED selected color remains visible */
body.theme-hl2
.wled-color-button.selected {
  border-color: #f28a2e;

  box-shadow:
    0 0 0 3px #793008,
    0 0 15px rgba(232, 102, 18, .68);
}

/* Industrial theme selector */
body.theme-hl2 .theme-select {
  color: #f1e6d3;
  border-radius: 2px;
  border: 2px solid #ca550f;

  background:
    linear-gradient(
      180deg,
      #3a2417,
      #1b120d 48%,
      #0c0b09
    );

  box-shadow:
    0 0 10px rgba(225, 95, 18, .38);
}

body.theme-hl2 input[type="range"],
body.theme-hl2 input[type="color"] {
  accent-color: #e36b19;
}

@media (max-width: 700px) {
  body.theme-hl2 .topbar {
    background-size: 220px 68px;
  }

  body.theme-hl2 .bike-name {
    gap: 6px;
  }

  body.theme-hl2 .bike-name::before {
    flex-basis: 42px;
    width: 42px;
    height: 42px;
  }

  body.theme-hl2 .subtitle::after {
    letter-spacing: .3px;
  }
}


/* PEGGY_FIXED_BACKUP_COLORS_V1 */

#automaticBackupStatus.backup-age-fresh {
  color: #d8ffe5 !important;
  background: #12662f !important;
  border-color: #40e47d !important;
  box-shadow:
    0 0 12px rgba(64, 228, 125, 0.35)
    !important;
}

#automaticBackupStatus.backup-age-current {
  color: #e1f1ff !important;
  background: #174b78 !important;
  border-color: #58adf4 !important;
  box-shadow:
    0 0 12px rgba(88, 173, 244, 0.32)
    !important;
}

#automaticBackupStatus.backup-age-warning {
  color: #fff1d2 !important;
  background: #824500 !important;
  border-color: #ff9d24 !important;
  box-shadow:
    0 0 12px rgba(255, 157, 36, 0.35)
    !important;
}

#automaticBackupStatus.backup-age-error {
  color: #ffe3e3 !important;
  background: #811d25 !important;
  border-color: #ff5964 !important;
  box-shadow:
    0 0 12px rgba(255, 89, 100, 0.38)
    !important;
}

.backup-age-help-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 7px;
}

.backup-age-help-button {
  flex: 0 0 27px !important;
  width: 27px !important;
  min-width: 27px !important;
  height: 27px !important;
  min-height: 27px !important;
  padding: 0 !important;
  border: 2px solid #ffd54a !important;
  border-radius: 50% !important;
  color: #151515 !important;
  background: #ffd54a !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  line-height: 23px !important;
  cursor: pointer;
}

.backup-age-legend {
  display: grid;
  gap: 6px;
  max-width: 480px;
  padding: 9px;
  border: 1px solid #7b8796;
  border-radius: 9px;
  background: #101722;
}

.backup-age-legend[hidden] {
  display: none !important;
}

.backup-key {
  display: block;
  padding: 6px 9px;
  border-radius: 7px;
  color: white;
  font-size: 0.82rem;
  font-weight: 800;
}

.backup-key-fresh {
  background: #12662f;
}

.backup-key-current {
  background: #174b78;
}

.backup-key-warning {
  background: #824500;
}

.backup-key-error {
  background: #811d25;
}


/* PEGGY_BACKUP_HELP_INLINE_MATCH_V1 */

#automaticBackupStatus {
  display: inline-block;
  vertical-align: middle;
}

.backup-age-help-row {
  display: inline-flex;
  position: relative;
  align-items: center;
  vertical-align: middle;
  margin: 8px 0 0 8px;
}

.backup-age-legend {
  position: absolute;
  z-index: 100;
  top: 42px;
  right: 0;
  width: min(
    440px,
    calc(100vw - 45px)
  );
}


/* PEGGY_FPP_VOLUME_V1 */
.fpp-volume-card {
  min-height: auto;
}

.fpp-volume-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.fpp-volume-value {
  margin-top: 4px;
  font-size: 34px;
  line-height: 1;
  font-weight: 900;
}

.fpp-volume-controls {
  display: grid;
  grid-template-columns: 74px minmax(180px, 1fr) 74px;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
}

.fpp-volume-step,
.fpp-mute-button {
  min-height: 62px;
  font-size: 24px;
  font-weight: 900;
}

.fpp-mute-button {
  min-width: 150px;
}

.fpp-volume-slider {
  width: 100%;
  min-height: 54px;
  cursor: pointer;
  accent-color: var(--accent, #ff7a18);
}

@media (max-width: 700px) {
  .fpp-volume-controls {
    grid-template-columns:
      62px minmax(120px, 1fr) 62px;
    gap: 9px;
  }

  .fpp-mute-button {
    min-width: 120px;
    min-height: 56px;
    font-size: 20px;
  }
}

/* PEGGY_WLED_PRESETS_V1 */
.wled-preset-card {
  min-height: auto;
}

.wled-preset-grid {
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(150px, 1fr));
  gap: 9px;
  margin-top: 10px;
}

.wled-preset-button {
  display: flex;
  min-height: 62px;
  padding: 9px 11px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  overflow: hidden;
  text-align: left;
}

.wled-preset-button.selected {
  color: var(--text);
  border-color: var(--accent-border);
  background: var(--accent);
  box-shadow:
    0 0 0 2px var(--accent-border),
    0 0 14px color-mix(
      in srgb,
      var(--accent-border) 50%,
      transparent
    );
}

.wled-preset-button.selected::after {
  content: "ACTIVE";
  position: absolute;
  top: 4px;
  right: 7px;
  color: var(--text);
  font-size: 9px;
  font-weight: 900;
}

.wled-preset-button {
  position: relative;
}

.wled-preset-name {
  width: 100%;
  overflow: hidden;
  font-size: 14px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wled-preset-detail {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .07em;
}

.wled-preset-empty {
  grid-column: 1 / -1;
  padding: 12px;
  color: var(--muted);
  border: 1px dashed var(--line);
  border-radius: 10px;
  text-align: center;
}

#wledPresetMessage {
  margin-top: 11px;
}

@media (max-width: 700px) {
  .wled-preset-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}

/* PEGGY_WLED_SERVER_LINKS_V1 */
.wled-server-links {
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.wled-server-link {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  text-decoration: none;
  text-align: center;
}

.wled-server-link[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
}



/* PEGGY_WLED_HARDWARE_STATUS_V1 */
.wled-hardware-status {
  margin: 12px 0 18px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.16);
}

.wled-hardware-status-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.wled-hardware-status-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 7px;
  border-radius: 50%;
  vertical-align: 1px;
  background: #8b949e;
  box-shadow: 0 0 8px rgba(139, 148, 158, 0.5);
}

.wled-hardware-status-dot.online {
  background: #36d47c;
  box-shadow: 0 0 10px rgba(54, 212, 124, 0.72);
}

.wled-hardware-status-dot.offline {
  background: #ff5a65;
  box-shadow: 0 0 10px rgba(255, 90, 101, 0.68);
}

.wled-hardware-status-dot.waiting {
  background: #f0b44d;
  box-shadow: 0 0 10px rgba(240, 180, 77, 0.62);
}

.wled-hardware-refresh {
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
}

.wled-hardware-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.wled-hardware-metrics > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
}

.wled-hardware-metrics span {
  color: var(--muted);
  font-size: 0.8rem;
}

.wled-hardware-metrics strong {
  min-width: 0;
  overflow-wrap: anywhere;
  text-align: right;
  font-size: 0.87rem;
}

.wled-hardware-last-checked {
  margin-top: 10px;
}

@media (max-width: 560px) {
  .wled-hardware-metrics {
    grid-template-columns: 1fr;
  }
}

/* PEGGY_ROAD_TEST_SIMULATOR_V1 */
.road-test-panel {
  margin: 12px 0 16px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(35,39,48,.96), rgba(17,20,26,.96));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.road-test-heading,
.road-test-speed-row,
.road-test-slider-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.road-test-heading .section-title {
  margin: 0;
}

.road-test-heading .status {
  flex: 0 0 auto;
}

.road-test-mode-buttons,
.road-test-actions {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.road-test-mode-buttons {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.road-test-actions {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.road-test-mode-buttons button,
.road-test-actions button,
.road-test-speed-row button {
  min-height: 44px;
}

.road-test-manual {
  display: none;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.10);
}

.road-test-panel.is-manual .road-test-manual {
  display: block;
}

.road-test-panel.is-live {
  opacity: .54;
}

.road-test-speed-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(92px,.55fr) minmax(0,1fr);
}

.road-test-speed-readout {
  text-align: center;
}

.road-test-speed-readout strong {
  display: block;
  font-size: 2.1rem;
  line-height: 1;
}

.road-test-speed-readout span {
  display: block;
  margin-top: 4px;
  color: rgba(255,255,255,.55);
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .07em;
}

.road-test-slider-label {
  margin-top: 10px;
  color: rgba(255,255,255,.70);
  font-size: .72rem;
  font-weight: 700;
}

.road-test-slider-label input {
  width: min(76%, 560px);
  min-height: 44px;
}

.road-test-active-condition {
  margin-top: 9px;
  text-align: center;
  color: #ffd36b;
  font-weight: 850;
  letter-spacing: .06em;
}

@media (max-width: 700px) {
  .road-test-panel {
    padding: 9px;
  }

  .road-test-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .road-test-heading {
    align-items: flex-start;
  }
}


/* PEGGY_BACKUP_HELP_ALIGNMENT_FIX_V1 */
.backup-control-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.backup-control-heading > div:first-child {
  flex: 1 1 auto;
  min-width: 0;
}

.backup-control-heading .diagnostic-help-button {
  flex: 0 0 34px;
  margin-left: auto;
}

/* PEGGY_REPORT_BACKUP_HELP_RIGHT_V1 */
#page-reports .backup-age-help-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
}

#page-reports .backup-age-help-button {
  margin-left: auto;
}