:root {
  color-scheme: dark;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  color: #e9eef8;
  background: #090d16;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --surface: #101722;
  --surface-raised: #141d2a;
  --border: #263244;
  --muted: #8190a8;
  --cyan: #1bd2e5;
  --green: #00d6a0;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  min-width: 320px;
  background: #090d16;
  font-size: 12px;
}

button,
input,
select {
  font: inherit;
}

button {
  color: inherit;
}

.topbar {
  position: relative;
  z-index: 5;
  display: flex;
  height: 52px;
  align-items: center;
  padding: 0 20px 0 16px;
  border-bottom: 1px solid #232d3d;
  background: #080d19;
}

.brand {
  display: inline-flex;
  flex: 0 0 105px;
  align-items: center;
  gap: 7px;
  color: #e9eef8;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.55px;
  text-decoration: none;
}

.brand-mark {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 8px;
  background: var(--cyan);
  box-shadow: 0 3px 14px #1bd2e535;
  color: #08131b;
  font-size: 20px;
  font-weight: 900;
}

.main-nav {
  display: flex;
  height: 100%;
  align-items: center;
  gap: 3px;
}

.nav-link {
  display: inline-flex;
  height: 30px;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  border-radius: 18px;
  color: #94a2b8;
  font-size: 11px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 150ms ease, color 150ms ease;
}

.nav-link:hover,
.nav-link.active {
  background: #0b2533;
  color: #2bd8e9;
}

.nav-symbol {
  font-size: 14px;
  line-height: 1;
}

.sign-in {
  display: inline-flex;
  min-width: 80px;
  height: 29px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-left: auto;
  border: 0;
  border-radius: 18px;
  background: var(--cyan);
  color: #07131b;
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
}

.app-shell {
  width: 100%;
  height: calc(100% - 52px);
  overflow-y: auto;
}

.sidebar {
  width: 100%;
  max-width: 1280px;
  min-height: 100%;
  margin: 0 auto;
  min-width: 0;
  overflow: visible;
  scrollbar-color: #29374a transparent;
  scrollbar-width: thin;
}

.search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px;
  gap: 7px;
  padding: 16px 13px 9px;
}

.search-box,
.city-select-wrap {
  display: flex;
  height: 36px;
  align-items: center;
  border: 1px solid #273347;
  border-radius: 11px;
  background: #121a27;
}

.search-box {
  gap: 9px;
  padding: 0 11px;
}

.search-symbol {
  position: relative;
  width: 11px;
  height: 11px;
  flex: 0 0 11px;
  border: 1.5px solid #75849c;
  border-radius: 50%;
}

.search-symbol::after {
  position: absolute;
  right: -4px;
  bottom: -3px;
  width: 5px;
  height: 1.5px;
  transform: rotate(48deg);
  background: #75849c;
  content: "";
}

.search-box input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #e9eef8;
  font-size: 11px;
}

.search-box input::placeholder {
  color: #72819a;
  opacity: 1;
}

.search-box:focus-within,
.city-select-wrap:focus-within {
  border-color: #2c7888;
  box-shadow: 0 0 0 2px #1bd2e515;
}

.city-select-wrap {
  position: relative;
}

.city-select-wrap::after {
  position: absolute;
  right: 10px;
  color: #8492a7;
  content: "⌄";
  pointer-events: none;
}

.city-select-wrap select {
  width: 100%;
  height: 100%;
  padding: 0 26px 0 11px;
  appearance: none;
  border: 0;
  outline: 0;
  background: transparent;
  color: #e8edf7;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.city-select-wrap option {
  background: #121a27;
}

.filter-row {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 0 13px 17px;
  scrollbar-width: none;
}

.filter-row::-webkit-scrollbar {
  display: none;
}

.filter-drawer {
  position: fixed;
  z-index: 20;
  inset: 0;
  isolation: isolate;
}

.filter-drawer[hidden] {
  display: none;
}

.filter-backdrop {
  position: fixed;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: rgba(2, 5, 12, 0.6);
  cursor: default;
}

.filter-panel {
  position: fixed;
  z-index: 2;
  top: 0;
  right: 0;
  display: flex;
  width: min(100%, 360px);
  height: 100%;
  flex-direction: column;
  border-left: 1px solid #273347;
  background: #0b1019;
  box-shadow: -12px 0 34px #0008;
}

.filter-panel-header {
  display: flex;
  flex: 0 0 auto;
  align-items: flex-start;
  justify-content: space-between;
  padding: 17px 19px 0;
}

.filter-panel-header h2 {
  margin: 0 0 7px;
  color: #f2f5fa;
  font-size: 19px;
  letter-spacing: -0.35px;
}

.filter-panel-header p {
  margin: 0;
  color: #94a1b5;
  font-size: 11px;
}

.filter-close {
  display: grid;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  place-items: center;
  margin: -1px -2px 0 10px;
  border: 1px solid #13cfe2;
  border-radius: 50%;
  background: transparent;
  color: #1bd2e5;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}

.filter-panel-content {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 21px 19px 20px;
  scrollbar-color: #29374a transparent;
  scrollbar-width: thin;
}

.filter-group {
  min-width: 0;
  margin: 0 0 26px;
  padding: 0;
  border: 0;
}

.filter-group legend {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 11px;
  padding: 0;
  color: #19d9a5;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.filter-option-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.filter-option {
  display: flex;
  min-width: 0;
  height: 32px;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  border: 1px solid #273347;
  border-radius: 10px;
  background: #111925;
  color: #e0e6f0;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease;
}

.filter-option:has(input:checked) {
  border-color: #158d91;
  background: #10242a;
}

.filter-option input {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  appearance: none;
  margin: 0;
  border: 1px solid #17d8e9;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.filter-option input:checked {
  border: 4px solid #17d8e9;
  background: #0b1019;
}

.filter-option span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.speed-options {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.speed-chip {
  min-height: 25px;
  padding: 0 10px;
  border: 1px solid #29374b;
  border-radius: 15px;
  background: transparent;
  color: #a2afc2;
  font-size: 9px;
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}

.speed-chip:hover,
.speed-chip.is-active {
  border-color: #078d9a;
  background: #082a33;
  color: #29d8e9;
}

.price-filter {
  margin-bottom: 27px;
}

.price-filter legend {
  margin-bottom: 10px;
  text-transform: uppercase;
}

.price-filter output {
  color: #27d9e8;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}

#max-price {
  display: block;
  width: 100%;
  height: 16px;
  appearance: none;
  margin: 0;
  background: transparent;
  cursor: pointer;
}

#max-price::-webkit-slider-runnable-track {
  height: 5px;
  border-radius: 4px;
  background: #16d2df;
}

#max-price::-moz-range-track {
  height: 5px;
  border-radius: 4px;
  background: #16d2df;
}

#max-price::-webkit-slider-thumb {
  width: 13px;
  height: 13px;
  appearance: none;
  margin-top: -4px;
  border: 1px solid #16d2df;
  border-radius: 50%;
  background: #0b1019;
  box-shadow: 0 0 0 2px #0b1019;
}

#max-price::-moz-range-thumb {
  width: 11px;
  height: 11px;
  border: 1px solid #16d2df;
  border-radius: 50%;
  background: #0b1019;
  box-shadow: 0 0 0 2px #0b1019;
}

