:root {
  color-scheme: light;
  --ink: #17202a;
  --muted: #65717e;
  --line: #dce2e7;
  --surface: #ffffff;
  --surface-alt: #f5f7f8;
  --accent: #d74632;
  --accent-dark: #ad2f20;
  --hk-island: #d74632;
  --kowloon: #e2a524;
  --guangzhou: #18866b;
  --sidebar-width: 390px;
  font-family: Inter, "Segoe UI", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #dfe7ea;
  color: var(--ink);
}

button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  width: 100%;
  height: 100%;
}

.sidebar {
  z-index: 1000;
  display: flex;
  min-height: 0;
  flex-direction: column;
  background: var(--surface);
  border-right: 1px solid var(--line);
  box-shadow: 4px 0 24px rgb(23 32 42 / 8%);
}

.sidebar-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 24px 24px 18px;
  border-bottom: 1px solid var(--line);
}

.eyebrow {
  margin: 0 0 5px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
}

h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: 22px; line-height: 1.25; letter-spacing: 0; }
h2 { margin-bottom: 10px; font-size: 13px; line-height: 1.3; letter-spacing: 0; }

.control-section { padding: 17px 24px 0; }
.compact-section { padding-top: 15px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.text-button {
  padding: 0;
  color: var(--accent-dark);
  background: transparent;
  border: 0;
  font-size: 12px;
  font-weight: 650;
}

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

.region-button {
  display: grid;
  min-height: 54px;
  grid-template-columns: 8px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 9px 10px;
  text-align: left;
  background: var(--surface-alt);
  border: 1px solid transparent;
  border-radius: 6px;
}

.region-button:hover { border-color: var(--line); }
.region-button.active { background: #fff; border-color: currentColor; box-shadow: 0 2px 9px rgb(23 32 42 / 8%); }
.region-swatch { width: 8px; height: 32px; border-radius: 2px; background: currentColor; }
.region-copy { min-width: 0; }
.region-name { display: block; color: var(--ink); font-size: 13px; font-weight: 700; }
.region-meta { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.segmented-control {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding: 3px;
  background: #edf1f3;
  border-radius: 6px;
}

.segment {
  display: flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 650;
}

.segment.active { color: var(--ink); background: white; box-shadow: 0 1px 5px rgb(23 32 42 / 10%); }
.legend-dot { width: 8px; height: 8px; border-radius: 50%; }
.candidate-dot { background: #c48114; }
.rail-dot { background: #4169a8; }
.bank-dot { background: #167a85; }
.legend-star { color: var(--accent); font-size: 13px; line-height: 1; }

.search-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--line);
}

.search-box {
  display: flex;
  min-width: 0;
  height: 40px;
  align-items: center;
  gap: 8px;
  padding: 0 11px;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.search-box:focus-within { border-color: #8d9aa5; box-shadow: 0 0 0 3px rgb(54 120 184 / 10%); }
.search-box svg { width: 16px; color: var(--muted); }
.search-box input { min-width: 0; width: 100%; color: var(--ink); background: transparent; border: 0; outline: 0; font-size: 13px; }

.primary-button, .secondary-button {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
}

.primary-button { color: white; background: var(--accent); border: 1px solid var(--accent); }
.primary-button:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.primary-button svg { width: 16px; height: 16px; }
.search-section .primary-button span { display: none; }
.secondary-button { color: var(--ink); background: white; border: 1px solid var(--line); }

.place-section { display: flex; min-height: 0; flex: 1; flex-direction: column; }
.list-heading { padding: 14px 24px 8px; }
.list-heading h2 { margin: 0; }
.list-tools { display: flex; align-items: center; gap: 9px; }
.restore-button { padding: 0; color: var(--accent-dark); background: transparent; border: 0; font-size: 11px; font-weight: 700; }
.place-count { color: var(--muted); font-size: 11px; }
.place-list { min-height: 0; overflow-y: auto; padding: 0 14px 16px; }
.place-group + .place-group { margin-top: 14px; }
.place-group h3 { margin: 0; padding: 10px 5px 6px; color: var(--muted); border-bottom: 1px solid var(--line); font-size: 11px; font-weight: 800; }

.place-card {
  display: grid;
  width: 100%;
  grid-template-columns: 26px minmax(0, 1fr) 28px;
  gap: 10px;
  align-items: start;
  padding: 11px 10px;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-bottom-color: var(--line);
}

.place-card:hover { background: var(--surface-alt); border-color: var(--line); border-radius: 5px; }
.place-marker-mini { display: grid; width: 24px; height: 24px; place-items: center; color: white; background: var(--marker-color); border: 2px solid white; border-radius: 50%; box-shadow: 0 0 0 1px rgb(23 32 42 / 18%); font-size: 12px; font-weight: 800; }
.place-marker-mini.must { background: var(--accent); border-radius: 5px 5px 12px 12px; }
.place-marker-mini.candidate { background: #c48114; border-radius: 5px; }
.place-marker-mini.rail { background: #4169a8; border-radius: 5px; }
.place-marker-mini.start { background: #167a85; border-radius: 5px 5px 12px 12px; }
.place-name { display: block; margin-top: 1px; color: var(--ink); font-size: 13px; font-weight: 700; line-height: 1.3; }
.place-meta { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.35; }
.place-card > svg { width: 15px; margin-top: 4px; color: #9aa5ae; }
.empty-state { padding: 32px 18px; color: var(--muted); text-align: center; font-size: 13px; line-height: 1.6; }

.sidebar-footer { padding: 10px 24px 14px; color: #8b959e; border-top: 1px solid var(--line); font-size: 10px; line-height: 1.45; }

.map-stage { position: relative; min-width: 0; min-height: 0; }
#map { width: 100%; height: 100%; background: #dce5e8; }

.map-topbar { position: absolute; z-index: 700; top: 14px; left: 14px; display: flex; gap: 8px; pointer-events: none; }
.map-topbar > * { pointer-events: auto; }
.transport-toggle { min-height: 40px; }
.transport-toggle.active { color: #0d5b63; border-color: #8cc9cf; background: #effafb; }
.transport-toggle svg { width: 16px; height: 16px; }
.map-status { display: flex; min-height: 40px; align-items: center; gap: 9px; padding: 8px 12px; background: rgb(255 255 255 / 95%); border: 1px solid rgb(23 32 42 / 10%); border-radius: 6px; box-shadow: 0 4px 16px rgb(23 32 42 / 12%); font-size: 12px; font-weight: 700; backdrop-filter: blur(8px); }
.sync-button { flex: 0 0 auto; background: rgb(255 255 255 / 95%); box-shadow: 0 4px 16px rgb(23 32 42 / 12%); }
.sync-button svg { width: 18px; height: 18px; }
.status-swatch { width: 8px; height: 22px; border-radius: 2px; background: linear-gradient(var(--hk-island) 0 50%, var(--kowloon) 50%); }

.icon-button {
  display: grid;
  width: 40px;
  height: 40px;
  padding: 0;
  place-items: center;
  color: var(--ink);
  background: white;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.icon-button:hover { background: var(--surface-alt); }
.icon-button svg { width: 18px; height: 18px; }

.map-legend {
  position: absolute;
  z-index: 700;
  right: 14px;
  bottom: 28px;
  display: flex;
  gap: 14px;
  padding: 10px 12px;
  color: var(--ink);
  background: rgb(255 255 255 / 95%);
  border: 1px solid rgb(23 32 42 / 10%);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgb(23 32 42 / 10%);
  font-size: 11px;
}
.map-legend > span { display: flex; align-items: center; gap: 6px; }
.legend-pin { display: grid; width: 16px; height: 16px; place-items: center; color: white; background: var(--ink); border: 2px solid white; border-radius: 50%; box-shadow: 0 0 0 1px rgb(23 32 42 / 20%); font-size: 9px; }
.candidate-pin { background: #c48114; border-radius: 3px; }
.must-pin { background: var(--accent); border-radius: 3px 3px 8px 8px; }
.rail-pin { background: #4169a8; border-radius: 3px; }
.legend-line { width: 18px; height: 3px; border-radius: 2px; }
.transport-line { background: #167a85; }

.add-hint {
  position: absolute;
  z-index: 800;
  top: 14px;
  left: 50%;
  display: flex;
  min-height: 40px;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 8px 12px;
  color: white;
  background: #17202a;
  border-radius: 6px;
  box-shadow: 0 6px 22px rgb(23 32 42 / 25%);
  transform: translateX(-50%);
  font-size: 12px;
}
.add-hint svg { width: 16px; }
.add-hint button { padding: 5px 8px; color: white; background: rgb(255 255 255 / 12%); border: 0; border-radius: 4px; font-size: 11px; }

.leaflet-control-zoom { border: 0 !important; box-shadow: 0 3px 12px rgb(23 32 42 / 15%) !important; }
.leaflet-control-zoom a { color: var(--ink) !important; border-color: var(--line) !important; }
.leaflet-tooltip.region-tooltip { padding: 5px 7px; color: var(--ink); background: rgb(255 255 255 / 92%); border: 0; border-radius: 4px; box-shadow: 0 2px 8px rgb(23 32 42 / 12%); font-size: 10px; font-weight: 700; }
.leaflet-tooltip.region-tooltip::before { display: none; }

.map-marker { position: relative; display: grid; width: 28px; height: 28px; place-items: center; color: white; background: var(--marker-color); border: 3px solid white; border-radius: 50%; box-shadow: 0 2px 10px rgb(23 32 42 / 32%); font-size: 11px; font-weight: 800; }
.map-marker::after { content: ""; position: absolute; right: -3px; bottom: -3px; width: 7px; height: 7px; background: var(--marker-color); border: 2px solid white; border-radius: 50%; }
.map-marker.must { width: 31px; height: 34px; background: var(--accent); border-radius: 7px 7px 16px 16px; font-size: 15px; }
.map-marker.must::after { display: none; }
.map-marker.candidate { background: #c48114; border-radius: 6px; font-size: 10px; }
.map-marker.candidate::after { display: none; }
.map-marker.rail { background: #4169a8; border-radius: 6px; font-size: 10px; }
.map-marker.rail::after { display: none; }
.map-marker.start { width: 31px; height: 34px; background: #167a85; border-radius: 7px 7px 16px 16px; font-size: 13px; }
.map-marker.start::after { display: none; }
.map-marker.selected { transform: scale(1.15); box-shadow: 0 0 0 4px rgb(255 255 255 / 65%), 0 5px 16px rgb(23 32 42 / 38%); }

.place-popup { min-width: 210px; }
.popup-kicker { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; color: var(--marker-color); font-size: 10px; font-weight: 800; }
.popup-kicker .mini-swatch { width: 7px; height: 16px; background: var(--marker-color); border-radius: 2px; }
.place-popup h3 { margin: 0 0 6px; color: var(--ink); font-size: 15px; letter-spacing: 0; }
.place-popup p { margin: 0 0 10px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.popup-intro { padding-bottom: 9px; border-bottom: 1px solid var(--line); }
.popup-facts { display: grid; gap: 7px; margin: 0 0 12px; }
.popup-facts > div { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 8px; align-items: start; }
.popup-facts dt { color: #8b959e; font-size: 10px; font-weight: 700; }
.popup-facts dd { margin: 0; color: var(--ink); font-size: 11px; line-height: 1.45; }
.popup-actions { display: flex; gap: 7px; }
.popup-link, .popup-delete { display: inline-flex; min-height: 30px; align-items: center; padding: 6px 9px; border-radius: 4px; font-size: 11px; font-weight: 700; text-decoration: none; }
.popup-link { color: white !important; background: var(--ink); }
.popup-delete { color: #a42b20; background: #fff1ef; border: 0; }

.place-dialog { width: min(430px, calc(100vw - 28px)); padding: 0; background: white; border: 0; border-radius: 8px; box-shadow: 0 20px 70px rgb(23 32 42 / 30%); }
.place-dialog::backdrop { background: rgb(23 32 42 / 48%); backdrop-filter: blur(3px); }
.place-dialog form { display: grid; gap: 15px; padding: 20px; }
.dialog-header { display: flex; align-items: flex-start; justify-content: space-between; }
.dialog-header h2 { margin: 0; font-size: 20px; }
.place-dialog label { display: grid; gap: 6px; color: var(--ink); font-size: 12px; font-weight: 700; }
.place-dialog input, .place-dialog select, .place-dialog textarea { width: 100%; padding: 9px 10px; color: var(--ink); background: var(--surface-alt); border: 1px solid var(--line); border-radius: 5px; outline: none; font-size: 13px; resize: vertical; }
.place-dialog input:focus, .place-dialog select:focus, .place-dialog textarea:focus { border-color: var(--outlying); box-shadow: 0 0 0 3px rgb(54 120 184 / 10%); }
.coordinate-readout { padding: 8px 10px; color: var(--muted); background: var(--surface-alt); border-radius: 5px; font-family: Consolas, monospace; font-size: 11px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }
.sync-dialog { max-width: 430px; }
.sync-status { min-height: 18px; margin: -4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.sync-status[data-tone="success"] { color: #166a52; }
.sync-status[data-tone="warning"] { color: #8a5d09; }
.sync-status[data-tone="error"] { color: #a42b20; }
.sync-actions { justify-content: stretch; }
.sync-actions > button { flex: 1 1 0; }
.deleted-places-list { display: grid; gap: 8px; max-height: min(50vh, 360px); overflow-y: auto; }
.deleted-place-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px; background: var(--surface-alt); border: 1px solid var(--line); border-radius: 5px; }
.deleted-place-name { display: block; color: var(--ink); font-size: 13px; font-weight: 700; }
.deleted-place-meta { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.restore-one-button { flex: 0 0 auto; padding: 6px 9px; color: #166a52; background: #e7f5ef; border: 1px solid #b5dece; border-radius: 4px; font-size: 12px; font-weight: 700; }

.mobile-only { display: none; }

@media (max-width: 760px) {
  :root { --sidebar-width: min(92vw, 380px); }
  .app-shell { display: block; }
  .sidebar { position: absolute; inset: 0 auto 0 0; width: var(--sidebar-width); transform: translateX(-102%); transition: transform 180ms ease; }
  .sidebar.open { transform: translateX(0); }
  .map-stage { width: 100%; height: 100%; }
  .mobile-only { display: grid; }
  .map-status { max-width: calc(100vw - 184px); }
  .transport-toggle span { display: none; }
  .transport-toggle { width: 40px; padding: 0; }
  .map-legend { right: 10px; bottom: 28px; }
  .add-hint { top: 64px; width: max-content; max-width: calc(100vw - 24px); }
}

@media (max-width: 430px) {
  .sidebar-header { padding: 18px 18px 14px; }
  .control-section { padding-right: 18px; padding-left: 18px; }
  .search-section { padding-right: 18px; padding-left: 18px; }
  .list-heading { padding-right: 18px; padding-left: 18px; }
  .sidebar-footer { padding-right: 18px; padding-left: 18px; }
  .map-legend { flex-direction: column; gap: 6px; }
}