#rideModeDialog {
  width: min(1100px, 100vw);
  height: min(940px, 100dvh);
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0 !important;
  border: 0;
  border-radius: 22px;
  overflow: hidden;
  background: #090c10;
  color: #f5f8fb;
}
#rideModeDialog::backdrop {
  background: rgba(0, 0, 0, 0.88);
}
.ride-mode-shell {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
  min-height: 0;
  background: #090c10;
}
.ride-mode-head,
.ride-mode-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 18px;
  border-bottom: 1px solid #34404f;
  background: #1d1f1f;
}
.ride-mode-head strong {
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.ride-mode-head-track {
  display: grid;
  flex: 1 1 260px;
  gap: 5px;
  min-width: 0;
  color: #aebdcb;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.ride-mode-head-track input {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid #3b4756 !important;
  border-radius: 9px;
  background: #151719 !important;
  color: #fff !important;
  box-shadow: none !important;
  box-sizing: border-box;
}
.ride-mode-gps-ready {
  margin-left: auto;
  color: #f5f8fb;
  font-size: 12px;
}
.ride-mode-gps-ready::first-letter {
  color: #10b957;
}
.ride-mode-context {
  display: none;
}
.ride-mode-head-actions,
.ride-mode-footer {
  display: flex;
  gap: 8px;
}
#rideModeClose {
  -webkit-tap-highlight-color: transparent;
}
#rideModeClose:is(:focus, :focus-visible, :active) {
  outline: 2px solid transparent !important;
  outline-color: transparent !important;
  box-shadow: none !important;
}
#rideModeLocate {
  position: absolute;
  z-index: 650;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0 !important;
  border-width: 1px !important;
  border-radius: 11px;
  background: rgba(21, 23, 25, 0.94) !important;
  color: var(--theme-primary) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.24) !important;
}
#rideModeLocate svg {
  display: block;
  width: 23px;
  height: 23px;
  fill: currentColor;
}
.ride-mode-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  min-height: 0;
  align-self: stretch;
  overflow: hidden;
}
.ride-mode-map-wrap {
  position: relative;
  min-height: 0;
}
.ride-mode-map {
  position: absolute;
  inset: 0;
  background: #111820;
}
.ride-mode-map-status {
  display: none;
}
.ride-mode-panel {
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 16px;
  overflow: auto;
  background: #1d1f1f;
  border-left: 1px solid #34404f;
}
.ride-mode-panel label {
  display: grid;
  gap: 5px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.ride-mode-panel select,
.ride-mode-panel input,
.ride-mode-panel textarea {
  width: 100%;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid #3b4756;
  border-radius: 9px;
  background: #151719 !important;
  color: #fff !important;
}
.ride-mode-clock {
  text-align: center;
  font:
    900 clamp(42px, 6vw, 70px) / 1 ui-monospace,
    Consolas,
    monospace;
  letter-spacing: -0.06em;
}
.ride-mode-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.ride-mode-stats div {
  padding: 11px;
  border: 1px solid #3b4652;
  border-radius: 9px;
}
.ride-mode-stats span {
  display: block;
  color: #aeb9c8;
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}
.ride-mode-stats strong {
  display: block;
  margin-top: 5px;
}
.ride-mode-stats > div:nth-child(1) { order: 4; }
.ride-mode-stats > div:nth-child(2) { order: 2; }
.ride-mode-stats > div:nth-child(3) { order: 3; }
.ride-mode-stats > div:nth-child(4) { order: 1; }
.ride-mode-stats > div:nth-child(5) { order: 5; }
.ride-mode-stats > div:nth-child(6) { order: 6; }
.ride-mode-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.ride-mode-actions button {
  min-height: 58px;
}
.ride-mode-message {
  color: #aeb9c8;
  font-size: 12px;
  line-height: 1.45;
}
.ride-mode-footer {
  border-top: 1px solid #34404f;
  border-bottom: 0;
  justify-content: flex-end;
}
.ride-mode-save[hidden] {
  display: none !important;
}
#rideModeSaveDialog {
  width: min(520px, calc(100vw - 24px));
  max-width: none;
  margin: auto;
  padding: 0;
  border: 1px solid #3b4756;
  border-radius: 18px;
  background: #1d1f1f;
  color: #f5f8fb;
  overflow: hidden;
}
#rideModeSaveDialog::backdrop {
  background: rgba(0, 0, 0, 0.78);
}
.ride-mode-save-shell > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 17px 18px;
  border-bottom: 1px solid #34404f;
  background: #1d1f1f !important;
  color: #f5f8fb !important;
}
.ride-mode-save-shell header span {
  display: block;
  color: var(--theme-primary);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ride-mode-save-shell h2 {
  margin: 4px 0 0;
  color: inherit;
  font-size: 22px;
}
#rideModeSaveForm {
  display: grid;
  gap: 14px;
  padding: 18px;
}
#rideModeSaveForm label {
  display: grid;
  gap: 6px;
  color: #aebdcb;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
