:root {
  --cream: #fffaf0;
  --paper: #ffffff;
  --ink: #5a4634;
  --ink-soft: #8f7b67;
  --line: #f0e4d0;
  --leaf: #5cbf73;
  --leaf-dark: #3f9e57;
  --sun: #ffd25e;
  --coral: #ff8a7a;
  --sky: #a9def7;
  --new: #ff8a7a;
  --doing: #ffbf3c;
  --done: #4fc183;
  --shadow: 0 6px 0 rgba(120, 90, 60, 0.12), 0 10px 28px rgba(80, 60, 40, 0.16);
  --radius: 22px;
  --panel-w: 400px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --font: 'Huninn', 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', system-ui, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none; }
/* 固定整個頁面：手機上不會因為拖曳而捲動頁面、讓工具列跳出來把畫面推走 */
body { position: fixed; inset: 0; width: 100%; height: 100dvh; }
body { font-family: var(--font); color: var(--ink); background: #bfe9ff; touch-action: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
[hidden] { display: none !important; }

#sky {
  position: fixed; inset: 0;
  background:
    radial-gradient(45% 32% at 80% 8%, rgba(255, 236, 190, 0.9), transparent 70%),
    linear-gradient(180deg, #8fd0ff 0%, #cdeeff 45%, #fff3df 100%);
}
#sky::after {
  content: ''; position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease;
  background:
    radial-gradient(1.6px 1.6px at 12% 14%, #fff, transparent 60%),
    radial-gradient(1.4px 1.4px at 28% 6%, #fff6c9, transparent 60%),
    radial-gradient(2px 2px at 44% 18%, #fff, transparent 60%),
    radial-gradient(1.3px 1.3px at 63% 9%, #ffe1f0, transparent 60%),
    radial-gradient(1.8px 1.8px at 78% 22%, #fff, transparent 60%),
    radial-gradient(1.4px 1.4px at 90% 5%, #fff6c9, transparent 60%),
    radial-gradient(1.2px 1.2px at 6% 30%, #fff, transparent 60%),
    radial-gradient(1.5px 1.5px at 55% 30%, #d9e8ff, transparent 60%),
    radial-gradient(40% 30% at 82% 8%, rgba(255, 240, 200, 0.35), transparent 70%),
    linear-gradient(180deg, #7b6ad0 0%, #4c4aa8 40%, #2c3480 100%);
  animation: twinkle 4s ease-in-out infinite alternate;
}
body.night #sky::after { opacity: 1; }
@keyframes twinkle { from { filter: brightness(0.92); } to { filter: brightness(1.12); } }
@media (prefers-reduced-motion: reduce) { #sky::after, .report-btn .wiggle, .pin .bub { animation: none !important; } }
#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; outline: none; }

/* ---------- loading ---------- */
#loading {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 40%, #fffbe9, #c9eeff);
  transition: opacity 0.6s;
}
#loading.out { opacity: 0; pointer-events: none; }
.loading-card { text-align: center; font-size: 18px; }
.leaf-spin { font-size: 56px; animation: spin 1.6s ease-in-out infinite; }
@keyframes spin { 0%, 100% { transform: rotate(-20deg) scale(1); } 50% { transform: rotate(25deg) scale(1.15); } }

/* ---------- top ---------- */
.topbar {
  position: fixed; top: calc(10px + env(safe-area-inset-top, 0px)); left: 12px; right: 12px; z-index: 20;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; pointer-events: none;
}
.topbar > * { pointer-events: auto; }
.brand {
  display: flex; align-items: center; gap: 10px; padding: 8px 16px 8px 10px;
  background: var(--paper); border-radius: 999px; box-shadow: var(--shadow); text-align: left;
}
.brand-icon { font-size: 28px; width: 40px; height: 40px; display: grid; place-items: center; background: #e4f7d9; border-radius: 50%; }
/* LINE 登入按鈕（右上角）：未登入顯示「LINE 登入」，登入後顯示頭像 */
.round.user-btn { width: auto; min-width: 44px; padding: 0 12px 0 6px; border-radius: 999px; font-size: 13px; font-weight: bold; gap: 4px; display: flex; color: #06a14a; }
.round.user-btn .lg, .line-login .lg { background: #06c755; color: #fff; font-size: 10px; font-weight: 900; padding: 3px 5px; border-radius: 6px; letter-spacing: 0.5px; }
.round.user-btn.in { padding: 0; width: 44px; overflow: hidden; border: 3px solid #06c755; color: var(--ink); font-size: 18px; justify-content: center; }
.round.user-btn.in img { width: 100%; height: 100%; object-fit: cover; }
.login-card, .acct-card { text-align: center; max-width: 400px; }
.login-hero { font-size: 52px; }
.login-card h2 { font-size: 21px; margin: 6px 0 8px; }
.login-points { list-style: none; padding: 0; margin: 12px 0 16px; text-align: left; font-size: 14px; display: grid; gap: 6px; }
.line-login { display: flex; width: 100%; align-items: center; justify-content: center; gap: 8px; padding: 14px; border-radius: 16px; background: #06c755; color: #fff; font-size: 18px; font-weight: bold; box-shadow: 0 4px 0 #04a045; }
.line-login .lg { background: #fff; color: #06c755; }
.line-login:active { transform: translateY(3px); box-shadow: 0 1px 0 #04a045; }
.acct-pic { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 3px solid #06c755; }
.acct-card h2 { margin: 8px 0 2px; }
.ghost-btn { margin-top: 10px; padding: 10px 26px; border-radius: 999px; background: #fff; border: 2px solid var(--line); font-size: 15px; }
.brand-icon.face { object-fit: cover; background: linear-gradient(135deg, #ffd9b8, #ffc4d6); border: 2px solid #ff8a3d; flex: none; }
.brand-text strong { display: block; font-size: 17px; letter-spacing: 1px; }
.brand-text small { color: var(--leaf-dark); font-size: 12px; }
.top-actions { display: flex; gap: 8px; }
.round {
  width: 44px; height: 44px; border-radius: 50%; background: var(--paper); box-shadow: var(--shadow);
  font-size: 20px; display: grid; place-items: center; transition: transform 0.15s;
}
.round:active { transform: scale(0.9); }
.round.big { width: 50px; height: 50px; font-size: 22px; }

.stats {
  position: fixed; z-index: 19; top: calc(70px + env(safe-area-inset-top, 0px)); left: 12px;
  display: flex; gap: 6px;
}
.stats button {
  background: rgba(255, 255, 255, 0.92); border-radius: 999px; padding: 4px 10px; font-size: 12.5px;
  box-shadow: 0 3px 0 rgba(120, 90, 60, 0.1); display: flex; align-items: center; gap: 4px;
}
.stats button.on { outline: 2.5px solid var(--ink); }
.stats b { font-size: 14px; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }
.dot.new { background: var(--new); }
.dot.doing { background: var(--doing); }
.dot.done { background: var(--done); }

.fab-col {
  position: fixed; right: 12px; z-index: 18; top: calc(110px + env(safe-area-inset-top, 0px));
  display: flex; flex-direction: column; gap: 10px; transition: opacity 0.2s;
}

.report-btn {
  position: fixed; z-index: 25; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--sheet-h, 150px) + var(--vvb, 0px) + 14px);
  padding: 14px 26px; font-size: 20px; letter-spacing: 2px; border-radius: 999px;
  background: linear-gradient(180deg, #ffe07a, #ffc53d); color: #6a4a12;
  box-shadow: 0 6px 0 #d99a1c, 0 14px 30px rgba(160, 110, 20, 0.35);
  transition: bottom 0.35s cubic-bezier(.2,.9,.3,1.2), transform 0.15s, opacity 0.2s;
  white-space: nowrap;
}
.report-btn:active { transform: translateX(-50%) translateY(4px); box-shadow: 0 2px 0 #d99a1c; }
.report-btn .wiggle { display: inline-block; animation: wiggle 2.4s ease-in-out infinite; }
@keyframes wiggle { 0%, 70%, 100% { transform: rotate(0); } 75% { transform: rotate(-18deg); } 85% { transform: rotate(14deg); } 92% { transform: rotate(-8deg); } }
body.tall .stats, body.tall .fab-col { opacity: 0; pointer-events: none; }
/* 畫面很矮（工具列展開、橫放）時，右側按鈕改成橫排，不會被面板蓋住 */
body.fab-row .fab-col { flex-direction: row; }
/* 通報選位置時面板裡已有「目前位置 / 搜尋」，矮螢幕就把右側按鈕收起來，讓出大頭針的位置 */
body.fab-row.wizard .fab-col, body.fab-row.wizard .stats { opacity: 0; pointer-events: none; }
body.wizard .report-btn, body.detail .report-btn { opacity: 0; pointer-events: none; }

/* ---------- markers ---------- */
#markers, #labels { position: fixed; inset: 0; pointer-events: none; z-index: 5; overflow: hidden; }
#markers { z-index: 6; }
.pin {
  position: absolute; left: 0; top: 0; pointer-events: auto; will-change: transform;
  width: 0; height: 0;
}
/* 縮放套在子元素上（各自的中心），不是套在負責定位的 .pin 本身 */
.pin > * { transition: opacity 0.25s ease, scale 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.pin.gone { pointer-events: none; }
.pin.gone > * { opacity: 0; scale: 0.2; transition: opacity 0.18s ease, scale 0.2s ease-in; }
.pin .bub {
  position: absolute; left: -22px; top: -56px; width: 44px; height: 44px;
  border-radius: 50% 50% 50% 6px; transform: rotate(-45deg);
  background: var(--c, var(--new)); box-shadow: 0 4px 0 rgba(0, 0, 0, 0.12), 0 6px 14px rgba(0, 0, 0, 0.2);
  display: grid; place-items: center; border: 3px solid #fff;
  animation: bob 2.6s ease-in-out infinite; animation-delay: var(--d, 0s);
}
.pin .bub span { transform: rotate(45deg); font-size: 21px; line-height: 1; }
.pin .shadow { position: absolute; left: -9px; top: -4px; width: 18px; height: 8px; border-radius: 50%; background: rgba(40, 60, 40, 0.28); }
.pin .votes {
  position: absolute; left: 10px; top: -66px; min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 11px; background: #fff; color: var(--ink); font-size: 12px; font-weight: bold;
  display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.pin.new .bub { --c: var(--new); }
.pin.doing .bub { --c: var(--doing); }
.pin.done .bub { --c: var(--done); opacity: 0.85; }
.pin.sel .bub { left: -28px; top: -70px; width: 56px; height: 56px; animation: jump 0.9s ease-in-out infinite; }
.pin.sel .bub span { font-size: 27px; }
.pin.cluster .bub { background: #fff; border-color: var(--leaf); border-width: 4px; border-radius: 50%; transform: none; left: -24px; top: -48px; width: 48px; height: 48px; }
.pin.cluster .bub span { transform: none; font-size: 15px; font-weight: bold; color: var(--leaf-dark); display: flex; flex-direction: column; align-items: center; line-height: 1.05; }
.pin.cluster .bub span em { font-style: normal; font-size: 17px; }
.pin.cluster .shadow { top: -2px; }
.pin.fresh .bub { animation: drop 0.9s cubic-bezier(.3,1.6,.5,1) both, bob 2.6s ease-in-out 0.9s infinite; }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
@keyframes jump { 0%, 100% { translate: 0 0; } 40% { translate: 0 -14px; } 60% { translate: 0 -12px; } }
@keyframes drop { 0% { translate: 0 -260px; opacity: 0; } 60% { opacity: 1; } 100% { translate: 0 0; } }
body.wizard #markers .pin:not(.sel) { opacity: 0.35; }
body.wizard #markers .pin { pointer-events: none; }

/* 外層負責定位（每幀更新 transform），內層負責縮放動畫 → 每個標籤以自己的中心為支點 */
.maplbl { position: absolute; left: 0; top: 0; will-change: transform; }
.lbl-street, .lbl-poi {
  display: block; white-space: nowrap; transform-origin: 50% 50%;
  font-size: 12.5px; color: #5a4634; padding: 2px 8px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.82); box-shadow: 0 2px 0 rgba(120, 90, 60, 0.12);
}
.lbl-street.major { font-size: 14px; background: #fff7dd; font-weight: bold; }
/* 出現 / 消失都用「啵」的縮放＋淡入淡出，不會突然跳出來 */
.lbl-street, .lbl-poi { transition: opacity 0.26s ease, scale 0.38s cubic-bezier(0.34, 1.56, 0.64, 1); }
.lbl-street.off, .lbl-poi.off { opacity: 0; scale: 0.35; transition: opacity 0.2s ease, scale 0.22s ease-in; }
.lbl-poi { font-size: 12px; background: rgba(255, 255, 255, 0.92); }
body.night .lbl-street, body.night .lbl-poi { background: rgba(40, 44, 90, 0.85); color: #fff3cf; }
body.night .lbl-street.major { background: rgba(70, 60, 120, 0.9); }

/* ---------- pick pin ---------- */
#pickPin {
  position: fixed; z-index: 15; left: calc(50% + var(--ox, 0px)); top: calc(50% - var(--oy, 0px));
  width: 0; height: 0; pointer-events: none;
}
.pick-needle { position: absolute; left: -26px; top: -64px; width: 52px; height: 64px; display: grid; place-items: end center; font-size: 52px; line-height: 1; filter: drop-shadow(0 6px 4px rgba(0,0,0,.25)); transition: transform 0.15s; }
#pickPin.lift .pick-needle { transform: translateY(-14px); }
.pick-shadow { position: absolute; left: -10px; top: -5px; width: 20px; height: 10px; border-radius: 50%; background: rgba(0, 0, 0, 0.3); }
.pick-bubble {
  position: absolute; bottom: 74px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  background: var(--ink); color: #fff; font-size: 13px; padding: 6px 12px; border-radius: 999px;
}
.pick-bubble.warn { background: #e0614f; }

/* ---------- panel ---------- */
.panel {
  position: fixed; z-index: 30; left: 0; right: 0; bottom: 0;
  height: var(--sheet-h, 150px); padding-bottom: var(--safe-b);
  bottom: var(--vvb, 0px); max-height: calc(var(--vvh, 100dvh) - 8px);
  background: var(--cream); border-radius: 26px 26px 0 0;
  box-shadow: 0 -6px 30px rgba(80, 60, 40, 0.18);
  display: flex; flex-direction: column;
  transition: height 0.35s cubic-bezier(.2,.9,.3,1.1);
  touch-action: pan-y;
}
.panel.dragging { transition: none; }
.grab { height: 26px; display: grid; place-items: center; flex: none; cursor: grab; touch-action: none; }
.grab span { width: 46px; height: 6px; border-radius: 3px; background: #e2d3bd; }
.view { flex: 1; min-height: 0; min-width: 0; overflow-y: auto; overflow-x: hidden; padding: 0 16px 20px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
#listView { display: flex; flex-direction: column; }
/* 清單內的每一列都不得撐開容器（長標題、橫向籤條只能在自己的框裡捲動） */
#listView > * { min-width: 0; max-width: 100%; }
.panel[data-snap='peek'] #listView { overflow: hidden; }
.list-head { display: flex; justify-content: space-between; align-items: center; touch-action: none; }
.list-head h2 { margin: 0; font-size: 19px; }
.count { display: inline-block; min-width: 26px; padding: 0 8px; border-radius: 13px; background: var(--leaf); color: #fff; font-size: 14px; text-align: center; vertical-align: 2px; }
select { border: 2px solid var(--line); background: #fff; border-radius: 999px; padding: 5px 12px; font-size: 14px; }

.chips { display: flex; gap: 6px; margin-top: 10px; }
.chips.scroll { overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; flex: none; min-width: 0; cursor: grab; overscroll-behavior-x: contain; }
.chips.scroll .chip { flex: none; }
.chips.scroll.dragging { cursor: grabbing; }
.chips.scroll.dragging .chip { pointer-events: none; }
.chips.scroll::-webkit-scrollbar { display: none; }
.chips.wrap { flex-wrap: wrap; }
.chip {
  flex: none; padding: 6px 12px; border-radius: 999px; background: #fff; border: 2px solid var(--line);
  font-size: 14px; display: inline-flex; gap: 5px; align-items: center; transition: all 0.15s;
}
.chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }

.cards { list-style: none; padding: 0; margin: 12px 0 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.card {
  display: flex; gap: 12px; padding: 12px; background: #fff; border-radius: 18px;
  box-shadow: 0 3px 0 rgba(120, 90, 60, 0.08); cursor: pointer; align-items: center;
  border: 2px solid transparent; transition: border-color 0.15s, transform 0.15s;
}
.card:active { transform: scale(0.98); }
.card.sel { border-color: var(--sun); }
.card .ico { flex: none; width: 50px; height: 50px; border-radius: 16px; display: grid; place-items: center; font-size: 26px; background: #fff3e6; }
.card .meta { flex: 1; min-width: 0; }
.card .meta b { display: block; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card .meta small { display: block; color: var(--ink-soft); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.card .thumb { flex: none; width: 54px; height: 54px; border-radius: 12px; object-fit: cover; }
.badges { display: flex; gap: 6px; margin-top: 5px; flex-wrap: wrap; }
.st { font-size: 11.5px; padding: 1px 8px; border-radius: 999px; color: #fff; }
.st.new { background: var(--new); }
.st.doing { background: var(--doing); color: #6a4a12; }
.st.done { background: var(--done); }
.tag { font-size: 11.5px; padding: 1px 8px; border-radius: 999px; background: #f4ece0; color: var(--ink-soft); }
.empty { text-align: center; color: var(--ink-soft); padding: 26px 10px; }
.empty .big { font-size: 46px; }

/* ---------- wizard ---------- */
.wiz-head { display: flex; justify-content: space-between; align-items: center; height: 36px; position: sticky; top: 0; background: var(--cream); z-index: 2; }
.ghost { padding: 6px 4px; color: var(--ink-soft); font-size: 15px; }
.steps { display: flex; gap: 6px; }
.steps i { width: 26px; height: 7px; border-radius: 4px; background: #eadcc6; }
.steps i.on { background: var(--leaf); }
.wiz-step h2 { margin: 6px 0 12px; font-size: 21px; }
.place-box { display: flex; gap: 10px; align-items: center; background: #fff; border-radius: 16px; padding: 12px; border: 2px dashed #f0d9b5; }
.place-ico { font-size: 28px; }
.place-box b { display: block; font-size: 16px; }
.place-box small { color: var(--ink-soft); font-size: 12.5px; }
.row { display: flex; gap: 8px; margin: 10px 0; }
.soft { flex: 1; padding: 11px 8px; border-radius: 14px; background: #fff; border: 2px solid var(--line); font-size: 14.5px; }
.primary {
  display: block; width: 100%; padding: 15px; margin-top: 8px; border-radius: 18px; font-size: 18px; letter-spacing: 1px;
  background: var(--leaf); color: #fff; box-shadow: 0 5px 0 var(--leaf-dark); transition: transform 0.1s, box-shadow 0.1s;
}
.primary:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--leaf-dark); }
.primary:disabled { opacity: 0.6; }
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cat {
  background: #fff; border-radius: 18px; padding: 12px 4px 10px; display: flex; flex-direction: column; align-items: center; gap: 4px;
  box-shadow: 0 4px 0 rgba(120, 90, 60, 0.1); border: 2px solid transparent; font-size: 14px; transition: transform 0.12s;
}
.cat span { font-size: 32px; width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; background: var(--bg, #fff3e6); }
.cat:active { transform: scale(0.94); }
.cat.on { border-color: var(--leaf); }
.lbl { display: block; font-size: 13.5px; color: var(--ink-soft); margin: 14px 0 6px; }
textarea, input:not([type]), input[type='text'], input[type='password'] {
  width: 100%; border: 2px solid var(--line); border-radius: 14px; padding: 10px 12px; background: #fff; font-size: 16px; resize: vertical;
}
textarea:focus, input:focus { outline: none; border-color: var(--sun); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.two .lbl { font-size: 12px; }
.photo-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.photo-btn small { color: var(--ink-soft); font-size: 12px; margin-left: 2px; }
.photo-btn { padding: 11px 14px; background: #fff; border: 2px dashed #e5cfa9; border-radius: 14px; cursor: pointer; font-size: 15px; }
.photo-preview { position: relative; }
.photo-preview img { width: 64px; height: 64px; object-fit: cover; border-radius: 12px; display: block; }
.photo-preview button { position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 12px; }
.mini-place { font-size: 13.5px; color: var(--ink-soft); margin-top: -6px; }
.fine { font-size: 12px; color: var(--ink-soft); line-height: 1.6; }

/* ---------- detail ---------- */
.d-hero { display: flex; gap: 12px; align-items: center; margin-top: 4px; }
.d-hero .ico { width: 62px; height: 62px; border-radius: 20px; display: grid; place-items: center; font-size: 34px; background: #fff3e6; flex: none; }
.d-hero h2 { margin: 0; font-size: 21px; }
.d-hero small { color: var(--ink-soft); }
.d-place { margin: 12px 0 0; padding: 10px 12px; border-radius: 14px; background: #fff; font-size: 14.5px; cursor: pointer; }
.d-photo { width: 100%; max-height: 300px; object-fit: cover; border-radius: 18px; margin-top: 12px; display: block; cursor: zoom-in; }
.d-desc { white-space: pre-wrap; line-height: 1.7; font-size: 15.5px; margin: 12px 0 0; }
.progress { display: flex; align-items: flex-start; margin: 16px 0 6px; }
.progress .s { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; color: #c4b39d; width: 64px; }
.progress .s i { width: 28px; height: 28px; border-radius: 50%; background: #efe4d3; display: grid; place-items: center; font-style: normal; font-size: 14px; }
.progress .bar { flex: 1; height: 5px; border-radius: 3px; background: #efe4d3; margin-top: 11.5px; }
.progress .s time { font-size: 11px; color: var(--ink-soft); min-height: 14px; white-space: nowrap; }
.progress .s.on { color: var(--ink); }
.progress .s.on i { background: var(--leaf); color: #fff; }
.progress .bar.on { background: var(--leaf); }
.reply { margin-top: 12px; padding: 12px 14px; border-radius: 16px; background: #eaf8e4; border: 2px solid #c8ecbc; }
.reply b { color: var(--leaf-dark); }
.reply p { margin: 6px 0 0; white-space: pre-wrap; line-height: 1.6; }
.d-actions { display: flex; gap: 10px; margin-top: 14px; }
.metoo {
  flex: 1; padding: 13px; border-radius: 16px; font-size: 17px; background: #fff; border: 2.5px solid var(--sun);
  box-shadow: 0 4px 0 #f1c34a; transition: transform 0.1s;
}
.metoo.on { background: var(--sun); }
.metoo:active { transform: translateY(3px); box-shadow: 0 1px 0 #f1c34a; }
.metoo .n { font-weight: bold; }
.comments { margin-top: 18px; }
.comments h3 { font-size: 16px; margin: 0 0 8px; }
.cmt { background: #fff; border-radius: 14px; padding: 9px 12px; margin-bottom: 8px; font-size: 14.5px; line-height: 1.55; }
.cmt.official { background: #eaf8e4; }
.cmt small { display: block; color: var(--ink-soft); font-size: 12px; }
.cmt-form { display: flex; gap: 8px; margin-top: 6px; }
.cmt-form input { flex: 1; }
.cmt-form button { flex: none; padding: 0 16px; border-radius: 14px; background: var(--leaf); color: #fff; }

/* ---------- overlays ---------- */
.overlay { position: fixed; inset: 0; top: var(--vvt, 0px); bottom: auto; height: var(--vvh, 100dvh); z-index: 60; background: rgba(60, 45, 30, 0.35); display: flex; justify-content: center; align-items: flex-start; padding: calc(14px + env(safe-area-inset-top, 0px)) 12px 12px; animation: fade 0.2s; }
@keyframes fade { from { opacity: 0; } }
.search-card { width: 100%; max-width: 560px; background: var(--cream); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; max-height: calc(var(--vvh, 100dvh) - 40px); }
.search-bar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 2px solid var(--line); }
.search-bar input { border: 0; background: transparent; padding: 6px 0; }
#searchResults { list-style: none; margin: 0; padding: 6px; overflow-y: auto; }
#searchResults li { padding: 10px 12px; border-radius: 12px; cursor: pointer; display: flex; gap: 10px; align-items: center; }
#searchResults li:hover, #searchResults li.on { background: #fff; }
#searchResults li small { color: var(--ink-soft); margin-left: auto; font-size: 12px; }
.modal { position: relative; width: 100%; max-width: 520px; max-height: calc(var(--vvh, 100dvh) - 28px - env(safe-area-inset-top, 0px)); overflow-y: auto; overscroll-behavior: contain; background: var(--cream); border-radius: 26px; padding: 22px 22px 18px; box-shadow: var(--shadow); line-height: 1.7; align-self: center; }
.modal h2 { margin: 6px 0 8px; text-align: center; }
.modal h3 { margin: 16px 0 4px; font-size: 16px; color: var(--leaf-dark); }
.modal p { margin: 6px 0; font-size: 15px; }
.modal-hero { font-size: 54px; text-align: center; }
.howto { padding-left: 20px; font-size: 15px; }
.close { position: absolute; z-index: 2; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; background: #fff; }

#toast {
  position: fixed; z-index: 90; left: 50%; top: calc(18px + env(safe-area-inset-top, 0px)); transform: translate(-50%, -140%);
  background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 999px; font-size: 15px; max-width: 92vw;
  transition: transform 0.35s cubic-bezier(.2,.9,.3,1.3); text-align: center;
}
#toast.show { transform: translate(-50%, 0); }
#confetti { position: fixed; inset: 0; pointer-events: none; z-index: 95; overflow: hidden; }
#confetti i { position: absolute; font-style: normal; font-size: 26px; animation: fall 1.8s cubic-bezier(.2,.6,.4,1) forwards; }
@keyframes fall { from { transform: translate(0, 0) rotate(0); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) rotate(var(--r)); opacity: 0; } }

.attribution { position: fixed; z-index: 4; right: 6px; bottom: calc(var(--sheet-h, 150px) + 2px); font-size: 10px; color: rgba(60, 60, 60, 0.7); background: rgba(255,255,255,0.6); padding: 1px 6px; border-radius: 6px; }

.lightbox { position: fixed; inset: 0; z-index: 99; background: rgba(0,0,0,.85); display: grid; place-items: center; }
.lightbox img { max-width: 96vw; max-height: calc(var(--vvh, 100dvh) * 0.86); border-radius: 12px; }

/* ---------- desktop ---------- */
@media (min-width: 900px) {
  .panel {
    left: 16px; right: auto; top: 140px; bottom: 16px; width: var(--panel-w); height: auto !important;
    border-radius: 26px; box-shadow: var(--shadow); padding-top: 10px;
  }
  .grab { display: none; }
  .panel[data-snap='peek'] #listView { overflow-y: auto; }
  .stats { top: 76px; left: 16px; }
  .topbar { left: 16px; right: 16px; }
  .report-btn { bottom: 34px !important; left: calc(50% + (var(--panel-w) + 16px) / 2); }
  .attribution { bottom: 4px !important; }
  .fab-col { top: 90px; right: 16px; }
  .brand-text strong { font-size: 19px; }
  .cards { gap: 12px; }
}
@media (max-width: 380px) {
  .brand-text strong { font-size: 15px; }
  .stats button { padding: 3px 7px; font-size: 11.5px; }
  .cat-grid { gap: 7px; }
  .cat span { width: 46px; height: 46px; font-size: 27px; }
}

/* ---------- 分頁籤 ---------- */
.tabs { display: flex; gap: 6px; padding: 0 16px 4px; flex: none; touch-action: none; }
.tab {
  flex: 1; padding: 9px 6px; border-radius: 16px; font-size: 15.5px; background: #f3e9d9; color: var(--ink-soft);
  display: flex; align-items: center; justify-content: center; gap: 6px; transition: all 0.15s; white-space: nowrap;
}
.tab.on { background: #fff; color: var(--ink); box-shadow: 0 3px 0 rgba(120, 90, 60, 0.12); font-weight: bold; }
.badge { background: var(--coral); color: #fff; font-size: 11px; padding: 1px 7px; border-radius: 999px; animation: wiggle 2.4s ease-in-out infinite; }
body.wizard .tabs, body.detail .tabs { display: none; }
#statusChips { margin-top: 8px; align-items: center; }
#statusChips select { flex: none; }

/* ---------- 里長的話 ---------- */
.leader-card {
  position: relative; display: flex; align-items: flex-end; min-height: 190px; padding: 16px 0 0 16px; margin-top: 14px; border-radius: 22px; overflow: hidden;
  background: radial-gradient(circle at 78% 38%, #fff6d8 0 28%, transparent 29%), linear-gradient(135deg, #ffd9b8, #ffc4d6);
  box-shadow: 0 3px 0 rgba(120, 90, 60, 0.1);
}
.leader-meta { position: relative; z-index: 1; flex: 1; min-width: 0; padding-bottom: 14px; }
.leader-meta small { display: block; color: #b25a1c; font-size: 12.5px; }
.leader-meta b { display: block; font-size: 26px; letter-spacing: 3px; line-height: 1.2; }
.leader-slogan { margin: 4px 0 10px; font-size: 13.5px; line-height: 1.5; color: #7a4a2a; }
.leader-photo { position: relative; flex: none; width: 42%; max-width: 170px; height: auto; align-self: flex-end; margin-bottom: -2px; filter: drop-shadow(0 6px 10px rgba(150, 80, 40, 0.25)); }
.leader-loc { display: block; margin-top: 8px; padding: 0; font-size: 12.5px; color: var(--ink); text-decoration: underline dotted; text-align: left; }
/* LINE 官方帳號按鈕（LINE 綠） */
.line-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 14px; border-radius: 999px;
  background: #06c755; color: #fff; font-size: 14px; font-weight: bold; text-decoration: none;
  box-shadow: 0 3px 0 #04a045; white-space: nowrap;
}
.line-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #04a045; }
.line-btn.wide { display: flex; width: 100%; white-space: normal; text-align: center; margin: 14px 0 4px; padding: 11px 14px; line-height: 1.4; }
/* 說明視窗上方的形象照 */
.about-hero {
  display: flex; align-items: flex-end; gap: 4px; margin: -22px -22px 12px; padding: 14px 18px 0; border-radius: 26px 26px 0 0; overflow: hidden;
  background: radial-gradient(circle at 30% 40%, #fff6d8 0 30%, transparent 31%), linear-gradient(135deg, #ffd9b8, #ffc4d6);
}
.about-hero img { width: 132px; height: auto; flex: none; filter: drop-shadow(0 6px 10px rgba(150, 80, 40, 0.25)); }
.about-hero div { padding-bottom: 18px; }
.about-hero small { display: block; color: #b25a1c; font-size: 12.5px; }
.about-hero b { display: block; font-size: 28px; letter-spacing: 4px; line-height: 1.2; }
.about-hero span { font-size: 14px; color: #7a4a2a; }
.posts { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 12px; }
.post { background: #fff; border-radius: 20px; padding: 14px 16px; box-shadow: 0 3px 0 rgba(120, 90, 60, 0.08); position: relative; }
.post.pinned { border: 2.5px solid #ffc93c; }
.post .pin-tag { position: absolute; top: -10px; right: 14px; background: #ffc93c; color: #6a4a12; font-size: 12px; padding: 2px 10px; border-radius: 999px; }
.post small { color: var(--ink-soft); font-size: 12.5px; }
.post h3 { margin: 4px 0 6px; font-size: 18px; }
.post .body { white-space: pre-wrap; line-height: 1.75; font-size: 15.5px; margin: 0; }
.post .body.clamp { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.post .more { color: var(--leaf-dark); font-size: 14px; padding: 4px 0 0; }
.post img { width: 100%; max-height: 320px; object-fit: cover; border-radius: 14px; margin-top: 10px; cursor: zoom-in; display: block; }
.post a { color: var(--leaf-dark); word-break: break-all; }

/* ---------- 服務處地標 ---------- */
.hq-pin {
  position: absolute; left: 0; top: 0; pointer-events: auto; cursor: pointer; will-change: transform;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.hq-pin .hq-name {
  background: linear-gradient(180deg, #ff9a4d, #ff7a2f); color: #fff; font-weight: bold; font-size: 13.5px; white-space: nowrap;
  padding: 6px 12px; border-radius: 999px; border: 2.5px solid #fff; box-shadow: 0 4px 0 #d9601c, 0 8px 18px rgba(200, 90, 20, 0.35);
  animation: hqbob 3s ease-in-out infinite;
}
.hq-pin .hq-news {
  max-width: 220px; background: #fff; color: var(--ink); font-size: 12.5px; padding: 5px 11px; border-radius: 14px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hq-pin .hq-news { transition: opacity 0.25s ease, scale 0.38s cubic-bezier(0.34, 1.56, 0.64, 1); transform-origin: 50% 100%; }
.hq-pin .hq-news:empty { display: none; }
.hq-pin.far .hq-news { opacity: 0; scale: 0.3; }
.hq-pin .hq-name { transition: font-size 0.25s, padding 0.25s; }
.hq-pin.far .hq-name { font-size: 12px; padding: 4px 10px; }
@keyframes hqbob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
body.wizard .hq-pin { opacity: 0.4; pointer-events: none; }
.tab { min-width: 0; overflow: hidden; }
@media (max-width: 420px) {
  .tabs { padding: 0 12px 4px; }
  .tab { font-size: 14px; padding: 8px 4px; gap: 4px; }
  .tab .count { min-width: 20px; padding: 0 6px; font-size: 12px; }
}

/* ---------- 照片格 ---------- */
.gallery { display: grid; gap: 6px; margin-top: 12px; }
.gallery.n1 { grid-template-columns: 1fr; }
.gallery.n2, .gallery.n3 { grid-template-columns: 1fr 1fr; }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; display: block; cursor: zoom-in; background: #f3e9d9; }
.gallery.n1 img { aspect-ratio: auto; max-height: 320px; }
.gallery.n3 img:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.post-gallery { margin-top: 10px; }

.lightbox .lb-prev, .lightbox .lb-next {
  position: absolute; top: 50%; translate: 0 -50%; width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.85); color: var(--ink); font-size: 30px; line-height: 1;
}
.lightbox .lb-prev { left: 14px; }
.lightbox .lb-next { right: 14px; }
.lightbox .lb-count { position: absolute; bottom: 18px; left: 50%; translate: -50% 0; color: #fff; font-size: 14px; }

/* ---------- 即時通知 ---------- */
#notices {
  position: fixed; z-index: 85; top: calc(14px + env(safe-area-inset-top, 0px)); right: 120px;
  display: flex; flex-direction: column; gap: 8px; width: min(340px, calc(100vw - 24px)); pointer-events: none;
}
.notice {
  pointer-events: auto; display: flex; align-items: center; gap: 10px; text-align: left; width: 100%;
  background: #fff; border-radius: 18px; padding: 10px 12px; box-shadow: var(--shadow);
  border-left: 6px solid var(--new); animation: noticeIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.notice.st-doing { border-left-color: var(--doing); }
.notice.st-done { border-left-color: var(--done); }
.notice.out { animation: noticeOut 0.3s ease-in forwards; }
.notice .ico { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 22px; }
.notice .txt { flex: 1; min-width: 0; }
.notice .txt b { display: block; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notice .txt small { color: var(--ink-soft); font-size: 13px; }
.notice .go { flex: none; color: var(--leaf-dark); font-size: 13px; }
@keyframes noticeIn { from { opacity: 0; transform: translateX(40px) scale(0.85); } }
@keyframes noticeOut { to { opacity: 0; transform: translateX(40px) scale(0.85); } }
@media (max-width: 899px) { #notices { left: 12px; right: 12px; width: auto; top: calc(108px + env(safe-area-inset-top, 0px)); } }

/* 狀態更新時大頭針跳一下 */
.pin.bump > .bub { animation: bumpPin 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 2, bob 2.6s ease-in-out 1.8s infinite; }
@keyframes bumpPin { 0%, 100% { scale: 1; } 40% { scale: 1.45; } }

/* 手機窄螢幕：右上角放不下三顆按鈕 → 收起「❔」（點左上角標誌一樣能開說明） */
@media (max-width: 440px) { #aboutBtn { display: none; } }