.range-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 3px;
  color: #718099;
  font-size: 9px;
}

.filter-panel-footer {
  display: flex;
  flex: 0 0 auto;
  gap: 9px;
  padding: 12px 19px 16px;
  border-top: 1px solid #273144;
  background: #0b1019;
}

.reset-filters,
.show-stations {
  height: 35px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}

.reset-filters {
  width: 105px;
  border: 1px solid #35435a;
  background: transparent;
  color: #d0d8e5;
}

.reset-filters:hover {
  border-color: #17cfe0;
  color: #22d5e5;
}

.show-stations {
  flex: 1;
  border: 0;
  background: #19cce0;
  color: #06131a;
}

.show-stations:hover {
  background: #45dced;
}

.filter-chip {
  display: inline-flex;
  height: 25px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 10px;
  border: 1px solid #263246;
  border-radius: 16px;
  background: #131b28;
  color: #a4b0c2;
  font-size: 10px;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}

.filter-chip:hover,
.filter-chip.is-active {
  border-color: #167d72;
  background: #0b2c2b;
  color: #35e5b3;
}

.connector-section {
  padding: 16px 13px 0;
  border-top: 1px solid #1d2634;
}

.section-kicker {
  margin: 0 0 11px;
  color: #17d9a4;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.connector-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.connector-card {
  display: flex;
  min-width: 0;
  min-height: 73px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  padding: 9px 11px;
  border: 1px solid #273347;
  border-radius: 11px;
  background: #141d2a;
  text-align: left;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease;
}

.connector-card:hover,
.connector-card.is-active {
  border-color: #138c83;
  background: #102622;
}

.connector-title {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #edf2fb;
  font-size: 11px;
  font-weight: 800;
}

.plug-icon {
  color: #92a1b7;
  font-size: 14px;
  line-height: 1;
}

.connector-power {
  color: #3cd5ed;
  font-family: "Cascadia Code", Consolas, monospace;
  font-size: 9px;
  font-weight: 700;
}

.connector-examples {
  overflow: hidden;
  max-width: 100%;
  color: #71819c;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stations-section {
  padding: 19px 13px 18px;
}

.stations-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 11px;
}

.stations-heading-row h1 {
  margin: 0 0 3px;
  color: #f2f5fa;
  font-size: 20px;
  font-weight: 750;
  letter-spacing: -0.6px;
}

.found-count {
  margin: 0;
  color: #8191a9;
  font-size: 11px;
}

.found-count strong {
  color: #27d9e8;
  font-size: 12px;
}

.sort-button {
  padding: 6px 8px;
  border: 1px solid #263246;
  border-radius: 8px;
  background: #121a27;
  color: #9caac0;
  font-size: 10px;
  cursor: pointer;
}

.station-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
  gap: 8px;
}

.station-card {
  position: relative;
  padding: 0;
  border: 1px solid #29364b;
  border-radius: 11px;
  background: #141d2a;
  transition: border-color 150ms ease, background 150ms ease;
}

.station-card:hover,
.station-card:focus-within,
.station-card.is-selected {
  border-color: #247c83;
  background: #16232e;
}

.station-card-open {
  display: block;
  width: 100%;
  padding: 15px 16px 13px;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.station-card-open:focus-visible {
  outline: 2px solid #24d0df;
  outline-offset: 2px;
}

.station-topline,
.station-title-row,
.station-facts,
.station-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.station-topline {
  margin-bottom: 8px;
}

.station-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #18d8a1;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.07em;
}

.station-status::before {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.station-status.busy {
  color: #ffb22e;
}

.station-network {
  margin-left: 7px;
  color: #75849a;
  font-size: 8px;
  letter-spacing: 0.06em;
}

.save-button {
  position: absolute;
  z-index: 1;
  top: 14px;
  right: 15px;
  display: grid;
  width: 29px;
  height: 29px;
  place-items: center;
  border: 1px solid #29374c;
  border-radius: 50%;
  background: transparent;
  color: #72829a;
  font-size: 15px;
  cursor: pointer;
}

.save-button:hover,
.save-button.is-saved {
  border-color: #22d6e7;
  color: #22d6e7;
}

.station-title-row {
  justify-content: flex-start;
  gap: 8px;
}

.station-title-row h2 {
  margin: 0;
  color: #f3f6fb;
  font-size: 12px;
  font-weight: 750;
}

.station-address {
  margin: 6px 0 10px;
  color: #8796ac;
  font-size: 10px;
}

.station-address span {
  padding: 0 4px;
  color: #4b5c73;
}

.connector-tags {
  display: flex;
  gap: 5px;
  margin-bottom: 11px;
}

.connector-tag {
  padding: 3px 7px;
  border: 1px solid #30415a;
  border-radius: 10px;
  color: #a8b7cc;
  font-size: 9px;
}

.station-bottom {
  min-height: 27px;
  padding-top: 9px;
  border-top: 1px solid #283548;
  color: #d9e2f0;
  font-size: 10px;
  font-weight: 700;
}

.station-power {
  color: #29d6e8;
  font-family: "Cascadia Code", Consolas, monospace;
}

.station-power::before {
  margin-right: 5px;
  color: #30deee;
  content: "ϟ";
  font-size: 14px;
}

.station-price {
  color: #dbe4f1;
}

.station-price span {
  color: #6f7e94;
  font-size: 9px;
  font-weight: 500;
}

.station-rating {
  color: #ffc72f;
}

.station-rating span {
  color: #77869b;
  font-size: 9px;
  font-weight: 500;
}

.empty-state {
  padding: 24px 16px;
  border: 1px dashed #2d3b50;
  border-radius: 11px;
  color: #93a1b5;
  font-size: 11px;
  text-align: center;
}

.station-load-state {
  grid-column: 1 / -1;
  line-height: 1.6;
}

.station-load-state:not(.empty-state) {
  padding: 4px 2px;
  color: #8392a6;
  font-size: 9px;
}

.station-load-state p {
  margin: 0 0 10px;
}

.station-retry-button {
  padding: 7px 12px;
  border: 1px solid #247c83;
  border-radius: 7px;
  background: #10252d;
  color: #61dce5;
  cursor: pointer;
}

.station-detail-page {
  width: 100%;
  height: calc(100% - 52px);
  overflow-y: auto;
  background:
    radial-gradient(ellipse at 70% 0%, #0c2630 0, transparent 34%),
    #090e17;
  scrollbar-color: #29374a transparent;
  scrollbar-width: thin;
}

.station-detail-page[hidden] {
  display: none;
}

.station-detail-content {
  width: min(100%, 980px);
  margin: 0 auto;
  padding: 17px 24px 34px;
}

.detail-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 15px;
}

.detail-back {
  display: inline-flex;
  min-height: 29px;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid #29384b;
  border-radius: 7px;
  background: #101824;
  color: #c6d1df;
  font-size: 9px;
  font-weight: 700;
  cursor: pointer;
}

.detail-back:hover {
  border-color: #1aaabe;
  color: #42d7e4;
}

.detail-back span {
  color: #30d1e2;
  font-size: 14px;
}

.detail-preview-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #8392a6;
  font-size: 8px;
}