#rideModeSaveForm :is(input, select, textarea) {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 9px 11px;
  border: 1px solid #3b4756;
  border-radius: 9px;
  background: #151719 !important;
  color: #fff !important;
  box-sizing: border-box;
  font: 600 14px Arial, sans-serif;
}
#rideModeSaveForm textarea {
  min-height: 100px;
  resize: vertical;
}
#rideModeSaveMessage {
  margin: 0;
  color: #aeb9c8;
  font-size: 12px;
  line-height: 1.45;
}
.ride-mode-save-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.ride-mode-save-actions button {
  min-height: 46px;
}
html body[data-display-mode="day"] #rideModeSaveDialog {
  background: #fff;
  color: #14201f;
  border-color: #c9dcf3;
}
html body[data-display-mode="day"] #rideModeSaveDialog :is(header, .ride-mode-save-shell) {
  border-color: #dbe5f3;
}
html body[data-display-mode="day"] #rideModeSaveDialog .ride-mode-save-shell > header {
  background: #fff !important;
  color: #14201f !important;
}
html body[data-display-mode="day"] #rideModeSaveForm label,
html body[data-display-mode="day"] #rideModeSaveMessage {
  color: #61768e;
}
html body[data-display-mode="day"] #rideModeSaveForm :is(input, select, textarea) {
  background: #fff !important;
  color: #14201f !important;
  border-color: #c9dcf3 !important;
}
#openDashboardRideModeButton {
  white-space: nowrap;
}
html body[data-display-mode="day"] #rideModeDialog,
html body[data-display-mode="day"] #rideModeDialog .ride-mode-shell {
  background: #fff;
  color: #14201f;
}
html
  body[data-display-mode="day"]
  #rideModeDialog
  :is(.ride-mode-head, .ride-mode-panel, .ride-mode-footer) {
  background: #fff;
  border-color: #dbe5f3;
}
html
  body[data-display-mode="day"]
  #rideModeDialog
  .ride-mode-panel
  :is(select, input, textarea) {
  background: #fff !important;
  color: #14201f !important;
  border-color: #c9dcf3 !important;
}
html body[data-display-mode="day"] #rideModeDialog .ride-mode-head-track input {
  background: #fff !important;
  color: #14201f !important;
  border-color: #c9dcf3 !important;
}
html body[data-display-mode="day"] #rideModeDialog .ride-mode-stats div {
  border-color: #dbe5f3;
  background: #f6f9fd;
}
html body[data-display-mode="day"] #rideModeDialog .ride-mode-stats span,
html body[data-display-mode="day"] #rideModeDialog .ride-mode-message {
  color: #61768e;
}
@media (max-width: 720px) {
  #rideModeSaveDialog {
    width: calc(100vw - 20px);
    border-radius: 16px;
  }
  .ride-mode-save-shell > header,
  #rideModeSaveForm {
    padding: 14px;
  }
  html.ride-mode-viewport-locked,
  html.ride-mode-viewport-locked body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
  }
  .dashboard-explore #rideLogPageButton {
    order: 0;
  }
  .dashboard-explore #openDashboardRideModeButton {
    order: 1;
  }
  .dashboard-explore #openLapStopwatchButton {
    order: 2;
  }
  .dashboard-explore #raceResultsOpenButton {
    order: 3;
  }
  .dashboard-explore #rideFinderButton {
    order: 4;
  }
  .dashboard-explore #serviceLocatorButton {
    order: 5;
  }
  #rideModeDialog {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
    overflow: hidden;
    touch-action: none;
    overscroll-behavior: none;
  }
  .ride-mode-shell {
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    overscroll-behavior: none;
  }
  .ride-mode-map {
    touch-action: none;
  }
  .ride-mode-body {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(160px, 1fr) auto auto auto auto;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    overscroll-behavior: none;
    background: #1d1f1f;
  }
  .ride-mode-head {
    padding: 10px 12px;
    flex-wrap: nowrap !important;
  }
  .ride-mode-head-track {
    flex: 1 1 auto;
    max-width: none;
  }
  .ride-mode-gps-ready {
    display: none;
  }
  .ride-mode-head-actions {
    flex: 0 0 auto;
    margin-left: auto;
  }
  .ride-mode-context {
    grid-row: 1;
    display: flex;
    justify-content: flex-end;
    padding: 13px 12px 4px;
    color: var(--theme-primary);
    font-size: 12px;
    letter-spacing: 0.08em;
  }
  .ride-mode-context b {
    font-weight: 700;
  }
  .ride-mode-head-actions button {
    min-height: 38px;
    padding: 0 9px;
    font-size: 11px;
  }
  .ride-mode-map-wrap {
    grid-row: 2;
    min-height: 0;
    margin: 0 12px;
    border-radius: 18px;
    overflow: hidden;
  }
  #rideModeLocate {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
    padding: 0 !important;
    border-radius: 10px;
  }
  .ride-mode-map {
    position: absolute;
  }
  .ride-mode-panel {
    display: contents;
  }
  .ride-mode-clock {
    grid-row: 3;
    padding: 14px 12px 6px;
    background: #1d1f1f;
    font-size: clamp(40px, 12vw, 54px);
  }
  .ride-mode-stats {
    grid-row: 4;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 8px 12px 12px;
    background: #1d1f1f;
  }
  .ride-mode-stats div {
    padding: 10px 4px;
    text-align: center;
  }
  .ride-mode-actions {
    grid-row: 5;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
    padding: 0 12px 12px;
    background: #1d1f1f;
    gap: 12px;
  }
  .ride-mode-actions button {
    min-height: 78px;
    font-size: 17px;
  }
  html body #rideModeDialog #rideModeStart {
    min-height: 104px !important;
    font-size: 21px !important;
    border-radius: 16px !important;
  }
  html body #rideModeDialog #rideModeMark {
    align-self: center;
    min-height: 78px !important;
    border-radius: 14px !important;
  }
  .ride-mode-message {
    grid-row: 6;
    margin: 0;
    padding: 0 12px 14px;
    text-align: center;
    background: #1d1f1f;
  }
  html body[data-display-mode="day"] #rideModeDialog .ride-mode-body,
  html body[data-display-mode="day"] #rideModeDialog :is(.ride-mode-clock, .ride-mode-stats, .ride-mode-actions, .ride-mode-message) {
    background: #fff;
  }
  .ride-mode-footer {
    padding-bottom: max(10px, env(safe-area-inset-bottom));
  }
}

@media (max-width: 720px) {
  html body #rideModeDialog .ride-mode-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  html body #rideModeDialog :is(#rideModeStart, #rideModeMark) {
    align-self: stretch;
    min-height: 120px !important;
    padding: 14px 10px !important;
    border-radius: 18px !important;
    font-size: 22px !important;
    font-weight: 900 !important;
  }
}