:root {
  color-scheme: light;
  --bg: #eef7f5;
  --card: #ffffff;
  --text: #10201e;
  --muted: #5b6f6b;
  --primary: #0f766e;
  --primary-dark: #115e59;
  --accent: #f59e0b;
  --danger: #dc2626;
  --green: #16a34a;
  --red: #ef4444;
  --line: #d7e7e3;
  --shadow: 0 14px 35px rgba(15, 118, 110, 0.12);
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: radial-gradient(circle at top, #d9f8f2 0, var(--bg) 42%, #f8fafc 100%);
  color: var(--text);
  padding: max(14px, env(safe-area-inset-top)) 14px max(20px, env(safe-area-inset-bottom));
}

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

.app-header {
  max-width: 980px;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.eyebrow { margin: 0 0 3px; color: var(--primary-dark); font-size: 0.82rem; font-weight: 700; }
.app-header h1 { margin: 0; font-size: clamp(1.45rem, 6vw, 2.3rem); letter-spacing: -0.04em; }

.app-shell { max-width: 980px; margin: 0 auto; display: grid; gap: 14px; }

.hero-card, .map-card, .list-card, .settings-card {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(215, 231, 227, 0.95);
  border-radius: 22px;
  box-shadow: var(--shadow);
  padding: 16px;
}

.hero-card { display: grid; gap: 12px; }
.hero-topline, .section-heading, .settings-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.hero-card h2, .section-heading h2 { margin: 0; letter-spacing: -0.03em; }
.section-heading p, .row-desc, .notice, .map-help, .admin-panel p { margin: 4px 0 0; color: var(--muted); font-size: 0.9rem; line-height: 1.45; }

.pill, .safety-label, .pending-badge, .confirmed-badge {
  display: inline-flex; align-items: center; gap: 4px;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 0.82rem;
  font-weight: 800;
}
.pill { background: #ccfbf1; color: #115e59; }
.safety-label { background: #fff7ed; color: #9a3412; }
.pending-badge { background: #fef3c7; color: #92400e; }
.confirmed-badge { background: #dcfce7; color: #166534; }

.countdown-row { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.countdown-stack { display: grid; gap: 4px; }
.countdown-caption { color: var(--muted); font-size: 0.86rem; font-weight: 900; }
.countdown { font-size: clamp(3.2rem, 17vw, 6.4rem); font-weight: 900; line-height: 0.92; letter-spacing: -0.08em; color: var(--primary-dark); font-variant-numeric: tabular-nums; }
.state-badge { font-weight: 900; border-radius: 12px; padding: 8px 10px; background: #f1f5f9; color: #334155; }
.state-badge.green { background: #dcfce7; color: #166534; }
.state-badge.red { background: #fee2e2; color: #991b1b; }
.state-badge.soon { background: #fef3c7; color: #92400e; }

.signal-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; }
.signal-meta div { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 14px; padding: 10px; }
.signal-meta dt { color: var(--muted); font-size: 0.78rem; margin: 0 0 4px; }
.signal-meta dd { margin: 0; font-weight: 900; }

.hero-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.primary-button, .secondary-button, .ghost-button, .danger-button, .file-button {
  border: 0; border-radius: 14px; padding: 11px 12px; font-weight: 900;
  min-height: 44px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
}
.primary-button { background: var(--primary); color: white; }
.secondary-button { background: #e6f4f1; color: var(--primary-dark); }
.ghost-button { background: rgba(255,255,255,0.6); color: var(--primary-dark); border: 1px solid var(--line); }
.danger-button { background: #fee2e2; color: #991b1b; }
.file-button { background: #e6f4f1; color: var(--primary-dark); cursor: pointer; }
.file-button input { display: none; }
.hidden { display: none !important; }

.signal-map {
  position: relative; height: min(74vw, 430px); min-height: 330px; overflow: hidden;
  border-radius: 20px; background: linear-gradient(135deg, #d9f99d 0%, #bbf7d0 44%, #bae6fd 100%);
  border: 1px solid var(--line); margin-top: 12px; touch-action: manipulation;
}
.road { position: absolute; background: #475569; opacity: 0.92; box-shadow: inset 0 0 0 4px rgba(255,255,255,0.08); }
.road::after { content: ""; position: absolute; inset: 50% 0 auto; border-top: 3px dashed rgba(255,255,255,0.55); transform: translateY(-50%); }
.road-vertical { width: 28%; height: 120%; left: 42%; top: -10%; transform: rotate(3deg); }
.road-horizontal { height: 25%; width: 120%; left: -10%; top: 45%; transform: rotate(-2deg); }
.road-diagonal { width: 23%; height: 120%; left: 58%; top: -10%; transform: rotate(35deg); opacity: 0.78; }
.road-vertical::after, .road-diagonal::after { inset: 0 auto 0 50%; border-top: 0; border-left: 3px dashed rgba(255,255,255,0.55); transform: translateX(-50%); }
.map-place { position: absolute; z-index: 2; background: rgba(255,255,255,0.88); border: 1px solid rgba(15,118,110,0.18); border-radius: 999px; padding: 7px 10px; font-weight: 900; font-size: 0.82rem; }
.church-place { left: 7%; top: 11%; }
.gakyung-place { right: 8%; bottom: 9%; }
.marker { position: absolute; z-index: 4; transform: translate(-50%, -50%); display: grid; place-items: center; gap: 3px; min-width: 76px; border: 0; background: transparent; color: var(--text); }
.marker-dot { width: 34px; height: 34px; border: 4px solid white; border-radius: 50%; box-shadow: 0 7px 14px rgba(0,0,0,0.2); background: var(--red); }
.marker.green .marker-dot { background: var(--green); }
.marker.soon .marker-dot { background: var(--accent); }
.marker.selected .marker-dot { outline: 4px solid #0f766e; }
.marker.pending .marker-dot { border-style: dashed; }
.marker-label { max-width: 95px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: rgba(255,255,255,0.92); border-radius: 999px; padding: 3px 7px; font-size: 0.74rem; font-weight: 900; }

.crosswalk-list { display: grid; gap: 8px; margin-top: 12px; }
.crosswalk-row { border: 1px solid #e2e8f0; border-radius: 16px; padding: 12px; display: grid; grid-template-columns: 1fr auto; gap: 10px; background: #fbfefd; }
.crosswalk-row.selected { border-color: var(--primary); background: #f0fdfa; }
.row-main { display: flex; gap: 10px; align-items: center; min-width: 0; }
.status-dot { width: 16px; height: 16px; border-radius: 50%; background: var(--red); flex: 0 0 auto; }
.status-dot.green { background: var(--green); }
.status-dot.soon { background: var(--accent); }
.row-name { margin: 0; font-size: 1rem; }
.row-time { text-align: right; }
.row-countdown { display: block; font-size: 1.3rem; color: var(--primary-dark); }
.row-next { color: var(--muted); font-size: 0.84rem; }
.row-actions { grid-column: 1 / -1; display: flex; gap: 8px; justify-content: flex-end; }

.settings-card summary { font-weight: 900; cursor: pointer; }
.settings-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.settings-grid label { display: grid; gap: 5px; color: var(--muted); font-weight: 800; font-size: 0.86rem; }
.settings-grid input, .settings-grid select, #selected-crosswalk-select {
  width: 100%; border: 1px solid #cbd5e1; border-radius: 12px; padding: 10px; background: white; color: var(--text); min-height: 44px;
}
.settings-actions { justify-content: flex-start; margin-top: 12px; }
.tag-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tag { border: 1px solid var(--line); border-radius: 999px; padding: 6px 9px; background: #f8fafc; font-size: 0.84rem; }
.admin-panel { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.pending-list { display: grid; gap: 8px; margin-top: 10px; }
.pending-item { border: 1px dashed #f59e0b; background: #fffbeb; border-radius: 16px; padding: 12px; display: grid; gap: 8px; }
.export-output { width: 100%; min-height: 150px; margin-top: 10px; border: 1px solid #cbd5e1; border-radius: 14px; padding: 10px; resize: vertical; }

@media (max-width: 760px) {
  body { padding-left: 10px; padding-right: 10px; }
  .signal-meta, .hero-actions, .settings-grid { grid-template-columns: 1fr 1fr; }
  .crosswalk-row { grid-template-columns: 1fr; }
  .row-time { text-align: left; padding-left: 26px; }
}

@media (max-width: 430px) {
  .hero-card, .map-card, .list-card, .settings-card { border-radius: 18px; padding: 13px; }
  .signal-meta, .hero-actions, .settings-grid { grid-template-columns: 1fr; }
  .countdown { font-size: 4.2rem; }
  .signal-map { min-height: 300px; }
}

.subheading {
  margin: 14px 0 4px;
  font-size: 0.95rem;
  color: var(--primary-dark);
}

.muted-tag {
  color: var(--muted);
  background: #f1f5f9;
}

.map-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.map-provider-label {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 10px;
  background: #f8fafc;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 900;
}

.signal-map.real-map {
  height: min(80vw, 560px);
  min-height: 410px;
  background: #dbeafe;
  touch-action: auto;
}

.signal-map.adding {
  outline: 4px solid rgba(245, 158, 11, 0.35);
}

.signal-map.editing {
  outline: 4px solid rgba(15, 118, 110, 0.28);
}

.leaflet-container {
  font-family: inherit;
  border-radius: 20px;
}

.leaflet-signal-icon {
  position: relative;
  display: block;
  width: 32px;
  height: 32px;
}

.leaflet-signal-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30px;
  height: 30px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  border: 4px solid white;
  background: var(--red);
  box-shadow: 0 7px 16px rgba(15, 23, 42, 0.32);
}

.leaflet-signal-icon.green .leaflet-signal-dot { background: var(--green); }
.leaflet-signal-icon.soon .leaflet-signal-dot { background: var(--accent); }
.leaflet-signal-icon.selected .leaflet-signal-dot { outline: 4px solid rgba(15, 118, 110, 0.55); }
.leaflet-signal-icon.pending .leaflet-signal-dot { border-style: dashed; }

.leaflet-signal-label {
  position: absolute;
  left: 50%;
  top: calc(100% + 4px);
  transform: translateX(-50%);
  max-width: 160px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: 999px;
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--text);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
  font-size: 0.74rem;
  font-weight: 900;
  pointer-events: none;
}

.popup-notice {
  color: #991b1b;
  font-weight: 800;
}

@media (max-width: 760px) {
  .map-actions { justify-content: flex-start; width: 100%; }
  .signal-map.real-map { min-height: 360px; }
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
}

.stats-grid div {
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #f8fafc;
  padding: 10px;
  min-width: 0;
}

.stats-grid span {
  display: block;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
  margin-bottom: 4px;
}

.stats-grid strong {
  display: block;
  font-size: 0.94rem;
  overflow-wrap: anywhere;
}

.observation-list {
  display: grid;
  gap: 7px;
  margin-top: 8px;
}

.observation-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 9px 10px;
  background: #fbfefd;
}

.observation-row.green { border-left: 5px solid var(--green); }
.observation-row.red { border-left: 5px solid var(--red); }

.observation-type {
  border-radius: 999px;
  background: #e6f4f1;
  color: var(--primary-dark);
  padding: 4px 8px;
  font-size: 0.78rem;
  font-weight: 900;
  white-space: nowrap;
}

.commute-preview { margin-top: 12px; }

@media (max-width: 760px) {
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .observation-row { grid-template-columns: 1fr; align-items: start; }
}

@media (max-width: 430px) {
  .stats-grid { grid-template-columns: 1fr; }
}

.map-mode-banner {
  margin-top: 10px;
  border-radius: 14px;
  padding: 10px 12px;
  font-weight: 900;
  line-height: 1.35;
}
.map-mode-banner.adding { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
.map-mode-banner.editing { background: #ecfdf5; color: #115e59; border: 1px solid #99f6e4; }

.quick-observe-bar {
  position: fixed;
  left: max(10px, env(safe-area-inset-left));
  right: max(10px, env(safe-area-inset-right));
  bottom: max(10px, env(safe-area-inset-bottom));
  z-index: 1000;
  display: none;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(15, 118, 110, 0.2);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.22);
  backdrop-filter: blur(10px);
}
.quick-observe-info { flex: 1; min-width: 0; display: grid; gap: 2px; }
.quick-observe-info span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 0.8rem; color: var(--muted); font-weight: 900; }
.quick-observe-info strong { color: var(--primary-dark); font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.quick-observe-bar.green { border-color: rgba(22, 163, 74, 0.35); }
.quick-observe-bar.soon { border-color: rgba(245, 158, 11, 0.45); }
.quick-observe-bar .primary-button, .quick-observe-bar .secondary-button { min-height: 42px; padding-inline: 14px; border-radius: 14px; }

@media (max-width: 760px) {
  body { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
  .quick-observe-bar { display: flex; }
  .map-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .map-actions .map-provider-label { grid-column: 1 / -1; text-align: center; justify-content: center; }
}

@media (max-width: 430px) {
  .quick-observe-bar { left: 8px; right: 8px; bottom: 8px; border-radius: 18px; }
  .quick-observe-bar .primary-button, .quick-observe-bar .secondary-button { padding-inline: 12px; }
  .leaflet-signal-label { max-width: 138px; font-size: 0.7rem; }
  .signal-map.real-map { min-height: 440px; }
}

/* UX v6: field use, map focus and fallback rendering */
.hero-card {
  position: relative;
  overflow: hidden;
}
.hero-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 7px;
  background: var(--primary);
  opacity: 0.18;
}
.hero-card.hero-green::before { background: var(--green); opacity: 0.45; }
.hero-card.hero-soon::before { background: var(--accent); opacity: 0.5; }
.hero-card.hero-wait::before { background: var(--red); opacity: 0.18; }

.field-mode-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid rgba(15, 118, 110, 0.16);
  border-radius: 16px;
  padding: 11px 12px;
  background: linear-gradient(90deg, rgba(240,253,250,0.98), rgba(255,251,235,0.82));
}
.field-mode-panel div { display: grid; gap: 3px; min-width: 0; }
.field-mode-panel span { color: var(--muted); font-size: 0.78rem; font-weight: 900; }
.field-mode-panel strong { color: var(--primary-dark); font-size: 0.92rem; line-height: 1.35; }

.map-status-chip {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  border-radius: 999px;
  padding: 8px 12px;
  background: #f8fafc;
  border: 1px solid var(--line);
  color: var(--primary-dark);
  font-weight: 900;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}
.map-status-chip.green { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.map-status-chip.soon { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.map-status-chip.red { background: #fee2e2; color: #991b1b; border-color: #fecaca; }

.signal-map.fallback-active {
  background:
    radial-gradient(circle at 20% 20%, rgba(187,247,208,0.95), transparent 28%),
    linear-gradient(135deg, #e5f7e9 0%, #dff7ff 100%);
}
.signal-map.fallback-active .marker-layer {
  position: absolute;
  inset: 0;
  z-index: 5;
}
.signal-map.real-map.fallback-active {
  height: min(92vw, 560px);
  min-height: 440px;
}
.signal-map.fallback-active .map-place {
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.10);
}

.map-actions .ghost-button,
.map-actions .secondary-button {
  white-space: nowrap;
}

.leaflet-signal-label,
.marker-label {
  border: 1px solid rgba(15, 23, 42, 0.08);
}

@media (max-width: 760px) {
  .app-header {
    align-items: flex-start;
    margin-bottom: 10px;
  }
  .app-header h1 {
    line-height: 1.05;
  }
  .hero-topline {
    gap: 6px;
  }
  .field-mode-panel {
    align-items: stretch;
    flex-direction: column;
  }
  .field-mode-panel .ghost-button {
    width: 100%;
  }
  .countdown-row {
    align-items: flex-start;
  }
  .state-badge {
    padding: 7px 9px;
  }
  .map-status-chip {
    width: 100%;
    justify-content: center;
  }
  .section-heading {
    align-items: flex-start;
  }
  .map-actions {
    gap: 7px;
  }
  .map-actions .ghost-button {
    min-height: 42px;
    padding: 9px 10px;
  }
}

@media (max-width: 430px) {
  .app-shell { gap: 12px; }
  .countdown { font-size: clamp(3.5rem, 18vw, 4.4rem); }
  .signal-meta div { padding: 9px; }
  .signal-meta dt { font-size: 0.74rem; }
  .signal-meta dd { font-size: 0.95rem; }
  .hero-actions { grid-template-columns: 1fr 1fr; }
  .hero-actions .primary-button { grid-column: span 2; }
  .signal-map.real-map,
  .signal-map.real-map.fallback-active { min-height: 470px; }
  .map-actions { grid-template-columns: 1fr 1fr; }
  .map-actions .ghost-button { font-size: 0.86rem; }
  .map-provider-label { font-size: 0.78rem; }
  .quick-observe-info strong { font-size: 1rem; }
}


/* UX v6.1: compact mobile status cards and list readability */
@media (max-width: 430px) {
  .signal-meta { grid-template-columns: 1fr 1fr; }
  .signal-meta div:nth-child(4) { grid-column: 1 / -1; }
  .row-actions { justify-content: stretch; }
  .row-actions .secondary-button { flex: 1; }
  .crosswalk-row { padding: 10px; }
  .row-countdown { font-size: 1.16rem; }
  .settings-card details:not([open]) { padding: 2px 0; }
}

/* UX v6.2: keep observation stats compact on phones */
@media (max-width: 430px) {
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .stats-grid div:first-child { grid-column: 1 / -1; }
  .stats-grid strong { font-size: 0.88rem; }
  .stats-grid div { padding: 9px; }
}


/* UX v7: GPS support and Leaflet-native labels to prevent zoom desync */
.gps-status {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 800;
  line-height: 1.4;
}

.leaflet-signal-icon {
  background: transparent;
  border: 0;
}

.signal-tooltip {
  border: 1px solid rgba(15, 23, 42, 0.10) !important;
  border-radius: 999px !important;
  padding: 4px 8px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  color: var(--text) !important;
  box-shadow: 0 5px 14px rgba(15, 23, 42, 0.18) !important;
  font-size: 0.74rem !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}
.signal-tooltip.green { color: #166534 !important; border-color: rgba(22, 163, 74, 0.24) !important; }
.signal-tooltip.soon { color: #92400e !important; border-color: rgba(245, 158, 11, 0.32) !important; }
.signal-tooltip.red { color: #991b1b !important; border-color: rgba(239, 68, 68, 0.24) !important; }
.signal-tooltip.selected { outline: 3px solid rgba(15, 118, 110, 0.24); }

.user-location-icon {
  background: transparent;
  border: 0;
}
.user-location-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: #2563eb;
  border: 3px solid #ffffff;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.45);
  z-index: 2;
}
.user-location-pulse {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26px;
  height: 26px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.18);
  animation: userPulse 1.8s infinite;
}
@keyframes userPulse {
  0% { transform: translate(-50%, -50%) scale(0.7); opacity: 0.8; }
  100% { transform: translate(-50%, -50%) scale(1.55); opacity: 0; }
}

.map-actions button:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

@media (max-width: 760px) {
  .map-actions { grid-template-columns: 1fr 1fr; }
  .gps-status { font-size: 0.8rem; }
}

@media (max-width: 430px) {
  .signal-tooltip { font-size: 0.68rem !important; max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
}

/* UX v8: GPS-aware nearby signal panel */
.location-panel {
  margin-top: 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto;
  gap: 8px;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #f8fafc;
  padding: 10px;
}
.location-panel div {
  min-width: 0;
  display: grid;
  gap: 3px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid rgba(203, 213, 225, 0.72);
  padding: 9px 10px;
}
.location-panel span {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 900;
}
.location-panel strong {
  color: var(--primary-dark);
  font-size: 0.9rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.location-panel.near {
  background: #ecfdf5;
  border-color: rgba(22, 163, 74, 0.28);
}
.location-panel.close {
  background: #fffbeb;
  border-color: rgba(245, 158, 11, 0.28);
}
.location-panel.far,
.location-panel.warning {
  background: #fff7ed;
  border-color: rgba(249, 115, 22, 0.24);
}
.location-panel.waiting {
  background: #f8fafc;
}
.location-panel .secondary-button {
  min-height: 100%;
  white-space: nowrap;
}
.nearest-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 5px;
  border-radius: 999px;
  padding: 2px 6px;
  background: #dbeafe;
  color: #1d4ed8;
  font-size: 0.72rem;
  font-weight: 900;
  vertical-align: middle;
}
.crosswalk-row.nearest {
  border-color: rgba(37, 99, 235, 0.32);
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.07);
}

@media (max-width: 760px) {
  .location-panel {
    grid-template-columns: 1fr;
  }
  .location-panel .secondary-button {
    min-height: 42px;
  }
}


/* UX v9: map-accurate signal circles, no orange shaking */
.leaflet-signal-circle {
  transition: stroke-width 120ms ease, fill-opacity 120ms ease;
  filter: drop-shadow(0 4px 10px rgba(15, 23, 42, 0.22));
}
.leaflet-signal-circle.soon {
  animation: none !important;
}
.marker.soon .marker-dot,
.status-dot.soon,
.leaflet-signal-icon.soon .leaflet-signal-dot {
  animation: none !important;
}
.signal-map.editing {
  cursor: crosshair;
}