.station-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.station-detail-main,
.station-detail-sidebar {
  display: grid;
  min-width: 0;
  gap: 13px;
}

.station-gallery {
  min-width: 0;
}

.station-gallery-stage {
  position: relative;
  height: clamp(190px, 25vw, 300px);
  overflow: hidden;
  border: 1px solid #29394b;
  border-radius: 11px;
  background: #182b34;
  isolation: isolate;
}

.station-gallery-stage::after {
  position: absolute;
  z-index: 0;
  inset: 45% 0 0;
  background: linear-gradient(transparent, #071018a6);
  content: "";
  pointer-events: none;
}

.station-gallery-art {
  display: block;
  width: 100%;
  height: 100%;
  filter: saturate(.82) brightness(.86);
  transition: transform 300ms ease, filter 300ms ease;
}

.station-gallery-stage[data-gallery-scene="1"] .station-gallery-art {
  transform: scale(1.25) translateX(-5%);
  filter: saturate(.68) brightness(.7);
}

.station-gallery-stage[data-gallery-scene="2"] .station-gallery-art {
  transform: scale(1.55) translate(-17%, -7%);
  filter: saturate(.9) brightness(.78);
}

.gallery-image-tag,
.gallery-counter {
  position: absolute;
  z-index: 1;
  bottom: 10px;
  padding: 6px 8px;
  border: 1px solid #ffffff24;
  border-radius: 5px;
  background: #080d16b8;
  color: #e1e9f2;
  font-size: 7px;
  backdrop-filter: blur(5px);
}

.gallery-image-tag {
  left: 10px;
}

.gallery-counter {
  right: 10px;
  color: #c1cad5;
}

.gallery-arrow {
  position: absolute;
  z-index: 2;
  top: 50%;
  display: grid;
  width: 28px;
  height: 28px;
  transform: translateY(-50%);
  place-items: center;
  border: 1px solid #ffffff3b;
  border-radius: 50%;
  background: #0a111bc9;
  color: #fff;
  font-size: 21px;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(5px);
}

.gallery-arrow:hover {
  border-color: #31d7e5;
  color: #31d7e5;
}

.gallery-previous {
  left: 10px;
}

.gallery-next {
  right: 10px;
}

.station-gallery-thumbnails {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: 7px;
}

.gallery-thumbnail {
  position: relative;
  height: 48px;
  overflow: hidden;
  padding: 0;
  border: 1px solid #27374a;
  border-radius: 7px;
  background:
    linear-gradient(180deg, #112d43, #1e4951 56%, #997449 57%, #28302b);
  cursor: pointer;
}

.gallery-thumbnail::before {
  position: absolute;
  top: 7px;
  left: 17%;
  width: 33%;
  height: 31px;
  border: 2px solid #916126;
  background: linear-gradient(90deg, #ca852a 70%, #543c27 71%);
  content: "";
}

.gallery-thumbnail::after {
  position: absolute;
  right: 11%;
  bottom: 7px;
  width: 37%;
  height: 15px;
  border: 1px solid #a3b8be;
  border-radius: 8px 11px 4px 4px;
  background: #718894;
  content: "";
}

.gallery-thumbnail .thumb-charger {
  position: absolute;
  z-index: 1;
  top: 15px;
  left: 50%;
  width: 6px;
  height: 19px;
  border-radius: 2px;
  background: #29cddd;
}

.gallery-thumbnail.is-active {
  border-color: #21d4e4;
  box-shadow: 0 0 0 1px #21d4e480;
}

.gallery-thumbnail[data-gallery="1"] {
  background: linear-gradient(135deg, #27332f, #75876d 48%, #4c4937);
}

.gallery-thumbnail[data-gallery="1"]::before {
  left: 8%;
  width: 25%;
  background: #17becb;
}

.gallery-thumbnail[data-gallery="1"]::after {
  right: 17%;
  width: 51%;
}

.gallery-thumbnail[data-gallery="2"] {
  background: linear-gradient(155deg, #112737, #21404b 53%, #777052 54%, #202928);
}

.gallery-thumbnail[data-gallery="2"]::before {
  top: 9px;
  left: 13%;
  width: 73%;
  height: 7px;
  border: 0;
  background: #ae8d50;
}

.gallery-thumbnail[data-gallery="2"]::after {
  right: 24%;
  width: 46%;
}

.station-detail-intro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 15px;
  padding: 3px 1px 0;
}

.detail-title-copy {
  min-width: 0;
}

.detail-status-line {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 6px;
}

.detail-title-copy h1 {
  margin: 0;
  color: #f1f5fb;
  font-size: clamp(18px, 2.3vw, 23px);
  font-weight: 800;
  letter-spacing: -.7px;
}

.detail-title-copy > .detail-amenities {
  margin: 8px 0 7px;
}

.detail-address {
  margin: 5px 0 6px;
  color: #92a0b3;
  font-size: 9px;
  line-height: 1.5;
}

.detail-rating-line {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 8px;
}

.detail-rating-line span:first-child {
  color: #ffd04b;
  font-weight: 800;
}

.detail-rating-line span:last-child {
  color: #7d8ba0;
}

.detail-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 6px;
}

.detail-directions,
.detail-save {
  display: inline-flex;
  min-height: 31px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid #20cada;
  border-radius: 7px;
  background: #1ac7d8;
  color: #07151a;
  font-size: 8px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.detail-directions:hover {
  background: #54e2ec;
}

.detail-save {
  border-color: #304154;
  background: #101a27;
  color: #c2cddd;
}

.detail-save:hover,
.detail-save.is-saved {
  border-color: #1ed2e3;
  color: #35dbe8;
}

.detail-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.detail-metrics article {
  display: grid;
  min-height: 55px;
  align-content: center;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid #253448;
  border-radius: 8px;
  background: #111a27;
}

.detail-metrics article > span {
  color: #74839a;
  font-size: 7px;
}

.detail-metrics strong {
  color: #eff4fa;
  font-size: 12px;
  font-weight: 800;
}

.detail-metrics strong small {
  color: #8797aa;
  font-size: 7px;
  font-weight: 600;
}

#detail-rating-stat {
  color: #ffd04b;
}

.detail-contact-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px 16px;
  padding: 0 1px;
  color: #9baabd;
  font-size: 8px;
}

.detail-contact-line > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.detail-contact-line strong {
  color: #c7d4e2;
  font-size: 8px;
}

.detail-section,
.slot-booking-card,
.cost-estimator-card {
  min-width: 0;
  padding: 14px;
  border: 1px solid #26364a;
  border-radius: 10px;
  background: #0e1622;
}

.detail-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.detail-section-kicker {
  margin: 0 0 4px;
  color: #31d9a3;
  font-size: 7px;
  font-weight: 850;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.detail-section-heading h2,
.slot-booking-card h2,
.cost-estimator-card h2 {
  margin: 0;
  color: #ecf2f8;
  font-size: 12px;
  font-weight: 780;
}

.availability-note {
  color: #718097;
  font-size: 7px;
}

.detail-connector-list {
  display: grid;
  gap: 6px;
}

.detail-connector-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 41px;
  padding: 7px 9px;
  border: 1px solid #253347;
  border-radius: 7px;
  background: #121c29;
}

.detail-connector-item.is-selected {
  border-color: #188c98;
  background: #10232c;
  box-shadow: inset 2px 0 #23d0e0;
}

.connector-select-button {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #e4ebf5;
  font-size: 9px;
  font-weight: 750;
  cursor: pointer;
}

.connector-select-button small {
  color: #7f8fa4;
  font-size: 7px;
  font-weight: 500;
}

.connector-availability {
  display: grid;
  justify-items: end;
  gap: 3px;
  color: #31dba4;
  font-size: 8px;
  font-weight: 800;
}

.connector-availability small {
  color: #718199;
  font-size: 7px;
  font-weight: 500;
}

.connector-availability.is-low {
  color: #ffbe5c;
}

.detail-amenities {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.detail-amenity {
  display: inline-flex;
  min-height: 27px;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  border: 1px solid #27394d;
  border-radius: 6px;
  background: #121e2b;
  color: #bac7d6;
  font-size: 8px;
}

.detail-amenity span {
  color: #35d4a5;
  font-size: 10px;
}

.reviews-total {
  color: #ffd04b;
  font-size: 8px;
  font-weight: 750;
  white-space: nowrap;
}

.review-signin {
  width: 100%;
  min-height: 36px;
  border: 1px dashed #3b4b5e;
  border-radius: 7px;
  background: #101925;
  color: #9eacc0;
  font-size: 8px;
  cursor: pointer;
}

.review-signin:hover {
  border-color: #26cbd9;
  color: #39d5e2;
}

.review-feedback {
  min-height: 0;
  margin: 0;
  color: #41d9a7;
  font-size: 8px;
}

.review-feedback:empty {
  display: none;
}

.detail-review-list {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.detail-review-card {
  padding: 9px 10px;
  border: 1px solid #253347;
  border-radius: 7px;
  background: #121b28;
}

.detail-review-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.detail-review-head strong {
  color: #e3eaf3;
  font-size: 8px;
}

.detail-review-head span {
  color: #75849a;
  font-size: 7px;
}

.detail-review-stars {
  margin: 4px 0;
  color: #ffd04b;
  font-size: 8px;
  letter-spacing: 1px;
}

.detail-review-card p {
  margin: 0;
  color: #b7c3d1;
  font-size: 8px;
  line-height: 1.5;
}

.station-detail-sidebar {
  position: sticky;
  top: 14px;
}

.slot-booking-card,
.cost-estimator-card {
  padding: 15px;
  background: linear-gradient(145deg, #101a27, #0c141e);
}

.slot-booking-card h2,
.cost-estimator-card h2 {
  font-size: 14px;
  letter-spacing: -.2px;
}

.booking-hint {
  margin: 5px 0 13px;
  color: #8291a5;
  font-size: 8px;
  line-height: 1.45;
}

.booking-field-label {
  display: block;
  margin: 10px 0 5px;
  color: #8796aa;
  font-size: 8px;
  font-weight: 650;
}

.detail-select {
  width: 100%;
  height: 32px;
  padding: 0 9px;
  border: 1px solid #2b3b50;
  border-radius: 6px;
  outline: 0;
  background: #111c2a;
  color: #e3ebf5;
  font-size: 8px;
}

.detail-select:focus {
  border-color: #27cedc;
}

.detail-select option {
  background: #111c2a;
}

.slot-date-heading,
.slot-time-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 13px 0 7px;
  color: #9baabd;
  font-size: 8px;
}

.slot-date-heading span:last-child {
  color: #728198;
  font-size: 7px;
}

.slot-date-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
}

.slot-date-button {
  display: grid;
  min-height: 39px;
  align-content: center;
  justify-items: center;
  gap: 3px;
  padding: 3px;
  border: 1px solid #2a394d;
  border-radius: 6px;
  background: #111b28;
  color: #9baabd;
  font-size: 6px;
  cursor: pointer;
}

.slot-date-button strong {
  color: #dce6f1;
  font-size: 7px;
}

.slot-date-button.is-selected {
  border-color: #1acadc;
  background: #0c3440;
  color: #41dae5;
}

.slot-date-button.is-selected strong {
  color: #58e2ec;
}

.slot-time-heading strong {
  color: #35d5e4;
  font-size: 8px;
}

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

.slot-time-button {
  min-height: 27px;
  padding: 0 2px;
  border: 1px solid #29384c;
  border-radius: 5px;
  background: #111b28;
  color: #b9c7d7;
  font-size: 7px;
  cursor: pointer;
}

.slot-time-button:hover,
.slot-time-button.is-selected {
  border-color: #23d2df;
  background: #0d303a;
  color: #46dce6;
}

.slot-time-button:disabled {
  border-color: #202b39;
  background: #101620;
  color: #526174;
  text-decoration: line-through;
  cursor: not-allowed;
}

.slot-confirm-button {
  width: 100%;
  min-height: 34px;
  margin-top: 10px;
  border: 0;
  border-radius: 18px;
  background: #19cbdc;
  color: #06161c;
  font-size: 8px;
  font-weight: 850;
  cursor: pointer;
}

.slot-confirm-button:disabled {
  border: 1px solid #263548;
  background: #15202e;
  color: #73839a;
  cursor: not-allowed;
}

.slot-feedback {
  min-height: 0;
  margin: 0;
  color: #37d8a4;
  font-size: 8px;
  line-height: 1.5;
}

.slot-feedback:not(:empty) {
  margin-top: 7px;
}

.my-bookings-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 11px;
  padding-top: 9px;
  border-top: 1px solid #27364a;
  color: #a6b3c3;
  font-size: 8px;
  text-decoration: none;
}

.my-bookings-link span {
  color: #29d3e1;
  font-size: 12px;
}

.my-bookings-link:hover {
  color: #42dbe7;
}

.cost-estimator-card .detail-section-kicker {
  margin-bottom: 5px;
}

.detail-charge-range {
  display: grid;
  gap: 7px;
  margin-top: 12px;
  color: #a0aec0;
  font-size: 8px;
}

.detail-charge-range > span {
  display: flex;
  justify-content: space-between;
  gap: 5px;
}

.detail-charge-range output {
  color: #38d8e4;
  font-weight: 800;
}

.detail-charge-range input {
  width: 100%;
  height: 12px;
  appearance: none;
  margin: 0;
  background: transparent;
  cursor: pointer;
}

.detail-charge-range input::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, #11cfdf, #21d5a4);
}

.detail-charge-range input::-moz-range-track {
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, #11cfdf, #21d5a4);
}

.detail-charge-range input::-webkit-slider-thumb {
  width: 10px;
  height: 10px;
  appearance: none;
  margin-top: -3.5px;
  border: 1px solid #26d4e4;
  border-radius: 50%;
  background: #0e1925;
}

.detail-charge-range input::-moz-range-thumb {
  width: 9px;
  height: 9px;
  border: 1px solid #26d4e4;
  border-radius: 50%;
  background: #0e1925;
}

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

.cost-estimate-grid article {
  display: grid;
  min-height: 47px;
  align-content: center;
  gap: 4px;
  padding: 7px 8px;
  border: 1px solid #28364a;
  border-radius: 6px;
  background: #121c29;
}

.cost-estimate-grid article span {
  color: #718198;
  font-size: 7px;
}

.cost-estimate-grid article strong {
  color: #32d9a4;
  font-size: 12px;
  font-weight: 850;
}

.estimator-note {
  margin: 9px 0 0;
  color: #6e7d92;
  font-size: 7px;
  line-height: 1.5;
}

.detail-data-note {
  margin: 14px 0 0;
  color: #65748a;
  font-size: 7px;
  line-height: 1.5;
}

.route-shell {
  display: grid;
  width: 100%;
  height: calc(100% - 52px);
  grid-template-columns: 258px minmax(0, 1fr);
  overflow: hidden;
  background: #080d16;
}

.route-shell[hidden] {
  display: none;
}

.hub-page {
  width: 100%;
  height: calc(100% - 52px);
  overflow-y: auto;
  background:
    radial-gradient(ellipse at 82% 0%, #0d2630 0, transparent 34%),
    #090e17;
  scrollbar-color: #29374a transparent;
  scrollbar-width: thin;
}

.hub-page[hidden] {
  display: none;
}

.hub-content {
  width: min(100%, 1210px);
  margin: 0 auto;
  padding: 38px 34px 52px;
}

.hub-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 27px;
}

.hub-eyebrow {
  margin: 0 0 8px;
  color: #2bd9e9;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.hub-heading h1 {
  margin: 0;
  color: #f1f5fb;
  font-size: clamp(25px, 3vw, 34px);
  font-weight: 800;
  letter-spacing: -1.2px;
}

.hub-description {
  margin: 9px 0 0;
  color: #94a1b5;
  font-size: 12px;
  line-height: 1.6;
}

.primary-action,
.outline-action {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 14px;
  border: 1px solid #1bd2e5;
  border-radius: 8px;
  background: #1bd2e5;
  color: #07141a;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.primary-action:hover {
  border-color: #65e7f0;
  background: #65e7f0;
}

.hub-stat-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 33px;
}

