:root {
  --ink: #151b2c;
  --muted: #6b6b70;
  --blue: #2856d8;
  --line: #d9d3c7;
  --panel: #fff9ef;
  --soft: #f5eee3;
  --green: #b9e334;
  --pink: #e84b36;
  --font-ui: "Avenir Next", "Montserrat", "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-display: "Arial Black", "Avenir Next", "Segoe UI Black", "PingFang SC", "Microsoft YaHei", sans-serif;
}
* {
  box-sizing: border-box;
}
.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}
body {
  margin: 0;
  font: 14px/1.45 var(--font-ui);
  color: var(--ink);
  background: #f4ede2;
}
.topbar {
  height: 68px;
  background: #fff;
  display: flex;
  align-items: center;
  padding: 0 24px;
  border-bottom: 1px solid var(--line);
  gap: 18px;
}
.brand {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 900;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -1px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  color: #fff;
  font: 900 22px/1 var(--font-display);
  background: var(--pink);
}
.slogan,
.top-quote {
  color: var(--muted);
  white-space: nowrap;
}
.topbar nav {
  height: 100%;
  margin-left: 26px;
  display: flex;
  gap: 34px;
}
.topbar nav a {
  padding-top: 23px;
  color: #34476a;
  text-decoration: none;
  font-size: 16px;
}
.topbar nav a.active {
  color: var(--blue);
  border-bottom: 3px solid var(--blue);
  font-weight: 700;
}
.header-search {
  margin-left: auto;
  width: 290px;
  height: 38px;
  border: 1px solid #dce5f1;
  border-radius: 7px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  color: #203b6c;
}
.header-search input {
  border: 0;
  outline: 0;
  width: 100%;
  font: inherit;
}
.header-search .icon {
  width: 17px;
  height: 17px;
}
.top-quote {
  font-size: 12px;
}
.avatar {
  border: 0;
  border-radius: 50%;
  height: 38px;
  width: 38px;
  color: #53709d;
  background: #e7eef9;
}
.avatar .icon {
  width: 19px;
  height: 19px;
}
.workspace {
  height: calc(100vh - 68px);
  min-height: 730px;
  display: grid;
  grid-template-columns: 320px minmax(460px, 1fr) 458px;
  gap: 10px;
  padding: 10px;
  background: #f4ede2;
}
.left-panel,
.right-panel {
  background: #fff;
  border-radius: 9px;
  overflow: auto;
  box-shadow: 0 2px 11px #183c7420;
}
.left-panel {
  display: flex;
  flex-direction: column;
  padding: 12px;
}
.setup-section {
  padding: 8px 0 13px;
  border-bottom: 1px solid var(--line);
}
h2 {
  font-size: 16px;
  margin: 0;
  color: #142a50;
}
h2 em {
  font-size: 12px;
  font-style: normal;
  color: #607394;
  font-weight: 500;
}
.step {
  display: inline-grid;
  place-items: center;
  margin-right: 9px;
  width: 25px;
  height: 25px;
  border-radius: 5px;
  background: #132d55;
  color: var(--marker-ink, #fff);
  font-size: 14px;
}
.segmented {
  margin: 12px 0 10px;
  display: flex;
  border-radius: 6px;
  overflow: hidden;
  background: #f0f5fc;
}
.segmented button,
.templates button {
  border: 0;
  background: transparent;
  color: #58709b;
  cursor: pointer;
  font: inherit;
}
.segmented button {
  height: 34px;
  width: 50%;
}
.segmented .selected {
  background: #fff;
  color: var(--blue);
  border: 1px solid #4989ff;
  border-radius: 5px;
  font-weight: 700;
}
.place-search {
  height: 37px;
  border: 1px solid #dbe5f4;
  border-radius: 6px;
  display: flex;
  align-items: center;
  padding-left: 11px;
  gap: 7px;
  color: #24446f;
}
.place-search input {
  border: 0;
  outline: 0;
  width: 100%;
  font: inherit;
}
.place-search button {
  border: 0;
  background: transparent;
  color: var(--blue);
  width: 35px;
  height: 29px;
  margin-right: 3px;
  border-left: 1px solid #e0e8f4;
  padding: 0;
  font-size: 18px;
  cursor: pointer;
}
.search-hint {
  margin-top: 5px;
  border: 1px solid #e0e8f4;
  border-radius: 6px;
  overflow: hidden;
}
.location-result {
  display: block;
  width: 100%;
  border: 0;
  border-bottom: 1px solid #edf2f8;
  background: #fff;
  padding: 7px 10px;
  color: #1c385f;
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.location-result:last-child {
  border-bottom: 0;
}
.location-result:hover {
  background: #f4f8ff;
}
.location-result b,
.location-result small {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.location-result small {
  margin-top: 1px;
  color: #7284a2;
  font-size: 11px;
}
.location-list {
  list-style: none;
  margin: 10px 0 7px;
  padding: 0;
}
.location-list li {
  margin: 5px 0;
  display: flex;
  align-items: center;
  gap: 9px;
  background: #f4f8fd;
  border-radius: 5px;
  padding: 7px 8px;
}
.location-list li.is-active {
  box-shadow: inset 0 0 0 1px var(--marker-color);
}
.location-choice {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  flex: 1;
  border: 0;
  padding: 0;
  color: inherit;
  text-align: left;
  background: transparent;
  cursor: pointer;
}
.location-choice > span:last-child {
  min-width: 0;
  flex: 1;
}
.location-list .num {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: var(--marker-ink, #fff);
  font-size: 12px;
  font-weight: 800;
  background: var(--marker-color);
}
.location-list b {
  font-size: 13px;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.location-list small {
  color: #7082a2;
  display: block;
  font-size: 11px;
}
.remove {
  border: 0;
  background: none;
  color: #526b94;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.add-location {
  width: 100%;
  height: 40px;
  background: #fff;
  border: 1px solid #dae4f2;
  border-radius: 6px;
  color: #234371;
  font: inherit;
  cursor: pointer;
  text-align: left;
  padding-left: 11px;
}
.add-location small {
  color: #7788a7;
}
.section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.section-title button {
  border: 0;
  background: none;
  color: var(--blue);
  cursor: pointer;
  font: inherit;
}
.destinations {
  padding-top: 14px;
}
.destination {
  display: flex;
  flex-direction: column;
  margin-top: 8px;
  padding: 8px;
  background: #fafcff;
  border: 1px solid #edf2f9;
  border-radius: 7px;
}
.destination-main {
  display: flex;
  align-items: center;
  gap: 7px;
}
.destination-icon {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  border-radius: 50%;
  background: #e9f0ff;
  color: var(--blue);
  font-size: 15px;
}
.destination:nth-child(2) .destination-icon {
  background: #fff1e5;
  color: #ff872b;
}
.destination:nth-child(3) .destination-icon {
  background: #f0e8ff;
  color: #7a43e6;
}
.destination-info {
  flex: 1;
  min-width: 0;
}
.destination-info b,
.destination-info small {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.destination-info small {
  color: #7788a7;
  font-size: 11px;
}
.travel-select {
  border: 0;
  background: #fff;
  color: #213d6b;
  font: inherit;
  max-width: 62px;
}
.destination-action {
  width: 23px;
  height: 23px;
  border: 0;
  border-radius: 4px;
  background: #edf4ff;
  color: #236ce4;
  cursor: pointer;
  font:
    14px/1 Arial,
    sans-serif;
}
.destination-lookup {
  display: flex;
  gap: 5px;
  margin-top: 7px;
}
.destination-lookup input {
  min-width: 0;
  flex: 1;
  height: 29px;
  border: 1px solid #bcd2f6;
  border-radius: 4px;
  padding: 0 7px;
  font: inherit;
}
.destination-lookup button,
.destination-result {
  border: 0;
  border-radius: 4px;
  background: #eaf2ff;
  color: #176ef5;
  cursor: pointer;
  font: 12px inherit;
}
.destination-lookup button {
  padding: 0 9px;
}
.destination-result {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 5px 7px;
  text-align: left;
}
.destination-result b,
.destination-result small {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.destination-result small {
  color: #7385a2;
}
.templates {
  display: flex;
  margin: 11px 0 9px;
  border-bottom: 1px solid #edf1f7;
}
.templates button {
  padding: 7px 9px;
  white-space: nowrap;
  font-size: 12px;
}
.templates .selected {
  color: var(--blue);
  border-bottom: 2px solid var(--blue);
  font-weight: 700;
}
.weight-item {
  display: grid;
  grid-template-columns: 18px 72px 1fr 31px;
  align-items: center;
  gap: 4px;
  height: 25px;
  font-size: 12px;
}
.weight-icon {
  color: var(--weight-color);
  font-size: 15px;
}
.weight-item output {
  text-align: right;
  color: #2a4c7e;
}
.weight-item input {
  accent-color: #2077fb;
  width: 100%;
  height: 4px;
}
.analyse-button {
  margin-top: auto;
  min-height: 48px;
  border: 0;
  border-radius: 6px;
  color: #fff;
  background: #19365e;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}
.analyse-button span {
  margin-left: 20px;
}
.map-column {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-radius: 9px;
  background: #dbeee7;
  box-shadow: 0 2px 11px #183c7420;
}
#map {
  width: 100%;
  height: 100%;
}
.map-toolbar {
  position: absolute;
  z-index: 2;
  top: 12px;
  left: 12px;
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  max-width: calc(100% - 24px);
}
.layer-menu {
  position: relative;
}
.layer-caret {
  margin-left: 4px;
  font-size: 12px;
}
.layer-dropdown {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  display: none;
  min-width: 144px;
  padding: 5px;
  border: 1px solid #dce6f3;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 5px 15px #17355e2b;
}
.layer-dropdown[hidden] {
  display: none !important;
}
.layer-menu.open .layer-dropdown {
  display: grid;
  gap: 2px;
}
.layer-dropdown button {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 31px;
  border: 0;
  border-radius: 4px;
  background: #fff;
  color: #2b466e;
  padding: 0 7px;
  text-align: left;
  font: 12px inherit;
  cursor: pointer;
}
.layer-dropdown button:hover {
  background: #f1f6ff;
  color: var(--blue);
}
.layer-dropdown button.selected {
  background: #eaf2ff;
  color: var(--blue);
  font-weight: 700;
}
.layer-dropdown button.selected::after {
  content: "已显示";
  margin-left: auto;
  color: #5b7eae;
  font-size: 10px;
  font-weight: 600;
}
.layer-dropdown .icon {
  width: 14px;
  height: 14px;
  margin-right: 5px;
}
.layer-route {
  display: grid;
  gap: 2px;
  padding: 4px 2px;
}
.layer-route > span,
.layer-route small {
  padding: 2px 6px;
  color: #6f82a0;
  font-size: 11px;
  font-weight: 700;
}
.map-settings-button {
  position: absolute;
  z-index: 151;
  left: 12px;
  bottom: 52px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 4px;
  background: #fff;
  color: #203d67;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
  cursor: pointer;
}
.map-settings-button:hover,
.map-settings-button[aria-expanded="true"] {
  color: var(--blue);
  background: #f5f9ff;
}
.map-settings-panel {
  position: absolute;
  z-index: 152;
  left: 52px;
  bottom: 52px;
  width: 218px;
  padding: 12px;
  border: 1px solid #dce6f3;
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 5px 18px #17355e2b;
  color: #203b63;
}
.map-settings-panel[hidden] {
  display: none;
}
.map-settings-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 9px;
  border-bottom: 1px solid #e9eff7;
}
.map-settings-title strong {
  font-size: 13px;
}
.map-settings-title button {
  border: 0;
  background: transparent;
  color: #70819c;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}
.map-settings-group {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 7px 8px;
  padding-top: 10px;
}
.map-settings-group > span {
  grid-column: 1 / -1;
  color: #6a7d9b;
  font-size: 11px;
  font-weight: 700;
}
.map-settings-features {
  grid-template-columns: repeat(3, auto);
}
.map-settings-group label {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #314d75;
  font-size: 12px;
  cursor: pointer;
}
.map-settings-group input {
  margin: 0;
  accent-color: var(--blue);
}
.theme-options {
  grid-column: 1 / -1;
  display: flex;
  gap: 5px;
}
.theme-options button {
  flex: 1;
  height: 26px;
  border: 1px solid #dce6f3;
  border-radius: 4px;
  background: #fff;
  color: #526b90;
  font: 12px inherit;
  cursor: pointer;
}
.theme-options button.selected {
  border-color: #8ab5ff;
  background: #f1f6ff;
  color: var(--blue);
  font-weight: 700;
}
.layer {
  border: 1px solid #dfe8f4;
  border-radius: 6px;
  background: #fff;
  color: #213a65;
  height: 37px;
  padding: 0 12px;
  box-shadow: 0 1px 3px #32507b17;
  font: 600 13px inherit;
  cursor: pointer;
}
.layer.active {
  border-color: #7cacf8;
  color: #0e62da;
  background: #f6faff;
}
.isochrone {
  position: absolute;
  z-index: 2;
  bottom: 16px;
  right: 15px;
  width: 170px;
  background: #fff;
  border: 0;
  border-radius: 7px;
  padding: 10px 12px;
  box-shadow: 0 3px 15px #16345a22;
  color: #31517d;
}
.isochrone legend {
  font-weight: 800;
  color: #19345b;
  padding: 0;
}
.isochrone label {
  display: block;
  margin: 5px 0;
  cursor: pointer;
  font-size: 12px;
}
.isochrone input {
  accent-color: var(--blue);
}
.isochrone small {
  color: #7082a2;
}
.map-fallback {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  background: linear-gradient(35deg, #d4eac8, #e8f0d7 50%, #bddced);
  color: #28466b;
}
.map-fallback[hidden] {
  display: none;
}
.map-fallback span {
  background: #fff;
  padding: 12px 16px;
  border-radius: 8px;
}
.right-panel {
  padding: 10px 12px;
}
.result-tabs {
  height: 42px;
  display: flex;
  background: #f2f6fc;
  border-radius: 7px;
  align-items: stretch;
  margin-bottom: 20px;
}
.result-tabs > button {
  border: 0;
  background: transparent;
  color: #29436c;
  padding: 0 20px;
  font: 600 15px inherit;
  cursor: pointer;
}
.result-tabs > button.selected {
  background: #fff;
  border-bottom: 3px solid var(--blue);
  color: #142d55;
}
.result-tabs .export {
  margin-left: auto;
  font-size: 14px;
}
.result-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
}
.result-head h1 {
  font-size: 22px;
  margin: 0;
}
.result-head p {
  margin: 3px 0 13px;
  color: var(--muted);
  font-size: 12px;
}
.adjust-button {
  border: 1px solid #bdd5ff;
  border-radius: 6px;
  background: #f8fbff;
  color: var(--blue);
  padding: 7px 10px;
  cursor: pointer;
}
.adjust-button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
.location-card {
  position: relative;
  border: 1px solid #e0e8f3;
  border-left: 3px solid var(--marker-color);
  border-radius: 8px;
  margin: 11px 0;
  padding: 12px;
  background: #fff;
  cursor: pointer;
}
.location-card.is-active {
  border-color: var(--marker-color);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--marker-color) 24%, transparent);
}
.location-card:focus-visible,
.location-choice:focus-visible {
  outline: 2px solid #176ef5;
  outline-offset: 2px;
}
.card-remove {
  position: absolute;
  right: 10px;
  bottom: 8px;
  border: 0;
  background: transparent;
  color: #7184a3;
  font-size: 12px;
  cursor: pointer;
}
.card-remove:hover {
  color: #e34b66;
}
.tags-line {
  padding-right: 34px;
}
.card-top {
  display: flex;
  gap: 10px;
}
.card-index {
  display: grid;
  place-items: center;
  background: var(--marker-color);
  color: var(--marker-ink, #fff);
  font-weight: 800;
  border-radius: 50%;
  height: 28px;
  width: 28px;
  flex: 0 0 28px;
}
.card-name {
  flex: 1;
  min-width: 0;
}
.card-name h3 {
  font-size: 18px;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-name p {
  margin: 2px 0;
  color: #7485a1;
  font-size: 12px;
}
.fit {
  border-left: 1px solid #e6edf7;
  text-align: center;
  padding-left: 11px;
  color: #7284a4;
  font-size: 11px;
}
.fit strong {
  display: block;
  color: var(--marker-color);
  font-size: 20px;
}
.fit-bar {
  height: 5px;
  width: 80px;
  border-radius: 5px;
  background: #e8eef7;
  margin-top: 5px;
  overflow: hidden;
}
.fit-bar span {
  display: block;
  height: 100%;
  border-radius: 5px;
  background: var(--marker-color);
}
.metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 10px -12px 8px;
  border-top: 1px solid #edf1f6;
  border-bottom: 1px solid #edf1f6;
}
.metric {
  padding: 8px 10px;
  border-right: 1px solid #edf1f6;
}
.metric:last-child {
  border: 0;
}
.metric span {
  color: #526d98;
  font-size: 12px;
  display: block;
}
.metric b {
  font-size: 15px;
}
.tags-line {
  font-size: 12px;
  margin-top: 8px;
  display: flex;
  align-items: start;
  gap: 7px;
}
.tags-line strong {
  flex: 0 0 48px;
}
.tag {
  background: #f1f5fb;
  color: #416189;
  padding: 3px 6px;
  border-radius: 3px;
  margin: 0 3px 3px 0;
  display: inline-block;
}
.tag.warning {
  color: #6d6681;
}
.detail-link {
  height: 49px;
  width: 100%;
  margin-top: 14px;
  border: 0;
  border-radius: 6px;
  background: #17355e;
  color: var(--marker-ink, #fff);
  font: 600 15px inherit;
  cursor: pointer;
}
.single-selector {
  display: flex;
  gap: 5px;
  margin: 9px 0 15px;
  overflow: auto;
}
.single-selector button {
  white-space: nowrap;
  border: 1px solid #e1e9f5;
  border-radius: 16px;
  background: #fff;
  padding: 5px 9px;
  color: #476289;
  cursor: pointer;
}
.single-selector button.selected {
  border-color: var(--blue);
  color: var(--blue);
  background: #f6faff;
}
.analysis-group {
  border-bottom: 1px solid #edf1f6;
  padding: 11px 0;
}
.analysis-group h3 {
  margin: 0 0 7px;
  font-size: 15px;
}
.analysis-group h3 em {
  float: right;
  color: var(--blue);
  font-size: 12px;
  font-style: normal;
}
.analysis-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
}
.analysis-row small {
  display: block;
  color: #7688a5;
}
.analysis-row b {
  font-size: 13px;
}
.notice {
  padding: 12px;
  background: #f5f8fd;
  border-radius: 7px;
  color: #587092;
  font-size: 12px;
}
.empty-state {
  text-align: center;
  padding: 65px 20px;
  color: #68809f;
}
.empty-state strong {
  display: block;
  color: #213e68;
  font-size: 17px;
  margin-bottom: 7px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
.city-marker {
  display: grid;
  place-items: center;
  width: 37px;
  height: 37px;
  border: 3px solid #fff;
  border-radius: 50% 50% 50% 0;
  background: var(--marker);
  color: var(--marker-ink, #fff);
  font-size: 15px;
  font-weight: 800;
  box-shadow: 0 2px 8px #17355e66;
  transform: rotate(-45deg);
}
.city-marker span {
  transform: rotate(45deg);
}
.current-marker {
  width: 42px;
  height: 42px;
  box-shadow: 0 0 0 3px #fff, 0 2px 10px #17355e88;
}
.destination-pin {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #f58a18;
  color: #fff;
  box-shadow: 0 1px 5px #17355e55;
}
.poi-dot {
  color: #176ef5;
  text-shadow: 0 1px 2px #fff;
  font-size: 20px;
}
.poi-dot.education {
  color: #8251d7;
}
.poi-dot.medical {
  color: #ef4768;
}
.poi-dot.commercial,
.poi-dot.market {
  color: #f58a18;
}
.poi-dot.park {
  color: #009b72;
}
@media (max-width: 1180px) {
  .workspace {
    grid-template-columns: 290px minmax(380px, 1fr) 390px;
  }
  .top-quote,
  .slogan {
    display: none;
  }
  .topbar nav {
    margin-left: 0;
    gap: 18px;
  }
  .header-search {
    width: 230px;
  }
}
@media (max-width: 900px) {
  .topbar {
    padding: 0 12px;
  }
  .topbar nav {
    display: none;
  }
  .header-search {
    margin-left: auto;
  }
  .workspace {
    height: auto;
    min-height: 0;
    grid-template-columns: 1fr;
    padding: 8px;
  }
  .left-panel,
  .right-panel {
    max-height: none;
  }
  .map-column {
    height: 620px;
    order: -1;
  }
  .location-section {
    order: 0;
  }
  .topbar {
    gap: 10px;
  }
  .header-search {
    width: 260px;
  }
  .right-panel {
    order: 1;
  }
}
@media (max-width: 560px) {
  .brand {
    font-size: 23px;
  }
  .brand-mark {
    width: 31px;
    height: 31px;
  }
  .header-search {
    width: 155px;
  }
  .workspace {
    padding: 4px;
  }
  .map-toolbar {
    top: 7px;
    left: 7px;
  }
  .layer {
    height: 32px;
    padding: 0 8px;
    font-size: 12px;
  }
  .isochrone {
    right: 7px;
    bottom: 7px;
  }
  .result-tabs > button {
    padding: 0 10px;
    font-size: 13px;
  }
}

.place-search button .icon {
  width: 17px;
  height: 17px;
}
.section-title button .icon {
  width: 14px;
  height: 14px;
  margin-right: 3px;
}
.destination-icon .icon {
  width: 16px;
  height: 16px;
}
.destination-icon {
  font-size: 0;
}
.destination-action .icon {
  width: 14px;
  height: 14px;
}
.destination-action {
  font-size: 0;
}
.weight-icon {
  font-size: 0;
  line-height: 0;
}
.weight-icon .icon {
  width: 14px;
  height: 14px;
}
.layer .icon {
  width: 15px;
  height: 15px;
  margin-right: 4px;
}
.result-tabs .export .icon {
  width: 15px;
  height: 15px;
  margin-right: 4px;
}
.destination-pin .icon {
  width: 14px;
  height: 14px;
}
.destination-label {
  display: inline-block;
  padding: 2px 5px;
  border-radius: 3px;
  background: #fff;
  color: #19365e;
  font:
    600 12px/1.3 Inter,
    "PingFang SC",
    "Microsoft YaHei",
    sans-serif;
  white-space: nowrap;
  box-shadow: 0 1px 4px #17355e2d;
}
.amap-marker-label:has(.destination-label) {
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
}
.poi-dot .icon {
  width: 18px;
  height: 18px;
}
.location-list .num .icon {
  width: 13px;
  height: 13px;
}

/* 明亮撞色主题：以纸感留白和墨线承托高纯度功能色。 */
.topbar,
.left-panel,
.right-panel,
.layer,
.layer-dropdown,
.map-settings-panel,
.isochrone,
.location-card,
.destination-label {
  background: var(--panel);
  border-color: var(--ink);
}
.topbar {
  border-bottom: 0;
}
.brand,
h2,
.result-head h1,
.card-name h3,
.fit strong {
  font-family: var(--font-display);
  letter-spacing: -0.35px;
}
.topbar nav a,
.header-search,
.header-search input,
.section-title button,
.destination-info b,
.destination-info small,
.location-list small,
.result-tabs > button,
.card-name p,
.fit,
.metric span,
.analysis-row small,
.notice,
.empty-state {
  color: var(--ink);
}
.header-search,
.place-search,
.destination,
.theme-options button,
.single-selector button {
  border-color: var(--ink);
  background: var(--panel);
}
.workspace {
  background: #f4ede2;
}
.left-panel,
.right-panel,
.map-column {
  border: 1px solid var(--ink);
  border-radius: 8px;
  box-shadow: none;
}
.map-column {
  background: #cde7f4;
}
.setup-section,
.analysis-group,
.metrics,
.metric {
  border-color: var(--line);
}
.step {
  background: var(--ink);
  border-radius: 4px;
}
.segmented,
.result-tabs,
.notice,
.tag {
  background: #f1e9dc;
}
.segmented .selected,
.templates button.selected,
.theme-options button.selected,
.single-selector button.selected {
  background: #e6ebff;
  border-color: var(--blue);
  color: var(--blue);
}
.place-search,
.header-search {
  box-shadow: none;
}
.place-search button,
.section-title button,
.destination-action,
.remove,
.card-remove {
  color: var(--ink);
}
.destination-action:hover,
.section-title button:hover,
.card-remove:hover {
  color: var(--pink);
}
.analyse-button,
.detail-link {
  background: var(--pink);
  border: 1px solid var(--ink);
  color: #fff;
  box-shadow: 3px 3px 0 var(--ink);
}
.analyse-button:hover,
.detail-link:hover {
  background: #cf3623;
}
.weight-item input,
.isochrone input,
.map-settings-group input {
  accent-color: var(--blue);
}
.layer {
  border-color: var(--ink);
  box-shadow: none;
}
.layer.active {
  background: #ffe0d9;
  border-color: var(--pink);
  color: var(--pink);
}
.layer-dropdown {
  border-width: 1px;
  box-shadow: 4px 4px 0 #151b2c;
}
.layer-dropdown button {
  background: transparent;
  color: var(--ink);
}
.layer-dropdown button:hover,
.layer-dropdown button.selected {
  background: #e6ebff;
  color: var(--blue);
}
.layer-dropdown button.selected::after {
  color: var(--blue);
}
.map-settings-button,
.map-settings-panel,
.isochrone {
  border: 1px solid var(--ink);
  box-shadow: 3px 3px 0 #151b2c;
}
.result-tabs > button.selected {
  background: #fff9ef;
  border-bottom-color: var(--pink);
  color: var(--ink);
}
.adjust-button {
  border-color: var(--blue);
  background: #e6ebff;
  color: var(--blue);
}
.location-card {
  border: 1px solid var(--ink);
  border-left: 6px solid var(--marker-color);
  border-radius: 5px;
  box-shadow: none;
}
.location-card.is-active {
  box-shadow: 4px 4px 0 color-mix(in srgb, var(--marker-color) 65%, var(--ink));
}
.location-card:focus-visible,
.location-choice:focus-visible {
  outline-color: var(--blue);
}
.fit {
  border-left-color: var(--ink);
}
.tags-line {
  border-top: 1px solid var(--line);
  padding-top: 8px;
}
.tag {
  color: var(--ink);
}
.city-marker {
  border-color: var(--ink);
  box-shadow: 3px 3px 0 #151b2c;
}
.current-marker {
  box-shadow: 0 0 0 3px #fff9ef, 4px 4px 0 #151b2c;
}
.destination-pin {
  background: #ffb36b;
  color: var(--ink);
  border-color: var(--ink);
  box-shadow: 2px 2px 0 #151b2c;
}
.destination-label {
  color: var(--ink);
  box-shadow: 2px 2px 0 #151b2c;
}
.poi-dot {
  color: var(--blue);
  text-shadow: 1px 1px 0 #fff9ef;
}
.poi-dot.education { color: #7c55d9; }
.poi-dot.medical { color: var(--pink); }
.poi-dot.commercial,
.poi-dot.market { color: #d69b12; }
.poi-dot.park { color: #0e9f91; }

/* 参考图第二层级：编辑排版、暖白画布、稀疏但明确的撞色。 */
body {
  background: #fffaf1;
}
.topbar {
  height: 64px;
  padding: 0 30px;
  background: #fffaf1;
}
.brand {
  gap: 0;
  font-size: 31px;
  letter-spacing: -1.5px;
}
.brand-mark {
  display: none;
}
.brand::after {
  content: "";
  width: 10px;
  height: 10px;
  margin: -14px 0 0 5px;
  border-radius: 50%;
  background: var(--pink);
}
.slogan {
  max-width: 170px;
  margin: 0 8px 0 15px;
  padding-left: 14px;
  border-left: 1px solid #cfc7ba;
  color: #51545a;
  font-size: 12px;
  line-height: 1.35;
  white-space: normal;
}
.topbar nav {
  margin-left: auto;
  gap: 27px;
}
.topbar nav a {
  padding-top: 21px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 650;
}
.topbar nav a.active {
  color: var(--ink);
  border-bottom: 3px solid var(--pink);
}
.header-search {
  width: 260px;
  height: 36px;
  border-color: #bdb7ac;
  border-radius: 7px;
  background: #fffdf8;
}
.top-quote {
  color: #55585d;
  font-size: 11px;
}
.avatar {
  color: var(--ink);
  background: #ffb36b;
}
.workspace {
  height: calc(100vh - 64px);
  gap: 12px;
  padding: 8px 12px 12px;
  background: #fffaf1;
}
.left-panel,
.right-panel,
.map-column {
  border-color: #252a35;
  border-radius: 8px;
}
.left-panel {
  padding: 14px;
}
.right-panel {
  padding: 12px 16px;
}
.setup-section {
  padding: 9px 0 15px;
}
h2 {
  font-size: 17px;
  letter-spacing: -0.45px;
}
.step {
  width: 25px;
  height: 25px;
  border-radius: 5px;
}
.place-search,
.destination,
.location-list li {
  border-color: #252a35;
  background: #fffdf8;
}
.place-search {
  height: 39px;
  border-radius: 7px;
}
.destination {
  border-width: 1px;
  border-radius: 7px;
  box-shadow: none;
}
.destination-main {
  min-height: 42px;
}
.templates {
  gap: 4px;
  border-bottom-color: #d8d0c3;
}
.templates button {
  color: #4d5056;
}
.templates button.selected {
  background: #fff0e5;
  border-bottom-color: var(--pink);
  color: var(--pink);
}
.weight-item {
  min-height: 26px;
}
.weight-item input {
  accent-color: var(--blue);
}
.analyse-button,
.detail-link {
  min-height: 46px;
  border: 0;
  border-radius: 8px;
  background: #ff8a3d;
  color: var(--ink);
  box-shadow: none;
}
.analyse-button:hover,
.detail-link:hover {
  background: #f47729;
}
.map-toolbar {
  top: 14px;
  left: 14px;
  gap: 6px;
}
.layer {
  height: 35px;
  border-color: #252a35;
  border-radius: 7px;
  background: #fffdf8;
  color: var(--ink);
  font-weight: 700;
}
.layer.active {
  background: #fff0e5;
  border-color: var(--pink);
  color: var(--pink);
}
.layer-dropdown {
  border-color: #252a35;
  border-radius: 7px;
  box-shadow: 0 8px 20px #1d24301f;
}
.layer-dropdown button.selected {
  background: #e7edff;
  color: var(--blue);
}
.result-tabs {
  margin: 0 -4px 18px;
  border-radius: 0;
  background: transparent;
  border-bottom: 1px solid #d9d3c7;
}
.result-tabs > button {
  padding: 0 16px;
  color: #50535a;
}
.result-tabs > button.selected {
  background: transparent;
  border-bottom: 3px solid var(--pink);
  color: var(--ink);
}
.result-head h1 {
  font-size: 24px;
}
.adjust-button {
  border-color: var(--pink);
  background: #fff0e5;
  color: var(--pink);
}
.location-card {
  margin: 12px 0;
  border-color: #252a35;
  border-left-width: 7px;
  border-radius: 7px;
  background: #fffdf8;
}
.location-card.is-active {
  background: color-mix(in srgb, var(--marker-color) 8%, #fffdf8);
  box-shadow: none;
}
.card-index {
  width: 34px;
  height: 34px;
  font-size: 17px;
  border-radius: 4px;
}
.card-name h3 {
  font-size: 19px;
}
.fit strong {
  font-size: 28px;
  line-height: 1;
}
.metrics {
  margin-top: 12px;
  border-color: #d9d3c7;
}
.metric {
  border-color: #d9d3c7;
}
.tags-line {
  border-top: 0;
}
.tag {
  background: transparent;
  padding: 0;
  color: #5c5e63;
}
.isochrone {
  border-color: #252a35;
  background: #fffdf8;
  box-shadow: 0 6px 18px #1d24301a;
}
.map-settings-button,
.map-settings-panel {
  border-color: #252a35;
  box-shadow: 0 6px 18px #1d24301a;
}

/* 编辑式真实地图工作台：只保留一套最终视觉规则。 */
:root {
  --canvas: #fffcf6;
  --paper: #fffefb;
  --graphite: #172033;
  --rule: #e5dfd5;
  --signal: #f0523b;
}
body,
.topbar,
.workspace {
  background: var(--canvas);
}
.topbar {
  height: 72px;
  padding: 0 32px;
}
.brand {
  color: var(--graphite);
  font-family: "Arial Black", "Avenir Next", "Segoe UI", sans-serif;
  font-size: 34px;
  font-weight: 900;
  letter-spacing: -2px;
}
.brand::after {
  width: 9px;
  height: 9px;
  margin: -16px 0 0 6px;
  background: var(--signal);
}
.slogan {
  max-width: 150px;
  color: #565b65;
  font-size: 11px;
}
.topbar nav a,
.topbar nav a.active {
  color: var(--graphite);
  font-size: 13px;
}
.topbar nav a.active {
  border-bottom-color: var(--signal);
}
.header-search {
  border-color: #d7d0c6;
  background: var(--paper);
  color: var(--graphite);
}
.avatar {
  background: #ffb36b;
  color: var(--graphite);
}
.workspace {
  height: calc(100vh - 72px);
  gap: 16px;
  padding: 0 12px 12px;
}
@media (min-width: 1181px) {
  .workspace {
    grid-template-columns: 292px minmax(0, 1fr) 398px;
  }
}
.left-panel,
.right-panel,
.map-column {
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--paper);
  box-shadow: none;
}
.left-panel {
  padding: 18px;
}
.right-panel {
  padding: 16px 18px;
}
.setup-section {
  padding: 14px 0 17px;
  border-color: var(--rule);
}
h2,
.result-head h1,
.card-name h3,
.fit strong {
  color: var(--graphite);
  font-family: "Avenir Next", "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-weight: 800;
  letter-spacing: -0.5px;
}
h2 {
  font-size: 16px;
}
.step {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  background: var(--graphite);
}
.place-search {
  height: 40px;
  border-color: #ddd6cb;
  border-radius: 7px;
  background: var(--paper);
}
.location-list li {
  padding: 8px 0;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--rule);
  background: transparent;
}
.location-list li.is-active {
  box-shadow: none;
}
.destination {
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  background: transparent;
}
.destination-main {
  min-height: 45px;
  padding: 0;
}
.destination-icon {
  background: #f4f0e8;
  color: var(--graphite);
}
.destination-info b,
.travel-select,
.destination-action,
.remove {
  color: var(--graphite);
}
.destination-info small {
  color: #74777c;
}
.travel-select,
.destination-action {
  background: transparent;
}
.templates {
  gap: 12px;
  margin: 12px 0 10px;
}
.templates button {
  padding: 6px 0;
  color: #73767d;
}
.templates button.selected {
  border-bottom-color: var(--signal);
  background: transparent;
  color: var(--signal);
}
.weight-item {
  grid-template-columns: 16px 70px 1fr 30px;
  min-height: 29px;
  color: var(--graphite);
}
.weight-icon {
  color: var(--graphite);
}
.weight-item output {
  color: #626771;
}
.weight-item input {
  accent-color: var(--signal);
}
.analyse-button,
.detail-link {
  min-height: 48px;
  border-radius: 8px;
  background: #ff8f43;
  color: var(--graphite);
  font-weight: 800;
}
.analyse-button:hover,
.detail-link:hover {
  background: #f57d31;
}
.map-column {
  overflow: hidden;
  background: #eef3f2;
}
.map-toolbar {
  top: 16px;
  left: 16px;
  gap: 7px;
}
.layer {
  height: 34px;
  padding: 0 11px;
  border-color: #ddd6cb;
  border-radius: 7px;
  background: #fffefb;
  color: var(--graphite);
  font-weight: 700;
}
.layer.active {
  border-color: var(--signal);
  background: #fff2ec;
  color: var(--signal);
}
.layer-dropdown {
  border-color: #ddd6cb;
  box-shadow: 0 10px 25px #17203316;
}
.layer-dropdown button.selected {
  background: #e9eeff;
  color: #2856d8;
}
.isochrone,
.map-settings-panel {
  border-color: #ddd6cb;
  background: #fffefb;
  box-shadow: 0 10px 25px #17203316;
}
.result-tabs {
  height: 44px;
  margin: 0 0 20px;
  border-bottom-color: var(--rule);
}
.result-tabs > button {
  padding: 0 15px;
  color: #777a80;
}
.result-tabs > button.selected {
  border-bottom-color: var(--signal);
  color: var(--graphite);
}
.result-head h1 {
  font-size: 22px;
}
.result-head p {
  color: #75787e;
}
.adjust-button {
  border-color: #f6b6a8;
  background: #fff2ec;
  color: var(--signal);
}
.location-card {
  margin: 14px 0;
  padding: 14px;
  border: 1px solid var(--rule);
  border-left: 6px solid var(--marker-color);
  border-radius: 8px;
  background: var(--paper);
}
.location-card.is-active {
  background: color-mix(in srgb, var(--marker-color) 7%, var(--paper));
}
.card-index {
  width: 36px;
  height: 36px;
  border-radius: 6px;
}
.fit {
  border-left-color: var(--rule);
}
.fit strong {
  font-size: 27px;
}
.metrics,
.metric,
.tags-line {
  border-color: var(--rule);
}
.tag,
.card-name p,
.metric span {
  color: #72767d;
}
.card-remove {
  color: #92949a;
}
.card-remove:hover {
  color: var(--signal);
}
.comparison-empty {
  min-height: 360px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 9px;
  padding: 30px;
  color: #6e7279;
}
.comparison-empty .empty-mark {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 7px;
  border-radius: 50%;
  background: #fff0e9;
  color: var(--signal);
}
.comparison-empty strong {
  color: var(--graphite);
  font-size: 18px;
}
.comparison-empty small {
  color: #96989c;
  text-align: center;
}

/* 常去地点：图标跨两行居中，动作集中在名称行。 */
.destination {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  column-gap: 9px;
  padding: 9px 0;
}
.destination-main,
.destination-info {
  display: contents;
}
.destination-icon,
.destination:nth-child(2) .destination-icon,
.destination:nth-child(3) .destination-icon {
  grid-column: 1;
  align-self: center;
  width: 30px;
  height: 30px;
  background: #f1eee8;
  color: var(--graphite);
}
.destination-content {
  grid-column: 2;
  min-width: 0;
}
.destination-primary {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}
.destination-primary > b {
  min-width: 0;
  flex: 1;
  color: var(--graphite);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.destination-actions {
  display: flex;
  align-items: center;
  gap: 2px;
}
.destination-action,
.destination .remove {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--graphite);
}
.destination-action:hover,
.destination .remove:hover {
  background: #fff0e9;
  color: var(--signal);
}
.destination-content > small {
  display: block;
  margin-top: 3px;
  color: #777b82;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.destination-lookup,
.destination-result {
  grid-column: auto;
}

/* 左侧分组通过留白而非横线分隔。 */
.left-panel .setup-section {
  border-bottom: 0;
}
.left-panel .location-lookup {
  position: relative;
  z-index: 10;
  margin-top: 12px;
}
.left-panel .location-lookup .place-search {
  margin-top: 0;
}
.left-panel .location-lookup .search-hint {
  position: absolute;
  top: calc(100% + 5px);
  right: 0;
  left: 0;
  z-index: 1;
  max-height: min(320px, 48vh);
  margin-top: 0;
  overflow-y: auto;
  background: var(--paper);
  box-shadow: 0 7px 16px #24211c1c;
}
.map-column.is-picking #map,
.map-column.is-picking #map * {
  cursor: crosshair !important;
}

/* 长地址不能撑破左侧分析栏。 */
.location-list li > span:not(.num) {
  min-width: 0;
  flex: 1;
  overflow: hidden;
}
.location-list li > span:not(.num) b,
.location-list li > span:not(.num) small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* POI 的颜色与形状来自评分配置：同组内可同时显示且能彼此区分。 */
.layer-swatch {
  width: 8px;
  height: 8px;
  margin-right: 2px;
  flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--poi-color), #1d2430 22%);
  border-radius: 50%;
  background: var(--poi-color);
}
.layer-bulk {
  margin-bottom: 3px;
  border-bottom: 1px solid var(--rule) !important;
  color: var(--graphite) !important;
  font-weight: 700;
}
.poi-marker {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  box-sizing: border-box;
  border: 2px solid var(--poi-color);
  border-radius: 50%;
  background: var(--paper);
  color: var(--poi-color);
  box-shadow: 0 2px 7px #1d24302b;
}
.poi-marker .icon {
  width: 14px;
  height: 14px;
  stroke-width: 2.25;
}
.poi-marker--rounded {
  border-radius: 7px;
}
.poi-marker--diamond {
  border-radius: 5px;
  transform: rotate(45deg);
}
.poi-marker--diamond .icon {
  transform: rotate(-45deg) scale(.82);
}
.poi-marker--double {
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--poi-color), 0 2px 7px #1d24302b;
}

/* 结果区：用分数概览、可展开维度和并列矩阵替换同权重的长文本列表。 */
.result-location-head {
  gap: 12px;
}
.result-location-head p {
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fit-badge {
  flex: 0 0 auto;
  margin-top: 2px;
  padding: 5px 7px;
  border: 1px solid color-mix(in srgb, var(--signal), var(--paper) 65%);
  border-radius: 6px;
  background: color-mix(in srgb, var(--signal), var(--paper) 92%);
  color: var(--graphite);
  font-size: 11px;
  white-space: nowrap;
}
.fit-badge b {
  margin-left: 3px;
  color: var(--signal);
  font-size: 13px;
}
.result-overview {
  margin: 0 0 14px;
}
.overview-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 7px;
  color: var(--graphite);
  font-size: 13px;
}
.overview-title span {
  color: #74777c;
  font-size: 11px;
}
.overview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.overview-item {
  min-width: 0;
  padding: 7px 7px 6px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--paper);
}
.overview-item > span {
  display: flex;
  min-width: 0;
  align-items: center;
  color: var(--graphite);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.overview-item {
  position: relative;
}
.overview-item > b {
  top: 8px;
  right: 7px;
  position: absolute;
  color: var(--graphite);
  font-size: 11px;
}
.overview-item > span {
  padding-right: 25px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.overview-item > i {
  display: block;
  height: 3px;
  margin-top: 7px;
  overflow: hidden;
  border-radius: 3px;
  background: #eee9e0;
}
.overview-item > i > em {
  display: block;
  width: calc(var(--score) * 1%);
  height: 100%;
  border-radius: inherit;
  background: var(--signal);
}
.result-category-list {
  border-top: 1px solid var(--rule);
}
.result-category {
  border-bottom: 1px solid var(--rule);
}
.result-category-toggle {
  display: grid;
  grid-template-columns: minmax(82px, auto) minmax(0, 1fr) auto 14px;
  width: 100%;
  min-height: 43px;
  gap: 8px;
  align-items: center;
  padding: 8px 1px;
  border: 0;
  background: transparent;
  color: var(--graphite);
  text-align: left;
  cursor: pointer;
}
.result-category-toggle:focus-visible,
.compare-matrix button:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
}
.category-label {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  font-size: 13px;
}
.category-label .icon {
  width: 15px;
  height: 15px;
  color: #74777c;
  stroke-width: 2.2;
}
.category-summary {
  min-width: 0;
  overflow: hidden;
  color: #74777c;
  font-size: 11px;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.result-category-toggle > strong {
  color: var(--graphite);
  font-size: 12px;
  white-space: nowrap;
}
.category-caret {
  color: #74777c;
  font-size: 16px;
  line-height: 1;
  transition: transform .16s ease;
}
.result-category.is-open .category-caret {
  transform: rotate(180deg);
}
.category-detail[hidden] {
  display: none;
}
.result-details {
  display: grid;
  gap: 6px;
  padding: 0 0 10px;
}
.result-details h4 {
  margin: 3px 0 0;
  color: #74777c;
  font-size: 11px;
  font-weight: 700;
}
.route-card,
.analysis-row {
  display: grid;
  grid-template-columns: 27px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 45px;
  padding: 7px 8px;
  border: 1px solid var(--rule);
  border-radius: 7px;
  background: var(--paper);
}
.route-icon,
.analysis-row-icon {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border-radius: 50%;
  background: #f4f0e8;
  color: var(--graphite);
}
.route-icon .icon,
.analysis-row-icon .icon {
  width: 14px;
  height: 14px;
}
.route-card span:not(.route-icon),
.analysis-row-copy {
  min-width: 0;
}
.route-card b,
.analysis-row-copy b {
  display: block;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.route-card small,
.analysis-row-copy small {
  display: block;
  overflow: hidden;
  color: #74777c;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.route-time,
.result-value {
  padding: 4px 6px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--blue), var(--paper) 91%);
  color: var(--blue);
  font-size: 11px;
  white-space: nowrap;
}
.analysis-row {
  min-height: 42px;
  border-color: transparent;
  border-radius: 5px;
}
.analysis-row:hover {
  background: #faf7f1;
}
.notice {
  margin-top: 12px;
  border: 1px solid var(--rule);
  background: #f7f3ec;
  color: #656970;
}
.compare-matrix {
  overflow-x: auto;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--paper);
}
.compare-matrix-head,
.compare-matrix-row {
  display: grid;
  grid-template-columns: minmax(94px, 1fr) repeat(var(--location-count), 72px);
  min-width: calc(94px + var(--location-count) * 72px);
}
.compare-matrix-head {
  position: sticky;
  top: 0;
  z-index: 1;
  border-bottom: 1px solid var(--rule);
  background: #f4f0e8;
}
.compare-matrix-head > span {
  padding: 12px 9px;
  color: #74777c;
  font-size: 11px;
  font-weight: 700;
}
.compare-matrix-head button {
  position: relative;
  min-width: 0;
  padding: 8px 5px 8px 8px;
  border: 0;
  border-left: 1px solid var(--rule);
  background: transparent;
  color: var(--graphite);
  cursor: pointer;
  text-align: left;
}
.compare-matrix-head button i {
  display: inline-grid;
  width: 18px;
  height: 18px;
  margin-right: 3px;
  place-items: center;
  border-radius: 4px;
  background: var(--marker-color);
  color: #fff;
  font-size: 10px;
  font-style: normal;
}
.compare-matrix-head button b,
.compare-matrix-head button small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.compare-matrix-head button b {
  font-size: 11px;
}
.compare-matrix-head button small {
  margin-top: 2px;
  color: var(--marker-color);
  font-size: 10px;
}
.compare-matrix-head button em {
  position: absolute;
  top: 3px;
  right: 4px;
  color: #8c8f95;
  font-size: 13px;
  font-style: normal;
}
.compare-matrix-row {
  min-height: 41px;
  border-bottom: 1px solid var(--rule);
}
.compare-matrix-row:last-child {
  border-bottom: 0;
}
.compare-matrix-row > span,
.compare-matrix-row > b {
  display: flex;
  align-items: center;
  padding: 8px;
  border-left: 1px solid var(--rule);
  font-size: 12px;
}
.compare-matrix-row > span {
  gap: 5px;
  border-left: 0;
  color: var(--graphite);
  font-weight: 700;
}
.compare-matrix-row > span .icon {
  width: 14px;
  height: 14px;
  color: #74777c;
  stroke-width: 2.3;
}
.compare-matrix-row > b {
  justify-content: center;
  color: var(--graphite);
  font-size: 11px;
  white-space: nowrap;
}

/* API settings follow the existing restrained map workspace. */
.api-settings-button { flex-shrink:0; padding:9px 12px; border:1px solid #2856d8; border-radius:6px; color:#2856d8; background:white; cursor:pointer; white-space:nowrap; }
#amapDialog { width:min(520px, calc(100vw - 32px)); max-height:90dvh; overflow:auto; border:1px solid #d9dde4; border-radius:12px; padding:24px; color:#252a34; box-shadow:0 24px 80px #16203440; }
#amapDialog::backdrop { background:#16203480; }
.api-form { display:grid; gap:12px; }
.api-form h2, .api-form p { margin:0; }
.api-form p { font-size:13px; line-height:1.7; color:#626976; overflow-wrap:anywhere; }
.api-form > input { box-sizing:border-box; width:100%; padding:12px; border:1px solid #c7cdd7; border-radius:6px; font:inherit; }
.api-form .api-remember { display:flex; align-items:center; gap:8px; font-size:13px; }
.api-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.api-actions button { padding:10px 12px; border:1px solid #c7cdd7; border-radius:6px; background:#fff; cursor:pointer; }
.api-actions button[type=submit] { background:#2856d8; color:#fff; border-color:#2856d8; }
.api-form :focus-visible, .api-settings-button:focus-visible { outline:3px solid #7599fa; outline-offset:3px; }
#amapMessage { color:#b42318; }
@media(max-width:700px) { .api-settings-button { position:fixed; bottom:16px; right:16px; z-index:250; box-shadow:0 4px 16px #16203426; } }