/* 基礎樣式 */
body { font-family: "Noto Sans TC", Arial, sans-serif; background:#faebee; margin:0; transition:background .3s, color .3s; }
.container { max-width:430px; margin:40px auto; background:#fff; padding:2.2rem 1.3rem 1.7rem; border-radius:20px; box-shadow:0 4px 24px rgba(220,0,0,.12); border:3.5px solid #c62828; position:relative; z-index:1; }
h2 { color:#b71c1c; margin:0 0 1rem; text-align:center; font-size:1.25rem; letter-spacing:1.5px; }
label { display:block; width:100%; font-size:1.08rem; text-align:center; }

/* ===== 模式切換（燈柱 / 街井） ===== */
.mode-switcher{
  display:flex;
  align-items:stretch;
  justify-content:center;
  gap:12px;

  /* ✅改動：令兩粒掣用盡容器闊度，更易按 */
  width:100%;
  max-width:430px;
  margin: 0.35rem auto 1.1rem auto;

  /* ✅改動：避免無謂換行（除非極窄屏幕） */
  flex-wrap:nowrap;
}

.mode-btn{
  -webkit-tap-highlight-color: transparent;
  appearance:none;

  /* ✅改動：兩粒同寬 */
  flex: 1 1 0;
  min-width: 0;

  border:2px solid #c62828;
  background:#fff;
  color:#c62828;

  /* ✅改動：加大按鈕（手機友善） */
  min-height:54px;
  padding:0.78rem 1rem;

  /* ✅改動：字體加大 */
  font-size:1.12rem;
  line-height:1.1;

  border-radius:14px;

  cursor:pointer;
  user-select:none;
  font-weight:800;
  letter-spacing:1px;

  transition: background .15s ease, color .15s ease, transform .05s ease, border-color .15s ease;
}

/* ✅改動：避免你後面通用 button:hover 把 mode-btn 變成全紅 */
.mode-btn:hover{
  background:#ffe6e9;
}

/* ✅用 aria-pressed 做選中狀態（你 JS 已經會 set） */
.mode-btn[aria-pressed="true"]{
  background:#c62828;
  color:#fff;
  border-color:#c62828;
}
.mode-btn[aria-pressed="true"]:hover{
  background:#b71c1c;
  border-color:#b71c1c;
}
.mode-btn:active{
  transform: scale(0.98);
}
.mode-btn:focus-visible{
  outline: 3px solid rgba(198,40,40,0.25);
  outline-offset: 2px;
}

/* ✅極窄屏幕容許換行，避免擠爆 */
@media (max-width: 330px){
  .mode-switcher{
    flex-wrap:wrap;
  }
}

body.night .mode-btn{
  background:#2d2d2d;
  border-color:#666;
  color:#ffd0d0;
}
body.night .mode-btn:hover{
  background:#3a3a3a;
}
body.night .mode-btn[aria-pressed="true"]{
  background:#e53935;
  border-color:#e53935;
  color:#fff;
}
body.night .mode-btn[aria-pressed="true"]:hover{
  background:#d32f2f;
  border-color:#d32f2f;
}

/* ===== 顯示/隱藏規則（街井模式只保留街井相關） ===== */
body[data-search-mode="hydrant"] [data-mode="lamp"]{
  display:none !important;
}
body:not([data-search-mode="hydrant"]) [data-mode="hydrant"]{
  display:none !important;
}

/* 輸入列與清除鈕 */
.input-row { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; position:relative; }
.field-wrap { position:relative; flex:1 1 auto; min-width:0; }
.field-wrap input {
  width:100%;
  margin:0.2rem 0 1.1rem 0;
  padding:0.48rem 2.4rem 0.48rem 0.48rem;
  border:1.6px solid #c62828; border-radius:7px; background:#fafafa; font-size:1.07rem;
  box-sizing:border-box; transition:border .2s;
}
.clear-btn {
  position:absolute; inset-inline-end:8px; top:50%; transform:translateY(calc(-50% - 7px));
  height:28px; width:28px; border:1px solid #e0e0e0; border-radius:14px;
  background:#fff; color:#666; display:none; align-items:center; justify-content:center;
  cursor:pointer; user-select:none; font-weight:700; line-height:1; z-index:1;
  pointer-events:auto;
}
.clear-btn.show { display:flex; }
.clear-btn:hover { background:#f5f5f5; }

/* 歷史按鈕 */
.history-btn.inline {
  margin:0.2rem 0 1.1rem 0; padding:0.48rem 0.7rem; height:44px; line-height:1; white-space:nowrap; flex:0 0 auto;
  border:1.5px solid #c62828; color:#c62828; background:#fff; border-radius:7px; cursor:pointer;
}
.history-btn.inline:hover { background:#ffe6e9; }

/* 歷史清單 */
.history-menu.inline { position: relative; display:block; margin:0; }
.history-menu[hidden] { display:none; }
.history-menu .panel {
  position:absolute; right:0; z-index:5; background:#fff; border:1.5px solid #c62828;
  border-radius:10px; box-shadow:0 6px 20px rgba(0,0,0,.08); max-height:260px; overflow:auto; min-width:240px;
}
.history-menu .toolbar {
  display:flex; align-items:center; justify-content: space-between;
  padding: 0.5rem 0.7rem; border-bottom: 1px solid #f6d8dc; background:#fff;
  position: sticky; top:0; z-index:1;
}
.history-menu .toolbar .title { font-weight:700; color:#c62828; }
.history-menu .toolbar .actions { display:flex; gap:8px; }
.history-menu .toolbar button {
  padding: 0.35rem 0.55rem; font-size:0.86rem; border:1.5px solid #c62828;
  background:#fff; color:#c62828; border-radius:6px; cursor:pointer;
}
.history-menu .toolbar button:hover { background:#ffe6e9; }

.history-menu .item { padding:0.55rem 0.8rem; cursor:pointer; border-bottom:1px solid #f6d8dc; display:flex; align-items:center; justify-content: space-between; gap:8px; }
.history-menu .item:last-child { border-bottom:0; }
.history-menu .item .label { flex:1 1 auto; text-align:left; }
.history-menu .item .pin { color:#c62828; cursor:pointer; font-size:1rem; user-select:none; }
.history-menu .item .pin[aria-pressed="true"] { color:#b71c1c; }
.history-menu .item .badge { font-size:0.76rem; color:#a00; border:1px solid #f0baba; background:#fff3f3; border-radius:999px; padding:2px 6px; margin-left:8px; }
.history-menu .empty { padding:0.7rem 0.8rem; color:#777; }

/* 動作按鈕與佈局 */
.input-btns { display:flex; justify-content:center; gap:10px; margin-bottom:10px; }
button, .lang-btn {
  padding:0.68rem 1rem; background:#c62828; color:#fff; border:none; border-radius:7px; font-size:1.07rem; cursor:pointer;
  transition:background .2s; letter-spacing:1.5px; font-weight:600;
}
button:hover, .lang-btn:hover { background:#b71c1c; }
.copy-btn { background:#fde7ef; color:#b71c1c; border:1px solid #f4c2d2; font-weight:600; padding:0.55rem 0.9rem; }

.night-btn { position:absolute; top:11px; right:15px; background:#232323; color:#fff; border:none; font-size:1.1rem; border-radius:18px; padding:0.35rem 1.1rem; letter-spacing:1px; box-shadow:0 2px 8px rgba(60,0,0,.08); cursor:pointer; transition:background .2s; z-index:2; }
.night-btn:hover { background:#323232; }
.lang-switch { position:absolute; top:11px; left:15px; z-index:2; }
.lang-btn { background:#fff; color:#c62828; border:1.5px solid #c62828; margin-right:6px; font-weight:600; font-size:.97rem; padding:.42rem .82rem; }
.lang-btn.active, .lang-btn:focus { background:#c62828; color:#fff; }

.result { text-align:center; margin-top:0.8rem; font-size:1.1rem; padding:1rem 0.6rem 0.7rem; border-radius:10px; background:#fff6f6; border:1.5px solid #ffebee; min-height:38px; margin-bottom:0.7rem; position:relative; }
.error { color:#d32f2f; font-weight:bold; }

.map-link { display:inline-flex; align-items:center; justify-content:center; text-decoration:none; padding:0.54rem 1.2rem; border-radius:7px; font-size:1.12rem; font-weight:700; letter-spacing:1.2px; border:1px solid transparent; transition:filter .2s, background .2s; }
.map-link:hover { filter:brightness(.92); }
.map-link.gmap { background:#d32f2f; color:#fff; border-color:#d32f2f; }
.map-link.amap { background:#1976d2; color:#fff; border-color:#1976d2; }
.map-link.streetview-btn { background:#ff9800; color:#fff; border-color:#ff9800; }
.map-link.apple { background:#000; color:#fff; border-color:#000; }
body.night .map-link.apple{ background:#111; color:#fff; border-color:#111; }

.share-btn.whatsapp { background:#25d366; color:#fff; border-radius:7px; font-size:1.12rem; font-weight:700; }
.share-btn.whatsapp:hover { filter:brightness(.92); }

.actions-grid { margin:0.55em 0 0.9em; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.btn-eq { display:inline-flex; align-items:center; justify-content:center; width:100%; min-height:46px; padding:0.6rem 0.9rem; font-size:1.06rem; border-radius:8px; box-sizing:border-box; text-align:center; }

@media (max-width:500px){
  .container{margin:12px 0; border-radius:0;}
  .lang-switch{left:6px;}
  .night-btn{right:6px;}
  .btn-eq{min-height:44px; font-size:1rem; padding:0.5rem 0.8rem;}
}

/* 夜間模式 */
body.night{ background:#232323; color:#fff; }
.container.night{ background:#2d2d2d; border-color:#333; }
.result.night{ background:#322; border-color:#422; color:#ffeaea; }
.map-link.night, .copy-btn.night{ background:#212121; color:#ffcdd2; }
.map-link.night:hover, .copy-btn.night:hover{ filter:brightness(1.05); }
body.night .map-link.amap{ background:#1565c0; color:#eaf3ff; border-color:#1565c0; }

.tips { color:#7b1f1f; font-size:.97rem; text-align:center; margin-top:1.2rem; line-height:1.7; }
.tips-subtitle { display:block; margin-top:.95em; font-size:1.09em; font-weight:bold; color:#b71c1c; text-align:center; }
.tips-list { text-align:left; display:inline-block; margin:0.5em 0 0 0; padding:0; font-size:.99em; list-style:none; color:#7b1f1f; }
.tips-list li { margin-bottom:0.25em; line-height:1.7; }
body.night .tips{ color:#f3d6d9; }
body.night .tips-subtitle{ color:#ffb3c0; }
body.night .tips-list{ color:#f3d6d9; }

.bearing-tip { display:block; margin:0.6em 0 0.2em; color:#6b6b6b; font-size:.93rem; }
.bearing-badge { display:inline-block; background:#eceff1; color:#455a64; border:1px solid #cfd8dc; border-radius:999px; padding:0.08rem 0.5rem; font-size:.85rem; vertical-align:baseline; }
body.night .bearing-tip{ color:#cfcfcf; }
body.night .bearing-badge{ background:#37474f; color:#e0f7fa; border-color:#455a64; }

.nearest-card{ background:#e3f2fd; border-radius:10px; padding:0.8em 1em; margin-top:0.5em; text-align:left; line-height:1.6; color:#263238; display:flex; flex-direction:column; gap:6px; transition:box-shadow .2s, border .2s; }
.nearest-card:focus-visible { outline:3px solid #1976d2; outline-offset:3px; }
.nearest-card.is-active { border:2px solid #1976d2; box-shadow:0 0 0 3px rgba(25,118,210,0.18); }
.nearest-row1{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-weight:700; color:#0d47a1; min-height:44px; }
.nearest-row1 a{ color:#1976d2; text-decoration:underline; font-weight:800; min-height:44px; display:inline-flex; align-items:center; }
.nearest-row2{ display:flex; align-items:center; gap:12px; color:#263238; }
.nearest-dir{ display:flex; align-items:center; gap:6px; color:#263238; }

body.night .nearest-card{ background:#253242; color:#e6f0ff; }
body.night .nearest-card.is-active { border-color:#64b5f6; box-shadow:0 0 0 3px rgba(144,202,249,0.25); }
body.night .nearest-card:focus-visible { outline-color:#64b5f6; }
body.night .nearest-row1{ color:#cfe8ff; }
body.night .nearest-row1 a{ color:#9cc7ff; }
body.night .nearest-row2, body.night .nearest-dir{ color:#e6f0ff; }

.skeleton{ position:relative; overflow:hidden; background:#eee; border-radius:8px; height:16px; margin:6px 0; }
.skeleton::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.7), rgba(255,255,255,0)); transform:translateX(-100%); animation:shimmer 1.2s infinite; }
@keyframes shimmer{ 100%{ transform:translateX(100%); } }

.back-to-top{ position:fixed; right:16px; bottom:16px; width:48px; height:48px; border-radius:24px; background:#c62828; color:#fff; display:none; align-items:center; justify-content:center; box-shadow:0 6px 16px rgba(0,0,0,.2); z-index:999; font-weight:800; cursor:pointer; user-select:none; }
.back-to-top.show{ display:flex; }
.back-to-top:hover{ background:#ad1f1f; }
body.night .back-to-top{ background:#e53935; }
body.night .back-to-top:hover{ background:#d32f2f; }

.weather-warning-box{ max-width:430px; margin:2em auto 0; background:#e3f2fd; border:2px solid #1565c0; border-radius:16px; box-shadow:0 4px 16px rgba(21,101,192,.08); padding:1.3em 1em 1em; }
.weather-warning-title{ font-size:1.13em; font-weight:bold; color:#1565c0; display:flex; align-items:center; margin-bottom:.7em; letter-spacing:1.5px; gap:.5em; }
.weather-warning-title-right{ margin-left:auto; font-size:.92em; color:#666; font-weight:400; }
#weatherWarningList{ margin-top:.2em; }
.weather-warning-card{ display:flex; align-items:flex-start; background:#fff; border-radius:10px; box-shadow:0 2px 8px rgba(44,44,44,.09); border-left:12px solid #1976d2; margin-bottom:1em; padding:1em 1em 1em .7em; }
.weather-warning-icon{ font-size:2em; margin-right:.7em; flex-shrink:0; }
.weather-warning-content{ flex:1 1 0; }
.weather-warning-time{ color:#888; font-size:.96em; margin-bottom:.35em; }
body.night .weather-warning-box{ background:#232f3e; border-color:#90caf9; }
body.night .weather-warning-title{ color:#90caf9; }
body.night #weatherWarningList .weather-warning-card{ background:#323f4b; color:#fff; }
body.night #weatherWarningList .weather-warning-time{ color:#ccc; }

.hsww-box{ max-width:430px; margin:2em auto 0; background:#fff8ee; border:2px solid #ff9800; border-radius:16px; box-shadow:0 4px 16px rgba(255,152,0,.08); padding:1.3em 1em 1em; }
.hsww-title{ font-size:1.18em; font-weight:bold; color:#b34a00; display:flex; align-items:center; margin-bottom:.7em; letter-spacing:1.5px; gap:.5em; }
.hsww-title-right{ margin-left:auto; font-size:.92em; color:#666; font-weight:400; }
.hsww-warning{ font-size:1.08em; color:#d32f2f; font-weight:bold; margin-bottom:.4em; display:flex; align-items:center; gap:.45em; }
.hsww-no-warning{ color:#2f7233; font-size:1.03em; font-weight:600; display:flex; align-items:center; gap:.5em; }
.hsww-time{ color:#666; font-size:.98em; margin-top:.2em; }
body.night .hsww-box{ background:#2d2d2d; border-color:#ff9800; color:#fff; }
body.night .hsww-title{ color:#ffb300; }
body.night .hsww-warning{ color:#ffb3b3; }
body.night .hsww-time{ color:#bbb; }
body.night .hsww-no-warning{ color:#a5d6a7; }

body.night #streetwellResult {
  background:#322;
  border-color:#422;
  color:#ffeaea;
}
body.night #streetwellResult strong { color:#ffeaea; }

/* ✅新增：夜間模式下，「就近街井」結果文字變白色 */
body.night #nearbyResult {
  color: #fff;
}

body.night .map-link.gmap {
  background:#d32f2f;
  color:#fff;
  border-color:#d32f2f;
}
body.night .map-link.streetview-btn {
  background:#ff9800;
  color:#fff;
  border-color:#ff9800;
}

#hswwBox .hsww-no-warning { font-size: 1rem; }
#hswwBox .hsww-no-warning > svg {
  width: 5em;
  height: 5em;
  vertical-align: -0.1em;
  margin-right: 0.4em;
}

body.night #lampHistory,
body.night #lampHistory * {
  color: #000 !important;
}

body.night #streetwellHistory,
body.night #streetwellHistory * {
  color: #000 !important;
}

body.night #lampHistoryMenu,
body.night #lampHistoryMenu * {
  color:#000 !important;
}
body.night #streetwellHistoryMenu,
body.night #streetwellHistoryMenu * {
  color:#000 !important;
}

/* ===== 地圖尺寸 =====
   ✅要求：在「街井」的小地圖（streetwell-osm-map）高度增加 1 倍，寬度不變
   其他地圖（例如 hydrantMap / 定位地圖）維持原本高度，避免過長
*/
.nearby-map {
  width: 100%;
  min-height: 560px;
  border: 1.5px solid #1976d2;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 10px;
}
body.night .nearby-map {
  border-color: #90caf9;
}
/* ✅只加長「街井」結果內的 OpenStreetMap 小地圖高度 */
#streetwell-osm-map.nearby-map{
  min-height: 560px; /* 280 -> 560 */
}

.help-title {
  display: block;
  margin-top: 0.6em;
  font-weight: 700;
  color: #b71c1c;
}
.help-list {
  margin: 0.35em 0 0;
  padding-left: 1.2em;
  text-align: left;
  color: #7b1f1f;
  font-size: 0.96rem;
}
.help-list li {
  margin-bottom: 0.35em;
  line-height: 1.6;
}
body.night .help-title { color:#ffb3c0; }
body.night .help-list { color:#ffeaea; }

.select-option-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:0.45rem 0.85rem;
  font-size:0.98rem;
  font-weight:600;
  border:1px solid #1976d2;
  border-radius:8px;
  background:#1976d2;
  color:#fff;
  cursor:pointer;
  transition:filter .2s;
}
.select-option-btn:hover,
.select-option-btn:focus-visible {
  filter:brightness(.92);
}
body.night .select-option-btn {
  background:#64b5f6;
  border-color:#64b5f6;
  color:#0b1d34;
}

.site-footer {
  margin: 28px auto 0 auto;
  max-width: 430px;
  background: #fff;
  border: 1.5px solid #f2b7bf;
  border-radius: 12px;
  box-shadow:0 2px 12px rgba(220,0,0,0.06);
  color: #7b1f1f;
}
.site-footer .footer-inner {
  display:flex; align-items:center; justify-content: space-between;
  gap:10px; padding:10px 12px; font-size:0.92rem; flex-wrap: wrap;
}
.site-footer a { color: #b71c1c; text-decoration: underline; }
.site-footer .sep { margin: 0 6px; color: #b57979; }
body.night .site-footer {
  background:#2d2d2d; border-color:#444; color:#f3d6d9;
}
body.night .site-footer a { color:#ffb3c0; }

.sr-only {
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border:0 !important;
}

/* ✅修正：夜間模式下街井結果文字需變白色
   你原本用 .result-streetwell-black 強制黑字，夜間會「永遠黑色」
   所以加一條 night override
*/
.result-streetwell-black { color:#000; }
body.night .result-streetwell-black { color:#fff; }
body.night .result-streetwell-black strong { color:#fff; }

/* ===== (保留) 安老院 Modal ===== */
.risk-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.56);
  z-index:10000;
  display:none;
}
.risk-overlay.show{ display:block; }

.risk-modal{
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(92vw, 430px);
  background:#fff;
  border-radius:16px;
  border:2px solid #c62828;
  box-shadow:0 14px 46px rgba(0,0,0,0.28);
  z-index:10001;
  display:none;
  overflow:hidden;
}
.risk-modal.show{ display:block; }

.risk-modal .hd{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 12px 10px;
  background:#fff3f3;
  border-bottom:1px solid #f6d8dc;
}
.risk-modal .icon{
  width:34px;
  height:34px;
  border-radius:17px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#c62828;
  color:#fff;
  font-weight:800;
  flex:0 0 auto;
}
.risk-modal .title{
  font-weight:900;
  color:#b71c1c;
  letter-spacing:1px;
  font-size:1.06rem;
  line-height:1.2;
}
.risk-modal .bd{
  padding:12px 12px 2px;
  color:#222;
  line-height:1.6;
  font-size:1rem;
}
.risk-modal .bd .meta{
  margin-top:8px;
  padding:10px 10px;
  border:1.5px solid #f2b7bf;
  border-radius:12px;
  background:#fff;
}
.risk-modal .bd .meta .row{
  display:flex;
  gap:10px;
  justify-content:space-between;
  align-items:baseline;
  padding:4px 0;
  flex-wrap:wrap;
}
.risk-modal .bd .meta .k{ color:#6b1b1b; font-weight:800; }
.risk-modal .bd .meta .v{ color:#222; font-weight:700; }
.risk-modal .ft{
  padding:10px 12px 12px;
  display:flex;
  gap:10px;
  justify-content:flex-end;
  align-items:center;
}
.risk-btn{
  appearance:none;
  border:none;
  border-radius:10px;
  padding:0.55rem 0.95rem;
  font-weight:800;
  letter-spacing:1px;
  cursor:pointer;
  min-height:44px;
}
.risk-btn.primary{
  background:#c62828;
  color:#fff;
}
.risk-btn.primary:hover{ background:#b71c1c; }
.risk-btn.ghost{
  background:#fff;
  color:#c62828;
  border:1.5px solid #c62828;
}
.risk-btn.ghost:hover{ background:#ffe6e9; }

body.night .risk-modal{
  background:#2d2d2d;
  border-color:#e53935;
  color:#ffeaea;
}
body.night .risk-modal .hd{
  background:#3a2525;
  border-bottom-color:#4a2e2e;
}
body.night .risk-modal .title{ color:#ffb3c0; }
body.night .risk-modal .bd{ color:#ffeaea; }
body.night .risk-modal .bd .meta{
  background:#1f1f1f;
  border-color:#5a3a3a;
}
body.night .risk-modal .bd .meta .k{ color:#ffb3c0; }
body.night .risk-modal .bd .meta .v{ color:#ffeaea; }
body.night .risk-btn.ghost{
  background:#2d2d2d;
  color:#ffd0d0;
  border-color:#777;
}
body.night .risk-btn.ghost:hover{ background:#3a3a3a; }

/* ===== ✅新增：街井結果下方「危險提示」inline box ===== */
.risk-inline{
  margin-top: 10px;
  border: 2px solid #c62828;
  background: #fff3f3;
  border-radius: 14px;
  padding: 12px 12px 10px;
  text-align: left;
  color: #222;
}
.risk-inline .hd{
  display:flex; align-items:center; gap:10px;
  font-weight: 900;
  color: #b71c1c;
  letter-spacing: 1px;
  margin-bottom: 8px;
}
.risk-inline .badge{
  width:28px; height:28px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background:#c62828; color:#fff; font-weight:900;
  flex:0 0 auto;
}
.risk-inline .desc{
  color:#6b1b1b;
  font-weight:700;
  margin-bottom:10px;
  line-height:1.5;
}
.risk-inline .meta{
  background:#fff;
  border:1.5px solid #f2b7bf;
  border-radius:12px;
  padding:10px;
}
.risk-inline .row{
  display:flex;
  gap:10px;
  justify-content:space-between;
  align-items:baseline;
  padding:4px 0;
  flex-wrap:wrap;
}
.risk-inline .k{ color:#6b1b1b; font-weight:900; }
.risk-inline .v{ color:#222; font-weight:700; }
.risk-inline .list-title{
  margin-top:10px;
  font-weight:900;
  color:#b71c1c;
}
.risk-inline .item{
  padding:8px 10px;
  border:1px solid #f6d8dc;
  border-radius:10px;
  background:#fff;
  margin-top:8px;
  line-height:1.55;
}
.risk-inline .item .name{ font-weight:900; color:#0d47a1; }
.risk-inline .item .addr{ color:#333; font-weight:700; font-size:0.96rem; margin-top:2px; }
.risk-inline .item .dist{ color:#37474f; font-weight:800; margin-top:4px; }
.risk-inline .item .links{
  margin-top:8px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}

body.night .risk-inline{
  background:#3a2525;
  border-color:#e53935;
  color:#ffeaea;
}
body.night .risk-inline .desc{ color:#ffd0d0; }
body.night .risk-inline .meta,
body.night .risk-inline .item{
  background:#2d2d2d;
  border-color:#5a3a3a;
}
body.night .risk-inline .k{ color:#ffb3c0; }
body.night .risk-inline .v,
body.night .risk-inline .item .addr,
body.night .risk-inline .item .dist{ color:#ffeaea; }
body.night .risk-inline .item .name{ color:#9cc7ff; }

/* ===== ✅新增：小地圖標誌（街井/安老院）+ 文字 ===== */
.map-divicon{
  background: transparent;
  border: none;
}
.map-divicon .marker-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  transform: translateY(-2px);
}
.map-divicon .marker-pin{
  width: 18px;
  height: 18px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  position: relative;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
.map-divicon .marker-pin:after{
  content:"";
  position:absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background:#fff;
  top: 5px;
  left: 5px;
}
.map-divicon .marker-label{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1px;
  padding: 1px 6px;
  border-radius: 7px;
  background: rgba(255,255,255,0.92);
  border: 1px solid #ddd;
  color:#222;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}
body.night .map-divicon .marker-label{
  background: rgba(45,45,45,0.92);
  border-color:#555;
  color:#fff;
}
.map-divicon .marker-pin.pin-hydrant{
  background:#e53935;
  border:2px solid #c62828;
}
.map-divicon .marker-pin.pin-elderly{
  background:#42a5f5;
  border:2px solid #1565c0;
}
/* ✅新增：可拖拉標誌（顯示最近 8 隻街井） */
.map-divicon .marker-pin.pin-drag{
  background:#43a047;
  border:2px solid #2e7d32;
}

/* tooltip fallback（若 divIcon/marker 不可用） */
.map-marker-tooltip{
  background: rgba(255,255,255,0.92);
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 2px 6px;
  color:#222;
  font-weight:900;
  letter-spacing:1px;
}
body.night .map-marker-tooltip{
  background: rgba(45,45,45,0.92);
  border-color:#555;
  color:#fff;
}
/* Permanent tooltip for nearest hydrants */
.sw-tooltip {
  background: rgba(0, 0, 0, 0.78);
  color: #fff;
  border: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  font-size: 12px;
  font-weight: 700;
  padding: 3px 6px;
  border-radius: 8px;
}
/* Leaflet: streetwell label under red dot */
.leaflet-tooltip.streetwell-tooltip {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(0, 0, 0, 0.12);
  color: #111;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.18);
  border-radius: 10px;
  padding: 4px 8px;
  line-height: 1.15;
  font-size: 12px;
  text-align: center;
  white-space: nowrap;
  pointer-events: none; /* 重要：唔好遮住 marker 點擊 */
}

.leaflet-tooltip.streetwell-tooltip::before {
  display: none; /* 取消 Leaflet 小三角，避免遮住紅點 */
}

.leaflet-tooltip.streetwell-tooltip .sw-id {
  font-weight: 700;
}

.leaflet-tooltip.streetwell-tooltip .sw-dist {
  margin-top: 2px;
  font-weight: 600;
  color: #b71c1c;
}
/* =========================
   English mode: shrink long button labels
   ========================= */
html[lang="en"] .mode-switcher .mode-btn,
html[lang="en"] .input-row > button,
html[lang="en"] .input-btns button,
html[lang="en"] .actions-grid .btn-eq,
html[lang="en"] .history-btn,
html[lang="en"] .risk-btn,
html[lang="en"] #mpocBackBtn {
  /* 自動跟螢幕縮放：手機會細啲，桌面唔會細得太誇張 */
  font-size: clamp(0.78rem, 3.2vw, 0.95rem);
  line-height: 1.15;
}

/* 手機超窄屏：再收少少 padding，減少爆格/換行機會 */
@media (max-width: 420px) {
  html[lang="en"] .mode-switcher .mode-btn {
    padding-left: 6px;
    padding-right: 6px;
  }
}