.hub-stat {
  display: grid;
  min-height: 105px;
  align-content: center;
  gap: 5px;
  padding: 17px 19px;
  border: 1px solid #223044;
  border-radius: 12px;
  background: linear-gradient(135deg, #111a27, #0e1621);
}

.hub-stat > span {
  color: #92a0b5;
  font-size: 10px;
  font-weight: 650;
}

.hub-stat strong {
  color: #f1f5fb;
  font-size: 23px;
  letter-spacing: -.5px;
}

.hub-stat small {
  color: #65758c;
  font-size: 9px;
}

.hub-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 14px;
}

.hub-section-heading h2 {
  margin: 0;
  color: #edf2f8;
  font-size: 15px;
  font-weight: 780;
  letter-spacing: -.2px;
}

.hub-section-heading p {
  margin: 5px 0 0;
  color: #7d8ba0;
  font-size: 10px;
}

.subtle-pill {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  gap: 7px;
  padding: 0 9px;
  border: 1px solid #253447;
  border-radius: 16px;
  color: #9ba9ba;
  font-size: 8px;
  white-space: nowrap;
}

.live-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: #25d9a1;
  box-shadow: 0 0 8px #25d9a166;
}

.saved-station-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 12px;
}

.saved-station-grid .station-card {
  min-width: 0;
  border-color: #27364a;
  background: #101824;
}

.saved-empty {
  grid-column: 1 / -1;
  padding: 35px 18px;
  line-height: 1.8;
}

.saved-empty strong {
  color: #edf2f8;
  font-size: 12px;
}

.booking-summary {
  display: flex;
  min-height: 84px;
  align-items: center;
  gap: 13px;
  margin-bottom: 29px;
  padding: 16px 19px;
  border: 1px solid #155a60;
  border-radius: 11px;
  background: linear-gradient(110deg, #0c232b, #101a25 76%);
}

.booking-summary-icon,
.service-info-icon {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  border: 1px solid #23717a;
  border-radius: 10px;
  background: #10313a;
  color: #38d7e5;
  font-size: 18px;
}

.booking-summary > div:nth-child(2) {
  min-width: 0;
}

.booking-summary strong,
.service-info-banner strong {
  color: #e9f4f6;
  font-size: 11px;
}

.booking-summary p,
.service-info-banner p {
  margin: 5px 0 0;
  color: #8fa2b3;
  font-size: 9px;
  line-height: 1.5;
}

.booking-summary-meta {
  display: grid;
  gap: 5px;
  margin-left: auto;
  text-align: right;
}

.booking-summary-meta span {
  color: #25d9a1;
  font-size: 7px;
  font-weight: 850;
  letter-spacing: .1em;
}

.booking-summary-meta strong {
  color: #e4edf3;
  font-size: 10px;
}

.booking-tabs {
  display: flex;
  gap: 20px;
  margin-bottom: 14px;
  border-bottom: 1px solid #253145;
}

.booking-tab {
  position: relative;
  display: inline-flex;
  min-height: 37px;
  align-items: center;
  gap: 7px;
  padding: 0 2px;
  border: 0;
  background: transparent;
  color: #8291a7;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}

.booking-tab span {
  display: grid;
  min-width: 17px;
  height: 17px;
  place-items: center;
  padding: 0 4px;
  border-radius: 10px;
  background: #1b2737;
  color: #9aabc0;
  font-size: 8px;
}

.booking-tab.is-active {
  color: #2dd8e8;
}

.booking-tab.is-active::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: #20d3e4;
  content: "";
}

.booking-list[hidden],
.service-center-card[hidden],
.service-empty[hidden] {
  display: none;
}

.booking-list {
  display: grid;
  gap: 12px;
}

.booking-card {
  overflow: hidden;
  border: 1px solid #263448;
  border-radius: 11px;
  background: #101824;
}

.booking-card-top {
  display: flex;
  min-height: 38px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 16px;
  border-bottom: 1px solid #202d3e;
}

.booking-state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #38d9a5;
  font-size: 9px;
  font-weight: 750;
}

.booking-state.completed {
  color: #8b9caf;
}

.booking-state.completed::first-letter {
  color: #27d3a0;
}

.booking-id {
  color: #74839a;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .06em;
}

.booking-card-main {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) minmax(150px, .65fr);
  align-items: center;
  gap: 16px;
  padding: 17px 16px;
}

.booking-date {
  display: grid;
  justify-items: center;
  padding: 6px 0;
  border: 1px solid #27364a;
  border-radius: 8px;
  background: #141e2c;
}

.booking-date strong {
  color: #f0f4fa;
  font-size: 20px;
  line-height: 1;
}

.booking-date span {
  margin-top: 4px;
  color: #2dd7e8;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .06em;
}

.booking-date small {
  margin-top: 4px;
  color: #8492a7;
  font-size: 7px;
}

.booking-place .station-network {
  color: #25d7e7;
}

.booking-place h2 {
  margin: 5px 0;
  color: #e9eff7;
  font-size: 12px;
}

.booking-place p {
  margin: 0;
  color: #8290a5;
  font-size: 9px;
}

.booking-time {
  display: grid;
  gap: 5px;
  padding-left: 16px;
  border-left: 1px solid #263448;
}

.booking-time span,
.booking-card-footer div span {
  color: #74839a;
  font-size: 7px;
  font-weight: 750;
  letter-spacing: .07em;
}

.booking-time strong {
  color: #e5ecf4;
  font-size: 10px;
}

.booking-time small {
  color: #8b9aaf;
  font-size: 8px;
}

.booking-card-footer {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 11px 16px;
  border-top: 1px solid #202d3e;
  background: #0d141f;
}

.booking-card-footer div {
  display: grid;
  gap: 4px;
}

.booking-card-footer div strong {
  color: #e9eef7;
  font-size: 10px;
}

.booking-note {
  margin-left: auto;
  color: #75849a;
  font-size: 8px;
}

.sample-data-note {
  margin: 18px 0 0;
  color: #65748a;
  font-size: 8px;
  line-height: 1.5;
}

.service-heading {
  align-items: flex-end;
}

.service-search {
  display: flex;
  width: min(100%, 290px);
  height: 37px;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  padding: 0 11px;
  border: 1px solid #29364a;
  border-radius: 8px;
  background: #111a27;
  color: #8999ad;
  font-size: 17px;
}

.service-search:focus-within {
  border-color: #2c7888;
  box-shadow: 0 0 0 2px #1bd2e515;
}

.service-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #e9eef8;
  font-size: 10px;
}

.service-search input::placeholder {
  color: #74839a;
}

.service-info-banner {
  display: flex;
  min-height: 75px;
  align-items: center;
  gap: 13px;
  margin-bottom: 29px;
  padding: 13px 17px;
  border: 1px solid #21434a;
  border-radius: 11px;
  background: linear-gradient(105deg, #10232a, #111a25 74%);
}

.service-info-banner > div:nth-child(2) {
  min-width: 0;
}

.service-info-banner .subtle-pill {
  margin-left: auto;
}

.service-list-heading {
  margin-bottom: 14px;
}

.service-city-select {
  position: relative;
  display: block;
  width: 145px;
  height: 34px;
  border: 1px solid #29364a;
  border-radius: 8px;
  background: #111a27;
}

.service-city-select::after {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-58%);
  color: #8b99ad;
  content: "⌄";
  pointer-events: none;
}

.service-city-select select {
  width: 100%;
  height: 100%;
  padding: 0 27px 0 10px;
  appearance: none;
  border: 0;
  outline: 0;
  background: transparent;
  color: #e8edf7;
  font-size: 9px;
  cursor: pointer;
}

.service-city-select option {
  background: #111a27;
}

.service-center-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 12px;
}

.service-center-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 16px;
  border: 1px solid #263448;
  border-radius: 11px;
  background: linear-gradient(145deg, #111a27, #0e151f);
  transition: border-color 150ms ease, transform 150ms ease;
}

.service-center-card:hover {
  transform: translateY(-2px);
  border-color: #2a6672;
}

.service-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 13px;
}

.service-mark {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid #1a8592;
  border-radius: 9px;
  background: #0c2b34;
  color: #29d7e5;
  font-size: 11px;
  font-weight: 900;
}

.service-mark span {
  color: #ecfaff;
}

.center-open {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #31d5a0;
  font-size: 8px;
  font-weight: 700;
}

.service-network {
  color: #25d4e4;
  font-size: 7px;
  font-weight: 850;
  letter-spacing: .12em;
}

.service-center-card h2 {
  margin: 5px 0 8px;
  color: #edf2f9;
  font-size: 13px;
  letter-spacing: -.15px;
}

.service-address {
  min-height: 30px;
  margin: 0 0 8px;
  color: #8e9cb0;
  font-size: 9px;
  line-height: 1.55;
}

.service-rating {
  color: #7d8ba0;
  font-size: 8px;
}

.service-rating span {
  color: #ffcb43;
  font-size: 9px;
  font-weight: 750;
}

.service-hours {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 13px;
  padding: 10px 0;
  border-top: 1px solid #202e40;
  color: #8492a6;
  font-size: 8px;
}

.service-hours strong {
  color: #d9e2ed;
  font-size: 8px;
}

.service-specialties {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 14px;
}

.service-specialties span {
  padding: 5px 7px;
  border: 1px solid #25364a;
  border-radius: 5px;
  background: #141f2c;
  color: #a3b1c3;
  font-size: 7px;
}

.service-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 11px;
  border-top: 1px solid #202e40;
}

.service-card-footer > span {
  color: #9aa9bc;
  font-size: 8px;
}

.outline-action {
  min-height: 29px;
  padding: 0 9px;
  border-color: #28505b;
  background: #0d2029;
  color: #52d9e5;
  font-size: 8px;
}

.outline-action:hover {
  border-color: #25ccdc;
  background: #12313a;
}

.outline-action span {
  font-size: 12px;
}

.service-empty {
  grid-column: 1 / -1;
}

.service-dialog {
  width: min(92vw, 430px);
  padding: 0;
  overflow: visible;
  border: 1px solid #304257;
  border-radius: 14px;
  background: #0e1622;
  color: #e9eef8;
  box-shadow: 0 22px 80px #000b;
}

.service-dialog::backdrop {
  background: #03070dcc;
  backdrop-filter: blur(3px);
}

.service-dialog-form {
  position: relative;
  padding: 25px;
}

.service-dialog-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border: 1px solid #304257;
  border-radius: 50%;
  background: #141f2d;
  color: #aab8c9;
  font-size: 18px;
  cursor: pointer;
}

.service-dialog-form h2 {
  margin: 0;
  padding-right: 24px;
  color: #f1f5fb;
  font-size: 20px;
  letter-spacing: -.5px;
}

.service-dialog-form > p:not(.hub-eyebrow, .sample-data-note) {
  margin: 10px 0 18px;
  color: #9aa8bb;
  font-size: 10px;
  line-height: 1.65;
}

.service-detail-list {
  display: grid;
  gap: 0;
  border-top: 1px solid #27364a;
}

.service-detail-list div {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid #27364a;
}

.service-detail-list span {
  color: #8291a7;
  font-size: 9px;
}

.service-detail-list strong {
  color: #dce5ef;
  font-size: 9px;
  line-height: 1.5;
}

.route-sidebar {
  z-index: 1;
  min-width: 0;
  overflow-y: auto;
  border-right: 1px solid #273346;
  background: #0b1019;
  scrollbar-color: #29374a transparent;
  scrollbar-width: thin;
}

.route-planner-header {
  padding: 13px 11px 9px;
}

.route-eyebrow {
  margin: 0 0 5px;
  color: #16d9a1;
  font-size: 7px;
  font-weight: 850;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.route-planner-header h1 {
  margin: 0;
  color: #f1f5fb;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.3px;
}

.route-form {
  display: grid;
  gap: 8px;
  margin: 0 11px;
  padding: 9px;
  border: 1px solid #263347;
  border-radius: 10px;
  background: #101824;
}

.route-city-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr);
  align-items: center;
  gap: 5px;
}

.route-select-wrap {
  position: relative;
  display: block;
  min-width: 0;
  height: 24px;
  border: 1px solid #29374a;
  border-radius: 7px;
  background: #141d2a;
}

.route-select-wrap::after {
  position: absolute;
  top: 50%;
  right: 7px;
  transform: translateY(-58%);
  color: #74839a;
  content: "⌄";
  font-size: 10px;
  pointer-events: none;
}

.route-select-wrap select {
  width: 100%;
  height: 100%;
  padding: 0 20px 0 7px;
  appearance: none;
  border: 0;
  outline: 0;
  background: transparent;
  color: #e5ebf5;
  font-size: 8px;
  font-weight: 650;
  cursor: pointer;
}

.route-select-wrap option {
  background: #141d2a;
}

.swap-route {
  display: grid;
  width: 19px;
  height: 19px;
  place-items: center;
  padding: 0;
  border: 1px solid #34445a;
  border-radius: 50%;
  background: #111a26;
  color: #b5c4d6;
  font-size: 12px;
  cursor: pointer;
}

.swap-route:hover {
  border-color: #19d0e2;
  color: #19d0e2;
}

.vehicle-select-wrap {
  height: 24px;
}

.charge-control {
  display: grid;
  gap: 2px;
  color: #8c9bb0;
  font-size: 8px;
}

.charge-control > span {
  display: flex;
  justify-content: space-between;
}

.charge-control output {
  color: #25d4e7;
  font-size: 8px;
  font-weight: 800;
}

.charge-control input {
  width: 100%;
  height: 8px;
  appearance: none;
  margin: 0;
  background: transparent;
  cursor: pointer;
}

.charge-control input::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 3px;
  background: #14d6e5;
}

.charge-control input::-moz-range-track {
  height: 3px;
  border-radius: 3px;
  background: #14d6e5;
}

.charge-control input::-webkit-slider-thumb {
  width: 9px;
  height: 9px;
  appearance: none;
  margin-top: -3px;
  border: 1px solid #14d6e5;
  border-radius: 50%;
  background: #0b1019;
}

.charge-control input::-moz-range-thumb {
  width: 8px;
  height: 8px;
  border: 1px solid #14d6e5;
  border-radius: 50%;
  background: #0b1019;
}

.plan-route-button {
  display: flex;
  height: 24px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 0;
  border-radius: 16px;
  background: #19cfe1;
  color: #05141a;
  font-size: 8px;
  font-weight: 800;
  cursor: pointer;
}

.plan-route-button:hover {
  background: #48dcea;
}

.route-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  margin: 11px;
}

.route-stat {
  display: grid;
  min-height: 35px;
  align-content: center;
  gap: 3px;
  padding: 5px 6px;
  border: 1px solid #253247;
  border-radius: 7px;
  background: #121a27;
}

.route-stat > span {
  color: #71819a;
  font-size: 6px;
}

.route-stat strong {
  color: #e7edf7;
  font-size: 9px;
  font-weight: 800;
}

.route-stat strong.stat-accent {
  color: #28d99f;
}

.trip-brief {
  margin: 0 11px 11px;
  padding: 10px 9px;
  border: 1px solid #12636a;
  border-radius: 8px;
  background: #0a1921;
}

.trip-brief h2 {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0 0 7px;
  color: #49dced;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.trip-brief ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.trip-brief li {
  position: relative;
  padding-left: 9px;
  color: #d1d9e4;
  font-size: 7px;
  line-height: 1.45;
}

.trip-brief li::before {
  position: absolute;
  top: 4px;
  left: 0;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #16d7e7;
  content: "";
}

.route-itinerary {
  display: grid;
  gap: 0;
  padding: 0 11px 14px;
}

.itinerary-endpoint,
.charging-stop {
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: start;
  min-width: 0;
}

.charging-stop[hidden],
#route-stop-marker[hidden] {
  display: none;
}

.itinerary-endpoint {
  min-height: 32px;
}

.charging-stop {
  min-height: 54px;
}

.itinerary-endpoint:not(.finish-endpoint)::after,
.charging-stop::after {
  position: absolute;
  top: 19px;
  bottom: -1px;
  left: 8px;
  border-left: 1px dashed #34475e;
  content: "";
}

.timeline-marker {
  z-index: 1;
  display: grid;
  width: 15px;
  height: 15px;
  place-items: center;
  border: 1px solid #3b4e68;
  border-radius: 50%;
  background: #111a28;
  color: #b9c5d6;
  font-size: 7px;
}

.stop-marker {
  border-color: #18d1df;
  background: #19d0e2;
  color: #05212a;
  font-weight: 900;
}

.finish-marker {
  font-size: 8px;
}

.itinerary-endpoint strong {
  display: block;
  margin: 2px 0 3px;
  color: #e4eaf4;
  font-size: 8px;
}

.itinerary-endpoint small {
  display: block;
  color: #76859b;
  font-size: 6px;
}

.charging-stop-card {
  padding: 7px;
  border: 1px solid #29374b;
  border-radius: 7px;
  background: #141d2a;
}

.charging-stop-card > small {
  color: #4bcae1;
  font-size: 6px;
}

.charging-stop-card h3 {
  margin: 4px 0;
  color: #e9eef7;
  font-size: 7px;
}

.charging-stop-card p {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0;
  color: #1dd4e6;
  font-size: 6px;
  font-weight: 750;
}

.route-map {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background: #202522;
}

.route-map-world {
  position: absolute;
  inset: -2%;
}

.route-map-art {
  display: block;
  width: 100%;
  height: 100%;
  filter: brightness(0.8) saturate(0.72);
}

.route-map-roads path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.route-map-roads.minor path {
  stroke: #38403a;
  stroke-width: 2;
  opacity: 0.85;
}

.route-map-roads.major path {
  stroke: #876c56;
  stroke-width: 7;
  opacity: 0.66;
}

.route-map-labels {
  fill: #9da69b;
  font-family: Arial, sans-serif;
  font-size: 12px;
  opacity: 0.83;
  paint-order: stroke;
  stroke: #202522;
  stroke-width: 3px;
  stroke-linejoin: round;
}

#route-line-shadow,
#route-line {
  transition: d 200ms ease;
}

#route-line-shadow {
  opacity: 0.65;
}

.route-map-stop {
  fill: #10d7e7;
  stroke: #09151c;
  stroke-width: 4;
}

.route-map-stop-number,
.route-map-endpoint-letter {
  fill: #06222b;
  font-family: Arial, sans-serif;
  font-size: 10px;
  font-weight: 900;
  text-anchor: middle;
}

.route-map-origin {
  fill: #11c995;
  stroke: #081a19;
  stroke-width: 4;
}

.route-map-destination {
  fill: #f2f5f8;
  stroke: #0c1720;
  stroke-width: 4;
}

.route-map-endpoint-letter.dark {
  fill: #13202c;
}

.route-map-controls {
  position: absolute;
  top: 10px;
  left: 10px;
  display: grid;
  width: 28px;
  overflow: hidden;
  border: 1px solid #46505b;
  border-radius: 5px;
  background: #151a20;
}

.route-map-controls button {
  width: 27px;
  height: 27px;
  border: 0;
  background: transparent;
  color: #f3f5f7;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.route-map-controls button + button {
  border-top: 1px solid #38414d;
}

.route-map-controls button:hover {
  background: #29333e;
}

.route-map-legend {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 9px;
  border: 1px solid #384248;
  border-radius: 7px;
  background: #0b111acc;
  color: #b2bcc9;
  font-size: 8px;
}

.legend-line {
  width: 16px;
  border-top: 2px solid #14d9eb;
}

.legend-stop {
  width: 7px;
  height: 7px;
  margin-left: 5px;
  border-radius: 50%;
  background: #14d9eb;
}

.route-map-attribution {
  position: absolute;
  left: 10px;
  bottom: 8px;
  color: #78837d;
  font-size: 7px;
}

.visually-hidden {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  clip-path: inset(50%);
}

@media (min-width: 1200px) and (max-height: 700px) {
  .connector-section {
    padding-top: 16px;
  }

  .stations-section {
    padding-top: 19px;
  }
}

@media (max-width: 900px) {
  .route-shell {
    grid-template-columns: 250px minmax(0, 1fr);
  }

  .station-detail-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .station-detail-content {
    padding-right: 17px;
    padding-left: 17px;
  }

  .saved-station-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hub-content {
    padding-right: 22px;
    padding-left: 22px;
  }

  .topbar {
    padding-right: 12px;
  }

  .brand {
    flex-basis: 93px;
  }

  .nav-link {
    gap: 5px;
    padding: 0 8px;
    font-size: 10px;
  }
}

@media (max-width: 700px) {
  html,
  body {
    height: auto;
    min-height: 100%;
    overflow: auto;
  }

  .topbar {
    height: 52px;
    padding: 0 10px;
  }

  .brand {
    flex-basis: 86px;
    gap: 5px;
    font-size: 12px;
  }

  .brand-mark {
    width: 24px;
    height: 24px;
    font-size: 18px;
  }

  .main-nav {
    flex: 1;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .main-nav::-webkit-scrollbar {
    display: none;
  }

  .nav-link {
    gap: 4px;
    padding: 0 7px;
    font-size: 9px;
  }

  .nav-symbol {
    font-size: 12px;
  }

  .sign-in {
    min-width: 60px;
    height: 27px;
    margin-left: 6px;
    font-size: 10px;
  }

  .app-shell {
    height: auto;
    min-height: calc(100vh - 52px);
    overflow: visible;
  }

  .hub-page {
    height: auto;
    min-height: calc(100vh - 52px);
    overflow: visible;
  }

  .station-detail-page {
    height: auto;
    min-height: calc(100vh - 52px);
    overflow: visible;
  }

  .station-detail-content {
    padding: 12px 12px 30px;
  }

  .station-detail-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .station-detail-sidebar {
    position: static;
  }

  .station-gallery-stage {
    height: clamp(180px, 55vw, 270px);
  }

  .gallery-thumbnail {
    height: 43px;
  }

  .detail-preview-label {
    font-size: 7px;
  }

  .station-detail-intro {
    flex-direction: column;
  }

  .detail-actions {
    width: 100%;
  }

  .detail-directions,
  .detail-save {
    min-height: 34px;
  }

  .detail-directions {
    flex: 1;
  }

  .detail-save {
    min-width: 82px;
  }

  .detail-section,
  .slot-booking-card,
  .cost-estimator-card {
    padding: 12px;
  }

  .slot-date-button {
    min-height: 44px;
    font-size: 7px;
  }

  .slot-date-button strong {
    font-size: 9px;
  }

  .slot-time-button {
    min-height: 33px;
    font-size: 8px;
  }

  .cost-estimate-grid article {
    min-height: 55px;
  }

  .hub-content {
    padding: 27px 16px 38px;
  }

  .hub-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 17px;
    margin-bottom: 22px;
  }

  .hub-heading > .primary-action {
    align-self: stretch;
  }

  .service-heading {
    align-items: stretch;
  }

  .service-search {
    width: 100%;
  }

  .service-center-grid {
    grid-template-columns: 1fr;
  }

  .saved-station-grid {
    grid-template-columns: 1fr;
  }

  .hub-stat-row {
    gap: 7px;
    margin-bottom: 26px;
  }

  .hub-stat {
    min-height: 88px;
    padding: 12px 10px;
  }

  .hub-stat > span {
    font-size: 8px;
  }

  .hub-stat strong {
    font-size: 20px;
  }

  .hub-stat small {
    font-size: 7px;
  }

  .booking-summary {
    flex-wrap: wrap;
    padding: 13px;
  }

  .booking-summary > div:nth-child(2) {
    flex: 1 1 calc(100% - 55px);
  }

  .booking-summary-meta {
    margin-left: 51px;
    text-align: left;
  }

  .booking-card-main {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 12px;
  }

  .booking-time {
    grid-column: 2;
    padding: 9px 0 0;
    border-top: 1px solid #263448;
    border-left: 0;
  }

  .booking-card-footer {
    flex-wrap: wrap;
    gap: 12px 20px;
  }

  .booking-note {
    flex-basis: 100%;
    margin-left: 0;
  }

  .hub-section-heading {
    align-items: flex-start;
  }

  .subtle-pill {
    font-size: 7px;
  }

  .route-shell {
    display: flex;
    height: calc(100vh - 52px);
    min-height: 0;
    flex-direction: column;
    overflow: auto;
  }

  .route-sidebar {
    order: 2;
    overflow: visible;
    border-top: 1px solid #273346;
    border-right: 0;
  }

  .route-map {
    order: 1;
    flex: 0 0 42vh;
    min-height: 240px;
  }

  .route-planner-header {
    padding-top: 15px;
  }

  .route-form {
    gap: 10px;
  }

  .route-select-wrap,
  .vehicle-select-wrap {
    height: 34px;
  }

  .route-select-wrap select,
  .charge-control,
  .charge-control output {
    font-size: 11px;
  }

  .plan-route-button {
    height: 34px;
    font-size: 11px;
  }

  .route-stat {
    min-height: 46px;
    padding: 7px 9px;
  }

  .route-stat > span {
    font-size: 8px;
  }

  .route-stat strong {
    font-size: 11px;
  }

  .trip-brief li {
    font-size: 10px;
  }

  .trip-brief h2 {
    font-size: 10px;
  }

  .itinerary-endpoint strong {
    font-size: 10px;
  }

  .itinerary-endpoint small,
  .charging-stop-card > small,
  .charging-stop-card p {
    font-size: 8px;
  }

  .charging-stop-card h3 {
    font-size: 10px;
  }

  .search-row {
    padding-top: 12px;
  }

  .connector-section {
    padding-top: 14px;
  }
}

@media (max-width: 390px) {
  .station-detail-content {
    padding-right: 9px;
    padding-left: 9px;
  }

  .detail-metrics {
    gap: 5px;
  }

  .detail-metrics article {
    padding-right: 7px;
    padding-left: 7px;
  }

  .detail-section-heading {
    align-items: flex-start;
  }

  .availability-note {
    padding-top: 2px;
  }

  .hub-content {
    padding-right: 12px;
    padding-left: 12px;
  }

  .hub-stat-row {
    grid-template-columns: 1fr;
  }

  .hub-stat {
    min-height: 70px;
  }

  .hub-section-heading {
    flex-direction: column;
  }

  .service-list-heading {
    flex-direction: row;
    align-items: center;
  }

  .service-city-select {
    width: 120px;
  }

  .service-info-banner .subtle-pill {
    display: none;
  }
}

@media (max-width: 390px) {
  .nav-link {
    padding: 0 5px;
  }

  .nav-link:not(.active) {
    font-size: 0;
  }

  .nav-link:not(.active) .nav-symbol {
    font-size: 15px;
  }

  .search-row {
    grid-template-columns: minmax(0, 1fr) 100px;
  }
}