/* 版面斷點：手機版＝寬 ≤767，或 ≤900 的直向（iPhone Duo 外螢幕 466×678、內螢幕直拿 626×890）；
   桌面版（側邊面板）＝寬 ≥901，或 ≥768 且高 ≥500 的橫向（iPhone Duo 內螢幕橫拿 890×626、平板橫向）；一般手機橫拿（高不到 500）維持手機版 */
/* 潛圖品牌色（沿用原本的藍色系：#2F80ED 主藍、#6EC6F3 天藍、#153F82／#1C355E 深藍、#F0F9FF 淡藍、#FF7A7A 珊瑚）× Apple 式互動 */
:root {
  --bg: #0E1F3D;
  --surface: #1C355E;
  --band: #24426F;
  --blue: #2F80ED;
  --link: #7AB6FF;       /* 文字連結：深底與卡片的藍灰底對比都 ≥ 5 */
  --blue-fill: #1F6FDB;  /* 白字按鈕底：對比 4.8 */
  --red-text: #FF9494;   /* 紅字（緊急醫療、刪除）：對比 ≥ 4.5 */
  --coral-text: #FF7A7A; /* 倒數珊瑚紅字 */
  --green-text: #2FB36B; /* 去過的潛點勾勾 */
  --on-blue: #FFFFFF;
  --sky: #6EC6F3;
  --navy: #153F82;
  --coral: #FF7A7A;
  --text: #FFFFFF;
  --text-2: #E3EDF9;
  --muted: #A9B9D1;
  --line: rgba(255, 255, 255, 0.12);
  --red: #FF4D4D;
  --orange: #E8A13A;
  --green: #2FB36B;
  --glass: rgba(14, 31, 61, 0.80);
  --sheet: rgba(14, 31, 61, 0.95);
  --soft: rgba(255, 255, 255, 0.06);
  --pill-hover: #2B4C80;
  --grab: rgba(255, 255, 255, 0.35);
  --accent-2: #6EC6F3;
  --input: #132A4F;
  --radius-lg: 20px;     /* 面板、底部表單（Apple card-lg） */
  --radius: 18px;        /* 卡片 */
  --radius-sm: 12px;     /* 卡片內的區塊、輸入框、按鈕磚 */
  --radius-badge: 8px;   /* 標籤、小徽章 */
  --pill: 980px;         /* 膠囊按鈕 */
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang TC", "Hiragino Sans CNS", "Microsoft JhengHei", "Noto Sans TC", "Helvetica Neue", Arial, sans-serif;
  --font-lat: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Rubik, Arial, sans-serif;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-l: env(safe-area-inset-left, 0px);   /* 橫拿時動態島在側邊（iPhone Duo 內螢幕、一般 iPhone） */
  --safe-r: env(safe-area-inset-right, 0px);
}
/* 淺色（日間）模式：data-theme="light"，或跟隨系統（data-theme="auto" 且系統為淺色） */
:root[data-theme="light"] {
  --bg: #F0F9FF; --surface: #FFFFFF; --band: #E1EEFA; --text: #1C355E; --text-2: #153F82; --muted: #5B6B84;
  --line: rgba(28, 53, 94, 0.12); --glass: rgba(240, 249, 255, 0.88); --sheet: rgba(240, 249, 255, 0.97);
  --soft: rgba(28, 53, 94, 0.05); --pill-hover: #D5E7F8; --grab: rgba(28, 53, 94, 0.28); --accent-2: #153F82; --input: #FFFFFF; --link: #1A66CC; --red-text: #C62828; --green-text: #177A42; --coral-text: #C8363B;
  --shadow: 0 10px 30px rgba(21, 63, 130, 0.18);
}
@media (prefers-color-scheme: light) {
  :root[data-theme="auto"] {
    --bg: #F0F9FF; --surface: #FFFFFF; --band: #E1EEFA; --text: #1C355E; --text-2: #153F82; --muted: #5B6B84;
  --line: rgba(28, 53, 94, 0.12); --glass: rgba(240, 249, 255, 0.88); --sheet: rgba(240, 249, 255, 0.97);
  --soft: rgba(28, 53, 94, 0.05); --pill-hover: #D5E7F8; --grab: rgba(28, 53, 94, 0.28); --accent-2: #153F82; --input: #FFFFFF; --link: #1A66CC; --red-text: #C62828; --green-text: #177A42; --coral-text: #C8363B;
  --shadow: 0 10px 30px rgba(21, 63, 130, 0.18);
  }
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--text); font-family: var(--font); }
html { min-height: 100lvh; }
body { -webkit-font-smoothing: antialiased; }
a { color: var(--link); }
#map { position: fixed; inset: 0; background: #0d2433; }

.glass { background: var(--glass); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid var(--line); box-shadow: var(--shadow); }

/* ---------- 面板 ---------- */
#panel { position: fixed; z-index: 1000; left: calc(16px + var(--safe-l)); top: calc(16px + var(--safe-t)); bottom: 16px; width: 420px;
  border-radius: var(--radius-lg); display: flex; flex-direction: column; overflow: hidden; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
#panel.collapsed { transform: translateX(calc(-100% - 24px)); }
.grabber { display: none; }
.scroll { flex: 1; overflow-y: auto; padding: 4px 18px 18px; overscroll-behavior: contain; }

.brand { display: flex; justify-content: space-between; align-items: flex-start; padding: 18px 18px 12px; }
.xxx { font-family: var(--font-lat); font-weight: 700; font-size: 13px; letter-spacing: -1px; color: var(--text); opacity: .9; }
h1 { font-size: 26px; font-weight: 800; letter-spacing: .04em; margin: 2px 0 0; line-height: 1.2; white-space: nowrap; }
.rule { width: 44px; height: 4px; border-radius: 2px; background: var(--blue-fill); margin-top: 8px; }
.logo { display: flex; align-items: center; gap: 8px; }
.logo .logo-light { display: none; }
:root[data-theme="light"] .logo .logo-dark { display: none; }
:root[data-theme="light"] .logo .logo-light { display: block; }
@media (prefers-color-scheme: light) { :root[data-theme="auto"] .logo .logo-dark { display: none; } :root[data-theme="auto"] .logo .logo-light { display: block; } }
/* App 標誌：圓角 App 圖示（深色模式用深色版）＋「潛圖 DiveMap」字標；標頭、設定「關於與說明」、登入頁共用 */
.dm-mark { position: relative; flex: none; display: block; width: 36px; height: 36px; border-radius: 22.5%; overflow: hidden;
  box-shadow: 0 0 0 .5px rgba(255, 255, 255, .16), 0 2px 8px rgba(0, 0, 0, .3); }
.dm-mark img { display: block; width: 100% !important; height: 100% !important; }
.dm-mark .logo-light { display: none; }
:root[data-theme="light"] .dm-mark .logo-dark { display: none; }
:root[data-theme="light"] .dm-mark .logo-light { display: block; }
:root[data-theme="light"] .dm-mark { box-shadow: 0 0 0 .5px rgba(21, 63, 130, .14), 0 2px 6px rgba(21, 63, 130, .2); }
@media (prefers-color-scheme: light) { :root[data-theme="auto"] .dm-mark .logo-dark { display: none; } :root[data-theme="auto"] .dm-mark .logo-light { display: block; }
  :root[data-theme="auto"] .dm-mark { box-shadow: 0 0 0 .5px rgba(21, 63, 130, .14), 0 2px 6px rgba(21, 63, 130, .2); } }
.dm-word { display: inline-flex; align-items: baseline; gap: .3em; white-space: nowrap; font-size: 20px; line-height: 1.1; color: var(--text); }
.dm-word b { font-weight: 800; letter-spacing: .04em; }
.dm-word > span { font-family: var(--font-lat); font-weight: 600; font-size: .86em; letter-spacing: -.005em; color: var(--text-2); }
.logo .dm-mark + .dm-word { margin-left: 2px; }
/* 設定 → 關於與說明 最下面：App 名稱與提供者（唯一一處提到俱樂部的地方，點了開官網） */
.about-credit { display: flex; align-items: center; gap: 12px; margin: 22px auto 6px; padding: 10px 14px; width: fit-content; max-width: 100%; border-radius: 14px; text-decoration: none; color: var(--text); }
.about-credit:hover { background: var(--surface); }
.about-credit .dm-mark { width: 40px; height: 40px; }
.about-credit > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.about-credit b { font-size: 15px; font-weight: 700; letter-spacing: .04em; }
.about-credit small { font-size: 12px; color: var(--muted); letter-spacing: .02em; }
.logo img { width: 46px; height: auto; }

.seg { display: flex; margin: 0 18px 12px; padding: 3px; background: var(--surface); border-radius: var(--radius-sm); }
.seg button { flex: 1; border: 0; background: none; color: var(--text-2); font: 500 14px var(--font); padding: 7px 0; border-radius: var(--radius-badge); cursor: pointer; transition: background .2s, color .2s; }
.seg button.active { background: var(--blue-fill); color: var(--on-blue); font-weight: 700; }

.tab { display: none; }
.tab.active { display: block; animation: fade .3s ease-out; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

h2 { font-size: 20px; font-weight: 800; letter-spacing: .04em; margin: 2px 0 0; line-height: 1.3; }
.eyebrow { font-size: 12px; color: var(--link); font-weight: 700; letter-spacing: .04em; font-family: var(--font-lat), var(--font); }
.subhead { font-size: 15px; font-weight: 800; letter-spacing: .04em; margin: 20px 0 6px; }
.hint { color: var(--muted); font-size: 13px; line-height: 1.55; margin: 6px 0; }
.small { font-size: 12px; }
.credit a { color: var(--link); }
.live { margin: 12px 0 4px; }
.live-poster { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; border-radius: var(--radius-sm); overflow: hidden; background: var(--band); cursor: pointer; }
.live-poster img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .85; }
.live-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: rgba(14,31,61,.85); color: #fff; border-radius: var(--pill); padding: 8px 16px; font: 500 14px var(--font); white-space: nowrap; }
.live-dot { color: var(--red); }
.live-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-sm); overflow: hidden; background: #000; }
.live-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.live .hint a { color: var(--link); }
/* 直播縮圖：離線占位（圖示＋文字）；有網路但縮圖載入失敗只藏破圖 */
.live-off { display: none; }
.live-poster.off { cursor: default; }
.live-poster.off img, .live-poster.off .live-play, .live-poster.noimg img { visibility: hidden; }
.live-poster.off .live-off { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 12px; color: var(--muted); text-align: center; font: 400 13px/1.4 var(--font); }
.live-off .ic { width: 28px; height: 28px; margin-bottom: 2px; opacity: .8; }
.live-off b { font-size: 15px; font-weight: 600; color: var(--text-2); }
.fc-old { color: var(--text-2); font-weight: 600; white-space: nowrap; }
.bio-filter { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 6px; margin-bottom: 10px; }
.bio-filter select, .field select { width: 100%; background: var(--band); color: var(--text); border: 0; border-radius: var(--radius-sm); padding: 9px 10px; font: 14px var(--font); }
.bio-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 8px; }
.list li .bio-ym { color: var(--muted); font: 12px var(--font-lat); flex: none; }
.dm-bio { width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: #2FB36B; color: #fff; border: 2px solid #fff;
  display: flex; align-items: center; justify-content: center; font: 700 13px var(--font); box-shadow: 0 0 6px rgba(0,0,0,.6); }
.dm-bio.sel { background: #F5C542; color: #1F1F1F; --bio-cut: #F5C542; }
.dm-bio-label { background: rgba(14,31,61,.85); color: #fff; border: 0; border-radius: 980px; padding: 2px 8px; font-size: 12px; box-shadow: none; }
.dm-bio-label::before { display: none; }
.card-tools { display: flex; gap: 6px; flex: none; }
.icon.fav { font-size: 16px; }
.icon.fav.on { background: #F5C542; color: var(--on-blue); }
.row-search { display: flex; gap: 8px; }
.row-search input { flex: 1; min-width: 0; }
.row-search .pill { flex: none; padding: 8px 12px; }
.list .star { color: #F5C542; margin-right: 6px; }
.list li.active .star { color: var(--on-blue); }
.dm-site.fav { border-color: #F5C542; box-shadow: 0 0 0 3px rgba(245,197,66,.45), 0 0 6px rgba(0,0,0,.6); }
.hidden { display: none !important; }

.card { background: var(--surface); border-radius: var(--radius); padding: 16px; margin: 4px 0 14px; }
.card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.card .subhead { margin-top: 14px; }

.search input, .field input, .field textarea { width: 100%; background: var(--band); color: var(--text); border: 1px solid transparent; border-radius: var(--radius-sm);
  padding: 10px 12px; font: 15px var(--font); outline: none; transition: border-color .2s; }
.search input:focus, .field input:focus, .field textarea:focus { border-color: var(--blue); }
.search { margin-bottom: 10px; }
.field { display: block; font-size: 13px; color: var(--muted); margin: 10px 0; }
.field input, .field textarea { margin-top: 4px; }

.slider { display: grid; grid-template-columns: 52px 1fr 58px; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin: 6px 0; }
.slider output { font-family: var(--font-lat); color: var(--text); text-align: right; font-variant-numeric: tabular-nums; font-size: 13px; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 2px; background: var(--band); outline: none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 6px rgba(0,0,0,.4); cursor: pointer; }
input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 0; }

.actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 2px; align-items: center; }
.stack { display: flex; flex-direction: column; gap: 8px; }
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: var(--pill); padding: 8px 16px;
  background: var(--band); color: var(--text); font: 500 14px var(--font); cursor: pointer; text-decoration: none; transition: background .2s, transform .1s; }
.pill:hover { background: var(--pill-hover); }
.pill:active { transform: scale(.97); }
.pill.primary, .pill.on { background: var(--blue-fill); color: var(--on-blue); font-weight: 700; }
.pill.danger { color: var(--red-text); }
.pill.wide { width: 100%; margin-top: 10px; padding: 11px; }
.pill:disabled { opacity: .4; pointer-events: none; }
.icon { background: var(--band); border: 0; color: var(--text); width: 30px; height: 30px; border-radius: 50%; font-size: 14px; cursor: pointer; flex: none; }

.list { list-style: none; margin: 0; padding: 0; }
.list li { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 12px; border-radius: var(--radius-sm); cursor: pointer; font-size: 15px; }
.list li + li:not(.group)::before { content: ''; position: absolute; top: 0; left: 12px; right: 12px; border-top: 1px solid var(--line); }
.list li.active::before, .list li.active + li::before { display: none; }
@media (hover: hover) { .list li:not(.group):hover { background: var(--soft); } .list li:not(.group):hover::before, .list li:not(.group):hover + li::before { display: none; } }
.list li.active { background: var(--blue-fill); color: var(--on-blue); font-weight: 700; }
.list li.active .km { color: var(--on-blue); }
.list .km { color: var(--muted); font: 13px var(--font-lat); font-variant-numeric: tabular-nums; flex: none; }
.list .placed { color: var(--green); font-size: 12px; flex: none; }
.list li.group { cursor: default; font-size: 12px; font-weight: 700; color: var(--link); letter-spacing: .04em; padding: 14px 12px 4px; border-top: 0; }
.list li.group { background: none !important; }
.prec { font-size: 12px; padding: 2px 7px; border-radius: var(--pill); flex: none; align-self: center; white-space: nowrap; }
.prec-gps, .prec-aligned, .prec-user { background: rgba(47,179,107,.18); color: var(--green); }
.prec-map, .prec-chart, .prec-sat { background: rgba(56,182,255,.16); color: var(--link); }
.prec-desc, .prec-sketch { background: rgba(232,161,58,.16); color: var(--orange); }
.prec-poi { background: rgba(232,161,58,.16); color: var(--orange); }
.prec-area { background: rgba(255,77,77,.16); color: var(--red-text); }

details.region { background: var(--surface); border-radius: var(--radius); margin: 0 0 10px; overflow: hidden; }
details.region summary { list-style: none; cursor: pointer; padding: 13px 16px; font-weight: 800; letter-spacing: .04em; display: flex; justify-content: space-between; }
details.region summary::-webkit-details-marker { display: none; }
details.region summary .count { color: var(--muted); font: 13px var(--font-lat); font-weight: 400; }
details.region .list { padding: 0 6px 6px; }
details.region .list li { font-size: 14px; padding: 9px 10px; }
.cat-actions { display: flex; gap: 6px; flex: none; }
.cat-actions .pill { padding: 5px 11px; font-size: 12px; }

.palette { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.palette .pill { justify-content: flex-start; border-radius: var(--radius-sm); padding: 10px 12px; }
.swatch { width: 22px; height: 16px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 3px; }
#legend .item { display: flex; align-items: center; gap: 10px; font-size: 13px; margin: 6px 0; color: var(--text-2); }

/* ---------- 地圖上的浮動元素 ---------- */
#crosshair { position: fixed; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; pointer-events: none; z-index: 500; }
#crosshair::before, #crosshair::after { content: ""; position: absolute; background: #fff; box-shadow: 0 0 3px rgba(0,0,0,.8); border-radius: 1px; }
#crosshair::before { left: 12px; top: 0; width: 2px; height: 26px; }
#crosshair::after { top: 12px; left: 0; height: 2px; width: 26px; }
#coordBar { position: fixed; z-index: 800; left: calc(50% + 226px); transform: translateX(-50%); bottom: calc(18px + var(--safe-b));
  border-radius: var(--pill); padding: 5px 6px 5px 16px; font: 13px var(--font-lat); display: flex; align-items: center; gap: 6px; white-space: nowrap; font-variant-numeric: tabular-nums; }
#fabs { position: fixed; right: calc(16px + var(--safe-r)); bottom: calc(76px + var(--safe-b)); display: flex; flex-direction: column; gap: 10px; z-index: 800; }
.fab { width: 48px; height: 48px; border-radius: 50%; color: var(--text); font-size: 20px; cursor: pointer; }
.fab.on { background: var(--blue-fill); color: var(--on-blue); }
#toast { position: fixed; left: 50%; top: calc(18px + var(--safe-t)); transform: translate(-50%, -8px); border-radius: var(--pill); padding: 10px 18px; font-size: 14px;
  z-index: 3000; opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }

.sheet { position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; padding: 24px; }
.sheet-body { width: min(920px, 100%); border-radius: var(--radius-lg); padding: 18px; }
.sheet iframe { width: 100%; height: min(62vh, 560px); border: 0; border-radius: var(--radius-sm); margin-top: 12px; background: var(--surface); }

/* Leaflet 控制項套品牌色 */
.leaflet-bar, .leaflet-control-layers { border: 1px solid var(--line) !important; border-radius: 14px !important; overflow: hidden; box-shadow: var(--shadow) !important;
  background: var(--glass) !important; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.leaflet-bar a { background: transparent !important; color: var(--text) !important; border-bottom-color: var(--line) !important; width: 36px !important; height: 36px !important; line-height: 36px !important; }
.leaflet-control-layers { color: var(--text); font-family: var(--font); }
.leaflet-control-layers-expanded { padding: 10px 14px; }
.leaflet-control-layers-separator { border-top-color: var(--line); }
.leaflet-control-layers-toggle { filter: invert(1); }
.leaflet-control-scale-line { background: rgba(14,31,61,.7); color: #fff; border-color: #fff; font-family: var(--font-lat); }
.leaflet-control-attribution { background: rgba(14,31,61,.6) !important; color: var(--muted) !important; font-size: 10px; }
.leaflet-control-attribution a { color: var(--link) !important; }
:root[data-theme="light"] .leaflet-control-attribution { background: rgba(255,255,255,.82) !important; }
/* 「自動」主題在淺色系統下也用白底（開機時 data-theme 還是 auto，淺色變數已經套用：深藍連結在深底上對比不足） */
@media (prefers-color-scheme: light) { :root[data-theme="auto"] .leaflet-control-attribution { background: rgba(255,255,255,.82) !important; } }
.leaflet-tooltip { font-family: var(--font); }

/* 地圖上的元件 */
.dm-label { background: none; border: 0; white-space: nowrap; font-weight: 700; text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff; font-size: 13px; font-family: var(--font); }
.dm-depth { color: #0b2a78; }
.dm-bearing { color: #d4141b; font-size: 12px; font-family: var(--font-lat); }
.dm-name { color: #111; }
.dm-arrowhead > div { width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 14px solid #e5161d; transform-origin: 7px 7px; margin: -7px 0 0 -7px; }
.dm-buoy { color: #1740ff; font-size: 26px; font-weight: 900; line-height: 1; text-shadow: 0 0 3px #fff; }
.dm-site { background: var(--lv, var(--blue)); border: 2px solid #fff; border-radius: 50%; width: 22px; height: 22px; box-shadow: 0 0 6px rgba(0,0,0,.6); margin: -11px 0 0 -11px;
  display: flex; align-items: center; justify-content: center; color: #1F1F1F; }
.dm-site .mi { width: 15px; height: 15px; }
.dm-site.boat, .dm-site.both { border-radius: 6px; }
.dm-site.approx { border-style: dashed; opacity: .9; }
.dm-site.area { border-style: dashed; border-color: var(--orange); opacity: .9; }
.hide-site-labels .dm-site-label { display: none; }
.dm-site-label { background: rgba(14,31,61,.85); color: #fff; border: 0; border-radius: 980px; padding: 3px 9px; font-size: 12px; box-shadow: none; }
.dm-site-label::before { display: none; }
.dm-handle { width: 22px; height: 22px; border-radius: 50%; background: var(--blue-fill); border: 3px solid #fff; box-shadow: 0 0 6px #000; margin: -11px 0 0 -11px; cursor: move; }
.dm-me { width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: #1a73e8; border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(26,115,232,.25); }
.dm-overlay-text { position: absolute; left: 0; top: 0; transform-origin: 0 0; pointer-events: none; }
.dm-overlay-text span.manual { background-image: var(--txt), var(--base); }   /* 內建的手動框在文字層，使用者自己加的在線稿 */
.dm-overlay-text span.off { transform: none; }
.text-edit .dm-overlay-text span { pointer-events: auto; outline: 1.5px dashed #F5C542; cursor: pointer; }
.text-edit .dm-overlay-text span.off { outline-color: #FF4D4D; }
.text-edit .dm-overlay-text span.manual { outline: 2px solid #2FB36B; }
.text-edit { cursor: crosshair; }
.text-rect { position: absolute; z-index: 700; border: 2px solid #F5C542; background: rgba(245,197,66,.15); pointer-events: none; }
.dm-overlay-text span { position: absolute; background-image: var(--txt); background-size: var(--size); background-repeat: no-repeat; transform: rotate(var(--upright)); transform-origin: 50% 50%; }
.dm-overlay { position: absolute; left: 0; top: 0; transform-origin: 0 0; pointer-events: none; user-select: none; max-width: none !important; }

/* ---------- 列印（A4 直式，一般文件流排版：標題 → 地圖 → 圖例與生物紀錄；iPhone 列印不支援固定定位） ---------- */
.print-only { display: none; }
body.printing #panel, body.printing #fabs, body.printing #coordBar, body.printing #siPill, body.printing #crosshair,
body.printing .leaflet-control-zoom, body.printing .leaflet-control-layers, body.printing .sheet { display: none !important; }
html:has(body.printing), body.printing { background: #fff !important; }
body.printing { color: #111; overflow: visible; height: auto; display: flex; flex-direction: column; width: 700px; }
body.printing .print-only { display: flex; }
body.printing #printHead { order: 1; width: 700px; justify-content: space-between; align-items: flex-end; padding: 0 0 6px; color: #111; font-family: var(--font); }
#printHead h1 { font-size: 20px; margin: 0 0 2px; letter-spacing: .04em; }
#printSub { font-size: 10px; color: #444; font-family: var(--font-lat), var(--font); }
.print-brand { display: flex; align-items: center; gap: 8px; }
.print-brand img { width: 34px; height: 34px; border-radius: 22.5%; }
.print-brand .dm-word { font-size: 17px; color: #111; }
.print-brand .dm-word > span { color: #555; }
.print-brand b { font: 400 13px var(--font-lat); letter-spacing: .06em; }
body.printing #map { order: 2; position: relative !important; inset: auto !important; width: 700px !important; height: 820px !important; border: 1px solid #999; flex: none; }
body.printing #printFoot { order: 3; width: 700px; gap: 10px 18px; flex-wrap: wrap; padding-top: 6px; font-size: 10px; color: #222; font-family: var(--font); }
#printFoot .pf-col { flex: 1 1 300px; min-width: 0; }
#printFoot h3 { font-size: 11px; margin: 0 0 4px; }
#printFoot .pf-item { display: inline-flex; align-items: center; gap: 4px; margin: 0 10px 3px 0; }
#printFoot ol { margin: 0; padding-left: 18px; }
#printFoot .pf-note { color: #666; flex-basis: 100%; overflow-wrap: anywhere; }
#printBar { position: fixed; z-index: 3000; left: 50%; transform: translateX(-50%); bottom: calc(16px + env(safe-area-inset-bottom)); display: flex; gap: 8px; padding: 8px; border-radius: 980px; }
#printBar.hidden { display: none; }
#printBar .pill { white-space: nowrap; }
@media screen { body.printing { padding: env(safe-area-inset-top) 0 calc(90px + env(safe-area-inset-bottom)); } }
@media print {
  #printBar, #toast { display: none !important; }
  body.printing { zoom: 1 !important; padding: 0 !important; }
  @page { size: A4 portrait; margin: 10mm; }
  html, body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- 手機：三段式底部抽屜（收起／半開／全開，可上下拖） ---------- */
@media (max-width: 767px), (max-width: 900px) and (orientation: portrait), (max-width: 900px) and (max-height: 499px) {
  /* --os：抽屜往螢幕底部外多延伸的長度。iOS 加入主畫面後，視窗高度有時會比實際螢幕短一截，
     fixed bottom:0 的元素底下就露出一條黑底；多延伸一段就一定蓋得到底 */
  :root { --os: 120px; --peek: calc(106px + var(--safe-b)); --half: 50dvh; --map-b: var(--half); }
  body.sheet-peek { --map-b: var(--peek); }
  body.sheet-half, body.sheet-full { --map-b: var(--half); }
  #panel { left: 0; right: 0; padding-left: var(--safe-l); padding-right: var(--safe-r); top: auto; bottom: calc(-1 * var(--os)); width: auto; height: calc(100dvh - 56px - var(--safe-t) + var(--os));
    border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-bottom: 0; transform: translateY(calc(100% - var(--half) - var(--os)));
    background: var(--sheet);
    transition: transform .38s cubic-bezier(.2,.9,.25,1); }
  /* 只有把手與標題列攔截觸控拖曳；touch-action 會被子元素繼承相交，不能設在整個面板上，否則內容無法捲動 */
  .grabber, .brand { touch-action: none; }
  body.sheet-peek #panel { transform: translateY(calc(100% - var(--peek) - var(--os))); }
  body.sheet-full #panel { transform: translateY(0); }
  #panel.dragging { transition: none; }
  #panel.collapsed { transform: translateY(calc(100% - var(--peek) - var(--os))); }
  .scroll { padding: 4px 14px calc(28px + var(--safe-b) + var(--os)); touch-action: pan-y; -webkit-overflow-scrolling: touch; }
  /* 半開時面板下半截在螢幕外，捲到底要多留這段高度，最後幾項才看得到 */
  body.sheet-half .scroll { padding-bottom: calc(28px + var(--safe-b) + var(--os) + (100dvh - 56px - var(--safe-t)) - var(--half)); }
  body.sheet-peek .scroll { padding-bottom: calc(28px + var(--safe-b) + var(--os) + (100dvh - 56px - var(--safe-t)) - var(--peek)); }
  .grabber { display: block; width: 38px; height: 5px; border-radius: 3px; background: var(--grab); margin: 7px auto 0; cursor: grab; }
  /* 品牌列壓成一行，把高度留給地圖 */
  .brand { align-items: center; padding: 6px 16px 8px; }
  .xxx { font-size: 11px; }
  h1 { font-size: 19px; margin: 0; }
  .rule { display: none; }
  .seg { margin: 0 12px 8px; }
  .seg button { font-size: 13px; padding: 7px 0; }
  #map { bottom: calc(var(--map-b) - 22px); transition: bottom .38s; }
  #crosshair { top: calc((100dvh - var(--map-b) + 22px) / 2); }
  #coordBar { left: 50%; bottom: auto; top: calc(8px + var(--safe-t)); font-size: 12px; }
  #fabs { bottom: calc(var(--map-b) + 10px); transition: bottom .38s; }
  /* 矮螢幕（iPhone Duo 外螢幕、SE）：按鈕排不下就往左再排一列，不鑽到搜尋列與圖層鈕底下 */
  #fabs { max-height: calc(100dvh - var(--map-b) - 10px - 124px - var(--safe-t)); flex-wrap: wrap-reverse; align-content: flex-start; }
  body.sheet-full #fabs { opacity: 0; pointer-events: none; }
  .leaflet-top.leaflet-left, .leaflet-top.leaflet-right { top: calc(44px + var(--safe-t)); }
  .sheet { padding: 0; align-items: flex-end; }
  .sheet-body { border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding-bottom: calc(18px + var(--safe-b)); max-height: calc(100dvh - var(--safe-t) - 20px); overflow-y: auto; }
  .sheet iframe { height: 58dvh; }
}
@media (min-width: 901px), (min-width: 768px) and (orientation: landscape) and (min-height: 500px) {
  .leaflet-top.leaflet-left { left: calc(442px + var(--safe-l)); transition: left .35s; }
  .leaflet-right { right: var(--safe-r); }   /* 面板 16 + 420 寬 + 6 間距，縮放鈕不被面板蓋住 */
  body.panel-collapsed .leaflet-top.leaflet-left { left: 0; }
  body.panel-collapsed #coordBar { left: 50%; }
}

/* 潛點卡片：主要動作格、可收合區塊 */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(52px, 1fr)); gap: 6px; margin: 14px 0 4px; }
.tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 64px; padding: 8px 4px;
  border: 0; border-radius: var(--radius-sm); background: var(--soft); color: var(--text); font: 600 13px var(--font); text-decoration: none; cursor: pointer; }
.tile .ti { font-size: 20px; line-height: 1; color: var(--link); }
.tile.primary { background: var(--blue-fill); color: var(--on-blue); }
.tile.primary .ti { color: var(--on-blue); }
.tile:active { transform: scale(.97); }
.tile.hidden { display: none; }
details.sec { border-top: 1px solid var(--line); margin-top: 12px; }
details.sec > summary { list-style: none; cursor: pointer; padding: 12px 0 4px; font-size: 15px; font-weight: 800; letter-spacing: .04em; display: flex; align-items: center; gap: 8px; }
details.sec > summary::-webkit-details-marker { display: none; }
details.sec > summary::after { content: '›'; margin-left: auto; color: var(--muted); font-size: 20px; font-weight: 400; transition: transform .2s; }
details.sec[open] > summary::after { transform: rotate(90deg); }
.sec-meta { color: var(--muted); font-size: 12px; font-weight: 500; letter-spacing: 0; display: inline-flex; align-items: center; gap: 4px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); display: inline-block; }
.live.sec { margin: 12px 0 0; }
.live-poster { margin-top: 6px; }
.link { background: none; border: 0; padding: 0; color: var(--link); font: inherit; font-size: 13px; cursor: pointer; text-decoration: none; }
.apply { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 10px 0 0; }
.apply .pill { flex: none; text-decoration: none; }
.apply-sub { font-size: 13px; color: var(--link); }
.apply.hidden { display: none; }

/* 遊憩規範 */
.reg-item { background: var(--soft); border-radius: var(--radius-sm); margin: 6px 0; }
.reg-item > summary { list-style: none; cursor: pointer; padding: 9px 10px; display: flex; align-items: center; gap: 6px; }
.reg-item > summary::-webkit-details-marker { display: none; }
.reg-item b { font-size: 14px; flex: 1; min-width: 0; }
.reg-dist { font-size: 12px; color: var(--muted); flex: none; }
.reg-rule { font-size: 13px; line-height: 1.55; color: var(--muted); margin: 0 10px 6px; }
.reg-rule.small { font-size: 12px; opacity: .8; }
.reg-links { display: flex; gap: 16px; padding: 0 10px 10px; }
.reg-tag { display: inline-block; flex: none; font-size: 12px; font-weight: 700; padding: 1px 7px; border-radius: var(--pill); background: var(--c); color: #1F1F1F; }
.reg-pop p { margin: 6px 0; line-height: 1.5; }
.reg-pop .small { font-size: 12px; opacity: .8; }
.reg-pop .pill { color: var(--on-blue); text-decoration: none; }

/* 岸潛／船潛圖示 */
.mi { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.mode-tag { display: inline-flex; gap: 1px; margin-right: 6px; vertical-align: -3px; color: var(--link); }
.mode-tag.mode-boat, .mode-tag.mode-both { color: var(--accent-2); }
.mode-badge { display: inline-flex; align-items: center; gap: 2px; margin-top: 6px; font-size: 12px; font-weight: 700; color: var(--muted); }
.mode-badge .mode-tag { margin-right: 2px; }
.mode-seg { margin: 10px 0 4px; }
.seg button .mi { width: 15px; height: 15px; margin-right: 4px; vertical-align: -3px; }
.small-head { font-size: 13px; margin: 14px 0 6px; }
#modeEdit { margin: 0 0 8px; }

/* 潛場等級燈號 */
.lv-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--lv); margin-right: 6px; vertical-align: 0; box-shadow: 0 0 0 1.5px rgba(0,0,0,.35); flex: none; }
.lv-badge { margin-left: 8px; padding: 1px 8px; border-radius: var(--pill); background: var(--lv); color: #1F1F1F; font-size: 12px; font-weight: 800; }
.lv-legend { display: flex; gap: 12px; justify-content: center; font-size: 12px; color: var(--muted); margin: 2px 0 8px; }
.lv-legend span { display: inline-flex; align-items: center; }
.lv-legend .lv-dot { margin-right: 4px; }
#levelEdit { margin: 0 0 8px; }
#levelEdit .lv-dot { width: 8px; height: 8px; margin-right: 4px; }
.port-line { display: flex; gap: 6px; align-items: flex-start; }
.port-line .mi { color: var(--link); margin-top: 2px; }
.port-line a { color: var(--link); }

/* BlueTrend 摘要 */

.fab-text { font: 700 13px var(--font-lat); letter-spacing: .02em; }
.head-tools { display: flex; gap: 6px; margin-left: auto; margin-right: 10px; align-self: center; }
.mini-btn { border: 0; border-radius: var(--pill); min-width: 34px; height: 28px; padding: 0 9px; background: var(--band); color: var(--text); font: 700 12px var(--font-lat); cursor: pointer; }
#themeSeg:not(.mini), #langSeg:not(.mini) { margin: 0 0 10px; }   /* 設定列裡的（.mini）不留下緣：v196 修正標題比按鈕低 5 px */

/* Apple 設定 App 式分組清單 */
#tab-data { padding-bottom: 24px; }
.group-head { font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--muted); margin: 22px 6px 6px; text-transform: none; }
.group { background: var(--surface); border-radius: var(--radius-sm); overflow: hidden; }
.group.pad { padding: 12px 14px; }
.group + .group { margin-top: 18px; }
.group-foot { font-size: 12px; line-height: 1.5; color: var(--muted); margin: 6px 6px 0; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 46px; padding: 8px 14px; font-size: 15px; color: var(--text);
  width: 100%; border: 0; background: none; font-family: var(--font); text-align: left; position: relative; }
.row + .row::before { content: ''; position: absolute; top: 0; left: 14px; right: 0; border-top: 1px solid var(--line); }
.row > span:first-child { flex: none; }
.row input { flex: 1; min-width: 0; text-align: right; background: none; border: 0; color: var(--text); font: 15px var(--font); padding: 6px 0; outline: none; }
.row input::placeholder { color: var(--muted); }
.row-val { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; min-width: 0; }
.row-val code { font: 13px ui-monospace, Menlo, monospace; color: var(--muted); }
.row-btn { cursor: pointer; }
.row-btn:active { background: var(--soft); }
.row-btn > span:first-child { color: var(--link); }
.danger-row > span:first-child { color: var(--red-text); }
.row .muted, .muted { color: var(--muted); }
.row small { font-size: 12px; }
.danger-link { color: var(--red-text) !important; }
.seg.mini { margin: 0; flex: 0 1 220px; }
.seg.mini button { padding: 5px 0; font-size: 13px; }
/* 四個選項（日夜模式：自動／淺色／深色／日出日落）220 px 塞不下「日出日落」：依文字寬度分配、整組可放寬到 280 px */
.seg.mini:has(> button:nth-child(4)) { flex-basis: 280px; }
.seg.mini:has(> button:nth-child(4)) > button { flex: 1 0 auto; padding-inline: 8px; white-space: nowrap; }
.small-icon { width: 28px; height: 28px; font-size: 14px; }
.src-list { list-style: none; margin: 0; padding: 0; font-size: 13px; line-height: 1.5; }
.src-list li { padding: 6px 0; }
.src-list li + li { border-top: 1px solid var(--line); }
.src-list b { display: block; font-size: 12px; color: var(--muted); font-weight: 600; }
.src-list a { color: var(--link); text-decoration: none; }
.sources { margin: 10px 0 4px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--soft); }
.src-title { font-size: 13px; font-weight: 800; margin-bottom: 4px; }
#scInfo.on { background: var(--blue-fill); color: var(--on-blue); }

/* 打卡與日誌 */
.dm-site.visited::after { content: '✓'; position: absolute; right: -7px; top: -7px; width: 13px; height: 13px; border-radius: 50%; background: #fff; color: #1F8F4E;
  font: 800 10px/13px var(--font-lat); text-align: center; box-shadow: 0 0 3px rgba(0,0,0,.5); }
.dm-site { position: relative; }
.visited-tag { margin-left: 6px; color: var(--green-text); font-weight: 800; }
.list li.active .visited-tag { color: var(--on-blue); }
.tile.checkin .ti { color: var(--green); }
.log-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 4px 0 12px; }
.log-stats div { background: var(--surface); border-radius: var(--radius-sm); padding: 10px 6px; text-align: center; }
.log-stats b { display: block; font: 800 20px var(--font-lat); color: var(--text); }
.log-stats span { font-size: 12px; color: var(--muted); }
.rate { display: flex; gap: 4px; margin-top: 4px; }
.rate button { border: 0; background: none; font-size: 24px; color: var(--band); cursor: pointer; padding: 0 2px; }
.rate button.on { color: #F5C542; }
.bio-row { display: flex; gap: 8px; }
.bio-row .field { flex: 1; min-width: 0; }
.field select { width: 100%; background: var(--band); color: var(--text); border: 0; border-radius: var(--radius-sm); padding: 9px 10px; font: 14px var(--font); margin-top: 4px; }
input.switch { appearance: none; -webkit-appearance: none; width: 46px; height: 28px; border-radius: var(--radius-sm); background: rgba(120,120,128,.36); position: relative; cursor: pointer; transition: background .2s; flex: none; }
input.switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.35); transition: left .2s; }
input.switch:checked { background: var(--green); }
input.switch:checked::after { left: 20px; }

/* 相機 AR */
.ar { position: fixed; inset: 0; z-index: 4000; background: #000; overflow: hidden; }
.ar.hidden { display: none; }
#arVideo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#arHorizon { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed rgba(255,255,255,.45); }
#arLayer { position: absolute; inset: 0; }
.ar-tag { position: absolute; transform-origin: 50% 100%; cursor: pointer; }
.ar-card { background: rgba(20,24,28,.78); color: #fff; border: 1px solid rgba(255,255,255,.25); border-radius: 12px; padding: 6px 10px; min-width: 120px; text-align: left;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 4px 16px rgba(0,0,0,.45); }
.ar-name { font: 700 14px var(--font); white-space: nowrap; display: flex; align-items: center; }
.ar-name .mode-tag { color: #9FD8FF; }
.ar-sub { font: 600 12px var(--font-lat); color: #CFE9FF; margin-top: 2px; }
.ar-ll { font: 11px ui-monospace, Menlo, monospace; color: rgba(255,255,255,.7); margin-top: 1px; }
.ar-stem { width: 2px; margin: 0 auto; background: linear-gradient(rgba(255,255,255,.8), rgba(255,255,255,0)); }
.ar-edge { position: absolute; max-width: 46%; overflow: hidden; text-overflow: ellipsis; cursor: pointer; background: rgba(20,24,28,.7); color: #fff; font: 600 12px var(--font); padding: 4px 8px; border-radius: 980px; white-space: nowrap; }
.ar-edge.l { left: 6px; } .ar-edge.r { right: 6px; }
.ar-top { position: absolute; left: 10px; right: 10px; top: calc(10px + var(--safe-t)); border-radius: 16px; padding: 6px 10px 8px; color: #fff; background: rgba(20,24,28,.7); }
.ar-tape { position: relative; height: 26px; overflow: hidden; border-bottom: 1px solid rgba(255,255,255,.2); }
.ar-tape i { position: absolute; top: 0; transform: translateX(-50%); font: 600 11px var(--font-lat); font-style: normal; color: rgba(255,255,255,.75); border-left: 1px solid rgba(255,255,255,.35); padding-left: 3px; height: 12px; }
.ar-tape i.big { color: #fff; height: 16px; }
.ar-tape b { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); font: 800 12px var(--font-lat); color: var(--sky); }
.ar-me { font: 12px ui-monospace, Menlo, monospace; margin-top: 6px; text-align: center; color: #fff; }
.ar-bottom { position: absolute; left: 10px; right: 10px; bottom: calc(14px + var(--safe-b)); display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 16px; background: rgba(20,24,28,.7); color: #fff; }
.ar-range { flex: 1; display: flex; align-items: center; gap: 8px; font-size: 13px; }
.ar-range input { flex: 1; }
.ar-msg { position: absolute; left: 20px; right: 20px; top: 45%; background: rgba(20,24,28,.85); color: #fff; padding: 12px 14px; border-radius: 14px; font-size: 14px; line-height: 1.5; text-align: center; }
.ar-empty { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: #fff; background: rgba(20,24,28,.7); padding: 10px 14px; border-radius: 12px; font-size: 14px; }

/* 手機：浮動按鈕縮小、Leaflet 控制項讓出上方座標列 */
@media (max-width: 767px), (max-width: 900px) and (orientation: portrait), (max-width: 900px) and (max-height: 499px) {
  .fab { width: 40px; height: 40px; font-size: 17px; }
  #fabs { gap: 8px; right: calc(12px + var(--safe-r)); }
  .leaflet-left { left: var(--safe-l); } .leaflet-right { right: var(--safe-r); }
  .fab-text { font-size: 12px; }
  .leaflet-top { top: calc(44px + var(--safe-t)); }
  .head-tools { margin-right: 6px; }
  .mini-btn { min-width: 30px; height: 26px; padding: 0 7px; }
  .bio-row { flex-wrap: wrap; }
  .bio-row .field { flex: 1 1 calc(33% - 8px); min-width: 96px; }
  .time-row .field { flex: 1 1 calc(50% - 8px); }
  input, select, textarea { font-size: 16px !important; }
  #toast { top: calc(52px + var(--safe-t)) !important; }
  .card h2 { font-size: 21px; }
}

/* 深度曲線、日誌照片、AR 快門 */
.profile { margin: 12px 0 4px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--soft); }
.profile-head { font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 6px; }
.profile svg { width: 100%; height: 110px; display: block; }
.profile .grid line { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.profile .grid text { font: 12px var(--font-lat); fill: var(--muted); }
.profile .area { fill: rgba(56,182,255,.18); }
.profile .line { fill: none; stroke: var(--blue); stroke-width: 2; vector-effect: non-scaling-stroke; }
.photos { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 2px; }
.photos .profile-head { flex-basis: 100%; margin: 0; }
.photo { position: relative; width: calc(33.3% - 6px); aspect-ratio: 3 / 4; border-radius: var(--radius-sm); overflow: hidden; background: var(--band); }
.photo img { width: 100%; height: 100%; object-fit: cover; cursor: pointer; display: block; }
.photo-del { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border: 0; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; font-size: 12px; cursor: pointer; }
.shutter { flex: none; width: 56px; height: 56px; border-radius: 50%; border: 4px solid #fff; background: rgba(255,255,255,.25); cursor: pointer; box-shadow: 0 0 0 2px rgba(0,0,0,.25); }
.shutter:active { background: #fff; }
.ar.flash::after { content: ''; position: absolute; inset: 0; background: #fff; opacity: .7; pointer-events: none; }

/* 桌機／平板：Leaflet 左側控制項（縮放、比例尺）讓出面板位置 */
@media (min-width: 901px), (min-width: 768px) and (orientation: landscape) and (min-height: 500px) {
  .leaflet-left { left: 446px; transition: left .35s cubic-bezier(.2,.8,.2,1); }
  body.panel-collapsed .leaflet-left { left: 0; }
}
.mini-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
.list li.empty { cursor: default; justify-content: center; text-align: center; color: var(--muted); font-size: 13px; padding: 22px 12px; background: none !important; }
.list li.empty::before { display: none; }

#coordText { display: inline-flex; gap: 12px; white-space: nowrap; }
/* 很窄的視窗：iPad 分割畫面 1/3、Slide Over、小手機（≤400px） */
@media (max-width: 400px) {
  #coordText { gap: 8px; }
  #coordText .c-twd { display: none; }
  #coordBar { max-width: calc(100vw - 16px); }
  .brand .xxx { display: none; }
  h1 { font-size: 17px; }
  .head-tools { gap: 4px; margin-right: 4px; }
  .mini-btn { min-width: 26px; height: 24px; padding: 0 6px; font-size: 12px; }
  nav.seg button { font-size: 13px; }
  .tiles { gap: 4px; grid-template-columns: repeat(auto-fit, minmax(44px, 1fr)); }
  .tile { min-height: 56px; font-size: 12px; padding: 6px 2px; }
  .tile .ti { font-size: 17px; }
  .card { padding: 14px 12px; }
  .log-stats b { font-size: 16px; }
  .log-stats span { font-size: 12px; }
}

/* 開啟時定位提示 */
.start-ask { position: fixed; z-index: 2500; left: 50%; transform: translateX(-50%); top: calc(64px + var(--safe-t)); width: min(420px, calc(100vw - 24px));
  display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: center; padding: 14px 16px; border-radius: var(--radius); color: var(--text); }
.start-ask.hidden { display: none; }
.sa-icon { font-size: 26px; color: var(--link); grid-row: span 2; }
.sa-text b { display: block; font-size: 15px; }
.sa-text span { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.sa-actions { grid-column: 2; display: flex; gap: 8px; justify-content: flex-end; }
@media (min-width: 901px), (min-width: 768px) and (orientation: landscape) and (min-height: 500px) { .start-ask { left: calc(50% + 226px); } }

/* AR 拍照預覽 */
.photo-save { position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border: 0; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; font-size: 13px; cursor: pointer; }

/* AR 左上的潛水資訊 */
.ar-dive { position: absolute; left: 12px; top: calc(118px + var(--safe-t)); max-width: min(320px, calc(100vw - 24px)); background: rgba(15,20,26,.78); color: #fff;
  border-radius: 14px; padding: 10px 14px; font-size: 13px; line-height: 1.5; border-top: 3px solid var(--blue); }
.ar-dive.hidden { display: none; }
.ar-dive b { display: block; font-size: 15px; }
.ar-dive span { display: block; color: #D8EEFF; }

.flag { margin-right: 6px; font-size: 15px; line-height: 1; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.list li.group .flag { font-size: 14px; }

/* 緊急醫療 */
.dm-em { width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font: 900 14px/1 var(--font-lat); color: #fff; box-shadow: 0 0 5px rgba(0,0,0,.6); border: 2px solid #fff; }
.dm-em.hbo { background: #D7263D; }
.dm-em.hbo.severe { box-shadow: 0 0 0 3px #F5C542, 0 0 6px rgba(0,0,0,.6); width: 28px; height: 28px; margin: -14px 0 0 -14px; font-size: 16px; }
.dm-em.er { background: #fff; color: #D7263D; border-color: #D7263D; width: 20px; height: 20px; margin: -10px 0 0 -10px; font-size: 12px; }
details.sec.emergency > summary { color: var(--red-text); }
.em-lines { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 8px 0; }
.em-call { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: var(--radius-sm); background: rgba(215,38,61,.14); color: var(--text); text-decoration: none; text-align: center; }
.em-call b { font: 800 18px var(--font-lat); color: var(--red-text); }
.em-call span { font-size: 12px; color: var(--muted); line-height: 1.3; }
.em-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); }
.em-row > div { flex: 1; min-width: 0; }
.em-row b { display: block; font-size: 14px; }
.em-row small { display: block; font-size: 12px; color: var(--muted); }
.em-ic { flex: none; width: 26px; height: 26px; border-radius: var(--radius-badge); display: flex; align-items: center; justify-content: center; font: 900 14px var(--font-lat); color: #fff; background: #D7263D; }
.em-ic.er { background: #fff; color: #D7263D; border: 2px solid #D7263D; }
.em-ic.severe { box-shadow: 0 0 0 2px #F5C542; }
.em-act { display: flex; gap: 6px; flex: none; }
.em-act .pill { padding: 6px 10px; font-size: 13px; text-decoration: none; }

.em-lines.one { grid-template-columns: 1fr; }
.em-note { margin: 4px 0 6px; }

#printFoot .pf-em { flex-basis: 100%; border: 1.5px solid #D7263D; border-radius: 8px; padding: 6px 8px; }
#printFoot .pf-em h3 { color: #B3122A; }
#printFoot .pf-em ol { margin: 2px 0 4px; }
#printFoot .pf-em p { margin: 0; color: #333; }

/* 日誌匯出選單 */
.exp-list { display: flex; flex-direction: column; gap: 6px; padding: 8px 0 4px; }
.exp-list button { text-align: left; background: var(--soft); border: 0; border-radius: var(--radius-sm); padding: 10px 14px; color: var(--text); font: inherit; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.exp-list button:hover { background: var(--pill-hover); }
.exp-list b { font-size: 15px; letter-spacing: .04em; }
.exp-list span { font-size: 12.5px; color: var(--muted); line-height: 1.45; }

/* 日誌表單錯誤欄位 */
#logForm .invalid { outline: 2px solid #FF4D4D; outline-offset: 1px; }

/* iOS Safari 的日期／時間欄位有自己的最小寬度，會把表單撐寬、讓面板左右滑動 */
.field input, .field select, .field textarea { box-sizing: border-box; min-width: 0; max-width: 100%; }
.field input[type="date"], .field input[type="time"], .field input[type="datetime-local"] { -webkit-appearance: none; appearance: none; display: block; min-height: 38px; }
.field input::-webkit-date-and-time-value { text-align: left; }
.bio-row > * { min-width: 0; }
.scroll { overflow-x: hidden; }

/* 證照與名片 */
.cert-row { cursor: pointer; }
.row-btn.cert-row > .cert-badge { flex: none; min-width: 44px; padding: 3px 8px; border-radius: var(--pill); background: var(--blue-fill); color: var(--on-blue); font: 700 12px var(--font-lat, var(--font)); text-align: center; letter-spacing: .02em; }
.cert-row .cert-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cert-row .cert-main b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cert-row .cert-main small { color: var(--muted); }
.row-text { align-items: flex-start; }
.row-text textarea { flex: 1; min-width: 0; background: none; border: 0; color: var(--text); font: 15px/1.5 var(--font); resize: vertical; outline: none; text-align: right; padding: 6px 0; }
.cert-form { max-height: calc(100dvh - 48px); overflow-y: auto; width: min(560px, 100%); }
.cert-photos { display: flex; gap: 10px; margin: 10px 0; }
.cert-photo { flex: 1; aspect-ratio: 1.586; border-radius: var(--radius-sm); background: var(--band); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; cursor: pointer; color: var(--muted); font-size: 13px; }
.cert-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
.cert-photo.has img { display: block; }
.cert-photo.has span { position: absolute; bottom: 6px; left: 8px; background: rgba(0,0,0,.55); color: #fff; padding: 2px 8px; border-radius: var(--pill); font-size: 12px; }
.card-preview { width: min(640px, 100%); max-height: calc(100dvh - 48px); overflow-y: auto; }
.card-preview img { display: block; width: 100%; border-radius: var(--radius); margin-top: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.avatar-pick { width: 52px; height: 52px; border-radius: 50%; background: var(--band); display: inline-flex; align-items: center; justify-content: center; overflow: hidden; cursor: pointer; border: 2px solid #fff; position: relative; flex: none; }
.avatar-pick img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
.avatar-pick.has img { display: block; }
.avatar-pick span { font-size: 12px; color: var(--muted); text-align: center; line-height: 1.2; }
.avatar-pick.has span { display: none; }
.pill.small { padding: 4px 10px; font-size: 12px; }
.avatar-editor { width: min(420px, 100%); }
#avatarCanvas { display: block; width: min(280px, 70vw); height: auto; aspect-ratio: 1; margin: 12px auto 4px; border-radius: 50%; touch-action: none; cursor: grab; background: var(--band); box-shadow: 0 0 0 4px #fff; }
#avatarCanvas:active { cursor: grabbing; }
.avatar-editor .hint { text-align: center; }

/* 備份與雲端 */
#tab-data:not(.gd-connected) .gd-on { display: none; }
#tab-data.gd-connected #gdConnect { display: none; }
.gd-adv { margin: 8px 6px 0; }
.gd-adv summary { font-size: 13px; color: var(--muted); font-weight: 600; }
.gd-pick { width: min(480px, 100%); }
.gd-pick .row small { display: block; color: var(--muted); }

/* 地圖旋轉：指北針與定位點方向 */
#northBtn .needle { display: block; width: 14px; height: 30px; margin: auto; transform: rotate(var(--b, 0deg)); transition: transform .15s linear;
  background: linear-gradient(to bottom, #FF4D4D 0 50%, var(--text) 50% 100%); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
#followBtn.heading { background: var(--blue-fill); color: #fff; }
.dm-me-cone { position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; pointer-events: none; transform: rotate(var(--h, 0deg));
  background: conic-gradient(from -30deg, rgba(26,115,232,.45) 0 60deg, transparent 60deg); border-radius: 50%;
  -webkit-mask: radial-gradient(circle, #000 0 60%, transparent 61%); mask: radial-gradient(circle, #000 0 60%, transparent 61%); }
.north-ctl { clear: both; }
.north-ctl .fab { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; }
.north-ctl .fab.hidden { display: none; }

/* 水面休息／禁飛倒數（依最近 24 小時內的日誌） */
#siPill { position: fixed; z-index: 800; left: calc(50% + 226px); transform: translateX(-50%); top: calc(16px + var(--safe-t)); border: 0; cursor: pointer;
  border-radius: var(--pill); padding: 7px 14px; color: var(--text); font: 600 13px var(--font-lat), var(--font); display: flex; gap: 12px; align-items: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
#siPill.hidden { display: none; }
#siPill .fly { color: var(--coral-text); }
@media (max-width: 767px), (max-width: 900px) and (orientation: portrait), (max-width: 900px) and (max-height: 499px) { #siPill { left: 50%; top: calc(48px + var(--safe-t)); font-size: 12px; padding: 6px 12px; } }
body.panel-collapsed #siPill { left: 50%; }
.si-dash { background: var(--surface); border-radius: var(--radius-sm); padding: 12px 14px; margin: 0 0 12px; }
.si-dash .si-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.si-dash .si-item b { display: block; font: 700 22px var(--font-lat); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.si-dash .si-item span { font-size: 12px; color: var(--muted); }
.si-dash .si-item.fly b { color: var(--coral-text); }
.si-dash .si-item.done b { color: var(--green); }
.si-dash .si-head { font-size: 13px; font-weight: 700; margin-bottom: 8px; display: flex; justify-content: space-between; gap: 8px; }
.si-dash .si-head small { font-weight: 400; color: var(--muted); }
.si-dash p { font-size: 12px; line-height: 1.5; color: var(--muted); margin: 10px 0 0; }
.si-dash p a { color: var(--link); }
.si-dash .si-notify { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 14px; }

/* 回顧套圖 */
.recap-sheet { width: min(560px, 100%); max-height: calc(100dvh - 48px); overflow-y: auto; }
.recap-seg { margin: 10px 0 0; }
.recap-opts { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.recap-opts .field { margin: 0; flex: 0 0 120px; }
.recap-opts .seg { flex: 1; min-width: 200px; margin: 0; }
.recap-check { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; color: var(--text-2); }
#recapImg { display: block; width: 100%; max-height: 62vh; object-fit: contain; margin: 12px auto 0; border-radius: var(--radius-sm); background: var(--band); }

/* 第一次使用說明 */
.log-tools { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 0; }
.log-tools .pill { flex: 1 1 auto; justify-content: center; text-align: center; }
#logExportMenu { margin-top: 4px; }
.exp-hint { margin: 6px 2px 4px; }
.si-dash .si-why { margin-top: 8px; }
.si-dash .si-why summary { font-size: 12px; color: var(--muted); cursor: pointer; }
.si-dash .si-why p { margin-top: 6px; }

/* 手機版操作位置（2026-09 重新配置） */
@media (max-width: 767px), (max-width: 900px) and (orientation: portrait), (max-width: 900px) and (max-height: 499px) {
  /* 倒數膠囊：地圖左下、抽屜上緣，跟右側按鈕欄同一高度基準，不擠在頂端座標列 */
  #siPill { left: 12px; top: auto; bottom: calc(var(--map-b) + 18px); transform: none; transition: bottom .38s, opacity .2s; }
  body.sheet-full #siPill { opacity: 0; pointer-events: none; }
  /* 標頭按鈕放大，與 logo 拉開距離 */
  .head-tools { gap: 8px !important; margin-right: 10px !important; }
  .mini-btn { min-width: 36px !important; height: 32px !important; padding: 0 9px !important; font-size: 12px !important; }
  /* 頂端控制項與座標列留空隙 */
  .leaflet-top.leaflet-left, .leaflet-top.leaflet-right, .leaflet-top { top: calc(58px + var(--safe-t)) !important; }
  body.show-coord .leaflet-top.leaflet-left, body.show-coord .leaflet-top.leaflet-right, body.show-coord .leaflet-top { top: calc(96px + var(--safe-t)) !important; }
  /* 手機用抽屜把手收合，不需要 ☰；右側按鈕略縮小 */
  #panelToggle { display: none; }
  #fabs .fab { width: 44px; height: 44px; }
}
body.panel-collapsed #siPill { left: 50%; }
@media (max-width: 767px), (max-width: 900px) and (orientation: portrait), (max-width: 900px) and (max-height: 499px) { body.panel-collapsed #siPill { left: 12px; } }

/* 匯出前選潛點 */
.exp-sheet { width: min(520px, 100%); max-height: calc(100dvh - 48px); display: flex; flex-direction: column; }
.exp-filter { width: 100%; box-sizing: border-box; margin: 10px 0 8px; background: var(--band); color: var(--text); border: 1px solid transparent; border-radius: var(--radius-sm); padding: 9px 12px; font: 15px var(--font); }
.exp-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.exp-bar .recap-check { margin-left: auto; }
.exp-list-pick { flex: 1; min-height: 120px; overflow-y: auto; background: var(--surface); border-radius: var(--radius-sm); padding: 4px 0; }
.exp-region { display: flex; gap: 10px; align-items: center; padding: 10px 14px 6px; font-size: 12px; font-weight: 700; color: var(--link); letter-spacing: .04em; cursor: pointer; }
.exp-row { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; padding: 8px 14px 8px 30px; cursor: pointer; border-top: 1px solid var(--line); }
.exp-row input, .exp-region input { width: 18px; height: 18px; accent-color: var(--blue); margin: 0; }
.exp-row .exp-name { font-size: 15px; }
.exp-row small { grid-column: 2; font-size: 12px; color: var(--muted); }
#expGo:disabled { opacity: .5; }

/* Lucide 線條圖示（取代 emoji 與符號字） */
.ic { width: 1em; height: 1em; vertical-align: -0.14em; flex: none; }
.fab .ic { width: 22px; height: 22px; vertical-align: middle; }
.icon .ic { width: 18px; height: 18px; vertical-align: middle; }
.tile .ti .ic { width: 1.1em; height: 1.1em; }
.sa-icon .ic { width: 28px; height: 28px; }
#favOnly .ic { margin-right: 4px; }
.icon.fav .ic, #favOnly.on .ic { fill: none; }
.icon.fav.on .ic, .list .star .ic, .list li.group .ic { fill: currentColor; }
.rate button .ic { width: 26px; height: 26px; stroke-width: 1.6; }
.rate button.on .ic { fill: currentColor; }
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--red); vertical-align: 1px; margin-right: 2px; }
.visited-tag .ic { stroke-width: 3; }
.flag-code { display: inline-block; margin-right: 6px; padding: 0 5px; border-radius: 4px; background: var(--band); color: var(--text-2); font: 700 10px/16px var(--font-lat); letter-spacing: .06em; vertical-align: 1px; }
.dm-site-label .flag-code { background: rgba(255,255,255,.2); color: #fff; }
.dm-entry-ic { color: #ff8a1f; line-height: 0; filter: drop-shadow(0 0 2px #000); }
.dm-entry-ic .ic { width: 30px; height: 30px; stroke-width: 3; }
.dm-buoy { font-size: 0; line-height: 0; }
.dm-buoy .ic { width: 26px; height: 26px; stroke-width: 3.2; filter: drop-shadow(0 0 2px #fff); }
.dm-glyph { line-height: 0; filter: drop-shadow(0 0 2px #fff); }
.dm-glyph .ic { width: 20px; height: 20px; stroke-width: 2.6; }
.dm-em .ic { width: 15px; height: 15px; stroke-width: 3.4; }
.em-ic .ic { width: 16px; height: 16px; stroke-width: 3.4; }
#siPill .ic { width: 14px; height: 14px; margin-right: 4px; vertical-align: -2px; }
#logList .ic { width: 13px; height: 13px; vertical-align: -2px; margin-right: 1px; }
.swatch.glyph { background: #fff; box-shadow: 0 0 0 1px var(--line); font: 900 12px var(--font-lat); }  /* 與地圖標記同為白底 */
.swatch .ic { width: 16px; height: 16px; stroke-width: 2.6; vertical-align: middle; }

/* 按鈕上的圖示 */
.pill .ic, .link .ic, .row-btn > span:first-child .ic, .exp-list-pick .ic, #logExportMenu summary .ic { width: 1.05em; height: 1.05em; margin-right: 6px; vertical-align: -0.16em; }
.pill.small .ic { margin-right: 4px; }
.row-btn > span:first-child { display: inline-flex; align-items: center; }
.danger .ic, .danger-row .ic { color: inherit; }
/* 安裝提示與 QR */
#installBar { grid-template-columns: auto 1fr; }
#installBar .ib-icon { width: 44px; height: 44px; border-radius: var(--radius-sm); grid-row: span 2; }
#installBar picture { display: contents; }   /* 深色模式換深色圖示：picture 不參與排版，img 仍是格線項目 */
#installBar .sa-actions { grid-column: 1 / -1; flex-wrap: wrap; }
#ibText .ic { width: 1.1em; height: 1.1em; vertical-align: -0.2em; color: var(--link); }
.qr-sheet { width: min(400px, 100%); text-align: center; }
.qr-box { background: #fff; border-radius: var(--radius); padding: 18px; width: min(260px, 70vw); margin: 12px auto 8px; }
.qr-box canvas, .qr-box img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.qr-url { font: 13px var(--font-lat); color: var(--muted); word-break: break-all; margin: 4px 0 10px; }
.qr-sheet .actions { justify-content: center; }

/* 標頭：只留 logo（左）＋語言、日夜（右） */
.brand { align-items: center !important; }
.brand h1.logo { margin: 0; font-size: 0; line-height: 0; display: flex; }
.brand .logo { gap: 10px; }
@media (max-width: 767px), (max-width: 900px) and (orientation: portrait), (max-width: 900px) and (max-height: 499px) { .brand .dm-mark { width: 34px; height: 34px; } .brand .dm-word { font-size: 19px; } .brand { padding: 8px 16px 8px !important; } }

/* 可收納的分組標頭（潛點地區、生物月份） */
.list li.group.fold { cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 12px 12px 8px; user-select: none; }
.list li.group.fold .g-name { flex: 1; }
.list li.group.fold .g-count { font: 600 12px var(--font-lat); color: var(--muted); background: var(--soft); border-radius: var(--pill); padding: 1px 8px; letter-spacing: 0; }
.g-chev { width: 16px; height: 16px; color: var(--muted); transition: transform .2s; transform: rotate(-90deg); flex: none; }
.open > .g-chev, details[open] > summary .g-chev { transform: rotate(0deg); }
.list li.group.fold .ic:not(.g-chev) { fill: currentColor; }

/* 日誌表格：依年份收納 */
.log-year { background: var(--surface); border-radius: var(--radius-sm); margin: 0 0 10px; overflow: hidden; }
.log-year summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.log-year summary::-webkit-details-marker { display: none; }
.log-year summary b { font: 700 17px var(--font-lat); }
.log-year summary small { flex: 1; color: var(--muted); font-size: 12px; }
#logList .empty { color: var(--muted); font-size: 14px; padding: 12px 4px; }

/* 設定頁可收納段落（圖例、資料來源） */
.fold-sec > summary { list-style: none; cursor: pointer; display: flex; align-items: center; }
.fold-sec > summary::-webkit-details-marker { display: none; }
.fold-sec > summary::after { content: ''; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); margin-right: 10px; transition: transform .2s; }
.fold-sec[open] > summary::after { transform: rotate(45deg); }

/* 匯出選單的地區也可收納 */
.exp-region .g-chev { margin-left: auto; }
.exp-region .g-count { font: 600 12px var(--font-lat); color: var(--muted); background: var(--soft); border-radius: var(--pill); padding: 1px 7px; }

/* 生物表單：年月欄位需要較寬，獨占一行；數量、水深兩欄 */
#bioForm .bio-row { flex-wrap: wrap; }
#bioForm .bio-row .field:first-child { flex: 1 1 100%; }
#bioForm .bio-row .field:not(:first-child) { flex: 1 1 calc(50% - 8px); min-width: 0; }
#bioForm .invalid, #certForm .invalid { outline: 2px solid #FF4D4D; outline-offset: 1px; }
/* 日誌表格：支數欄要容得下 4 位數，不縮成「…」；只有潛點欄（可能是匯入的長英數字）截斷 */

/* Google 備份引導 */
.gd-guide { width: min(480px, 100%); max-height: calc(100dvh - 48px); overflow-y: auto; }
.gdg-steps { list-style: none; margin: 12px 0; padding: 0; display: flex; flex-direction: column; gap: 10px; counter-reset: gd; }
.gdg-steps li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start; background: var(--surface); border-radius: var(--radius-sm); padding: 12px; }
.gdg-steps li > .ic { width: 40px; height: 40px; padding: 9px; box-sizing: border-box; border-radius: var(--radius-sm); background: linear-gradient(180deg, #5AC8FA, #0A62D2); color: #fff; }
.gdg-steps b { display: block; font-size: 15px; margin-bottom: 2px; }
.gdg-steps span { font-size: 13px; line-height: 1.55; color: var(--muted); }
.gdg-note { font-size: 14px; line-height: 1.6; background: var(--soft); border-radius: var(--radius-sm); padding: 10px 12px; margin: 10px 0 0; }
.gd-guide .gd-adv { margin-top: 14px; }

/* 防止 iOS 整頁縮放：雙擊不放大、輸入框字級 ≥ 16px（小於 16px 點進去會自動放大且縮不回） */
html, body { touch-action: manipulation; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.leaflet-container { touch-action: none; }
@media (max-width: 767px), (max-width: 900px) and (orientation: portrait), (max-width: 900px) and (max-height: 499px) {
  input, select, textarea, .field input, .field select, .field textarea, .row input, .row-text textarea, .search input, .exp-filter { font-size: 16px !important; }
}

/* 整段中英各一份（段落內有粗體，逐字翻會斷句） */
html[lang="en"] .zh-only { display: none; }
html:not([lang="en"]) .en-only { display: none; }

/* 林克全手繪圖轉出的元件：依縮放分層顯示（16 級以下全藏；17 級以下藏深度；18 級以下藏方位文字） */
.lin-far .lin-f, .lin-lt17 .lin-f.lin-d, .lin-lt18 .lin-f.dm-bearing { display: none !important; }
.dm-area { font-weight: 600; opacity: .9; }
/* 向量線稿在淺色底圖上轉成深色 */
.dm-overlay.ink-dark { filter: brightness(0); }

/* 入水點 AR */
.ar-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.ar-mode { flex: 0 0 auto; }
.ar-mode button { padding: 5px 10px; }
.ar-route { position: absolute; transform-origin: 50% 100%; white-space: nowrap; background: rgba(160,20,20,.85); color: #fff; font: 700 13px var(--font-lat); padding: 3px 8px; border-radius: 8px; pointer-events: none; }
.ar-area { position: absolute; white-space: nowrap; color: #fff; font: 700 14px var(--font); text-shadow: 0 1px 3px #000, 0 0 6px rgba(0,0,0,.8); pointer-events: none; }
.ar-entry { position: absolute; transform-origin: 50% 100%; pointer-events: none; }
.ar-entry .ar-card { background: rgba(232,120,20,.92); border-color: rgba(255,255,255,.5); }
.ar-entry .ar-name .ic { width: 16px; height: 16px; margin-right: 4px; }
.ar-guide { position: absolute; left: 10px; right: 10px; top: calc(96px + var(--safe-t)); border-radius: 14px; padding: 8px 12px; color: #fff; background: rgba(20,24,28,.72); display: flex; flex-direction: column; gap: 3px; font-size: 14px; }
.ar-guide.hidden { display: none; }
.ar-guide b { font-size: 15px; }
.ar-guide .ar-g-route { color: #FFB4B4; font-family: var(--font-lat), var(--font); }
.ar-guide small { color: rgba(255,255,255,.7); font-size: 12px; }
.ar-range.hidden { display: none; }
#arClose { white-space: nowrap; flex: 0 0 auto; }
/* AR 底列：模式切換自成一列，範圍滑桿有足夠寬度 */
.ar-bottom { flex-wrap: wrap; }
.ar-bottom .ar-mode { flex: 1 1 100%; order: -1; margin: 0; }
.ar-range { min-width: 0; white-space: nowrap; }
.ar-range output { min-width: 3.2em; text-align: right; }
.ar-empty { max-width: 80%; text-align: center; line-height: 1.5; }
.ar-empty b { display: block; font-size: 16px; }
.dm-overlay-text span.fix { transform: none; pointer-events: none !important; outline: none !important; }
/* 生物圖示 */
.dm-bio { display: flex; align-items: center; justify-content: center; }
.dm-bio svg { width: 18px; height: 18px; color: #fff; }
.dm-bio.sel svg { color: #1F1F1F; }
.bio-ic { display: inline-flex; width: 22px; height: 22px; margin-right: 8px; border-radius: 50%; background: #2FB36B; color: #fff; align-items: center; justify-content: center; flex: none; vertical-align: middle; }
.bio-ic:empty { display: none; }
.bio-ic svg { width: 16px; height: 16px; }

/* 潛水店 */
.dm-shop { width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: #38B6FF; color: #1F1F1F; border: 2px solid #fff; box-shadow: 0 0 6px rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; cursor: grab; }
.dm-shop .ic { width: 16px; height: 16px; stroke-width: 2.4; }
.dm-shop.logo { width: 60px; height: 36px; margin: -18px 0 0 -30px; border-radius: 9px; background: #fff center / calc(100% - 8px) calc(100% - 8px) no-repeat; border-color: #38B6FF; }
.shop-thumb { flex: none; width: 44px; height: 32px; border-radius: var(--radius-badge); background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; color: #1F1F1F; }
.shop-thumb img { max-width: 40px; max-height: 28px; object-fit: contain; }
.shop-thumb .ic { width: 18px; height: 18px; }
.shop-logo-row { display: flex; gap: 14px; align-items: center; margin: 10px 0; }
.shop-logo { flex: none; width: 148px; height: 96px; border-radius: var(--radius-sm); background: var(--band); border: 1.5px dashed var(--muted); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; cursor: pointer; color: var(--muted); font-size: 13px; }
.shop-logo img { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); object-fit: contain; display: none; }
.shop-logo.has { background: #fff; border-style: solid; }
.shop-logo.has img { display: block; }
.shop-logo.has span { display: none; }
.shop-logo-side { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.shop-stamp { display: flex; align-items: center; gap: 8px; font-size: 15px; }

/* 3D 示意圖 */
.v3 { position: fixed; inset: 0; z-index: 1300; background: #050A12; color: #fff; }
.v3 > canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: grab; display: block; }
.v3 > canvas:active { cursor: grabbing; }
body.v3-on { overflow: hidden; }
.v3-top { position: absolute; left: calc(10px + var(--safe-l)); right: calc(64px + var(--safe-r)); top: calc(10px + var(--safe-t)); padding: 10px 12px; border-radius: 16px; background: rgba(20,24,28,.72); }
.v3-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.v3-title b { font: 700 17px var(--font); }
.v3-badge { background: #FF9F0A; color: #1F1F1F; font: 800 12px var(--font); padding: 3px 9px; border-radius: 980px; letter-spacing: .04em; }
.v3-sub { font-size: 12px; line-height: 1.5; color: rgba(255,255,255,.75); margin-top: 4px; }
.v3-legend { position: absolute; left: calc(10px + var(--safe-l)); bottom: calc(118px + var(--safe-b)); display: flex; flex-wrap: wrap; gap: 6px 12px; max-width: calc(100% - 20px); padding: 7px 10px; border-radius: 12px; background: rgba(20,24,28,.66); font-size: 12px; }
.v3-legend span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.v3-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.v3-depth i { width: 70px !important; height: 8px !important; background: linear-gradient(90deg, rgb(150,225,235), rgb(64,170,205), rgb(30,105,165), rgb(16,52,110)) !important; }
.v3-depth em { font-style: normal; font: 600 11px var(--font-lat); color: rgba(255,255,255,.8); }
.v3-bottom { position: absolute; left: calc(10px + var(--safe-l)); right: calc(10px + var(--safe-r)); bottom: calc(14px + var(--safe-b)); display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; padding: 8px 10px; border-radius: 16px; background: rgba(20,24,28,.72); }
.v3-bottom .seg { margin: 0; }
.v3-chk { display: flex; align-items: center; gap: 4px; font-size: 13px; }
.v3-bottom .pill { background: rgba(255,255,255,.14); color: #fff; }
#v3Close { margin-left: auto; }
.v3-hint { position: absolute; left: 0; right: 0; bottom: calc(172px + var(--safe-b)); text-align: center; font-size: 11px; color: rgba(255,255,255,.55); pointer-events: none; }
@media (min-width: 901px), (min-width: 768px) and (orientation: landscape) and (min-height: 500px) { .v3-top { right: auto; max-width: 560px; } .v3-legend { bottom: calc(76px + var(--safe-b)); } .v3-hint { bottom: calc(120px + var(--safe-b)); } }
.v3-bottom .seg button { padding: 5px 10px; font-size: 13px; min-height: 0; }
.v3-bottom .pill { padding: 6px 12px; font-size: 13px; }
.v3 { --v3b: 72px; }
.v3-legend { bottom: calc(var(--v3b) + 22px + var(--safe-b)) !important; }
.v3-hint { bottom: calc(var(--v3b) + 64px + var(--safe-b)) !important; }
@media (max-width: 420px) { .v3-legend { font-size: 11px; gap: 4px 9px; } .v3-hint { display: none; } .v3-top .v3-sub:first-of-type { font-size: 11px; } }
/* 潛水店 logo：一律圓形 */
.dm-shop.logo { width: 44px !important; height: 44px !important; margin: -22px 0 0 -22px !important; border-radius: 50% !important; background-color: #fff !important; background-position: center !important; background-size: cover !important; background-repeat: no-repeat !important; border: 2.5px solid #fff !important; box-shadow: 0 0 0 2px #38B6FF, 0 2px 8px rgba(0,0,0,.5) !important; padding: 0 !important; }
.shop-thumb { width: 36px !important; height: 36px !important; border-radius: 50% !important; }
.shop-thumb img { width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; object-fit: cover !important; }
.shop-logo { width: 112px !important; height: 112px !important; border-radius: 50% !important; }
.shop-logo img { inset: 0 !important; width: 100% !important; height: 100% !important; border-radius: 50%; object-fit: cover !important; }

/* ================= Apple 設計檢視（v111）=================
   原則：強調色一頁一處、次要控制改成 iOS 分段控制、字級 ≥ 12px、圓角與陰影用 token、中文標題正字距 0.04em */

/* 次要分段控制（岸潛／船潛、主題、語言、回顧類型、3D 視角…）：灰底軌道＋白色滑塊，主導覽維持藍色 */
.seg:not([role="tablist"]) { background: var(--soft); box-shadow: inset 0 0 0 1px var(--line); }
.seg:not([role="tablist"]) button.active { background: var(--surface); color: var(--text); font-weight: 700; box-shadow: var(--shadow-sm); }
.v3 .seg:not([role="tablist"]) button.active, .ar .seg:not([role="tablist"]) button.active { background: #fff; color: #1D1D1F; }
.v3 .seg:not([role="tablist"]), .ar .seg:not([role="tablist"]) { background: rgba(255,255,255,.14); box-shadow: none; }
.v3 .seg:not([role="tablist"]) button, .ar .seg:not([role="tablist"]) button { color: #fff; }
.v3 .seg:not([role="tablist"]) button.active, .ar .seg:not([role="tablist"]) button.active { color: #1D1D1F; }

/* 清單分組標題：中性色（藍色留給主要動作） */
.list li.group { color: var(--muted); font-size: 13px; font-weight: 700; letter-spacing: .04em; }

/* 卡片：柔和雙層陰影；淺色模式才明顯 */
.card { box-shadow: var(--shadow-sm); }

/* 潛點卡片開著時，收起搜尋與篩選（像地圖 App 的地點卡） */
#tab-sites:has(#siteCard:not(.hidden)) > .search,
#tab-sites:has(#siteCard:not(.hidden)) > #modeSeg,
#tab-sites:has(#siteCard:not(.hidden)) > .lv-legend { display: none; }
#scName { font-size: 24px; line-height: 1.15; letter-spacing: .04em; }
#scName .sc-sub { display: block; margin-top: 4px; font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--muted); }

/* 動作磚：固定 4 欄，兩列排滿；文字不斷成兩行 */
.tiles { grid-template-columns: repeat(4, 1fr) !important; gap: 8px !important; }
.tile { min-height: 68px; border-radius: var(--radius-sm); font-size: 13px; line-height: 1.2; text-align: center; }
.tile .ti { font-size: 22px; }

/* 緊急醫療：撥打、導航改成圓形圖示鈕，讓醫院名稱與說明有完整寬度 */
.em-act { gap: 8px; }
.em-act .pill { width: 40px; height: 40px; padding: 0; font-size: 0; gap: 0; border-radius: 50%; }
.em-act .pill .ic { width: 18px; height: 18px; margin: 0; }
.em-row b { font-size: 15px; line-height: 1.3; }
.em-row small { font-size: 13px; line-height: 1.45; }

/* 日誌：「匯出給其他 App」是一般列，不是標題 */
#logExportMenu > summary { font-size: 15px; font-weight: 500; letter-spacing: 0; }

/* 生物清單：圖示＋名稱靠左，沒有對應圖示的也留同樣位置 */
#bioList li:not(.group) > span:nth-child(2) { flex: 1; min-width: 0; text-align: left; }
.bio-ic { width: 28px; height: 28px; margin-right: 2px; }
.bio-ic svg { width: 18px; height: 18px; }
.bio-ic.none { background: var(--band); color: var(--muted); font: 700 13px var(--font); }
.bio-ic:empty { display: inline-flex; }

/* 繪圖元件：像 iOS 的選項磚（圓角、無外框、左側圖例、選取時藍色） */
.palette .btn { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; border: 0; border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); font: 500 14px var(--font); text-align: left; cursor: pointer; box-shadow: var(--shadow-sm); }
.palette .btn > :first-child { flex: none; }
.palette .btn:active { transform: scale(.98); }
.palette .btn.on { background: var(--blue-fill); color: var(--on-blue); font-weight: 700; }

/* 主要與次要按鈕的層級 */
.pill { font-weight: 600; }
.pill.primary { box-shadow: var(--shadow-sm); }

/* 3D：WebGL 地形在下、2D 標籤層在上（接收拖曳） */
.v3 { background: linear-gradient(#0E1A2B, #050A12); }
#v3GL { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
#v3GL.hidden { display: none; }
body.v3-on #installBar { display: none !important; }

/* 海況預報 */
details.sec.forecast > summary small { font-weight: 500; font-size: 13px; letter-spacing: 0; margin-left: 6px; }
.sea-now { display: inline-flex; align-items: center; gap: 5px; }
.sea-dot { width: 11px; height: 11px; border-radius: 50%; flex: none; display: inline-block; background: var(--muted); }
.sea-dot.ok { background: var(--green); } .sea-dot.warn { background: var(--orange); } .sea-dot.bad { background: var(--red); }
.sea-obs { margin-left: 6px; font-weight: 500; color: var(--muted); font-size: 11px; }
.sea-lights li small { display: block; font-size: 10px; }
.sea-lights { list-style: none; margin: 8px 0 4px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; font-size: 13px; }
.sea-lights li { display: flex; align-items: center; gap: 7px; padding: 8px 10px; border-radius: 10px; background: var(--line); }
.sea-lights li span:not(.sea-dot) { flex: 1; color: var(--muted); } .sea-lights li b { font-weight: 700; }
.push-row { margin: 8px 0 2px; } .push-bell { min-height: 44px; padding: 0 18px; font-size: 14px; } .push-bell .ic { width: 1.1em; height: 1.1em; }
.fc-more { margin-top: 6px; } .fc-more > summary { font-size: 13px; font-weight: 600; cursor: pointer; padding: 6px 0; }
.plan-sea { margin: 4px 0 10px; line-height: 1.6; } .plan-sea .sea-dot { vertical-align: -1px; }
.rv-src { display: inline-block; padding: 0 6px; border-radius: 6px; background: var(--line); font-size: 11px; font-weight: 700; margin-right: 4px; }
.acc-tag { display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: 6px; font-size: 11px; font-weight: 700; background: var(--line); color: var(--muted); }
.acc-tag.permit { color: var(--orange); }
li.acc-off > span:first-child { opacity: .45; }
.dm-site.acc-off { opacity: .4; filter: grayscale(1); }
/* v199 拉遠時的潛點數量泡泡：玻璃底（不用 backdrop-filter，幾十個泡泡在 iPhone 上才不會卡）、藍色光環，觸控範圍至少 44 px */
.dm-cluster-wrap { display: flex; align-items: center; justify-content: center; border-radius: 50%; outline: none; }
.dm-cluster { --sz: 38px; width: var(--sz); height: var(--sz); flex: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font: 700 14px/1 -apple-system, BlinkMacSystemFont, 'PingFang TC', sans-serif; font-variant-numeric: tabular-nums; color: #fff;
  background: rgba(14, 31, 61, .82); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 0 3px rgba(56, 182, 255, .55), 0 4px 12px rgba(0, 0, 0, .4); cursor: pointer; }
.dm-cluster.fav { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 0 3px rgba(245, 197, 66, .7), 0 4px 12px rgba(0, 0, 0, .4); }
.dm-cluster.acc-off { opacity: .5; filter: grayscale(1); }
.dm-cluster-wrap:focus-visible .dm-cluster { outline: 3px solid #fff; outline-offset: 3px; }
@media (hover: hover) { .dm-cluster-wrap:hover .dm-cluster { background: rgba(21, 63, 130, .9); } }
.acc-now { display: block; font-weight: 700; color: var(--orange); }
#scApply.acc-off .acc-now { color: var(--red-text); }
.plan-check-wrap { margin: 4px 0 10px; }
.plan-check { list-style: none; margin: 6px 0 0; padding: 0; font-size: 13px; display: grid; gap: 4px; }
.plan-check li { display: flex; gap: 8px; align-items: baseline; }
.plan-check .pc-mark { width: 18px; height: 18px; flex: none; border-radius: 50%; display: inline-grid; place-items: center; font-size: 11px; font-weight: 800; color: #fff; background: var(--green); }
.plan-check li.warn .pc-mark { background: var(--orange); } .plan-check li.bad .pc-mark { background: var(--red); }
/* 下水前檢查清單（checklist.js，v194）：沿用表單玻璃（.sheet-body.glass）與 .plan-check 燈號；勾選列整列可點、至少 44 px */
.ck .ck-h, .ck legend { font-size: 13px; font-weight: 700; color: var(--muted); letter-spacing: .02em; margin: 14px 0 4px; padding: 0; }
.ck .ck-sec { border: 0; margin: 0; padding: 0; min-width: 0; }
.plan-check li.info .pc-mark { background: var(--muted); }
.ck .ck-auto { font-size: 14px; gap: 8px; }
.ck .ck-auto li > span { line-height: 1.45; }
.ck .ck-auto a { color: var(--link); }
.ck .ck-em { display: block; margin-top: 2px; }
.ck .ck-calls { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ck .ck-calls .pill, .ck .ck-link { min-height: 44px; }
.ck .ck-block { margin: 10px 0 4px; padding: 10px 12px; border-radius: 16px; background: rgba(255, 69, 58, .14); box-shadow: inset 0 0 0 1px rgba(255, 69, 58, .45); color: var(--text); font-size: 14px; line-height: 1.5; display: grid; gap: 4px; }
.ck .ck-block b { color: var(--red-text); }
.ck .ck-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ck .ck-item { display: flex; align-items: center; gap: 4px; border-radius: 12px; }
.ck .ck-row { flex: 1; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 6px; font-size: 15px; line-height: 1.35; cursor: pointer; border-radius: 12px; }
.ck .ck-row:hover { background: var(--soft); }
.ck .ck-row input { width: 22px; height: 22px; flex: none; margin: 0; }
.ck .ck-item.done .ck-row span { color: var(--muted); }
.ck .ck-ed { display: flex; flex: none; }
.ck .ck-ed .icon { width: 44px; height: 44px; }
.ck .ck-ed [data-ck="up"] svg { transform: rotate(180deg); }
.ck .ck-ed .icon:disabled { opacity: .3; }
.ck .ck-add.field { display: flex; gap: 6px; margin: 6px 0 2px; }
.ck .ck-add input { flex: 1; min-height: 44px; margin-top: 0; }
/* v216 行前打包（packing.js，沿用下水前檢查的 .ck 樣式） */
.pk .pk-why { display: block; font-size: 12px; color: var(--muted); font-weight: 400; margin-top: 2px; }
.pk .pk-tpls { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.pk .pk-more { margin-top: 12px; }
.pk .pk-more > summary { cursor: pointer; font-size: 14px; color: var(--muted); padding: 8px 0; min-height: 44px; display: flex; align-items: center; }
.ck .ck-prog { margin: 14px 0 4px; font-size: 14px; font-weight: 600; }
.ck .ck-actions .pill, .ck .ck-tpl .pill { min-height: 44px; }
.ck .ck-actions .pill[disabled] { opacity: .55; cursor: not-allowed; }
.ck .ck-safe { margin-top: 12px; }
.ck .ck-sum { margin: 10px 0; padding: 12px 14px; border-radius: 16px; background: var(--soft); box-shadow: var(--lg-ring, none); }
.ck .ck-sum-h { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; color: var(--green-text); font-size: 16px; }
.ck .ck-sum-h b { color: var(--text); }
.ck .ck-dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; font-size: 14px; }
.ck .ck-dl dt { color: var(--muted); }
.ck .ck-dl dd { margin: 0; }
.ck .ck-red { color: var(--red-text); font-weight: 600; }
.obs-trend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--muted); }
.obs-trend > span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.spark { width: 72px; height: 20px; } .spark path { fill: none; stroke: var(--blue); stroke-width: 1.6; stroke-linejoin: round; }
.obs-suit { margin: 8px 0 2px; font-size: 13px; }
.obs { list-style: none; margin: 6px 0 4px; padding: 0; font-size: 13px; font-variant-numeric: tabular-nums; }
.obs li { display: flex; flex-direction: column; gap: 2px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.obs-st { font-weight: 600; } .obs-st small { font-weight: 400; color: var(--muted); margin-left: 6px; }
.obs-v { display: flex; flex-wrap: wrap; gap: 2px 12px; line-height: 1.6; } .obs-v > span { white-space: nowrap; }
.fc-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 6px; font-variant-numeric: tabular-nums; }
.fc-table th { text-align: left; font-weight: 600; color: var(--muted); padding: 6px 4px; border-bottom: 1px solid var(--line); font-size: 12px; }
.fc-table td { padding: 7px 4px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.fc-table td small { color: var(--muted); font-size: 12px; }
#nearOnly.on { background: var(--blue-fill); color: var(--on-blue); }
.offline-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 2px; }
.offline-row small { font-size: 12px; }
/* 離線地圖（v194）：表單選項、估計、授權說明；離線時標頭的「離線地圖」小標 */
.off-body .off-opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 10px 0; }
.off-body .off-opt > span { font-weight: 600; flex: none; }
.off-body .off-opt .seg.mini { flex: 0 1 300px; }
.off-body .off-opt .seg button { min-height: 44px; }
.off-body .off-est { margin: 14px 0 4px; font-weight: 600; font-variant-numeric: tabular-nums; }
.off-body .off-est.off-warn { color: var(--orange); }
.off-body .pk-prog small { font-variant-numeric: tabular-nums; }
.off-body .off-lic { margin-top: 14px; }
.off-badge { margin-left: 4px; padding: 2px 8px; border-radius: var(--pill); background: var(--blue-fill); color: var(--on-blue); font: 700 11px var(--font); letter-spacing: .02em; }

/* 對位工具 */
#alignBar { position: fixed; z-index: 1200; left: 12px; right: 12px; top: calc(12px + var(--safe-t)); border-radius: var(--radius); padding: 12px 14px; max-width: 560px; margin: 0 auto; }
#alignBar .al-step b { display: block; font-size: 15px; }
#alignBar .al-step small { display: block; font-size: 13px; margin-top: 2px; line-height: 1.45; }
#alignBar .actions { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 8px; }
.al-dot { width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.6); }
.al-dot.img { background: #FF9F0A; }
.al-dot.sat { background: #0A84FF; }
.leaflet-container.aligning { cursor: crosshair; }
.leaflet-container.aligning .leaflet-marker-pane > *:not(:has(.al-dot)), .leaflet-container.aligning .leaflet-overlay-pane path, .leaflet-container.aligning .leaflet-tooltip-pane { pointer-events: none !important; }
body.aligning #coordBar { display: none; }

/* 3D 資訊卡與深度剖面 */
.v3-info { position: absolute; left: 10px; right: 10px; bottom: calc(var(--v3b) + 64px + var(--safe-b)); max-width: 460px; margin: 0 auto; padding: 12px 14px; border-radius: var(--radius); background: rgba(20,24,28,.86); color: #fff; z-index: 2; }
.v3-info b { display: flex; align-items: center; gap: 6px; font-size: 16px; line-height: 1.3; padding-right: 34px; }
.v3-info .eyebrow { color: #64D2FF; }
.v3-info p { margin: 6px 0 0; font-size: 13px; line-height: 1.45; }
.v3-info .muted { color: rgba(255,255,255,.7); }
.v3-info-x { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; color: #fff; background: rgba(255,255,255,.12); }
.v3-prof { width: 100%; height: auto; margin-top: 8px; border-radius: 8px; display: block; }

/* 統計圖表 */
#logCharts > summary .ic { width: 1.05em; height: 1.05em; }
.c-h { font-size: 13px; font-weight: 700; color: var(--muted); margin: 14px 0 4px; letter-spacing: .04em; }
.chart { width: 100%; height: auto; display: block; }
.chart .c-bar { fill: var(--blue-fill); }
.chart .c-val { font: 600 10px var(--font-lat); fill: var(--text); text-anchor: middle; }
.chart .c-lab { font: 500 10px var(--font-lat); fill: var(--muted); text-anchor: middle; }
.chart .c-lab[text-anchor="start"] { text-anchor: start; } .chart .c-lab[text-anchor="end"] { text-anchor: end; }   /* CSS 會蓋掉 SVG 的屬性：頭尾的標籤照屬性對齊，才不會被切掉 */
.chart .c-line { fill: none; stroke: var(--blue-fill); stroke-width: 2; }
.chart .c-dot { fill: var(--surface); stroke: var(--blue-fill); stroke-width: 2; }
.chart .c-grid { stroke: var(--line); }
.c-hbars { display: flex; flex-direction: column; gap: 6px; }
.c-hrow { display: grid; grid-template-columns: minmax(0, 40%) 1fr 28px; gap: 8px; align-items: center; font-size: 13px; }
.c-hk { display: flex; align-items: center; gap: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-hk .bio-ic { width: 20px; height: 20px; } .c-hk .bio-ic svg { width: 13px; height: 13px; }
.c-htrack { height: 8px; border-radius: 4px; background: var(--soft); overflow: hidden; }
.c-htrack span { display: block; height: 100%; background: var(--blue-fill); border-radius: 4px; }
.c-hrow b { text-align: right; font: 700 13px var(--font-lat); }
/* 照片牆 */
.photo-wall { max-height: calc(100dvh - 40px); overflow-y: auto; width: min(640px, 100%); }
#photoGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.pw-h { grid-column: 1 / -1; font-size: 13px; font-weight: 700; color: var(--muted); margin: 12px 2px 2px; letter-spacing: .04em; }
.pw-cell { aspect-ratio: 1; border: 0; padding: 0; border-radius: 8px; background: var(--band) center / cover no-repeat; cursor: pointer; }
.pw-cell:not(.loaded) { animation: pw-pulse 1.4s ease-in-out infinite; }
@keyframes pw-pulse { 50% { opacity: .55; } }

/* 大字模式：用 zoom 放大內容（寬度自動貼合外框），地圖、3D、AR 不受影響 */
:root[data-fs="l"] #panel .scroll, :root[data-fs="l"] #panel .brand, :root[data-fs="l"] #panel nav.seg, :root[data-fs="l"] .sheet-body, :root[data-fs="l"] .start-ask, :root[data-fs="l"] #alignBar, :root[data-fs="l"] #toast { zoom: 1.15; }
:root[data-fs="xl"] #panel .scroll, :root[data-fs="xl"] #panel .brand, :root[data-fs="xl"] #panel nav.seg, :root[data-fs="xl"] .sheet-body, :root[data-fs="xl"] .start-ask, :root[data-fs="xl"] #alignBar, :root[data-fs="xl"] #toast { zoom: 1.3; }
:root[data-fs="l"] .row > span:first-child, :root[data-fs="xl"] .row > span:first-child { min-width: 0; overflow-wrap: anywhere; }
:root[data-fs] .row .switch, :root[data-fs] .row input[type=checkbox] { flex: none; }

/* 潮位曲線 */
.t-h { font-size: 13px; font-weight: 700; color: var(--muted); margin: 12px 0 2px; letter-spacing: .04em; }
.tide { width: 100%; height: auto; display: block; }
.tide .t-fill { fill: rgba(47,128,237,.14); } .tide .t-line { fill: none; stroke: var(--blue-fill); stroke-width: 2; }
.tide .t-grid { stroke: var(--line); } .tide .t-now { stroke: #FF9F0A; stroke-width: 1.5; stroke-dasharray: 3 3; }
.tide .t-hi { fill: var(--blue-fill); } .tide .t-lo { fill: var(--surface); stroke: var(--blue-fill); stroke-width: 1.5; }
.tide .t-val { font: 600 9px var(--font-lat); fill: var(--text); text-anchor: middle; paint-order: stroke; stroke: var(--surface); stroke-width: 2.5px; stroke-linejoin: round; } .tide .t-lab { font: 500 10px var(--font); fill: var(--muted); }
.t-next { margin: 4px 0 0; color: var(--text-2); }
/* 我在這個潛點 */
.sc-mine { margin: 10px 0 0; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--soft); }
.sm-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 14px; }
.sm-head .ic { width: 16px; height: 16px; color: var(--link); } .sm-head small { font-size: 12px; }
.sm-m { font-size: 12px; padding: 3px 8px; border-radius: var(--pill); background: var(--surface); color: var(--text-2); } .sm-m b { margin-right: 4px; }

/* 潛水計劃、岸上聯絡人、逾時提醒 */
.row-input { flex: 1; min-width: 0; text-align: right; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 15px; padding: 4px 0; }
.row-col { flex-direction: column; align-items: stretch !important; gap: 6px; }
.row-col textarea { width: 100%; border: 0; border-radius: var(--radius-sm); background: var(--input); color: var(--text); font: 14px/1.5 var(--font); padding: 8px 10px; resize: vertical; }
#planForm textarea { width: 100%; }
.over-ask { border: 2px solid #FF9F0A; }
.over-ask b { color: #FF9F0A; }

/* 里程碑與年度目標 */
.log-goals { margin: 6px 0 4px; }
.ms-row { display: flex; flex-wrap: wrap; gap: 6px; }
.ms-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: var(--pill); background: rgba(245,197,66,.16); color: var(--text); font: 600 13px var(--font); }
.ms-badge .ic { width: 14px; height: 14px; color: #D4A017; }
.goal-box { margin-top: 8px; }
.goal-head { display: flex; justify-content: space-between; align-items: center; font-size: 14px; }
.goal-row { display: grid; grid-template-columns: 44px 1fr auto; gap: 8px; align-items: center; font-size: 13px; margin-top: 6px; }
.goal-track { height: 8px; border-radius: 4px; background: var(--soft); overflow: hidden; } .goal-track span { display: block; height: 100%; background: var(--blue-fill); border-radius: 4px; }
.goal-row b { font: 700 13px var(--font-lat); } .goal-done { color: var(--green-text); margin: 6px 0 0; }
/* 紙本日誌列印 */
#printLog { display: none; }
@media print {
  body.print-log > *:not(#printLog) { display: none !important; }
  body.print-log { background: #fff !important; overflow: visible !important; height: auto !important; }
  body.print-log #printLog { display: block; color: #111; font: 11pt/1.45 -apple-system, "PingFang TC", "Microsoft JhengHei", sans-serif; }
  .pl-page { page-break-after: always; padding: 8mm 10mm; }
  .pl-page:last-child { page-break-after: auto; }
  .pl-head { display: flex; justify-content: space-between; border-bottom: 2px solid #111; padding-bottom: 4px; margin-bottom: 6mm; font-size: 12pt; }
  .pl-dive { border: 1px solid #999; border-radius: 6px; padding: 5mm; margin-bottom: 6mm; page-break-inside: avoid; }
  .pl-dive header { display: flex; gap: 12px; font-size: 13pt; margin-bottom: 3mm; } .pl-dive header b { min-width: 3em; }
  .pl-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2mm 4mm; }
  .pl-f span { display: block; font-size: 8pt; color: #555; } .pl-f b { display: block; border-bottom: 1px solid #bbb; min-height: 1.4em; font-weight: 600; }
  .pl-dive p { margin: 2mm 0 0; } .pl-dive p span { font-size: 8pt; color: #555; margin-right: 6px; }
  .pl-prof { width: 60mm; height: 14mm; margin-top: 2mm; } .pl-prof polyline { fill: none; stroke: #1F6FDB; stroke-width: 1.5; }
  .pl-sign { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4mm; margin-top: 4mm; }
  .pl-sign div { border-top: 1px solid #111; padding-top: 1mm; font-size: 8pt; color: #555; height: 16mm; display: flex; align-items: flex-end; }
}

/* 夜間暗色地圖：淺色底圖反白、衛星調暗 */
:root.map-night .leaflet-layer.base-light { filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.88) saturate(0.7); }
:root.map-night .leaflet-layer.base-photo { filter: brightness(0.8); }
/* 今日摘要 */
#todayAsk { grid-template-columns: 1fr; }
#todayAsk .sa-actions { grid-column: 1; }
.td-body span { display: block; font-size: 13px; color: var(--text); margin-top: 4px; line-height: 1.45; }
.td-body .td-site { color: var(--muted); }
.td-body .td-site b { display: inline; font-size: 13px; color: var(--text); }
.td-body small { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }
/* 錯誤回報 */
.err-acts { display: flex; gap: 14px; flex: none; }
.err-last small { font-size: 12px; overflow-wrap: anywhere; }

/* 頂端搜尋列（取代原本的座標列位置；座標列改成設定開關） */
#topSearch { position: fixed; z-index: 900; left: calc(50% + 226px); transform: translateX(-50%); top: calc(16px + var(--safe-t)); width: min(460px, calc(100vw - 500px));
  display: flex; align-items: center; gap: 8px; padding: 0 6px 0 16px; height: 46px; border-radius: var(--pill); color: var(--muted); }
#topSearch .ic { width: 18px; height: 18px; flex: none; }
#topSearch input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text); font: 500 16px var(--font); outline: none; padding: 0; height: 100%; -webkit-appearance: none; appearance: none; }
#topSearch input::-webkit-search-cancel-button { display: none; }
#topSearch input::placeholder { color: var(--muted); }
#topSearch .icon { width: 34px; height: 34px; flex: none; }
#topSearch .icon.hidden { display: none; }
body.panel-collapsed #topSearch { left: 50%; width: min(460px, calc(100vw - 180px)); }
/* 窄的桌面版（iPhone Duo 內螢幕橫拿 890 寬、小平板）：地圖區太窄，搜尋列改從縮放鈕右邊開始，不蓋到縮放鈕與右側按鈕 */
@media (min-width: 768px) and (max-width: 1100px) and (orientation: landscape) and (min-height: 500px), (min-width: 901px) and (max-width: 1100px) { body:not(.panel-collapsed) #topSearch { left: calc(490px + var(--safe-l)); right: calc(68px + var(--safe-r)); width: auto; transform: none; } }
#siteFilter { display: none; }
.row-search { justify-content: flex-start; }
body:not(.show-coord) #coordBar { display: none; }
body.aligning #topSearch, body.printing #topSearch { display: none; }
@media (max-width: 767px), (max-width: 900px) and (orientation: portrait), (max-width: 900px) and (max-height: 499px) {
  #topSearch { left: calc(12px + var(--safe-l)); right: calc(12px + var(--safe-r)); transform: none; width: auto; top: calc(6px + var(--safe-t)); height: 44px; }
  body.show-coord #coordBar { top: calc(56px + var(--safe-t)); height: 32px; padding: 0 4px 0 12px; font-size: 12px; }
  body.show-coord #coordBar .icon { width: 28px; height: 28px; }
}
@media (min-width: 901px), (min-width: 768px) and (orientation: landscape) and (min-height: 500px) { body.show-coord #coordBar { bottom: calc(18px + var(--safe-b)); } }
/* 潛點卡片：更多功能、收合區塊、顯示項目 */
.tile.more .ti { color: var(--muted); }
.tile.more.on { background: var(--soft); }
.sc-more .tiles { margin-top: 6px; }
.sc-more.hidden { display: none; }
#scMine details > summary { list-style: none; cursor: pointer; }
#scMine details > summary::-webkit-details-marker { display: none; }
#scMine summary::after { content: '›'; margin-left: auto; color: var(--muted); font-size: 18px; line-height: 1; transition: transform .2s; }
#scMine details[open] summary::after { transform: rotate(90deg); }
#siteCard.no-mine #scMine, #siteCard.no-bt #scBT, #siteCard.no-fc #scForecast, #siteCard.no-live #liveBox, #siteCard.no-rep #scReports { display: none !important; }

/* 緊急醫療：收合時標題列就有撥打鈕 */
.em-wrap { position: relative; }
.em-quick { position: absolute; top: 7px; right: 26px; display: inline-flex; gap: 6px; }
.em-quick a { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 12px; border-radius: var(--pill); font-size: 13px; font-weight: 600; text-decoration: none; background: #D32F2F; color: #fff; }   /* 白字對比 5.0（#FF4D4D 只有 3.3） */
.em-quick a.alt { background: var(--soft); color: var(--red-text); }
.em-quick .ic { width: 14px; height: 14px; }
#scEmergency > summary { display: flex; align-items: center; gap: 8px; }

.log-tools.in-menu { margin: 4px 0 12px; }
.seg[role="tablist"] button[hidden] { display: none; }
.props-back { display: inline-block; margin: 0 0 10px; font-size: 15px; }

/* 設定：進階區塊、儲存空間與錯誤紀錄的兩行文字 */
.fold-sec.adv > .group-head:not(summary) { margin-top: 14px; }
#storeList .cert-main, #errList .cert-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#storeList .cert-main b, #errList .cert-main b { font-size: 15px; font-weight: 500; }
#storeList .cert-main small, #errList .cert-main small { font-size: 12px; }

/* 最近看過／我的最愛（搜尋列下方） */
#topSuggest { position: fixed; z-index: 901; left: calc(50% + 226px); transform: translateX(-50%); top: calc(68px + var(--safe-t)); width: min(460px, calc(100vw - 500px));
  border-radius: var(--radius); padding: 10px 12px; display: grid; gap: 8px; }
#topSuggest.hidden { display: none; }
body.panel-collapsed #topSuggest { left: 50%; width: min(460px, calc(100vw - 180px)); }
.ts-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ts-row > span { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); margin-right: 2px; width: 100%; }
.ts-row > span .ic { width: 12px; height: 12px; }
.chip { border: 0; border-radius: var(--pill); padding: 6px 12px; font: 500 14px var(--font); background: var(--soft); color: var(--text); cursor: pointer; }
.chip:active { transform: scale(.97); }
@media (max-width: 767px), (max-width: 900px) and (orientation: portrait), (max-width: 900px) and (max-height: 499px) { #topSuggest { left: 12px; right: 12px; transform: none; width: auto; top: calc(56px + var(--safe-t)); } }
/* 今日浪高標籤 */
.wv-tag { display: inline-flex; align-items: center; gap: 2px; margin-left: 6px; padding: 0 6px; border-radius: var(--pill); background: rgba(56,182,255,.9); color: #06213F; font-weight: 700; font-size: .92em; }
.wv-tag .ic { width: 11px; height: 11px; }
.wv-tag .sea-dot { width: 8px; height: 8px; margin-right: 2px; box-shadow: 0 0 0 1.5px #fff; }
.cmp-light { white-space: nowrap; } .cmp-light .sea-dot { vertical-align: -1px; }
#siteList li.suggest { cursor: pointer; }
#siteList li.calm-note { font-size: 12px; font-weight: 400; color: var(--muted); white-space: normal; line-height: 1.5; }

/* 精簡模式、設定搜尋 */
body.simple .seg[role="tablist"] button[data-tab="draw"] { display: none; }
#tab-data .set-hide { display: none !important; }
.set-search { margin-bottom: 14px; }
.set-search input { width: 100%; }

/* 離線狀態列 */
#netBar { display: none; position: fixed; z-index: 902; left: calc(50% + 226px); transform: translateX(-50%); top: calc(68px + var(--safe-t)); border: 0; border-radius: var(--pill);
  padding: 6px 14px; font: 600 13px var(--font); color: var(--text); align-items: center; gap: 6px; cursor: pointer; }
#netBar .ic { width: 15px; height: 15px; color: var(--muted); }
body.is-offline #netBar { display: inline-flex; }
body.panel-collapsed #netBar { left: 50%; }
@media (max-width: 767px), (max-width: 900px) and (orientation: portrait), (max-width: 900px) and (max-height: 499px) { #netBar { left: 50%; top: calc(56px + var(--safe-t)); } body.is-offline.show-coord #netBar { top: calc(94px + var(--safe-t)); } }
#newText { white-space: pre-line; }

/* 常用潛伴快選 */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 10px; }
.chips:empty { display: none; }
.chips .chip { font-size: 13px; padding: 5px 10px; }

/* 潛點筆記、停車點 */
.sc-notes { display: grid; gap: 6px; margin: 10px 0 0; }
.sc-notes.hidden { display: none; }
.sn-line { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: 0; background: var(--soft); color: var(--text); border-radius: var(--radius-sm); padding: 9px 12px; font: 400 14px/1.45 var(--font); cursor: pointer; }
.sn-line > .ic { width: 16px; height: 16px; color: var(--muted); flex: none; }
.sn-line span { flex: 1; min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.sn-park { cursor: default; }
.sn-park a { color: var(--link); white-space: nowrap; font-size: 13px; }
.park-p, .park-mk { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; background: #2F80ED; color: #fff; font: 800 13px var(--font-lat); flex: none; }
.park-mk { transform: translate(-50%, -50%); box-shadow: 0 1px 4px rgba(0,0,0,.5); border: 1.5px solid #fff; }
.sn-teach i { font-style: normal; font-size: 12px; padding: 1px 7px; margin: 0 4px 2px 0; border-radius: var(--pill); background: rgba(56,182,255,.16); color: var(--accent-2); display: inline-block; }
.chips .chip.on { background: var(--blue-fill); color: var(--on-blue); }
/* 平潮、日月 */
.tide .t-slack { fill: rgba(47,179,107,.16); }
.t-slack-key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: rgba(47,179,107,.35); margin-right: 6px; vertical-align: -1px; }
.sm-table td:first-child { color: var(--muted); }

/* 區塊標題不被右側摘要擠成兩行 */
#scForecast > summary { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
#scForecast > summary > small { white-space: normal; flex: 1; min-width: 0; }

/* 緊急應變步驟、警特報、緊急資訊卡 */
.em-steps { margin: 10px 0 0; border-radius: var(--radius-sm); background: var(--soft); padding: 0 12px; }
.em-steps > summary { cursor: pointer; padding: 10px 0; font-weight: 700; font-size: 14px; color: var(--red-text, #FF9494); list-style: none; }
.em-steps > summary::-webkit-details-marker { display: none; }
.em-steps > summary::after { content: '›'; float: right; color: var(--muted); transition: transform .2s; }
.em-steps[open] > summary::after { transform: rotate(90deg); }
.em-steps ol { margin: 0 0 10px; padding-left: 20px; font-size: 14px; line-height: 1.55; }
.em-steps li { margin: 4px 0; }
.em-warn { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 10px 0 4px; font-size: 13px; }
.em-warn b { width: 100%; font-size: 13px; color: var(--muted); }
.em-warn a { color: var(--link); text-decoration: none; }
.em-medcard { margin-top: 10px; }
.check-row { display: flex; align-items: center; gap: 8px; font-size: 14px; margin: 4px 0 10px; }

/* 教練工具 */
body:not(.coach) .coach-only { display: none !important; }
#tripViewBody .row-val, #listViewBody small { white-space: normal; text-align: right; }
#listPick { display: grid; gap: 2px; margin: 4px 0 10px; }

/* 浪向、風向箭頭 */
.wv-a { display: inline-block; font-style: normal; font-weight: 900; margin-left: 3px; line-height: 1; }
.wd-tag { display: inline-flex; align-items: center; gap: 1px; margin-left: 4px; padding: 0 6px; border-radius: var(--pill); background: rgba(255,255,255,.88); color: #1D2A3A; font-weight: 700; font-size: .92em; }
/* 季節參考、這裡的照片 */
.sm-season { margin-top: 4px; }
.sm-strip { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x mandatory; }
.sm-strip img { width: 96px; height: 96px; object-fit: cover; border-radius: var(--radius-sm); flex: none; scroll-snap-align: start; cursor: pointer; }
.row-search .pill { padding-left: 10px; padding-right: 10px; }

/* 標籤、簽名、個人紀錄 */
.chips .chip.add { background: transparent; border: 1px dashed var(--muted); color: var(--muted); }
.tag-bar { margin: 8px 0 0; }
.sig-pad { width: 100%; height: 200px; border-radius: var(--radius-sm); background: #fff; touch-action: none; display: block; margin: 6px 0 10px; }
.sigs { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.sigs:empty { display: none; }
.sig { position: relative; display: grid; gap: 2px; background: #fff; border-radius: var(--radius-sm); padding: 6px 8px; }
.sig img { width: 140px; height: 56px; object-fit: contain; }
.sig span { font-size: 11px; color: #555; }
.records .rec-list { display: grid; }
.records > summary .ic { width: 16px; height: 16px; color: var(--muted); }
.pl-sign img { display: block; max-height: 34px; max-width: 100%; margin-top: 2px; }
.pl-sign small { display: block; font-size: 9px; }

/* 傳送位置、我的緊急電話 */
.em-loc { margin: 10px 0 4px; }
.em-call.mine b { color: var(--link); }
.loc-big { display: grid; gap: 4px; padding: 14px; border-radius: var(--radius-sm); background: var(--soft); margin-bottom: 8px; }
.loc-big b { font: 800 26px var(--font-lat); letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.loc-big span { font-size: 13px; color: var(--muted); }
#bmedBody .row-val { white-space: normal; text-align: right; }

/* 更新紀錄、換新手機 */
.cl-item h4 { display: flex; gap: 10px; align-items: baseline; margin: 14px 0 4px; font-size: 15px; }
.cl-item ul { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.55; }
.move-steps { margin: 6px 0 10px; padding-left: 22px; display: grid; gap: 14px; }
.move-steps li b { display: block; font-size: 15px; }
.move-steps li span { display: block; font-size: 13px; color: var(--muted); margin: 2px 0 6px; }
/* 無障礙：鍵盤焦點外框；系統要求減少動態時關掉轉場 */
:focus-visible { outline: 2.5px solid var(--link); outline-offset: 2px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; } }

/* 設定分頁 */
#tab-data .cat-off { display: none !important; }
#setMenu .row-btn span { display: inline-flex; align-items: center; gap: 10px; }
#setMenu .row-btn .ic { width: 20px; height: 20px; color: var(--link); }
.set-back { display: block; font-size: 16px; margin: 0 0 10px; font-weight: 600; }
.set-back.hidden { display: none; }
/* 使用統計、自我檢查 */
#usageBody .row { gap: 10px; }
.chk { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--line, rgba(0,0,0,.08)); font-size: 14px; line-height: 1.5; }
.chk b { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; color: #fff; }
.chk.ok b { background: var(--green, #2FB36B); } .chk.warn b { background: #E8A13A; } .chk.bad b { background: var(--red, #FF4D4D); }

/* 只看潛點 */
.sites-only .leaflet-overlay-pane, .sites-only .leaflet-imgPane-pane, .sites-only .dm-overlay-text { display: none; }
.sites-only .leaflet-marker-pane > .leaflet-marker-icon:not(:has(.dm-site)):not(.park-mk-wrap):not(.dm-cluster-wrap) { display: none; }
.sites-only .leaflet-tooltip-pane > .leaflet-tooltip:not(.dm-site-label) { display: none; }
/* 潛點比較 */
.cmp-wrap { overflow-x: auto; }
.cmp-table th { font-size: 13px; text-align: left; vertical-align: bottom; white-space: normal; min-width: 88px; }
.cmp-table td { font-size: 13px; }
.cmp-table td:first-child { color: var(--muted); white-space: nowrap; }
.cmp-x { border: 0; background: none; color: var(--muted); cursor: pointer; margin-left: 4px; font-size: 12px; }

/* 簡式快速日誌 */
.log-expand { display: none; margin: 0 0 10px; font-size: 14px; }
#logForm.quick .log-expand { display: block; }
#logForm.quick > *:not(.card-head):not(.q):not(.actions):not(.log-expand) { display: none !important; }
#logForm.quick .bio-row > .field:not(.q) { display: none; }
/* 重複日誌 */
.dup-bar { display: flex; align-items: center; gap: 8px; width: 100%; margin: 8px 0 0; padding: 10px 12px; border: 0; border-radius: var(--radius-sm); background: rgba(232,161,58,.16); color: var(--text); font: 500 14px var(--font); text-align: left; cursor: pointer; }
.dup-bar.hidden { display: none; }
.dup-bar .ic { width: 16px; height: 16px; color: #E8A13A; }
.dup-pair { padding: 10px 0; border-bottom: 1px solid var(--line, rgba(0,0,0,.08)); }
.dup-d { font-size: 13px; line-height: 1.5; margin: 2px 0; } .dup-d b { margin-right: 6px; }
/* 我的潛水地圖 */
.my-map .leaflet-overlay-pane, .my-map .leaflet-imgPane-pane, .my-map .dm-overlay-text { display: none; }
.my-map .leaflet-marker-pane > .leaflet-marker-icon:not(:has(.my-dot)) { display: none; }
.my-map .leaflet-tooltip-pane > .leaflet-tooltip:not(.my-label) { display: none; }
.my-dot { width: var(--r); height: var(--r); transform: translate(-50%, -50%); border-radius: 50%; background: rgba(41,151,255,.85); border: 2px solid #fff; color: #fff; display: grid; place-items: center; font: 800 12px var(--font-lat); box-shadow: 0 2px 8px rgba(0,0,0,.35); }
#myMapBar { position: fixed; z-index: 903; left: 50%; transform: translateX(-50%); top: calc(62px + var(--safe-t)); display: flex; align-items: center; gap: 6px; padding: 4px 6px 4px 14px; border-radius: var(--pill); font: 600 13px var(--font); color: var(--text); }
#myMapBar.hidden { display: none; }
/* 年度報表（列印） */
.pl-page.yr h3 { font-size: 14px; margin: 14px 0 6px; }
.yr-stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin: 10px 0; }
.yr-stats div { border: 1px solid #ccc; border-radius: 8px; padding: 8px; text-align: center; }
.yr-stats b { display: block; font-size: 20px; } .yr-stats span { font-size: 11px; color: #555; }
.yr-bars { width: 100%; height: 130px; } .yr-bars rect { fill: #2F80ED; } .yr-bars text { font-size: 9px; text-anchor: middle; fill: #555; } .yr-bars text.v { fill: #111; font-weight: 700; }
.yr-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .yr-cols ol { margin: 0; padding-left: 18px; font-size: 12px; } .yr-cols li span { float: right; color: #555; }
.yr-life { font-size: 12px; line-height: 1.6; }
.yr-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; } .yr-photos img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 6px; }

/* 嵌入模式：只留地圖與潛點 */
.embed #panel, .embed #fabs, .embed #topSearch, .embed #topSuggest, .embed #siPill, .embed .start-ask, .embed #guide, .embed #installBar, .embed #netBar, .embed #coordBar, .embed #myMapBar, .embed #crosshair, .embed .leaflet-control-layers { display: none !important; }
.embed #map { inset: 0 !important; bottom: 0 !important; }
.embed .leaflet-top.leaflet-left { left: 0 !important; top: 0 !important; }
.embed-code { width: 100%; font: 12px ui-monospace, Menlo, monospace; border-radius: var(--radius-sm); padding: 8px; }
.embed-preview { width: 100%; height: 260px; border: 0; border-radius: var(--radius-sm); margin-top: 10px; background: var(--soft); }
.batch-pick { display: grid; gap: 2px; max-height: 50vh; overflow-y: auto; margin: 6px 0 10px; }

/* 生物參考資料 */
.sp-tagbar { flex-wrap: nowrap; overflow-x: auto; margin: 8px 0 4px; padding-bottom: 4px; }
.sp-tagbar .chip { flex: none; }
.sp-badge { font-style: normal; font-size: 11px; padding: 1px 6px; margin-left: 6px; border-radius: var(--pill); vertical-align: 1px; }
.sp-badge.cons, .sp-tags em.cons { background: rgba(47,179,107,.16); color: var(--green, #2FB36B); }
.sp-badge.warn, .sp-tags em.warn { background: rgba(255,77,77,.14); color: var(--red-text, #D93636); }
.sp-info { display: grid; gap: 3px; margin: -2px 0 12px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--soft); font-size: 13px; line-height: 1.5; }
.sp-info b { font-size: 15px; } .sp-info i { font-size: 13px; }
.sp-info p { margin: 2px 0; }
.sp-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.sp-tags em { font-style: normal; font-size: 11px; padding: 1px 7px; border-radius: var(--pill); background: rgba(56,182,255,.14); color: var(--accent-2); }

/* 潛點卡片主按鈕列：依顯示的按鈕數平均分欄（有手繪圖的潛點多一個 3D） */
#siteCard > .tiles { grid-template-columns: none !important; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }

/* 生物圖鑑 */
.bio-view { margin: 0 0 10px; }
#tab-bio:not([data-view="guide"]) .guide-only, #tab-bio[data-view="guide"] .rec-only, #tab-bio[data-view="guide"] #bioList, #tab-bio[data-view="guide"] #bioForm { display: none !important; }
.guide-grid { display: grid; gap: 6px; }
.gd-card { border-radius: var(--radius-sm); background: var(--soft); }
.gd-card > summary { display: flex; align-items: center; gap: 10px; padding: 8px 10px; cursor: pointer; list-style: none; }
.gd-card > summary::-webkit-details-marker { display: none; }
.gd-card .gd-name { display: grid; flex: 1; min-width: 0; }
.gd-card .gd-name i { font-size: 12px; color: var(--muted); }
.gd-card:not(.seen) .gd-name b { font-weight: 500; }
.gd-seen { font-style: normal; font-size: 11px; padding: 1px 7px; border-radius: var(--pill); background: rgba(47,179,107,.16); color: var(--green, #2FB36B); white-space: nowrap; }
.gd-card .sp-info { margin: 0 10px 8px; background: transparent; padding: 0; }
.gd-sites { margin: -4px 10px 10px; }
/* 在這裡看過的生物 */
.life-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.life-chips .chip small { margin-left: 4px; color: var(--muted); font-size: 11px; }
.life-chips .chip.cons { box-shadow: inset 0 0 0 1.5px rgba(47,179,107,.6); }
#tab-bio[data-view="guide"] #bioSummary { display: none; }

/* 量距離 */
#measBar { position: fixed; z-index: 903; left: 50%; transform: translateX(-50%); top: calc(62px + var(--safe-t)); display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; border-radius: var(--pill); font: 600 14px var(--font); color: var(--text); white-space: nowrap; }
#measBar.hidden { display: none; }
.meas-lab { transform: translate(-50%, -140%); white-space: nowrap; background: rgba(0,0,0,.72); color: #FFD60A; font: 700 12px var(--font-lat); padding: 2px 7px; border-radius: 10px; }
body.measuring #map { cursor: crosshair; }
/* 附近設施 */
.fac-row { display: grid; gap: 4px; margin: 6px 0 10px; }
.fac-row b { font-size: 13px; color: var(--muted); }
.fac-row a { display: flex; justify-content: space-between; gap: 8px; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--soft); color: var(--text); text-decoration: none; font-size: 14px; }
.fac-row a small { color: var(--muted); white-space: nowrap; }
.off-stale b { color: #E8A13A; }
body.measuring .leaflet-marker-pane, body.measuring .leaflet-overlay-pane { pointer-events: none; }

/* 備份加密、我的教練 */
.bk-pass { width: 100%; margin-top: 8px; padding: 8px 10px; border-radius: var(--radius-sm); border: 1px solid var(--line, rgba(0,0,0,.12)); background: var(--soft); color: var(--text); font: 15px var(--font); }
.bk-pass-note { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; }
.coach-acts { display: inline-flex; gap: 12px; align-items: center; flex: none; }
/* 手繪原圖全螢幕檢視 */
.map-view { position: fixed; inset: 0; z-index: 3000; background: #0B1424; display: flex; flex-direction: column; }
.map-view.hidden { display: none; }
.mv-stage { flex: 1; overflow: hidden; display: flex; align-items: center; justify-content: center; touch-action: none; cursor: grab; }
.mv-stage img { max-width: 100%; max-height: 100%; transform-origin: center; user-select: none; -webkit-user-drag: none; will-change: transform; }
.mv-top { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 12px; padding: calc(10px + var(--safe-t, 0px)) calc(14px + var(--safe-r)) 10px calc(14px + var(--safe-l)); background: linear-gradient(rgba(11,20,36,.85), transparent); color: #fff; }
.mv-top b { flex: 1; font-size: 17px; }
.mv-top .icon-btn { color: #fff; background: rgba(255,255,255,.14); border: 0; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; }
.mv-credit { margin: 0; padding: 8px 14px calc(10px + env(safe-area-inset-bottom)); font-size: 12px; color: #A9B9D1; text-align: center; background: #0B1424; }
/* 長按地圖快捷選單 */
.lp-menu { position: fixed; z-index: 2600; min-width: 220px; max-width: calc(100vw - 16px); padding: 6px; border-radius: var(--radius, 14px); box-shadow: 0 10px 30px rgba(0,0,0,.3); }
.lp-menu.hidden { display: none; }
.lp-head { font-size: 12px; color: var(--muted); padding: 6px 10px 4px; font-variant-numeric: tabular-nums; }
.lp-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px; border: 0; background: none; color: var(--text); font: inherit; font-size: 15px; text-align: left; border-radius: 10px; }
.lp-menu button:hover, .lp-menu button:active { background: var(--line); }
.lp-menu button small { margin-left: auto; padding-left: 8px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.lp-menu .ic { width: 18px; height: 18px; flex: none; }
/* 首次引導：選身分 */
.mv-stage.paper { background: #fff; }


/* ==========================================================================
   iOS 27 Liquid Glass（v159）
   - 玻璃：模糊加強、邊緣加深一圈、上緣高光（iOS 27 調整：更能擴散背後內容、深色邊與更亮的高光）
   - 圓弧：面板、表單、卡片圓角加大；按鈕、分頁、搜尋列一律膠囊
   - 工具列：地圖右側按鈕收成一條玻璃工具列（iOS 27 回到分組工具列，不再散落浮鈕）
   - 透明度：設定 → 外觀「玻璃效果」清透／標準／霧面；系統開「降低透明度」時改實色
   ========================================================================== */
:root {
  --radius-lg: 30px; --radius: 22px; --radius-sm: 14px;
  --glass-a: .72;
  --glass-rgb: 14, 31, 61;
  --glass-blur: 28px;
  --glass-edge: rgba(0, 0, 0, .28);          /* 深色邊 */
  --glass-hi: rgba(255, 255, 255, .22);      /* 上緣高光 */
  --glass-hi2: rgba(255, 255, 255, .06);
  --glass-shadow: 0 12px 36px rgba(0, 0, 0, .38);
}
:root[data-glass="clear"] { --glass-a: .5; --glass-blur: 22px; }
:root[data-glass="tint"] { --glass-a: .9; --glass-blur: 34px; }
:root[data-theme="light"] { --glass-rgb: 240, 249, 255; --glass-edge: rgba(21, 63, 130, .16); --glass-hi: rgba(255, 255, 255, .9); --glass-hi2: rgba(255, 255, 255, .35); --glass-shadow: 0 12px 32px rgba(21, 63, 130, .16); }
@media (prefers-color-scheme: light) {
  :root[data-theme="auto"] { --glass-rgb: 240, 249, 255; --glass-edge: rgba(21, 63, 130, .16); --glass-hi: rgba(255, 255, 255, .9); --glass-hi2: rgba(255, 255, 255, .35); --glass-shadow: 0 12px 32px rgba(21, 63, 130, .16); }
}
:root, :root[data-theme] { --glass: rgba(var(--glass-rgb), var(--glass-a)); --lg-ring: inset 0 0 0 1px var(--glass-edge), inset 0 1px 0 var(--glass-hi), inset 0 -1px 0 var(--glass-hi2); }
.glass, .leaflet-bar, .leaflet-control-layers, .v3-top, .v3-bottom, .v3-legend {
  background: var(--glass) !important; border: 0 !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(190%); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(190%);
  box-shadow: var(--lg-ring), var(--glass-shadow) !important;
}
.v3-top, .v3-bottom, .v3-legend, .v3-info { background: rgba(20, 24, 28, var(--glass-a)) !important; }   /* 3D 上的面板一律深色，白字才看得清楚 */
/* 搜尋列、提示列、吐司、量距離列：膠囊 */
#topSearch, #toast, #measBar, #netBar, #coordBar, #siPill, #myMapBar { border-radius: var(--pill) !important; }
#topSearch { padding-left: 16px; }
.start-ask, .lp-menu, #topSuggest { border-radius: 24px !important; }
.lp-menu button { border-radius: 16px; }
/* 地圖右側：一條玻璃工具列（按鈕本身透明，選到的是實心藍圓） */
#fabs { gap: 2px !important; padding: 5px; border-radius: 30px; background: var(--glass);
  backdrop-filter: blur(var(--glass-blur)) saturate(190%); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(190%); box-shadow: var(--lg-ring), var(--glass-shadow); }
#fabs:not(:has(.fab:not(.hidden))) { display: none; }
#fabs .fab.glass { background: transparent !important; box-shadow: none !important; backdrop-filter: none; -webkit-backdrop-filter: none; width: 44px; height: 44px; }
#fabs .fab.glass:active { background: var(--soft) !important; }
#fabs .fab.on { background: var(--blue-fill) !important; color: var(--on-blue); }
#northBtn.fab.glass { border-radius: 50%; }
/* 縮放、圖層：膠囊 */
.leaflet-bar, .leaflet-control-layers { border-radius: 24px !important; }
.leaflet-bar a { width: 40px !important; height: 40px !important; line-height: 40px !important; }
/* 分頁列：膠囊，選到的分頁是淡藍色膠囊（iOS 27 分頁列） */
.seg { border-radius: var(--pill); padding: 4px; }
.seg button { border-radius: var(--pill); }
.seg[role="tablist"] { background: var(--soft); box-shadow: inset 0 0 0 1px var(--line); }
.seg[role="tablist"] button.active { background: rgba(56, 182, 255, .2); color: var(--accent-2); box-shadow: inset 0 1px 0 var(--glass-hi2), inset 0 0 0 1px rgba(56, 182, 255, .28); }
:root[data-theme="light"] .seg[role="tablist"] button.active { background: rgba(47, 128, 237, .14); color: #1558B8; }
@media (prefers-color-scheme: light) { :root[data-theme="auto"] .seg[role="tablist"] button.active { background: rgba(47, 128, 237, .14); color: #1558B8; } }
/* 按鈕：次要按鈕是淡玻璃膠囊，主要按鈕加上緣高光 */
.pill { box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 var(--glass-hi2); }
.pill.primary, .pill.on, .tile.primary, .fab.on { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 0 0 1px rgba(0, 0, 0, .12), 0 4px 14px rgba(31, 111, 219, .35); }
.tile { border-radius: 20px; }
.card { border-radius: var(--radius); }
.group { border-radius: 18px; }
.chip { box-shadow: inset 0 0 0 1px var(--line); }
input.switch { border-radius: var(--pill); width: 52px; height: 30px; }
input.switch::after { width: 26px; height: 26px; }
input.switch:checked::after { left: 24px; }
.v3-top, .v3-bottom { border-radius: 26px !important; }
.v3-legend { border-radius: 18px !important; }
/* 降低透明度（系統設定）：改實色，不做模糊 */
@media (prefers-reduced-transparency: reduce) {
  :root { --glass-a: .98 !important; }
  .glass, #fabs, .leaflet-bar, .leaflet-control-layers { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
}
/* 帳號：提出潛點修正、審核 */
.field-row { display: flex; gap: 10px; } .field-row > .field { flex: 1; min-width: 0; }
.review-list { display: grid; gap: 10px; max-height: 64dvh; overflow-y: auto; margin-top: 8px; }
.rv-item { background: var(--soft); border-radius: 18px; padding: 12px 14px; box-shadow: inset 0 0 0 1px var(--line); }
.rv-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rv-st { font-size: 12px; padding: 2px 9px; border-radius: var(--pill); background: var(--soft); color: var(--muted); white-space: nowrap; }
.rv-st.approved { color: var(--green-text); background: rgba(47,179,107,.14); } .rv-st.rejected { color: var(--red-text); background: rgba(255,77,77,.12); } .rv-st.pending { color: var(--accent-2); background: rgba(56,182,255,.14); }
.rv-row { display: grid; grid-template-columns: 4.5em 1fr 1fr; gap: 8px; font-size: 14px; padding: 4px 0; border-top: 1px solid var(--line); margin-top: 6px; }
.rv-row span { color: var(--muted); } .rv-row s { color: var(--muted); overflow-wrap: anywhere; } .rv-row b { overflow-wrap: anywhere; }
.rv-note { margin: 8px 0 0; font-size: 13px; color: var(--text-2); }
.rv-item .actions { margin-top: 10px; }
/* 功能列：圖示＋文字（預設，iOS 分頁列）／只有圖示／只有文字 */
.seg[role="tablist"] button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px 0 5px; line-height: 1.1; }
.seg[role="tablist"] .tab-ic { width: 22px; height: 22px; margin: 0; }
.seg[role="tablist"] .tab-lb { font-size: 11px; font-weight: 600; letter-spacing: .02em; }
:root[data-tabs="icon"] .seg[role="tablist"] .tab-lb { display: none; }
:root[data-tabs="icon"] .seg[role="tablist"] button { padding: 8px 0; }
:root[data-tabs="text"] .seg[role="tablist"] .tab-ic { display: none; }
:root[data-tabs="text"] .seg[role="tablist"] .tab-lb { font-size: 14px; font-weight: 500; }
:root[data-tabs="text"] .seg[role="tablist"] button.active .tab-lb { font-weight: 700; }
.seg[role="tablist"] button { -webkit-touch-callout: none; user-select: none; }
/* 暫停開放、蓋章結果、提案照片、座標寫回、待審小紅點 */
.closed-line { margin: 10px 0 4px; padding: 10px 12px; border-radius: 16px; background: rgba(255,77,77,.14); box-shadow: inset 0 0 0 1px rgba(255,77,77,.35); color: var(--text); font-size: 14px; line-height: 1.5; }
.closed-line b { color: var(--red-text); margin-right: 8px; } .closed-line small { display: block; color: var(--muted); }
.do-line { margin: 8px 0 0; padding: 8px 12px; border-radius: 14px; background: var(--soft); font-size: 13px; line-height: 1.5; }
.do-line.approved b { color: var(--green-text); } .do-line.rejected b { color: var(--red-text); } .do-line span { color: var(--text-2); }
.do-b { font-style: normal; display: inline-grid; place-items: center; width: 16px; height: 16px; margin-left: 4px; border-radius: 50%; font-size: 11px; font-weight: 700; vertical-align: -2px; }
.do-b.ok { background: var(--green); color: #fff; } .do-b.bad { background: var(--red); color: #fff; } .do-b.wait { background: var(--soft); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
.prop-photos, .rv-photos { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0; }
.prop-photos span { position: relative; } .prop-photos img, .rv-photos img { width: 72px; height: 72px; object-fit: cover; border-radius: 12px; display: block; }
.prop-photos button { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: var(--red); color: #fff; font-size: 14px; line-height: 1; }
.prop-closure { margin: 6px 0 10px; } .prop-closure summary { cursor: pointer; font-size: 14px; color: var(--text-2); padding: 4px 0; }
.coord-item { display: flex; gap: 10px; align-items: center; cursor: pointer; } .coord-item span { display: grid; }
.seg[role="tablist"] button.has-dot { position: relative; }
.seg[role="tablist"] button.has-dot::after { content: ''; position: absolute; top: 5px; right: calc(50% - 16px); width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px var(--glass); }
/* 功能列：畫面底部浮動（手機，iOS 27 分頁列）；隱藏的分頁；捲動時頂端工具列 */
.seg[role="tablist"] button.tab-off { display: none; }
html.tabs-float .seg[role="tablist"] { position: fixed; z-index: 1050; left: calc(14px + var(--safe-l)); right: calc(14px + var(--safe-r)); bottom: calc(10px + var(--safe-b)); margin: 0; padding: 5px; border-radius: var(--pill); }
html.tabs-float { --peek: calc(62px + 74px + var(--safe-b)); }
@media (max-width: 767px), (max-width: 900px) and (orientation: portrait), (max-width: 900px) and (max-height: 499px) {
  html.tabs-float .scroll { padding-bottom: calc(28px + 76px + var(--safe-b) + var(--os)); }
  html.tabs-float body.sheet-half .scroll { padding-bottom: calc(28px + 76px + var(--safe-b) + var(--os) + (100dvh - 56px - var(--safe-t)) - var(--half)); }
  html.tabs-float body.sheet-peek .scroll { padding-bottom: calc(28px + 76px + var(--safe-b) + var(--os) + (100dvh - 56px - var(--safe-t)) - var(--peek)); }
}
body.printing .seg[role="tablist"], .embed .seg[role="tablist"] { display: none !important; }
#panel .brand, #panel > .seg[role="tablist"] { transition: box-shadow .2s, background .2s; position: relative; z-index: 2; }
#panel.scrolled .brand { box-shadow: 0 1px 0 var(--line); }
#panel.scrolled:not(:has(> .seg[role="tablist"])) .brand, #panel.scrolled > .seg[role="tablist"] { box-shadow: 0 1px 0 var(--line), 0 10px 18px -14px rgba(0, 0, 0, .55); }
.tab-cfg-row .tab-cfg-ic { width: 18px; height: 18px; margin-right: 8px; vertical-align: -3px; }
.tab-cfg-row .icon { width: 30px; height: 30px; }
.tab-cfg-row .icon:disabled { opacity: .3; }
/* 底部浮動功能列：收起時面板只露出標頭，內容淡出（不會從功能列後面露一截） */
html.tabs-float #panel .scroll { transition: opacity .25s; }
html.tabs-float body.sheet-peek #panel:not(.dragging) .scroll { opacity: 0; pointer-events: none; }
/* 提示列沒有圖示時（例：該備份了），文字與按鈕上下排，按鈕不會被擠成直排 */
.start-ask:not(:has(.sa-icon)) { grid-template-columns: 1fr; }
.start-ask:not(:has(.sa-icon)) .sa-actions { grid-column: 1; }
.start-ask .pill { white-space: nowrap; }
/* DiveOnline 潛水店、審核新舊位置、拖曳選位置、選教練、排行 */
.do-shop { width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--blue-fill), 0 2px 8px rgba(0,0,0,.35); display: grid; place-items: center; overflow: hidden; color: #1C355E; }
.do-shop { position: relative; }
/* logo 原圖可能很大：用絕對定位鋪滿 34 px 圓，不能讓圖片撐開 grid（之前只看到原圖中間一小塊，整顆變白） */
.do-shop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #fff; } .do-shop .ic { width: 18px; height: 18px; }
.do-shop.def { background: var(--blue-fill); color: #fff; }   /* 預設圖示：沒有 logo 或載入失敗 */
.cmp-dot { width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; display: grid; place-items: center; font: 700 12px var(--font); color: #fff; box-shadow: 0 0 0 3px #fff, 0 2px 8px rgba(0,0,0,.4); }
.cmp-dot.new { background: var(--blue-fill); } .cmp-dot.old { background: #8E9AAF; } .cmp-dot.drag { width: 36px; height: 36px; margin: -18px 0 0 -18px; cursor: grab; }
.drag-bar { position: fixed; z-index: 1900; left: 50%; transform: translateX(-50%); top: calc(64px + var(--safe-t)); display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 16px; border-radius: var(--pill) !important; max-width: calc(100vw - 24px); font-size: 14px; }
.drag-bar.hidden { display: none; }
.rv-item { position: relative; } .rv-pick { position: absolute; top: 14px; right: 14px; width: 20px; height: 20px; }
.rv-item:has(.rv-pick) .rv-head { padding-right: 30px; }
.rv-batch { justify-content: space-between; align-items: center; margin: 0 0 4px; }
/* 不公開的社群繪製：搜尋、筆數、載入更多 */
.rv-search { margin: 0; } .rv-search input { min-height: 44px; box-sizing: border-box; }
#privList { display: grid; gap: 10px; } .rv-count { margin: 0; text-align: center; } .rv-count:empty { display: none; }
.rv-more { justify-content: center; margin: 0 0 4px; } .rv-more .pill { min-width: 9em; min-height: 44px; }
.coach-opt { display: grid; gap: 2px; text-align: left; width: 100%; border: 0; font: inherit; color: var(--text); cursor: pointer; }
.coach-opt.on { box-shadow: inset 0 0 0 2px var(--blue-fill); }
.rank-row { display: grid; grid-template-columns: 2em 1fr auto; align-items: center; gap: 8px; }
.prop-pos { justify-content: flex-start; align-items: center; margin: 0 0 8px; }
/* 功能列捲動時縮小（只剩圖示的小膠囊，置中） */
html.tabs-float .seg[role="tablist"] { transition: left .25s, right .25s, padding .25s; }
html.tabs-float.tabs-mini .seg[role="tablist"] { left: calc(50% - 120px); right: calc(50% - 120px); padding: 3px; }
html.tabs-float.tabs-mini .seg[role="tablist"] .tab-lb { display: none; }
html.tabs-float.tabs-mini .seg[role="tablist"] button { padding: 6px 0; }
.dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.dash-tile { background: var(--soft); border-radius: 16px; padding: 10px 12px; box-shadow: inset 0 0 0 1px var(--line); display: grid; }
.dash-tile b { font: 700 24px var(--font-lat); } .dash-tile span { font-size: 12px; color: var(--muted); }
.dash-h { font-size: 15px; margin: 14px 0 4px; }
/* 管理員儀表板「推播與用量」（ops-dash.js）：卡片＋小折線，深淺色都用主題變數 */
.ops-wrap:empty { display: none; }
.ops-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 10px; }
.ops-card { --c: var(--green); background: linear-gradient(var(--soft), var(--soft)), var(--surface); border-radius: var(--radius-sm); padding: 12px 14px; box-shadow: inset 0 0 0 1px var(--line); display: grid; gap: 4px; align-content: start; min-width: 0; }
.ops-card.warn { --c: var(--orange); } .ops-card.crit { --c: var(--red); } .ops-card.none { --c: var(--muted); }
.ops-card.warn, .ops-card.crit { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 55%, transparent); }
.ops-card header { display: flex; align-items: center; gap: 6px; }
.ops-card h4 { margin: 0; font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: .01em; }
.ops-led { width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent); flex: none; }
.ops-big { font: 700 28px/1.1 var(--font-lat); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.ops-big small { font-size: 15px; font-weight: 600; color: var(--muted); margin-left: 2px; }
.ops-sub, .ops-note { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.45; }
.ops-row { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; padding: 3px 0; border-top: 1px solid var(--line); }
.ops-row span { color: var(--muted); } .ops-row b { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ops-row.hl b { color: var(--text); text-decoration: underline 2px color-mix(in srgb, var(--c) 70%, transparent); text-underline-offset: 3px; }
.ops-spark { width: 100%; height: 32px; display: block; color: var(--c); margin: 2px 0; }
.ops-spark .ops-line { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; }
.ops-spark .ops-area { fill: currentColor; opacity: .14; } .ops-spark .ops-dot-end { fill: currentColor; }
.ops-bar { position: relative; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; margin: 2px 0 4px; }
.ops-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: var(--green); }
.ops-bar.warn i { background: var(--orange); } .ops-bar.crit i { background: var(--red); }
.ops-bar s { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--muted); opacity: .5; }

/* 現場狀況回報（潛點卡片）：最新一筆＋展開看其他 */
.rep-line { margin: 10px 0 4px; padding: 10px 12px; border-radius: 16px; background: var(--glass-2, rgba(127,127,127,.12)); color: var(--text); font-size: 14px; line-height: 1.5; }
.rep-line .rep-head { display: flex; align-items: baseline; gap: 8px; justify-content: space-between; }
.rep-line .rep-head b { font-weight: 600; }
.rep-line .rep-item { display: block; }
.rep-line .rep-item small, .rep-line details small { color: var(--muted); margin-right: 6px; }
.rep-line details summary { color: var(--muted); cursor: pointer; font-size: 13px; }

/* 地圖潛點標記：24 小時內有現場回報的小點（藍＝一般，橘＝流強浪大或有水母） */
.dm-site .rep-dot { position: absolute; top: -4px; right: -4px; width: 9px; height: 9px; border-radius: 50%; background: #38B6FF; border: 1.5px solid #fff; box-shadow: 0 0 3px rgba(0,0,0,.5); }
.dm-site .rep-dot.warn { background: #E8A13A; }

/* 儀表板：前端錯誤列表 */
.err-row { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: baseline; }
.err-row span { word-break: break-word; font-size: 14px; }
.err-row small { grid-column: 2; }

/* 無障礙：只給螢幕閱讀器的文字；地圖版權連結加底線（不只靠顏色區分） */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.leaflet-control-attribution a { text-decoration: underline; }
body { touch-action: manipulation; }   /* 可以雙指放大頁面（無障礙），但不會雙擊放大 */
#tabDock { display: contents; }
/* 3D 潛水導航：方位、深度、距離、時間四格，下方轉彎提示與控制 */
.v3-nav { display: grid; gap: 6px; }
.v3-nav .eyebrow { padding-right: 34px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v3-nav-note { margin: 0; font-size: 11.5px; line-height: 1.4; color: rgba(255,255,255,.72); }
/* 導航中：收起說明、圖例與操作提示，把畫面留給地形與潛水員 */
.v3-navigating .v3-top .v3-sub, .v3-navigating .v3-legend, .v3-navigating .v3-hint { display: none; }
.v3-navigating .v3-info { bottom: calc(var(--v3b) + 10px + var(--safe-b)); padding: 10px 12px; }
.v3-nav-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 10px; }
.v3-nav-grid div { display: grid; gap: 1px; min-width: 0; }
.v3-nav-grid small { font-size: 11px; color: rgba(255,255,255,.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v3-nav-grid b { font-size: 18px; font-variant-numeric: tabular-nums; padding-right: 0; }
.v3-nav-grid em { font-style: normal; font-size: 11px; color: #FFD60A; font-variant-numeric: tabular-nums; }
.v3-nav-turn { margin: 0; font-size: 15px; font-weight: 700; color: #FFD60A; }
.v3-nav-ctl { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; }
.v3-nav-ctl .seg { flex: 1; min-width: 0; }
@media (max-width: 420px) { .v3-nav-grid b { font-size: 16px; } .v3-nav-grid small { font-size: 10.5px; } }

.v3-nav-prof { width: 100%; height: 34px; display: block; border-radius: 6px; background: rgba(255,255,255,.05); }
.v3-nav-gas { margin: 0; font-size: 12px; line-height: 1.4; color: #9FE3FF; }
.v3-nav-gas .link { font-size: 12px; color: #FFD60A; font-weight: 700; }
.v3-drawing .v3-legend, .v3-drawing .v3-hint { display: none; }

/* 近 7 天能見度小柱狀圖 */
.rep-trend { display: grid; gap: 4px; margin-top: 6px; }
.rep-trend small { color: var(--muted); font-size: 12px; }
.rep-bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; height: 40px; align-items: end; }
.rep-bars i { display: block; height: var(--h); min-height: 2px; background: var(--blue-fill, #1F6FDB); border-radius: 3px 3px 0 0; position: relative; }
.rep-bars i.none { background: var(--line, rgba(127,127,127,.25)); height: 2px; }
.rep-bars em { position: absolute; top: -15px; left: 0; right: 0; text-align: center; font-style: normal; font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* 稽核紀錄與我的紀錄 */
.aud-seg { margin-bottom: 8px; flex-wrap: wrap; }
.aud-row { display: grid; gap: 2px; }
.aud-row span { font-size: 14px; overflow-wrap: anywhere; }


/* 出發前潛水簡報 */
.v3-brief { display: grid; gap: 8px; }
.v3-briefing .v3-info { max-height: calc(100% - var(--v3b) - 90px - var(--safe-t)); overflow-y: auto; bottom: calc(var(--v3b) + 10px + var(--safe-b)); }
.v3-briefing .v3-top .v3-sub, .v3-briefing .v3-legend, .v3-briefing .v3-hint { display: none; }
.v3-brief-params { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 8px; }
.v3-brief-params label { display: grid; gap: 2px; font-size: 11px; color: rgba(255,255,255,.72); }
.v3-brief-params input { width: 100%; min-width: 0; font: 600 15px var(--font); padding: 5px 8px; border-radius: 8px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08); color: #fff; font-variant-numeric: tabular-nums; }
.v3-brief-scroll { overflow-x: auto; }
.v3-brief-t { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.v3-brief-t th { text-align: left; font-size: 11px; color: rgba(255,255,255,.65); font-weight: 600; padding: 3px 4px; white-space: nowrap; }
.v3-brief-t td { padding: 4px; border-top: 1px solid rgba(255,255,255,.1); white-space: nowrap; }
.v3-brief-t tr.warn td { color: #FFB340; }
.v3-brief-sum { margin: 0; font-size: 13px; line-height: 1.5; }
.v3-brief-sum.ok { color: #7EE7A8; } .v3-brief-sum.warn { color: #FFB340; }
.v3-brief-out { margin-top: 0; }
.v3-brief-when { grid-column: 1 / -1; }   /* 潛水簡報：下水時間與潮汐 */
.v3-brief-when input { font-size: 14px; }
.v3-brief-params input:disabled { opacity: 1; color: rgba(255,255,255,.85); background: transparent; border-style: dashed; }
.v3-brief-from { margin: 0 !important; font-size: 12px !important; color: #FFD60A; }
.v3-brief-tide { display: grid; gap: 2px; padding: 7px 10px; border-radius: 10px; background: rgba(100,210,255,.1); font-size: 13px; line-height: 1.45; }
.v3-brief-tide b { display: block; padding: 0; font-size: 13px; }
.v3-brief-tide .v3-brief-slack { color: #64D2FF; }
.v3-brief-tide small { color: rgba(255,255,255,.65); font-size: 11.5px; line-height: 1.4; }
/* 3D 編輯路線 */
.v3-edit { display: grid; gap: 6px; }
.v3-edit-name { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px; font-size: 12px; color: rgba(255,255,255,.72); }
.v3-edit-name input { width: 100%; min-width: 0; font: 600 15px var(--font); padding: 6px 8px; border-radius: 8px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08); color: #fff; }
.v3-edit .actions { margin-top: 4px; }
.v3-edit .pill:disabled { opacity: .45; }
.v3-editing .v3-legend, .v3-editing .v3-hint, .v3-editing .v3-top .v3-sub { display: none; }
/* 潛水簡報列印版（A4 一頁，黑白也看得清楚） */
@media print {
  .bp { padding: 2mm 4mm; font-size: 10pt; }
  .bp .pl-head { margin-bottom: 4mm; }
  .bp-fill { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3mm 5mm; margin: 0 0 4mm; }
  .bp-blank { border-bottom: 1px solid #111; height: 11mm; display: flex; align-items: flex-start; }
  .bp-blank span { font-size: 8pt; color: #444; }
  .bp-top { display: grid; grid-template-columns: 96mm 1fr; gap: 5mm; align-items: start; margin-bottom: 4mm; }
  .bp-map { width: 96mm; height: auto; display: block; }
  .bp-frame { fill: none; stroke: #999; stroke-width: 1; }
  .bp-route { fill: none; stroke: #111; stroke-width: 2.5; stroke-linejoin: round; }
  .bp-arrow { fill: #111; }
  .bp-pt { fill: #fff; stroke: #111; stroke-width: 2; } .bp-entry { fill: #111; }
  .bp-num { font: 700 10px -apple-system, "PingFang TC", sans-serif; text-anchor: middle; fill: #111; } .bp-entry + .bp-num { fill: #fff; }
  html:has(> body.print-log) { background: #fff !important; }
  .bp-leg { font: 600 11px -apple-system, "PingFang TC", sans-serif; fill: #111; paint-order: stroke; stroke: #fff; stroke-width: 3px; }
  .bp-north polygon { fill: #111; } .bp-north line { stroke: #111; stroke-width: 2; } .bp-north text { font: 700 11px sans-serif; text-anchor: middle; fill: #111; }
  .bp-scale path { fill: none; stroke: #111; stroke-width: 1.5; } .bp-scale text { font: 600 10px sans-serif; text-anchor: middle; fill: #111; }
  .bp-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 2mm; }
  .bp-stats div { border: 1px solid #999; border-radius: 4px; padding: 2mm 3mm; }
  .bp-stats span { display: block; font-size: 8pt; color: #444; } .bp-stats b { font-size: 14pt; }
  .bp-params { font-size: 8.5pt; color: #333; margin: 3mm 0 0; }
  .bp-sum { font-size: 9.5pt; margin: 2mm 0 0; line-height: 1.5; }
  .bp-tide { font-size: 8.5pt; margin: 2mm 0 0; line-height: 1.45; color: #222; }
  .bp-blank b { margin-left: 3mm; font-size: 11pt; }
  .bp-t { width: 100%; border-collapse: collapse; margin-bottom: 4mm; font-variant-numeric: tabular-nums; page-break-inside: avoid; }
  .bp-t th, .bp-t td { border: 1px solid #777; padding: 2mm; text-align: left; white-space: nowrap; }
  .bp-t th { font-size: 8.5pt; background: #eee; }
  .bp-t tr.warn td { font-weight: 700; } .bp-t tr.warn td:first-child::after { content: " ◀"; }
  .bp-t td.bp-w { width: 26mm; }
  .bp-sign { display: grid; grid-template-columns: 1fr 1fr; gap: 8mm; margin-top: 2mm; }
  .bp-sign .bp-blank { height: 16mm; }
  .bp-note { font-size: 8pt; color: #444; margin: 4mm 0 0; }
}

/* DiveOnline 潛點插畫：卡片標題旁的圖示、打卡時的印章 */
.sc-art { width: 52px; height: 52px; border-radius: 14px; flex: none; object-fit: cover; }
.sc-art + div { flex: 1; min-width: 0; }
.stamp-pop { position: fixed; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 3000; }
.stamp-pop img { width: 168px; height: 168px; opacity: 0; transform: scale(1.6) rotate(-12deg); }
.stamp-pop.go img { animation: stamp-in 1.6s ease-out forwards; }
@keyframes stamp-in { 0% { opacity: 0; transform: scale(1.6) rotate(-12deg); } 18% { opacity: 1; transform: scale(1) rotate(-8deg); } 75% { opacity: 1; transform: scale(1) rotate(-8deg); } 100% { opacity: 0; transform: scale(.96) rotate(-8deg); } }

.pack-row { align-items: center; gap: 10px; } .pack-row > span:first-child { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } .pack-act { display: flex; gap: 6px; flex: none; }
/* 圖資包下載進度（設定頁的列與圖資包頁共用；lin.js 只改進度條寬度與文字） */
.pack-act .pill, .pack-more { min-height: 44px; }
.pk-prog { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 2px; min-width: 0; }
.pk-bar { display: block; height: 6px; border-radius: 3px; background: var(--soft); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.pk-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--blue-fill); transition: width .25s ease-out; }
.pk-ptxt { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .pk-bar i { transition: none; } }

.feat-find .row > span { display: flex; flex-direction: column; gap: 2px; }
.feat-find .row > span[hidden] { display: none; }

/* 3D：深度圖例改成 0／30／60 m 兩段色條（漸層由 v3.js 的 V3_DEEP 算）；載入進度膠囊（位置同操作提示，載入時提示隱形但保留位置） */
.v3-legend .v3-depth i.v3-ramp { width: 44px !important; background: var(--v3-ramp) !important; }
.v3-prog { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(var(--v3b) + 58px + var(--safe-b)); display: flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 980px; background: rgba(20,24,28,.82); color: #fff; font-size: 13px; white-space: nowrap; pointer-events: none; z-index: 3; }
.v3-prog[hidden] { display: none; }
.v3-prog::before { content: ''; width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(255,255,255,.3); border-top-color: #fff; animation: v3spin .8s linear infinite; flex: none; }
@keyframes v3spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .v3-prog::before { animation: none; } }
.v3-loading .v3-hint { visibility: hidden; }
.v3-pre > canvas { visibility: hidden; }

/* ---------- 桌面版（macOS 27 風格）---------- */
/* 視窗寬 ≥ 1024px 才套用（手機、平板不變）。行為在 desk.js。
   - 側欄：貼齊左、上、下邊緣的玻璃（降低透明度：背後的地圖更擴散），右緣深色邊＋內側高光
   - 統一工具列：側欄右邊到視窗右緣一條 52px 玻璃底板（#deskBar），搜尋、縮放、地圖工具、圖層都放在上面，分組膠囊
   - 分頁：側欄的來源清單（圖示＋文字＋選取膠囊，⌘1–4）；設定在 ≥ 1280px 時變兩欄
   - 表單：置中的視窗，統一圓角與前景視窗陰影
   - 圓角一致：視窗 20、卡片 14、卡片內 10、控制項一律膠囊 */
#deskBar { display: none; }
.glass-row { flex-wrap: wrap; }
.glass-row #glassSeg { display: none; }
.glass-slider { display: grid; grid-template-columns: auto minmax(96px, 180px) auto; align-items: center; gap: 10px; margin-left: auto; font-size: 13px; color: var(--muted); }
.glass-slider input[type=range] { background: linear-gradient(90deg, rgba(127, 127, 127, .14), var(--blue-fill)); box-shadow: inset 0 0 0 1px var(--line); height: 6px; border-radius: 3px; }
.glass-slider input[type=range]:disabled { opacity: .45; }
.glass-slider .gs-note { grid-column: 1 / -1; text-align: right; }
.desk-kbd { display: none; }

@media (min-width: 1024px) {
  :root:not(.embed) {
    --radius-lg: 20px; --radius: 14px; --radius-sm: 10px;
    /* iPad 主畫面 App（viewport-fit=cover）：狀態列在畫面裡，工具列高度把它算進去，按鈕往下讓 */
    --tb-bar: 52px; --ctl: 32px; --tb-h: calc(var(--tb-bar) + var(--safe-t)); --tb-y: calc(var(--safe-t) + (var(--tb-bar) - var(--ctl)) / 2);
    --d-ctl: rgba(255, 255, 255, .09); --d-ctl-h: rgba(255, 255, 255, .16); --d-ctl-ring: rgba(255, 255, 255, .10);
    --d-sel: rgba(56, 182, 255, .24); --d-sel-ic: #7AC8FF; --d-sel-off: rgba(255, 255, 255, .12);
    --d-edge: rgba(0, 0, 0, .55); --d-hi: rgba(255, 255, 255, .10);
    --d-win: 0 0 0 .5px rgba(0, 0, 0, .55), 0 28px 80px rgba(0, 0, 0, .55), 0 10px 24px rgba(0, 0, 0, .35);
    --d-pop: 0 0 0 .5px rgba(0, 0, 0, .45), 0 12px 32px rgba(0, 0, 0, .40);
    --d-dim: rgba(0, 6, 18, .42);
  }
  :root:not(.embed)[data-glass="std"] { --glass-a: .82; --glass-blur: 32px; }
  :root:not(.embed)[data-glass="clear"] { --glass-a: .6; --glass-blur: 24px; }
  :root:not(.embed)[data-glass="tint"] { --glass-a: .9; --glass-blur: 36px; }
  :root:not(.embed)[data-theme="light"] {
    --d-ctl: rgba(28, 53, 94, .06); --d-ctl-h: rgba(28, 53, 94, .11); --d-ctl-ring: rgba(28, 53, 94, .10);
    --d-sel: rgba(31, 111, 219, .14); --d-sel-ic: #1A66CC; --d-sel-off: rgba(28, 53, 94, .09);
    --d-edge: rgba(21, 63, 130, .22); --d-hi: rgba(255, 255, 255, .85);
    --d-win: 0 0 0 .5px rgba(21, 63, 130, .25), 0 28px 80px rgba(21, 63, 130, .28), 0 10px 24px rgba(21, 63, 130, .14);
    --d-pop: 0 0 0 .5px rgba(21, 63, 130, .2), 0 12px 32px rgba(21, 63, 130, .2);
    --d-dim: rgba(14, 31, 61, .22);
  }
  body { --sb-full: 400px; --sb-w: var(--sb-full); --map-cx: calc(50vw + var(--sb-w) / 2);
    --search-w: clamp(180px, calc(100vw - var(--sb-w) - 54px - 104px - var(--fabs-w, 220px) - 64px), 380px); }
  body.panel-collapsed { --sb-w: 0px; }
  body.desk-set { --sb-full: 640px; }
}
@media (min-width: 1600px) {
  body.desk-set { --sb-full: 720px; }
  :root.embed body { --sb-w: 0px; }
}
@media (min-width: 1024px) and (prefers-color-scheme: light) {
  :root:not(.embed)[data-theme="auto"] {
    --d-ctl: rgba(28, 53, 94, .06); --d-ctl-h: rgba(28, 53, 94, .11); --d-ctl-ring: rgba(28, 53, 94, .10);
    --d-sel: rgba(31, 111, 219, .14); --d-sel-ic: #1A66CC; --d-sel-off: rgba(28, 53, 94, .09);
    --d-edge: rgba(21, 63, 130, .22); --d-hi: rgba(255, 255, 255, .85);
    --d-win: 0 0 0 .5px rgba(21, 63, 130, .25), 0 28px 80px rgba(21, 63, 130, .28), 0 10px 24px rgba(21, 63, 130, .14);
    --d-pop: 0 0 0 .5px rgba(21, 63, 130, .2), 0 12px 32px rgba(21, 63, 130, .2);
    --d-dim: rgba(14, 31, 61, .22);
  }
}
@media (min-width: 1024px) and (pointer: coarse) { :root:not(.embed) { --tb-bar: 60px; --ctl: 40px; } }

/* 側欄 */
@media (min-width: 1024px) {
  :root:not(.embed) #panel { left: 0; top: 0; bottom: 0; width: var(--sb-full); border-radius: 0;
    background: rgba(var(--glass-rgb), min(1, calc(var(--glass-a) + .05))) !important;
    box-shadow: 1px 0 0 var(--d-edge), inset -1px 0 0 var(--d-hi), 10px 0 40px -18px rgba(0, 0, 0, .45) !important;
    transition: transform .35s cubic-bezier(.2, .8, .2, 1), width .3s cubic-bezier(.2, .8, .2, 1); font-size: 14px; }
  :root:not(.embed) #panel.collapsed { transform: translateX(calc(-100% - 12px)); }
  :root:not(.embed) #panel .brand { height: var(--tb-h); flex: none; padding: var(--safe-t) 12px 0 calc(16px + var(--safe-l)); align-items: center; }
  :root:not(.embed) #panel .brand .dm-mark { width: 32px; height: 32px; border-radius: 8px; }
  :root:not(.embed) #panel .brand .dm-word { font-size: 18px; }
  :root:not(.embed) #panel .head-tools { margin-right: 0; gap: 6px; }
  :root:not(.embed) #panel .mini-btn { height: 28px; min-width: 34px; background: var(--d-ctl); box-shadow: inset 0 0 0 .5px var(--d-ctl-ring); transition: background .15s; }
  :root:not(.embed) #panel .mini-btn:hover { background: var(--d-ctl-h); }
  :root:not(.embed) #panel.scrolled .brand { box-shadow: none; }

  /* 分頁：來源清單（圖示＋文字＋選取膠囊；右邊是快捷鍵） */
  :root:not(.embed) #panel > nav.seg[role="tablist"] { flex: none; flex-direction: column; gap: 2px; margin: 0 10px 8px; padding: 0; background: none; box-shadow: none; border-radius: 0; }
  :root:not(.embed) #panel.scrolled > nav.seg[role="tablist"] { box-shadow: 0 9px 0 -8px var(--line); }
  :root:not(.embed) #panel > nav.seg[role="tablist"] button { flex: none; flex-direction: row; justify-content: flex-start; align-items: center; gap: 10px; height: var(--ctl); padding: 0 10px; border-radius: 10px;
    color: var(--text); background: none; box-shadow: none; font-weight: 500; transition: background .15s, color .15s; }
  :root:not(.embed) #panel > nav.seg[role="tablist"] button[hidden], :root:not(.embed) #panel > nav.seg[role="tablist"] button.tab-off { display: none; }
  :root:not(.embed):not([data-tabs="text"]) #panel > nav.seg[role="tablist"] .tab-ic { display: block; width: 18px; height: 18px; color: var(--d-sel-ic); }
  :root:not(.embed):not([data-tabs="icon"]) #panel > nav.seg[role="tablist"] .tab-lb { display: inline; font-size: 14px; font-weight: 500; letter-spacing: .02em; }
  /* 功能列「只有圖示」：一排圖示（像 Xcode 的導覽列）；「只有文字」：清單不放圖示 */
  :root:not(.embed)[data-tabs="icon"] #panel > nav.seg[role="tablist"] { flex-direction: row; gap: 4px; }
  :root:not(.embed)[data-tabs="icon"] #panel > nav.seg[role="tablist"] button { flex: 1 1 0; justify-content: center; padding: 0; }
  :root:not(.embed)[data-tabs="icon"] #panel > nav.seg[role="tablist"] button::before { display: none; }
  :root:not(.embed)[data-tabs="icon"] #panel > nav.seg[role="tablist"] button.has-dot::after { left: calc(50% + 6px); }
  :root:not(.embed) #panel > nav.seg[role="tablist"] button::before { content: attr(data-kbd); order: 2; margin-left: auto; font: 500 12px var(--font-lat); letter-spacing: .04em; color: var(--muted); opacity: 0; transition: opacity .15s; }
  :root:not(.embed) #panel > nav.seg[role="tablist"] button:hover::before, :root:not(.embed) #panel > nav.seg[role="tablist"] button:focus-visible::before, :root:not(.embed) #panel > nav.seg[role="tablist"] button.active::before { opacity: 1; }
  :root:not(.embed) #panel > nav.seg[role="tablist"] button:hover { background: var(--d-ctl); }
  :root:not(.embed) #panel > nav.seg[role="tablist"] button.active { background: var(--d-sel); color: var(--text); box-shadow: none; }
  :root:not(.embed) #panel > nav.seg[role="tablist"] button.active .tab-lb { font-weight: 700; }
  :root:not(.embed).desk-inactive #panel > nav.seg[role="tablist"] button.active { background: var(--d-sel-off); }
  :root:not(.embed).desk-inactive #panel > nav.seg[role="tablist"] button.active .tab-ic { color: var(--muted); }
  :root:not(.embed) #panel > nav.seg[role="tablist"] button.has-dot::after { top: 50%; right: auto; left: 30px; margin-top: -12px; }
  :root:not(.embed) #panel > nav.seg[role="tablist"] button:focus-visible { outline-offset: -2px; }

  /* 側欄內容：13–15px 字級、緊湊列高 */
  :root:not(.embed) #panel .scroll { padding: 0 12px 20px; }
  :root:not(.embed) #panel .row-search { flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
  :root:not(.embed) #panel .row-search .pill { flex: 1 1 auto; min-width: 0; height: 28px; padding: 0 7px; font-size: 13px; gap: 4px; white-space: nowrap; }
  :root:not(.embed) #panel .row-search .pill .ic { width: 13px; height: 13px; }
  :root:not(.embed)[lang="en"] #panel .row-search .pill { flex: 0 1 auto; padding: 0 10px; }   /* 英文字長，換行時不把最後一顆拉滿整排 */
  :root:not(.embed) #panel .mode-seg { margin: 10px 0 6px; padding: 2px; }
  :root:not(.embed) #panel .mode-seg button { padding: 4px 0; font-size: 13px; }
  :root:not(.embed) #panel .lv-legend { margin: 4px 0 10px; }
  :root:not(.embed) #panel details.region { border-radius: var(--radius); margin-bottom: 8px; }
  :root:not(.embed) #panel details.region summary { padding: 10px 14px; font-size: 13px; }
  :root:not(.embed) #panel .list li { font-size: 14px; padding: 7px 10px; min-height: 32px; border-radius: 8px; }
  :root:not(.embed) #panel details.region .list li { font-size: 14px; padding: 7px 10px; }
  :root:not(.embed) #panel .list li.group { font-size: 12px; padding: 12px 10px 4px; }
  :root:not(.embed) #panel .card { padding: 14px; border-radius: var(--radius); }
  :root:not(.embed) #panel .card h2 { font-size: 20px; }
  :root:not(.embed) #panel .tile { min-height: 56px; border-radius: var(--radius-sm); font-size: 12.5px; transition: background .15s; }
  :root:not(.embed) #panel .tile:not(.primary):hover { background: var(--d-ctl-h); }
  :root:not(.embed) #panel .tile.primary:hover { filter: brightness(1.08); }
  :root:not(.embed) #panel .group { border-radius: var(--radius-sm); }
  :root:not(.embed) #panel .row { font-size: 14px; min-height: 40px; }
  :root:not(.embed) #panel .row-btn:hover { background: var(--soft); }
  :root:not(.embed) #panel .group-head { margin: 18px 6px 6px; }
  :root:not(.embed) #panel .icon { width: 28px; height: 28px; transition: background .15s; }
  :root:not(.embed) #panel .icon:hover { background: var(--pill-hover); }
  :root:not(.embed) #panel .search input { padding: 8px 12px; font-size: 14px; }
  :root:not(.embed) #panel .pill { font-size: 13px; }
  :root:not(.embed) #panel details.sec > summary { font-size: 14px; }
  :root:not(.embed) #panel .seg.mini button { font-size: 12.5px; }
  :root:not(.embed) .pill, :root:not(.embed) .tile, :root:not(.embed) .chip, :root:not(.embed) .row-btn, :root:not(.embed) details > summary, :root:not(.embed) .seg button, :root:not(.embed) .mini-btn, :root:not(.embed) .icon, :root:not(.embed) .fab { cursor: pointer; }
}

/* 統一工具列 */
@media (min-width: 1024px) {
  :root:not(.embed) #deskBar { display: block; position: absolute; z-index: 950; top: 0; left: var(--sb-w); right: 0; height: var(--tb-h);
    background: rgba(var(--glass-rgb), calc(var(--glass-a) - .04));
    backdrop-filter: blur(var(--glass-blur)) saturate(180%); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
    box-shadow: 0 1px 0 var(--d-edge), inset 0 -1px 0 var(--d-hi), 0 8px 24px -16px rgba(0, 0, 0, .5);
    transition: left .35s cubic-bezier(.2, .8, .2, 1); cursor: default; }
  body.printing #deskBar, body.aligning #deskBar { display: none !important; }

  /* 工具列標題：選到的潛點（區域 › 名稱），側欄收起時也知道在看哪裡 */
  :root:not(.embed) #deskTitle { position: absolute; top: var(--safe-t); height: var(--tb-bar); left: calc(52px + var(--search-w) + 16px);
    right: calc(10px + var(--ctl) + 8px + var(--fabs-w, 220px) + 8px + 70px + 16px); display: flex; align-items: center; justify-content: center; gap: 6px;
    font-size: 14px; white-space: nowrap; overflow: hidden; pointer-events: none; color: var(--text); opacity: 1; transition: opacity .2s; }
  :root:not(.embed) #deskTitle:empty, :root:not(.embed) #deskTitle.tight, :root:not(.embed) body.desk-set #deskTitle { opacity: 0; }
  :root:not(.embed) #deskTitle .dt-reg { color: var(--muted); flex: none; }
  :root:not(.embed) #deskTitle .dt-sep { color: var(--muted); opacity: .7; flex: none; }
  :root:not(.embed) #deskTitle b { font-weight: 700; letter-spacing: .02em; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  /* 側欄開關：工具列最左邊（macOS sidebar.left 圖示） */
  :root:not(.embed) #fabs { position: fixed; top: var(--tb-y); right: calc(10px + var(--ctl) + 8px); bottom: auto; z-index: 960;
    flex-direction: row; align-items: center; gap: 2px !important; padding: 2px !important; height: calc(var(--ctl) + 4px); margin-top: -2px;
    background: var(--d-ctl) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    box-shadow: inset 0 0 0 .5px var(--d-ctl-ring) !important; border-radius: 30px; }   /* 高 36px，30px 也是膠囊 */
  :root:not(.embed) #fabs .fab.glass { width: var(--ctl); height: var(--ctl); border-radius: var(--pill); color: var(--text); transition: background .15s; }
  :root:not(.embed) #fabs .fab.glass:hover { background: var(--d-ctl-h) !important; }
  :root:not(.embed) #fabs .fab.on { background: var(--blue-fill) !important; color: var(--on-blue); }
  :root:not(.embed) #fabs .fab .ic { width: 18px; height: 18px; }
  :root:not(.embed) #fabs .fab-text { font-size: 12px; }
  :root:not(.embed) #fabs .fab:focus-visible { outline-offset: -2px; }
  :root:not(.embed) #fabs #panelToggle { position: fixed; top: var(--tb-y); left: calc(var(--sb-w) + 10px); background: none !important; transition: left .35s cubic-bezier(.2, .8, .2, 1), background .15s; }
  :root:not(.embed) #fabs #panelToggle:hover { background: var(--d-ctl-h) !important; }
  :root:not(.embed) #panelToggle { display: grid; place-items: center; }
  :root:not(.embed) #panelToggle svg { display: none; }
  :root:not(.embed) #panelToggle::before { content: ''; display: block; width: 18px; height: 18px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='3'/%3E%3Cpath d='M9 4v16'/%3E%3Cpath d='M5.5 8h1M5.5 11h1'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='3'/%3E%3Cpath d='M9 4v16'/%3E%3Cpath d='M5.5 8h1M5.5 11h1'/%3E%3C/svg%3E") center / contain no-repeat; }

  /* 搜尋：側欄開關右邊，膠囊欄位＋⌘F 提示 */
  :root:not(.embed) #topSearch { left: calc(var(--sb-w) + 52px) !important; right: auto !important; top: var(--tb-y); transform: none !important; width: var(--search-w) !important; height: var(--ctl);
    padding: 0 4px 0 11px; gap: 7px; z-index: 960; color: var(--muted);
    background: var(--d-ctl) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: inset 0 0 0 .5px var(--d-ctl-ring) !important;
    transition: left .35s cubic-bezier(.2, .8, .2, 1), background .15s, box-shadow .15s; }
  :root:not(.embed) #topSearch:hover { background: var(--d-ctl-h) !important; }
  :root:not(.embed) #topSearch:focus-within { background: rgba(var(--glass-rgb), .9) !important; box-shadow: inset 0 0 0 1px var(--d-ctl-ring), 0 0 0 3px rgba(56, 182, 255, .55) !important; }
  :root:not(.embed) #topSearch .ic { width: 15px; height: 15px; }
  :root:not(.embed) #topSearch input { font: 400 14px var(--font); }
  :root:not(.embed) #topSearch input:focus-visible { outline: none; }
  :root:not(.embed) #topSearch .icon { width: 26px; height: 26px; }
  :root:not(.embed) #topSearch .desk-kbd { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; margin-right: 4px; border-radius: 6px; font: 500 11.5px var(--font-lat); letter-spacing: .04em; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); white-space: nowrap; }
  :root:not(.embed) #topSearch:focus-within .desk-kbd, :root:not(.embed) #topSearch:has(#topClear:not(.hidden)) .desk-kbd { display: none; }
  :root:not(.embed) #topSuggest { left: calc(var(--sb-w) + 52px) !important; transform: none !important; top: calc(var(--tb-h) + 6px); width: max(var(--search-w), 340px) !important; box-shadow: var(--lg-ring), var(--d-pop) !important; }

  /* 縮放（地圖工具左邊）、圖層（最右邊）：Leaflet 控制項搬進工具列 */
  :root:not(.embed) .leaflet-top { top: 0; }
  :root:not(.embed) .leaflet-top.leaflet-left { left: auto !important; right: calc(10px + var(--ctl) + 8px + var(--fabs-w, 220px) + 8px); transition: none; }
  :root:not(.embed) .leaflet-top.leaflet-left .leaflet-control { margin: calc(var(--tb-y) - 2px) 0 0 0; }
  :root:not(.embed) .leaflet-control-zoom.leaflet-bar { display: flex; padding: 2px; gap: 2px; border-radius: var(--pill) !important; overflow: visible;
    background: var(--d-ctl) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: inset 0 0 0 .5px var(--d-ctl-ring) !important; }
  :root:not(.embed) .leaflet-control-zoom.leaflet-bar a { width: var(--ctl) !important; height: var(--ctl) !important; line-height: var(--ctl) !important; border: 0 !important; border-radius: var(--pill) !important;
    font: 400 20px/var(--ctl) var(--font-lat) !important; transition: background .15s; }
  :root:not(.embed) .leaflet-control-zoom.leaflet-bar a:hover { background: var(--d-ctl-h) !important; }
  :root:not(.embed) .leaflet-control-zoom.leaflet-bar a.leaflet-disabled { opacity: .35; background: transparent !important; }
  :root:not(.embed) .leaflet-control-zoom.leaflet-bar a:focus-visible { outline-offset: -2px; }
  :root:not(.embed) .leaflet-top.leaflet-right { right: 0; }
  :root:not(.embed) .leaflet-top.leaflet-right .leaflet-control { margin: var(--tb-y) 10px 0 0; }
  :root:not(.embed) .leaflet-top.leaflet-right .leaflet-control-layers:not(.leaflet-control-layers-expanded) { background: var(--d-ctl) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: inset 0 0 0 .5px var(--d-ctl-ring) !important; border-radius: var(--pill) !important; }
  :root:not(.embed) .leaflet-control-layers-toggle { width: var(--ctl); height: var(--ctl); background-image: none !important; filter: none; position: relative; color: var(--text); }
  :root:not(.embed) .leaflet-control-layers-toggle:hover { background-color: var(--d-ctl-h); }
  :root:not(.embed) .leaflet-control-layers-toggle::before { content: ''; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z'/%3E%3Cpath d='m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65'/%3E%3Cpath d='m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z'/%3E%3Cpath d='m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65'/%3E%3Cpath d='m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65'/%3E%3C/svg%3E") center / contain no-repeat; }
  /* 圖層展開：工具列按鈕保持按下，清單像選單一樣從工具列下方掉出來（不會被地圖工具蓋住） */
  :root:not(.embed) .leaflet-control-layers-expanded { position: relative; padding: calc(var(--tb-h) - var(--tb-y) + 6px) 0 0 !important; background: transparent !important; box-shadow: none !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-radius: 0 !important; overflow: visible; font-size: 13px; }
  :root:not(.embed) .leaflet-control-layers-expanded .leaflet-control-layers-toggle { display: block; position: absolute; top: 0; right: 0; border-radius: var(--pill); background-color: var(--d-ctl-h); box-shadow: inset 0 0 0 .5px var(--d-ctl-ring); }
  :root:not(.embed) .leaflet-control-layers-expanded .leaflet-control-layers-list { padding: 10px 14px; border-radius: var(--radius); background: rgba(var(--glass-rgb), max(.92, var(--glass-a)));
    backdrop-filter: blur(var(--glass-blur)) saturate(180%); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%); box-shadow: var(--lg-ring), var(--d-pop); animation: deskWin .16s cubic-bezier(.2, .8, .2, 1); }
  :root:not(.embed) .leaflet-control-layers-expanded label { padding: 2px 0; cursor: pointer; }
  :root:not(.embed) .leaflet-control-layers-expanded input, :root:not(.embed) #panel input[type=checkbox]:not(.switch), :root:not(.embed) .sheet input[type=checkbox]:not(.switch) { accent-color: var(--blue-fill); }
  :root:not(.embed) .leaflet-top.leaflet-right .north-ctl { margin-top: 8px; }
  :root:not(.embed) .north-ctl .fab { width: 36px; height: 36px; }

  /* 地圖上的其他浮動元素：讓出工具列，水平置中在地圖區 */
  :root:not(.embed) .leaflet-left { transition: left .35s cubic-bezier(.2, .8, .2, 1); }
  :root:not(.embed) .leaflet-bottom.leaflet-left { left: var(--sb-w); }
  /* 底部：避開 iPad 圓角與主畫面指示條 */
  :root:not(.embed) .leaflet-bottom { bottom: var(--safe-b); }
  :root:not(.embed) .leaflet-bottom.leaflet-right { right: var(--safe-r); }
  :root:not(.embed) #toast { left: var(--map-cx); top: calc(var(--tb-h) + 12px); box-shadow: var(--lg-ring), var(--d-pop) !important; }
  :root:not(.embed) #siPill, :root:not(.embed) #netBar, :root:not(.embed) #myMapBar, :root:not(.embed) #measBar, :root:not(.embed) .drag-bar { left: var(--map-cx); top: calc(var(--tb-h) + 10px); }
  :root:not(.embed) body:has(#siPill:not(.hidden)) #netBar { top: calc(var(--tb-h) + 52px); }
  :root:not(.embed) .start-ask { left: var(--map-cx); top: calc(var(--tb-h) + 12px); box-shadow: var(--lg-ring), var(--d-pop) !important; }
  :root:not(.embed) #coordBar { left: var(--map-cx); }
  :root:not(.embed) #alignBar { left: calc(var(--sb-w) + 16px); right: 16px; top: calc(var(--tb-h) + 10px); }
  :root:not(.embed) .lp-menu { box-shadow: var(--lg-ring), var(--d-pop) !important; }
  :root:not(.embed) .lp-menu button:hover { background: var(--d-ctl-h); }
}

/* 表單：置中的視窗 */
@media (min-width: 1024px) {
  :root:not(.embed) .sheet { padding: 48px; background: var(--d-dim); }
  :root:not(.embed) .sheet .sheet-body { width: min(680px, 100%); max-height: calc(100dvh - 96px); overflow-y: auto; overscroll-behavior: contain; border-radius: var(--radius-lg); padding: 20px 22px;
    background: rgba(var(--glass-rgb), max(.94, var(--glass-a))) !important; box-shadow: var(--lg-ring), var(--d-win) !important; animation: deskWin .22s cubic-bezier(.2, .8, .2, 1); }
  :root:not(.embed) .sheet .cert-form { width: min(560px, 100%); }
  :root:not(.embed) .sheet .gd-pick { width: min(480px, 100%); }
  :root:not(.embed) #windySheet .sheet-body, :root:not(.embed) #compareSheet .sheet-body, :root:not(.embed) #recapSheet .sheet-body, :root:not(.embed) #photoSheet .sheet-body, :root:not(.embed) #reviewSheet .sheet-body { width: min(880px, 100%); }
  :root:not(.embed) .sheet .card-head .icon:hover { background: var(--pill-hover); }
}
@keyframes deskWin { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

/* 設定兩欄（≥ 1280px）：左邊分類清單＋搜尋，右邊內容 */
#deskSetSide, .desk-set-title { display: none; }
@media (min-width: 1280px) {
  body.desk-set:not(.panel-collapsed) #panel { display: grid; grid-template-columns: 236px minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); }
  body.desk-set #panel > .grabber { display: none; }
  body.desk-set #panel > .brand { grid-column: 1; grid-row: 1; }
  body.desk-set #panel > nav.seg[role="tablist"] { grid-column: 1; grid-row: 2; }
  body.desk-set #panel > .scroll { grid-column: 2; grid-row: 1 / 4; padding: 0 24px 28px; background: rgba(var(--glass-rgb), .5); box-shadow: inset 1px 0 0 var(--d-edge), inset 2px 0 0 var(--d-hi); }
  body.desk-set #deskSetSide { display: block; grid-column: 1; grid-row: 3; overflow-y: auto; padding: 4px 10px 20px; box-shadow: 0 -1px 0 var(--line); }
  body.desk-set #deskSetSide .set-search { margin: 8px 0 10px; }
  :root:not(.embed) body.desk-set #deskSetSide .set-search input { height: var(--ctl); text-overflow: ellipsis; padding: 0 12px; border-radius: var(--pill); font-size: 13px; background: var(--d-ctl); box-shadow: inset 0 0 0 .5px var(--d-ctl-ring); }
  body.desk-set #deskSetSide #setMenu, body.desk-set #deskSetSide #setMenu.hidden { display: grid !important; gap: 2px; background: none; border-radius: 0; overflow: visible; }
  body.desk-set #deskSetSide #setMenu .row { min-height: var(--ctl); padding: 0 10px; border-radius: 10px; font-size: 14px; color: var(--text); }
  body.desk-set #deskSetSide #setMenu .row::before { display: none; }
  body.desk-set #deskSetSide #setMenu .row > span:first-child { color: var(--text); display: inline-flex; align-items: center; gap: 10px; }
  body.desk-set #deskSetSide #setMenu .row .ic { width: 17px; height: 17px; color: var(--d-sel-ic); }
  body.desk-set #deskSetSide #setMenu .row:hover { background: var(--d-ctl); }
  body.desk-set #deskSetSide #setMenu .row.on { background: var(--d-sel); }
  body.desk-set #deskSetSide #setMenu .row.on > span:first-child { font-weight: 700; }
  :root.desk-inactive body.desk-set #deskSetSide #setMenu .row.on { background: var(--d-sel-off); }
  body.desk-set #tab-data #setBack { display: none !important; }
  body.desk-set .desk-set-title { display: flex; align-items: center; height: var(--tb-h); margin: 0 -12px 6px; padding: 0 12px;   /* 和外框左右留白（12 px，見上面 #panel .scroll）一樣寬，才不會超出面板 */ font-size: 20px; font-weight: 800; letter-spacing: .04em; position: sticky; top: 0; z-index: 3;
    background: rgba(var(--glass-rgb), .72); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); box-shadow: 0 1px 0 var(--line); }
  body.desk-set .desk-set-title:empty { display: none; }
  body.desk-set #tab-data > .group-head:first-of-type, body.desk-set #tab-data > .desk-set-title + .group-head { margin-top: 6px; }
}
@media (min-width: 1024px) and (prefers-reduced-transparency: reduce) {
  :root:not(.embed) #deskBar, :root:not(.embed) .desk-set-title, :root:not(.embed) .leaflet-control-layers-expanded .leaflet-control-layers-list { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  :root:not(.embed) #deskBar { background: rgba(var(--glass-rgb), 1); }
}

/* 桌面版側欄品牌：設定兩欄時左欄只有 236px，字標縮小一點，不跟 EN／日夜鈕擠在一起 */
@media (min-width: 1024px) {
  :root:not(.embed) body.desk-set #panel .brand .dm-word { font-size: 17px; }
  :root:not(.embed) body.desk-set #panel .brand .dm-word > span { display: none; }
  :root:not(.embed) body.desk-set #panel .brand .dm-mark { width: 28px; height: 28px; border-radius: 7px; }
  :root:not(.embed) body.desk-set #panel .brand .logo { gap: 8px; }
}

/* ---------- 登入頁（玻璃卡片＋海底等深線背景）---------- */
.login-sheet { align-items: center; justify-content: center; z-index: 2400; }
.login-sheet .login-sea { position: absolute; inset: 0; background:
  radial-gradient(120% 70% at 50% -10%, rgba(110,198,243,.35), transparent 60%),
  linear-gradient(180deg, #153F82 0%, #0E1F3D 70%); }
:root[data-theme="light"] .login-sheet .login-sea { background:
  radial-gradient(120% 70% at 50% -10%, rgba(255,255,255,.9), transparent 60%),
  linear-gradient(180deg, #F0F9FF 0%, #DCEEFF 100%); }
@media (prefers-color-scheme: light) { :root[data-theme="auto"] .login-sheet .login-sea { background:
  radial-gradient(120% 70% at 50% -10%, rgba(255,255,255,.9), transparent 60%),
  linear-gradient(180deg, #F0F9FF 0%, #DCEEFF 100%); } }
/* 等深線：一份 SVG 當遮罩，深淺色只換線條顏色（原本三份 data URI 各 11 KB） */
.login-sheet .login-sea { --login-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' preserveAspectRatio='xMidYMid slice'%3E%3Cg fill='none' stroke='black' stroke-width='1.4'%3E%3Cpath d='M1433,1000 1434,1010 1431,1021 1425,1030 1417,1039 1407,1046 1397,1052 1387,1058 1378,1064 1369,1070 1359,1075 1348,1080 1337,1084 1325,1086 1312,1087 1300,1086 1288,1085 1276,1083 1264,1082 1252,1080 1239,1079 1225,1076 1212,1072 1200,1067 1191,1059 1184,1050 1181,1039 1181,1029 1183,1018 1187,1009 1190,1000 1192,992 1193,983 1194,975 1195,965 1197,956 1201,947 1207,938 1215,930 1226,924 1237,920 1249,916 1262,913 1274,910 1287,908 1300,906 1313,906 1327,907 1339,911 1351,916 1360,923 1368,931 1375,938 1381,946 1387,953 1394,960 1403,966 1412,973 1421,981 1428,990 1433,1000Z'/%3E%3Cpath d='M1566,1000 1559,1020 1547,1039 1533,1056 1518,1072 1504,1087 1490,1102 1475,1117 1459,1130 1440,1143 1419,1153 1396,1160 1372,1165 1348,1167 1324,1169 1300,1170 1276,1172 1250,1174 1223,1175 1195,1174 1167,1170 1141,1162 1119,1149 1102,1132 1092,1112 1087,1091 1086,1071 1086,1052 1086,1034 1084,1017 1080,1000 1075,983 1071,964 1071,945 1074,926 1083,907 1096,890 1114,876 1133,863 1154,852 1176,841 1199,831 1222,822 1247,815 1273,811 1300,810 1326,814 1351,822 1373,833 1393,846 1410,859 1427,871 1444,881 1464,891 1485,900 1508,911 1530,924 1548,940 1561,959 1567,979 1566,1000Z'/%3E%3Cpath d='M1674,1000 1662,1028 1649,1055 1636,1081 1623,1107 1608,1132 1590,1156 1566,1178 1539,1196 1507,1211 1474,1223 1440,1232 1406,1241 1372,1250 1337,1259 1300,1270 1260,1279 1218,1284 1176,1284 1134,1275 1098,1259 1068,1237 1046,1209 1030,1180 1020,1151 1011,1124 1001,1099 988,1075 973,1051 958,1027 945,1000 937,972 936,943 943,914 957,887 977,862 1000,838 1025,816 1051,795 1079,775 1109,755 1143,739 1180,727 1220,721 1261,722 1300,730 1337,742 1370,756 1401,770 1431,782 1462,792 1496,800 1534,808 1572,818 1609,833 1642,854 1667,879 1681,908 1686,939 1683,970 1674,1000Z'/%3E%3Cpath d='M1776,1000 1771,1037 1765,1073 1755,1109 1738,1145 1714,1177 1683,1206 1647,1231 1607,1253 1567,1272 1527,1291 1487,1312 1447,1334 1402,1357 1354,1377 1300,1392 1243,1398 1187,1393 1135,1377 1089,1352 1051,1320 1020,1285 995,1251 971,1219 946,1191 918,1163 888,1136 858,1106 832,1074 813,1038 804,1000 805,961 814,924 830,887 850,852 872,817 897,783 924,749 957,718 995,689 1041,668 1092,654 1146,649 1200,652 1252,661 1300,672 1345,682 1389,689 1435,693 1484,694 1537,696 1592,702 1645,716 1694,738 1732,767 1760,803 1776,843 1782,884 1783,924 1780,963 1776,1000Z'/%3E%3Cpath d='M1899,1000 1898,1047 1888,1093 1867,1136 1837,1177 1800,1214 1759,1247 1719,1279 1680,1312 1641,1347 1600,1385 1554,1423 1501,1458 1439,1485 1371,1500 1300,1501 1231,1489 1167,1464 1111,1431 1062,1396 1018,1362 976,1330 932,1303 886,1276 838,1249 791,1218 749,1182 716,1140 695,1095 685,1048 684,1000 690,952 699,905 711,858 727,811 747,764 776,718 816,677 867,643 927,619 992,605 1060,601 1125,602 1186,604 1244,605 1300,601 1358,593 1420,583 1486,575 1556,574 1626,582 1690,602 1745,634 1789,674 1821,720 1843,768 1859,816 1872,862 1883,908 1893,954 1899,1000Z'/%3E%3Cpath d='M2021,1000 2008,1055 1983,1108 1951,1157 1917,1203 1883,1249 1852,1297 1822,1348 1789,1402 1748,1456 1695,1507 1629,1548 1552,1575 1468,1585 1382,1579 1300,1560 1224,1532 1156,1502 1093,1473 1031,1448 968,1426 902,1406 835,1382 770,1353 711,1317 662,1273 625,1223 599,1169 582,1113 571,1057 563,1000 558,942 557,883 564,823 585,764 621,709 673,662 738,625 813,599 891,583 966,571 1036,561 1102,548 1165,529 1230,505 1300,480 1377,458 1459,445 1543,446 1624,461 1697,491 1759,532 1811,580 1854,631 1891,682 1925,733 1957,783 1986,835 2008,888 2021,944 2021,1000Z'/%3E%3Cpath d='M2106,1000 2086,1061 2065,1120 2046,1180 2032,1241 2019,1307 2000,1377 1971,1447 1924,1513 1858,1569 1775,1610 1680,1632 1580,1637 1480,1629 1387,1611 1300,1592 1218,1575 1139,1562 1058,1552 975,1541 890,1526 807,1503 730,1469 663,1425 607,1373 561,1316 523,1256 488,1195 456,1133 427,1068 405,1000 394,929 401,858 429,790 478,729 545,677 624,636 706,604 786,577 858,550 925,519 988,481 1054,439 1127,396 1209,358 1300,332 1396,322 1492,329 1584,353 1667,390 1740,435 1807,483 1868,532 1927,582 1983,632 2034,686 2076,744 2106,806 2120,871 2119,936 2106,1000Z'/%3E%3Cpath d='M2189,1000 2194,1070 2204,1142 2215,1220 2218,1303 2206,1387 2170,1468 2109,1539 2024,1595 1921,1633 1809,1653 1697,1660 1589,1659 1488,1657 1393,1657 1300,1661 1205,1667 1108,1670 1008,1667 908,1652 814,1624 727,1584 650,1535 580,1480 516,1422 455,1362 394,1299 337,1232 288,1159 255,1081 245,1000 261,919 303,843 366,775 443,717 522,667 598,622 664,576 723,525 778,468 837,406 906,345 988,290 1084,248 1190,225 1300,221 1409,235 1512,262 1608,297 1699,336 1786,377 1870,419 1951,465 2025,516 2089,575 2138,642 2170,713 2186,787 2190,860 2189,931 2189,1000Z'/%3E%3Cpath d='M2353,1000 2394,1085 2424,1177 2433,1273 2413,1367 2360,1453 2277,1526 2172,1581 2055,1621 1935,1648 1820,1668 1713,1687 1611,1709 1511,1734 1408,1759 1300,1780 1188,1790 1074,1787 963,1769 857,1737 758,1696 663,1649 572,1599 481,1546 390,1490 303,1427 226,1354 168,1272 137,1183 137,1091 166,1000 219,916 285,840 353,772 415,708 466,643 508,574 546,497 591,417 650,337 727,265 823,207 935,168 1056,149 1179,148 1300,160 1416,179 1529,202 1639,228 1746,257 1851,293 1949,338 2035,395 2106,462 2159,538 2197,617 2224,695 2248,772 2276,846 2312,921 2353,1000Z'/%3E%3Cpath d='M2596,1000 2630,1104 2629,1209 2589,1310 2513,1400 2412,1476 2298,1537 2180,1587 2067,1631 1962,1675 1862,1721 1762,1769 1658,1816 1545,1855 1425,1882 1300,1893 1174,1889 1050,1870 930,1843 812,1811 695,1776 575,1739 455,1695 338,1642 233,1574 149,1492 95,1397 74,1295 85,1191 119,1092 166,1000 214,915 252,835 277,754 293,668 308,576 332,479 374,383 441,294 534,219 647,162 774,125 907,104 1040,94 1171,92 1300,93 1428,98 1555,110 1681,131 1801,167 1910,218 2004,283 2081,358 2144,437 2199,516 2254,592 2315,665 2385,739 2462,817 2536,904 2596,1000Z'/%3E%3Cpath d='M2795,1000 2772,1115 2712,1222 2624,1319 2521,1403 2416,1477 2316,1547 2223,1616 2134,1686 2043,1757 1943,1825 1831,1884 1708,1929 1575,1958 1438,1971 1300,1971 1163,1964 1026,1954 887,1942 743,1926 597,1902 454,1863 322,1805 211,1726 131,1629 85,1519 71,1405 80,1294 99,1189 116,1092 122,1000 114,908 97,811 81,707 79,597 101,487 153,383 237,291 346,215 472,156 607,110 744,75 882,46 1019,21 1158,2 1300,-9 1443,-5 1582,17 1713,59 1831,117 1934,187 2025,261 2110,333 2198,401 2294,465 2400,529 2513,600 2622,682 2714,777 2774,885 2795,1000Z'/%3E%3Cpath d='M2853,1000 2787,1116 2707,1222 2626,1319 2550,1412 2479,1504 2411,1598 2335,1691 2247,1779 2141,1858 2019,1922 1883,1971 1741,2005 1595,2029 1449,2048 1300,2066 1146,2082 986,2093 820,2093 655,2074 498,2029 361,1957 253,1861 178,1748 133,1628 109,1509 92,1398 72,1296 39,1199 -8,1102 -63,1000 -113,890 -145,772 -148,652 -114,534 -46,424 52,328 168,245 296,174 427,110 561,52 697,-3 840,-49 989,-84 1144,-100 1300,-94 1451,-66 1593,-19 1722,39 1841,101 1956,158 2075,210 2205,256 2345,303 2492,358 2634,429 2756,520 2845,628 2891,750 2892,876 2853,1000Z'/%3E%3C/g%3E%3C/svg%3E"); }
.login-sheet .login-sea::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: var(--login-contour, rgba(110, 198, 243, .16));
  -webkit-mask: var(--login-svg) center / cover no-repeat; mask: var(--login-svg) center / cover no-repeat; }
:root[data-theme="light"] .login-sheet .login-sea { --login-contour: rgba(47, 128, 237, .14); }
@media (prefers-color-scheme: light) { :root[data-theme="auto"] .login-sheet .login-sea { --login-contour: rgba(47, 128, 237, .14); } }
.login-card { position: relative; width: min(420px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; padding: 28px 26px 22px; border-radius: 20px; display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 0 0 1px rgba(0,0,0,.18), 0 24px 60px rgba(0,0,0,.35); }
.login-x { position: absolute; top: 12px; right: 12px; }
.login-brand { display: flex; align-items: center; }
.login-brand .dm-mark { width: 64px; height: 64px; box-shadow: 0 0 0 .5px rgba(255, 255, 255, .18), 0 10px 28px rgba(0, 0, 0, .35); }
#loginTitle { margin: 8px 0 0; font-size: 30px; font-weight: 800; letter-spacing: .04em; line-height: 1.15; }
#loginTitle span { font-family: var(--font-lat); font-weight: 600; font-size: .86em; letter-spacing: -.005em; color: var(--text-2); }
.login-sub { margin: 0 0 6px; font-size: 16px; color: var(--text-2); }
.login-why { list-style: none; margin: 4px 0 10px; padding: 0; display: grid; gap: 10px; }
.login-why li { display: flex; align-items: center; gap: 12px; font-size: 15px; line-height: 1.4; }
.login-ic { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 10px; background: rgba(110,198,243,.16); color: var(--sky); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
.login-ic .ic { width: 18px; height: 18px; }
.login-google { display: flex; align-items: center; justify-content: center; gap: 12px; height: 50px; border-radius: 999px; border: 1px solid #747775; background: #fff; color: #1f1f1f; font: 500 16px/1 var(--font); cursor: pointer; }
.login-google:hover { background: #f2f6fc; } .login-google:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.login-google.busy { opacity: .7; pointer-events: none; }
.login-later { height: 44px; border: 0; background: transparent; color: var(--link); font: 600 15px/1 var(--font); border-radius: 999px; cursor: pointer; }
.login-later:hover { background: var(--soft); }
.login-note { margin: 2px 0 0; font-size: 13px; line-height: 1.55; color: var(--muted); text-align: center; }
.login-privacy { align-self: center; font-size: 13px; color: var(--link); }
.login-card:focus { outline: none; }
:root[data-theme="light"] .login-ic { background: rgba(47,128,237,.12); color: var(--blue-fill); }
@media (prefers-color-scheme: light) { :root[data-theme="auto"] .login-ic { background: rgba(47,128,237,.12); color: var(--blue-fill); } }
@media (min-width: 1024px) { .login-google { height: 44px; } .login-card { padding: 32px 32px 24px; } }
@media (min-width: 1024px) {
  /* 登入卡片不套桌面版通用視窗寬度（680px），維持精簡的 440px */
  :root:not(.embed) #loginSheet > .login-card, :root:not(.embed) #loginSheet .sheet-body.login-card { width: 440px !important; max-width: 440px !important; }
}

/* ---------- 導覽（聚光） ----------
   guide.js：畫面變暗，只亮出要介紹的元素（.tour-spot 用超大陰影做暗幕、中間挖空），旁邊是玻璃說明框（.tour-tip）。
   聚光框與說明框都用 transform 移動，步驟之間平滑滑過去；系統「減少動態效果」時直接跳到位（全域規則把時間縮成 0）。 */
#guide.tour { position: fixed; inset: 0; z-index: 2700; --tour-dim: rgba(2, 10, 26, .66); --tour-acc: #6EC6F3; --tour-ease: cubic-bezier(.22, .9, .24, 1); --tour-move: .46s; }
:root[data-theme="light"] #guide.tour { --tour-dim: rgba(12, 32, 64, .5); --tour-acc: #2F80ED; }
@media (prefers-color-scheme: light) { :root[data-theme="auto"] #guide.tour { --tour-dim: rgba(12, 32, 64, .5); --tour-acc: #2F80ED; } }
#guide.tour.hidden { display: none; }
#guide .invisible { visibility: hidden; }
.tour-block { position: absolute; inset: 0; }
/* 聚光：挖空的圓角框＋一圈柔光邊 */
.tour-spot { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; border-radius: 24px;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .78), 0 0 0 5px rgba(110, 198, 243, .22), 0 0 28px 6px rgba(110, 198, 243, .3), 0 0 0 200vmax var(--tour-dim);
  transition: transform var(--tour-move) var(--tour-ease), width var(--tour-move) var(--tour-ease), height var(--tour-move) var(--tour-ease), border-radius var(--tour-move) var(--tour-ease), box-shadow .3s; }
.tour-spot.off { box-shadow: inset 0 0 0 0 rgba(255, 255, 255, 0), 0 0 0 0 rgba(110, 198, 243, 0), 0 0 0 0 rgba(110, 198, 243, 0), 0 0 0 200vmax var(--tour-dim); }
/* 聚光範圍裡的重點（例如 3D 按鈕）：呼吸的細框 */
.tour-ring { position: absolute; left: 0; top: 0; pointer-events: none; border: 2px solid var(--tour-acc); opacity: 0;
  transition: opacity .25s, transform var(--tour-move) var(--tour-ease), width var(--tour-move) var(--tour-ease), height var(--tour-move) var(--tour-ease); }
.tour-ring.on { opacity: 1; animation: tourPulse 1.8s ease-in-out .5s infinite; }
@keyframes tourPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(110, 198, 243, .45); } 50% { box-shadow: 0 0 0 7px rgba(110, 198, 243, 0); } }
/* 說明框 */
.tour-tip { position: absolute; left: 0; top: 0; width: min(360px, calc(100vw - 24px)); padding: 14px 16px 14px 18px; border-radius: 26px !important; color: var(--text);
  background: rgba(var(--glass-rgb), .93) !important; transition: transform var(--tour-move) var(--tour-ease); touch-action: pan-y; }
.tour-tip:focus { outline: none; }
.tour-tip.center { width: min(400px, calc(100vw - 32px)); padding: 16px 22px 18px; text-align: center; }
.tour-tip.card { width: min(440px, calc(100vw - 32px)); }
#guide.in .tour-tip { animation: tourIn .42s var(--tour-ease); }
#guide.in .tour-spot { animation: tourFade .32s ease-out; }
@keyframes tourIn { from { opacity: 0; scale: .96; } }
@keyframes tourFade { from { opacity: 0; } }
.tour-caret { position: absolute; display: none; width: 18px; height: 9px; background: rgba(var(--glass-rgb), .93); }
.tour-tip[data-side="below"] .tour-caret { display: block; top: -9px; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.tour-tip[data-side="above"] .tour-caret { display: block; bottom: -9px; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.tour-tip[data-side="right"] .tour-caret, .tour-tip[data-side="left"] .tour-caret { width: 9px; height: 18px; }
.tour-tip[data-side="right"] .tour-caret { display: block; left: -9px; clip-path: polygon(100% 0, 100% 100%, 0 50%); }
.tour-tip[data-side="left"] .tour-caret { display: block; right: -9px; clip-path: polygon(0 0, 100% 50%, 0 100%); }
/* 標頭：圖示方塊、步數、略過 */
.tour-head { display: flex; align-items: center; gap: 10px; margin: 0 -6px 10px 0; min-height: 34px; }
.tour-ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; color: var(--accent-2);
  background: rgba(110, 198, 243, .14); box-shadow: inset 0 0 0 1px rgba(110, 198, 243, .3), inset 0 1px 0 var(--glass-hi2); }
:root[data-theme="light"] .tour-ic { background: rgba(47, 128, 237, .1); box-shadow: inset 0 0 0 1px rgba(47, 128, 237, .22); color: #1558B8; }
@media (prefers-color-scheme: light) { :root[data-theme="auto"] .tour-ic { background: rgba(47, 128, 237, .1); box-shadow: inset 0 0 0 1px rgba(47, 128, 237, .22); color: #1558B8; } }
.tour-ic:empty { display: none; }
.tour-ic .ic { width: 18px; height: 18px; }
.tour-count { font: 600 12px/1 var(--font-lat); letter-spacing: .06em; color: var(--muted); font-variant-numeric: tabular-nums; }
.tour-skip { margin-left: auto; border: 0; background: none; color: var(--muted); font: 600 14px var(--font); letter-spacing: .02em; min-height: 34px; padding: 0 12px; border-radius: var(--pill); cursor: pointer; }
.tour-skip:hover { background: var(--soft); color: var(--text); }
/* 置中的步驟（歡迎、完成、卡片模式）：上方大圖示 */
.tour-tip.center .tour-head { margin-bottom: 0; }
.tour-hero:empty { display: none; }
.tour-hero { display: flex; justify-content: center; margin: 2px 0 16px; }
.tour-app { position: relative; width: 76px; height: 76px; border-radius: 20px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 10px 30px rgba(0, 0, 0, .35); }
.tour-app img { display: block; width: 100%; height: 100%; }
.tour-app .t-light { display: none; }
:root[data-theme="light"] .tour-app .t-dark { display: none; }
:root[data-theme="light"] .tour-app .t-light { display: block; }
:root[data-theme="light"] .tour-app { box-shadow: 0 0 0 1px rgba(21, 63, 130, .1), 0 10px 26px rgba(21, 63, 130, .2); }
@media (prefers-color-scheme: light) { :root[data-theme="auto"] .tour-app .t-dark { display: none; } :root[data-theme="auto"] .tour-app .t-light { display: block; }
  :root[data-theme="auto"] .tour-app { box-shadow: 0 0 0 1px rgba(21, 63, 130, .1), 0 10px 26px rgba(21, 63, 130, .2); } }
.tour-badge { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; color: var(--accent-2);
  background: rgba(110, 198, 243, .14); box-shadow: inset 0 0 0 1px rgba(110, 198, 243, .3), inset 0 1px 0 var(--glass-hi2); }
.tour-badge .ic { width: 30px; height: 30px; }
:root[data-theme="light"] .tour-badge { background: rgba(47, 128, 237, .1); box-shadow: inset 0 0 0 1px rgba(47, 128, 237, .22); color: #1558B8; }
@media (prefers-color-scheme: light) { :root[data-theme="auto"] .tour-badge { background: rgba(47, 128, 237, .1); box-shadow: inset 0 0 0 1px rgba(47, 128, 237, .22); color: #1558B8; } }
/* 文字 */
.tour-live.swap { animation: tourSwap .34s var(--tour-ease); }
@keyframes tourSwap { from { opacity: 0; transform: translateY(4px); } }
.tour-title { margin: 0 0 6px; font-size: 19px; line-height: 1.3; font-weight: 700; letter-spacing: .02em; }
.tour-tip.center .tour-title { font-size: 23px; margin-bottom: 8px; }
.tour-body p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--text-2); }
.tour-body ul { margin: 4px 0 0; padding: 0 0 0 1.1em; text-align: left; font-size: 15px; line-height: 1.55; color: var(--text-2); }
.tour-body li + li { margin-top: 6px; }
/* 新功能卡片：每個新功能一列（圖示方塊＋名稱＋一句話），「帶我看看」在畫面上走一趟 */
.tour-body ul.tour-news { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 14px; }
.tour-news li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start; margin: 0; }
.tour-news li + li { margin-top: 0; }
.tn-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: var(--accent-2);
  background: rgba(110, 198, 243, .14); box-shadow: inset 0 0 0 1px rgba(110, 198, 243, .3); }
.tn-ic .ic { width: 20px; height: 20px; }
:root[data-theme="light"] .tn-ic { background: rgba(47, 128, 237, .1); box-shadow: inset 0 0 0 1px rgba(47, 128, 237, .22); color: #1558B8; }
@media (prefers-color-scheme: light) { :root[data-theme="auto"] .tn-ic { background: rgba(47, 128, 237, .1); box-shadow: inset 0 0 0 1px rgba(47, 128, 237, .22); color: #1558B8; } }
.tn-tx { display: grid; gap: 2px; font-size: 14px; line-height: 1.5; }
.tn-tx b { font-size: 15px; letter-spacing: .02em; }
.tour-try { width: 100%; min-height: 44px; justify-content: center; }
.tour-body b { color: var(--text); }
.tour-extra:empty { display: none; }
.tour-extra { margin-top: 14px; }
.tour-role { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 14px; color: var(--muted); }
.tour-seg { display: inline-flex; padding: 3px; border-radius: var(--pill); background: var(--soft); box-shadow: inset 0 0 0 1px var(--line); }
.tour-seg button { border: 0; background: none; color: var(--text); font: 600 14px var(--font); letter-spacing: .02em; min-height: 34px; padding: 0 16px; border-radius: var(--pill); cursor: pointer; }
.tour-seg button.on { background: rgba(56, 182, 255, .2); color: var(--accent-2); box-shadow: inset 0 0 0 1px rgba(56, 182, 255, .3); }
:root[data-theme="light"] .tour-seg button.on { background: rgba(47, 128, 237, .14); color: #1558B8; }
@media (prefers-color-scheme: light) { :root[data-theme="auto"] .tour-seg button.on { background: rgba(47, 128, 237, .14); color: #1558B8; } }
.tour-note { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 9px 12px; border-radius: 14px; background: var(--soft); text-align: left; font-size: 13px; line-height: 1.5; color: var(--muted); }
.tour-note .ic { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--accent-2); }
/* 頁尾：進度點與按鈕 */
.tour-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.tour-dots { display: flex; gap: 5px; }
.tour-dots i { width: 6px; height: 6px; border-radius: 3px; background: var(--muted); opacity: .35; transition: width .3s var(--tour-ease), opacity .3s, background .3s; }
.tour-dots i.past { opacity: .6; }
.tour-dots i.on { width: 18px; opacity: 1; background: var(--tour-acc); }
.tour-nav { display: flex; gap: 8px; }
.tour-nav .pill { min-height: 40px; padding: 0 18px; font-size: 15px; }
.tour-nav .pill.invisible { display: none; }
.tour-tip.center .tour-foot { margin-top: 20px; }
@media (pointer: coarse) { .tour-nav .pill, .tour-skip, .tour-seg button { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { .tour-ring.on { animation: none; } }
.tour-hero { position: relative; isolation: isolate; }
.tour-hero::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: 168px; height: 168px; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(110, 198, 243, .26), rgba(110, 198, 243, 0)); pointer-events: none; }

/* ---------- 繪圖：iPad／Apple Pencil ---------- */
/* 筆繪（draw-pencil.js／draw-pencil-kit.js）：浮動工具列（桌面與平板橫拿在地圖下方中央，手機版在上方）、狀態列、懸停水深、水深選擇器、建議等深線
   觸控目標一律 ≥ 44 pt；位置避開瀏海與 Home 指示條（safe area）；玻璃材質沿用 .glass */
.pz-entry { margin: 0 0 14px; }
.pz-entry .pill.wide { margin-top: 0; }
.pz-entry .hint { margin: 8px 2px 0; }
body.pz-on #coordBar, body.pz-on #crosshair { display: none !important; }
body.pz-on #map { cursor: crosshair; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#map.pz-erasing { cursor: cell; }
#map.pz-pan { cursor: grab; }
.pz-ink { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 640; pointer-events: none; }
.pz-bar, .pz-hud, .pz-sugg, .pz-offer { position: fixed; z-index: 1200; left: var(--map-cx, 50%); transform: translateX(-50%); }
.pz-bar { display: none; width: max-content; bottom: calc(18px + var(--safe-b)); align-items: center; gap: 2px; padding: 6px; border-radius: 999px; max-width: calc(100vw - 24px - var(--safe-l) - var(--safe-r));
  color: var(--text); font-family: var(--font); }
body.pz-on .pz-bar { display: flex; }
.pz-bar.busy > :not(#pzSuggest):not(#pzDone) { opacity: .35; pointer-events: none; }
.pz-b, .pz-kind, .pz-done { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; height: 44px; border: 0; border-radius: 999px;
  background: transparent; color: inherit; font: 600 15px var(--font); cursor: pointer; transition: background .15s, color .15s, transform .1s; }
.pz-b .ic, .pz-kind .ic { width: 21px; height: 21px; }
.pz-b:hover, .pz-kind:hover { background: var(--soft); }
.pz-b:active, .pz-kind:active, .pz-done:active { transform: scale(.94); }
.pz-b[aria-pressed="true"] { background: var(--blue-fill); color: var(--on-blue); }
.pz-b:disabled { opacity: .3; cursor: default; }
.pz-b.dim { opacity: .5; }
.pz-kind { padding: 0 12px 0 10px; background: var(--soft); max-width: 190px; }
.pz-kind .pz-kl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pz-kind .ic { width: 16px; height: 16px; opacity: .7; }
.pz-kind[aria-expanded="true"] .ic { transform: rotate(180deg); }
.pz-sw .swatch { width: 26px; height: 18px; }
.pz-3d { padding: 0 12px; font: 700 14px var(--font-lat); letter-spacing: .02em; }
.pz-done { padding: 0 20px; margin-left: 4px; background: var(--blue-fill); color: var(--on-blue); font-weight: 700; }
.pz-sep { flex: none; width: 1px; height: 24px; margin: 0 4px; background: var(--line); }
.pz-grp { display: flex; gap: 2px; }
/* 狀態列：目前在畫什麼、手指做什麼、歸到哪個潛點；存檔後可以直接復原 */
.pz-hud { bottom: calc(80px + var(--safe-b)); display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px); padding: 7px 8px 7px 14px; border-radius: 999px;
  background: rgba(var(--glass-rgb), .86); box-shadow: var(--lg-ring), var(--glass-shadow); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  color: var(--text-2); font: 500 13px var(--font); white-space: nowrap; pointer-events: auto; transition: opacity .2s; }
.pz-hud:empty, .pz-hud.hidden, body:not(.pz-on) .pz-hud { display: none; }
.pz-hud > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.pz-hud:not(:has(button)) { padding-right: 14px; }
.pz-hud-site { color: var(--muted); padding-left: 10px; border-left: 1px solid var(--line); overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.pz-hud-site.warn { color: var(--orange); }
.pz-hud-undo { border: 0; border-radius: 999px; min-height: 32px; padding: 0 12px; background: var(--soft); color: var(--link); font: 700 13px var(--font); cursor: pointer; }
.pz-hud.flash { box-shadow: var(--lg-ring), 0 0 0 3px rgba(47, 128, 237, .45); }
/* 懸停（Apple Pencil 靠近螢幕／滑鼠）：十字準星＋推估水深 */
.pz-hover { position: absolute; left: 0; top: 0; z-index: 645; pointer-events: none; }
.pz-hover.hidden { display: none; }
.pz-hx { position: absolute; left: -15px; top: -15px; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(0, 0, 0, .25); }
.pz-hx::before, .pz-hx::after { content: ""; position: absolute; background: #fff; box-shadow: 0 0 2px rgba(0, 0, 0, .7); }
.pz-hx::before { left: 13.25px; top: -7px; width: 1.5px; height: 42px; }
.pz-hx::after { top: 13.25px; left: -7px; height: 1.5px; width: 42px; }
.pz-hl { position: absolute; left: 22px; top: -44px; display: flex; flex-direction: column; padding: 5px 10px 6px; border-radius: 12px; white-space: nowrap;
  background: rgba(14, 31, 61, .88); color: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, .35); }
.pz-hl b { font: 700 16px var(--font-lat); font-variant-numeric: tabular-nums; }
.pz-hl small { font-size: 11px; color: #A9B9D1; }
.pz-hover[data-src="hand"] .pz-hl small { color: #7FE0A8; }
.pz-hover[data-src="gmrt"] .pz-hl small { color: #FFC56B; }
.pz-hover.drawing .pz-hx { display: none; }
.pz-hover.drawing .pz-hl { left: 26px; top: -62px; opacity: .92; }
/* 元件選單 */
.pz-kinds { position: fixed; z-index: 1250; display: grid; grid-template-columns: repeat(3, minmax(150px, 1fr)); gap: 4px 14px; width: min(620px, calc(100vw - 16px)); padding: 12px;
  border-radius: 24px; color: var(--text); font-family: var(--font); }
.pz-kinds.hidden { display: none; }
.pz-kg h4 { margin: 4px 8px 6px; font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: .04em; }
.pz-ki { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 10px; border: 0; border-radius: 14px; background: transparent; color: inherit; font: 500 15px var(--font); text-align: left; cursor: pointer; }
.pz-ki:hover { background: var(--soft); }
.pz-ki.on { background: rgba(47, 128, 237, .2); font-weight: 700; }
/* 建議等深線 */
.pz-sugg { bottom: calc(80px + var(--safe-b)); display: flex; align-items: center; gap: 8px; max-width: calc(100vw - 24px); padding: 8px 8px 8px 16px; border-radius: 22px; color: var(--text); font-family: var(--font); }
.pz-sugg.hidden { display: none; }
.pz-sugg-t { display: flex; flex-direction: column; min-width: 0; margin-right: 6px; }
.pz-sugg-t b { font-size: 15px; }
.pz-sugg-t span { font-size: 12px; color: color-mix(in srgb, var(--orange) 62%, var(--text)); }
.pz-sugg .pill { min-height: 44px; padding: 0 18px; flex: none; }
body.pz-sugg-on .pz-hud { display: none; }
.pz-sugg-lab span { display: inline-block; transform: translate(-50%, -50%); padding: 1px 7px; border-radius: 999px; border: 1.5px dashed var(--c); background: rgba(255, 255, 255, .9);
  color: var(--c); font: 700 12px var(--font-lat); white-space: nowrap; }
.pz-sugg-line { animation: pz-dash 1.2s linear infinite; }
@keyframes pz-dash { to { stroke-dashoffset: -24; } }
/* Apple Pencil 偵測提示 */
.pz-offer { top: calc(14px + var(--safe-t)); display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; border-radius: 999px; color: var(--text); font: 500 14px var(--font); white-space: nowrap; z-index: 1250; }
.pz-offer .pill { min-height: 40px; }
.pz-offer-ic .ic { width: 18px; height: 18px; color: var(--link); }
/* 水深選擇器 */
.pz-dp { position: fixed; inset: 0; z-index: 2100; display: flex; align-items: center; justify-content: center; padding: 20px calc(16px + var(--safe-r)) calc(20px + var(--safe-b)) calc(16px + var(--safe-l));
  background: rgba(0, 6, 18, .32); font-family: var(--font); }
@media (min-width: 1024px) { :root:not(.embed) .pz-dp { padding-left: calc(var(--sb-w, 0px) + 16px); } }   /* 桌面與 iPad 橫拿：置中在地圖區，不壓到側欄 */
.pz-dp.hidden { display: none; }
.pz-dp-card { width: min(440px, 100%); padding: 16px 18px 18px; border-radius: 28px; color: var(--text); outline: none; animation: pz-in .22s cubic-bezier(.2, .8, .2, 1); }
@keyframes pz-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.pz-dp-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pz-dp-head h3 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: .02em; }
.pz-dp-x { width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--soft); color: var(--muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.pz-dp-x .ic { width: 18px; height: 18px; }
.pz-dp-dial { display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; gap: 8px; margin: 12px 0 10px; }
.pz-dp-step { width: 64px; height: 64px; border: 0; border-radius: 50%; background: var(--soft); color: var(--text); font: 300 34px var(--font-lat); line-height: 1; cursor: pointer; touch-action: manipulation; transition: transform .1s, background .15s; }
.pz-dp-step:hover { background: var(--pill-hover); }
.pz-dp-step:active { transform: scale(.92); }
.pz-dp-num { position: relative; display: flex; align-items: baseline; justify-content: center; gap: 4px; }
.pz-dp-num input { width: 100%; min-width: 0; border: 0; background: transparent; color: var(--text); text-align: center; outline: none; padding: 0;
  font: 700 68px/1.05 var(--font-lat); font-size: 68px !important; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }   /* 蓋過手機版輸入框 16px 的規則 */
.pz-dp-num:focus-within { border-radius: 16px; box-shadow: 0 0 0 2.5px var(--link); }
.pz-dp-num > span { position: absolute; right: 2px; bottom: 10px; font: 600 20px var(--font-lat); color: var(--muted); }
.pz-dp-card.suggested .pz-dp-num input { color: var(--link); }
.pz-dp-ruler { position: relative; height: 58px; overflow: hidden; border-radius: 16px; background: var(--soft); cursor: ew-resize; touch-action: none; outline: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }
.pz-dp-ruler:focus-visible { box-shadow: inset 0 0 0 2.5px var(--link); }
.pz-dp-ticks { position: absolute; left: 50%; top: 0; bottom: 0; width: 2830px; transition: transform .14s ease-out; pointer-events: none;
  background-image: linear-gradient(90deg, var(--text-2) 0 2px, transparent 2px), linear-gradient(90deg, var(--muted) 0 1px, transparent 1px);
  background-size: 70px 24px, 7px 12px; background-repeat: repeat-x; background-position: -1px 0, 0 0; }
.pz-dp-ruler.drag .pz-dp-ticks { transition: none; }
.pz-dp-ticks span { position: absolute; bottom: 7px; transform: translateX(-50%); font: 600 13px var(--font-lat); color: var(--text-2); font-variant-numeric: tabular-nums; }
.pz-dp-needle { position: absolute; left: 50%; top: 0; bottom: 28px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--blue); box-shadow: 0 0 0 1px rgba(255, 255, 255, .35); }
.pz-dp-sug { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 12px 2px 10px; font-size: 13px; line-height: 1.45; color: var(--text-2); }
.pz-dp-tag { padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.pz-dp-tag.hand { background: rgba(47, 179, 107, .18); color: var(--green-text); }
.pz-dp-tag.gmrt { background: rgba(232, 161, 58, .2); color: color-mix(in srgb, var(--orange) 62%, var(--text)); }
.pz-dp-use { margin-left: auto; min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--soft); color: var(--link); font: 700 13px var(--font); cursor: pointer; }
.pz-dp-chips { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.pz-dp-chips button { min-height: 44px; border: 0; border-radius: 14px; background: var(--soft); color: var(--text); font: 600 16px var(--font-lat); font-variant-numeric: tabular-nums; cursor: pointer; touch-action: manipulation; }
.pz-dp-chips button:hover { background: var(--pill-hover); }
.pz-dp-chips button.on { background: var(--blue-fill); color: var(--on-blue); }
.pz-dp-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.pz-dp-acts .pill { min-height: 50px; font-size: 16px; }
/* 手機版：工具列移到上方（底部是抽屜），可左右捲；選擇器改成底部表單 */
@media (max-width: 767px), (max-width: 900px) and (orientation: portrait), (max-width: 900px) and (max-height: 499px) {
  body.pz-on #topSearch, body.pz-on #topSuggest { visibility: hidden; }
  .pz-bar { left: 50%; bottom: auto; top: calc(10px + var(--safe-t)); overflow-x: auto; scrollbar-width: none; justify-content: flex-start; }
  .pz-bar::-webkit-scrollbar { display: none; }
  .pz-hud, .pz-sugg { left: 50%; bottom: auto; top: calc(70px + var(--safe-t)); }
  .pz-hud { white-space: normal; flex-wrap: wrap; row-gap: 2px; border-radius: 18px; }
  .pz-hud-site { border-left: 0; padding-left: 0; }
  .pz-kinds { grid-template-columns: 1fr; max-height: calc(100dvh - 120px); overflow-y: auto; }
  .pz-kg { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 6px; }
  .pz-kg h4 { grid-column: 1 / -1; }
  .pz-dp { align-items: flex-end; padding-bottom: calc(10px + var(--safe-b)); }
  .pz-dp-chips { grid-template-columns: repeat(4, 1fr); }
  .pz-offer { left: 50%; white-space: normal; border-radius: 22px; width: max-content; max-width: calc(100vw - 24px); }
}
@media (max-width: 520px) { .pz-kind { max-width: 132px; } .pz-3d span { display: none; } }
@media (prefers-reduced-motion: reduce) { .pz-sugg-line { animation: none; } .pz-dp-card { animation: none; } .pz-dp-ticks { transition: none; } }
@media (prefers-reduced-transparency: reduce) { .pz-hud { background: rgb(var(--glass-rgb)); } }

/* ---------- 手機版精修 ----------
   只作用在手機與直拿平板（< 1024），桌面版不受影響：
   橫向捲動的篩選列加淡出邊、觸控區補到 44 px、表單欄位對齊、長段中文避免單字落行 */
@media (max-width: 1023px) {
  /* 中文段落：避免最後一行只剩一兩個字 */
  #panel, .sheet, #guide, #v3 { text-wrap: pretty; }
  /* 功能速查：搜尋用的關鍵字（hidden）不顯示；說明文字可換行，不超出列寬 */
  .feat-find .row > span[hidden] { display: none; }
  .feat-find .row > span:not([hidden]) { flex: 1 1 auto; min-width: 0; }
  /* 表單：日期時間欄給兩倍寬，不再被截斷；標題換行時輸入框仍對齊底線 */
  .bio-row { align-items: end; }
  .bio-row .field input, .bio-row .field select { min-width: 0; }
  .bio-row > .field:has(input[type=datetime-local]) { flex: 1 1 58%; min-width: 0; }
  .bio-row input[type=datetime-local] { font-size: 14px; padding-left: 10px; padding-right: 8px; }
  /* 3D 潛水簡報的按鈕：兩欄等寬，不留單獨一顆「列印」 */
  .v3-brief .actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .v3-brief .actions .pill { min-height: 44px; padding: 8px 10px; }
  /* 淺色模式的橘字（入水規定提醒、座標可信度標籤）：原本橘色在淡藍底對比不到 3，改深橘 */
  :root[data-theme="light"] :is(.acc-now, .prec-desc, .prec-sketch, .prec-poi, .acc-tag.permit, .lr-rule b, .lr-site b, .lr-fee b, .lr-jur b, .lr-coach b) { color: #9A5300; }
  /* 選中的潛點列是藍底：列上的小標籤改白字半透明底，不再橘字壓藍底 */
  #panel .list li.active :is(.acc-tag, .prec) { background: rgba(255, 255, 255, .22); color: #fff; }
  #panel input[type=checkbox]:not(.switch), .sheet input[type=checkbox]:not(.switch) { accent-color: var(--blue-fill); }
  /* 潛水計劃與日誌的按鈕：等寬格線，不再長短不一 */
  #planForm .actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  #planForm .actions .pill { min-height: 44px; padding: 8px 10px; }
  #logForm > .actions, #logForm .actions:last-of-type { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  #logForm .actions .pill { min-height: 44px; padding: 8px 6px; white-space: nowrap; }
  .log-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .log-tools .pill { min-height: 44px; }
  /* 海況「詳細數據」：和其他摺疊區一樣用 › 箭頭，不用瀏覽器預設三角形 */
  .fc-more > summary { list-style: none; display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; }
  .fc-more > summary::-webkit-details-marker { display: none; }
  .fc-more > summary::after { content: '›'; margin-left: auto; color: var(--muted); font-size: 20px; font-weight: 400; transition: transform .2s; }
  .fc-more[open] > summary::after { transform: rotate(90deg); }
  /* 大頭貼：「選擇照片」排成兩行放進圓裡 */
  .avatar-pick span { font-size: 11px; max-width: 2.3em; }
}
@media (max-width: 1023px) and (prefers-color-scheme: light) {
  :root[data-theme="auto"] :is(.acc-now, .prec-desc, .prec-sketch, .prec-poi, .acc-tag.permit, .lr-rule b, .lr-site b, .lr-fee b, .lr-jur b, .lr-coach b) { color: #9A5300; }
}
@media (max-width: 1023px) {
  /* 卡片右上的小圓鈕：外觀不變，觸控範圍補到 44 px 高 */
  .card-tools .icon, .brand .mini-btn, .brand .icon { position: relative; }
  .card-tools .icon::after, .brand .mini-btn::after, .brand .icon::after { content: ''; position: absolute; inset: -7px -3px; }
}
@media (max-width: 767px), (max-width: 900px) and (orientation: portrait), (max-width: 900px) and (max-height: 499px) {
  /* 潛點篩選與生物標籤：一排橫向捲動，邊緣淡出提示還有更多（原本最後一顆被切掉、滑不到） */
  #tab-sites .row-search, .sp-tagbar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: -14px; margin-right: -14px; padding: 0 14px 2px; scroll-padding-inline: 14px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 32px), transparent); }
  #tab-sites .row-search::-webkit-scrollbar, .sp-tagbar::-webkit-scrollbar { display: none; }
  #tab-sites .row-search .pill { flex: none; min-height: 40px; }
  /* 入水規定：窄螢幕把預約鈕放到說明下方、整排寬，說明文字不再擠成一條窄欄 */
  .apply .pill { flex: 1 1 100%; min-height: 44px; }
  .apply-sub { padding: 6px 0; margin: -4px 0 -6px; text-align: center; }
}

/* ---------- 平板直拿（744–900 px 直向：iPad mini 744、iPad 768／810、iPad Air 820、iPad Pro 11" 834）----------
   抽屜照樣貼齊左右（地圖範圍與置中計算不變），但內容收進一條置中的閱讀欄（最寬 680 px，像 iPadOS 設定的可讀寬度）：
   卡片、清單、標題列與浮動功能列、上方搜尋列都對齊這條欄，不再一行橫跨整個螢幕；欄內字級放大一級。
   手機（< 744）、橫拿與桌面版不受影響 */
@media (min-width: 744px) and (max-width: 900px) and (orientation: portrait) {
  :root { --tp-w: min(680px, calc(100vw - 48px)); --tp-x: calc((100vw - var(--tp-w)) / 2); }
  #panel .scroll { padding-left: var(--tp-x); padding-right: var(--tp-x); }
  #panel .brand { padding: 8px var(--tp-x) 10px !important; }
  #panel > .seg { margin-left: var(--tp-x); margin-right: var(--tp-x); }
  #topSearch, #topSuggest { left: var(--tp-x); right: var(--tp-x); }
  #topSearch { top: calc(10px + var(--safe-t)); height: 48px; font-size: 16px; }
  #topSuggest { top: calc(66px + var(--safe-t)); }
  .leaflet-top { top: calc(64px + var(--safe-t)); }
  html.tabs-float .seg[role="tablist"] { left: calc(var(--tp-x) + 12px); right: calc(var(--tp-x) + 12px); }
  html.tabs-float.tabs-mini .seg[role="tablist"] { left: calc(50% - 132px); right: calc(50% - 132px); }
  .fab { width: 44px; height: 44px; font-size: 18px; }
  /* 欄內字級（只放大一級，維持手機版的層次；設定 → 外觀的「字級」大、特大照樣疊上去） */
  #panel .seg button, html.tabs-float .seg[role="tablist"] button { font-size: 14px; }
  #panel .list li { font-size: 16.5px; padding: 12px 14px; }
  #panel .row { font-size: 16.5px; min-height: 50px; }
  #panel .row input { font-size: 16.5px; }
  #panel .row small, #panel .small, #panel .list li .bio-ym { font-size: 13px; }
  #panel .hint { font-size: 14.5px; }
  #panel .group-head { font-size: 13px; margin-left: 8px; }
  #panel .t-h { font-size: 14px; }
  #panel .field { font-size: 14px; }
  #panel .pill { font-size: 15px; }
  #scName { font-size: 29px; }
  #scName .sc-sub { font-size: 16.5px; }
  .tile { min-height: 76px; font-size: 14px; }
  .tile .ti { font-size: 24px; }
  /* 表單（潛水計劃、日誌…）維持原本置中的寬度，字級跟著放大一級 */
  .sheet .field { font-size: 14px; }
  .sheet .hint { font-size: 14px; }
  .sheet .small { font-size: 13px; }
}

/* 搜尋結果裡的潛水店 */
#siteList .shop-hit > span:first-child { display: flex; align-items: center; gap: 8px; min-width: 0; }
#siteList .shop-hit > span:first-child .ic { flex: none; width: 18px; height: 18px; color: var(--link); }
#siteList .shop-hit .km { max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- 通知中心鈴鐺（notify-hook.js；畫面樣式在 notify.js）：手機在面板標題列，桌面版在統一工具列 ---------- */
.nb-btn { position: relative; }
.mini-btn.nb-btn { display: inline-grid; place-items: center; padding: 0; width: 34px; }
.mini-btn.nb-btn .ic { width: 16px; height: 16px; }
#panel .mini-btn.nb-btn::after { content: ''; position: absolute; inset: -8px -5px; }
.nb-badge { position: absolute; top: -6px; right: -7px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #D93025; color: #fff;
  font: 700 11px/18px var(--font-lat), var(--font); text-align: center; font-variant-numeric: tabular-nums; letter-spacing: 0; box-shadow: 0 0 0 2px var(--glass); pointer-events: none; }
.nb-badge[hidden] { display: none; }
#notifyFab, .embed .nb-btn { display: none !important; }
@media (min-width: 1024px) {
  :root:not(.embed) #notifyFab { display: grid !important; place-items: center; }
  :root:not(.embed) #panel #notifyBtn { display: none; }
  :root:not(.embed) #notifyFab .nb-badge { top: -3px; right: -5px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; line-height: 16px; }
}
@media (min-width: 1024px) and (pointer: coarse) { :root:not(.embed) #notifyFab::after { content: ''; position: absolute; inset: -2px; } }

/* ---------- 觸控目標 44 px（v187 無障礙；tools/a11y-test.mjs 用點擊測試量）：手指操作的裝置上外觀不變，用 ::after 把可點範圍補到至少 44×44；
   輸入框、選單、summary、勾選列直接加高 ---------- */
.rv-pick-l { position: absolute; top: 2px; right: 2px; width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; }
.rv-pick-l .rv-pick { position: static; margin: 0; }
@media (pointer: coarse) {
  :is(.pill, .chip, .icon, .mini-btn, .seg:not([role="tablist"]) > button, button.link, .login-privacy, .em-quick a):not(.login-x) { position: relative; }
  :is(.pill, .chip, .icon, .mini-btn, .seg:not([role="tablist"]) > button, button.link, .login-privacy, .em-quick a, .login-x)::after {
    content: ''; position: absolute; top: min(0px, calc(50% - 22px)); bottom: min(0px, calc(50% - 22px)); left: min(0px, calc(50% - 22px)); right: min(0px, calc(50% - 22px)); }
  /* 卡片右上的四顆小圓鈕：拉開間距會把潛點名稱擠成兩行，維持 6 px 間距，觸控範圍 44 高 × 36 寬（不互相蓋到；仍高於 WCAG 2.5.8 的 24 px） */
  .card-tools .icon::after { top: -7px; bottom: -7px; left: -3px; right: -3px; }
  .icon[data-mv] + .icon[data-mv] { margin-left: 4px; }   /* 設定裡排序的 ↑↓：間距補到 44，補出來的範圍才不會蓋到隔壁 */
  .apply-sub { display: flex; align-items: center; justify-content: flex-end; min-height: 44px; }   /* 「查詢或取消預約」緊貼在預約鈕下方，直接加高不往上補 */
  .sp-tagbar { padding-block: 8px; margin-block: -8px 0; }   /* 生物標籤列會橫向捲動：上下留出空間，標籤補出來的觸控範圍才不會被裁掉 */
  .sw-hit { display: inline-flex; align-items: center; min-height: 44px; margin-block: -7px; cursor: pointer; }   /* 同一列還有其他按鈕、整列不能當 label 時：只把開關包成 44 px 高 */
  /* 滑桿：整個 input 加高到 44 px，軌道改用置中的背景圖畫（不用透明邊框），圓鈕在 Chrome／Safari 都會垂直置中 */
  input[type=range] { height: 44px; margin-block: -20px; background: linear-gradient(var(--band), var(--band)) center / 100% 4px no-repeat; }
  .glass-slider input[type=range] { height: 44px; border-radius: 0; margin-block: -19px; background: linear-gradient(90deg, rgba(127, 127, 127, .14), var(--blue-fill)) center / 100% 6px no-repeat; box-shadow: none; }
  /* 開關、滑桿不加透明邊框（iOS Safari 會把底色畫進邊框，開關變胖、圓鈕歪掉）：開關都包在 ≥ 44 px 的整列 label 裡，點整列就能切換 */
  .leaflet-touch .leaflet-bar a { width: 44px !important; height: 44px !important; line-height: 44px !important; }
  /* 面板標題列的小圓鈕（鈴鐺、EN、深淺色）：上方是面板邊緣，補的範圍往下多一點；潛點篩選列會橫向捲動（往上下補會被裁掉），直接加高 */
  #panel .brand .mini-btn::after, #panel .mini-btn.nb-btn::after { top: -5px; bottom: -8px; left: -4px; right: -4px; }
  #tab-sites .row-search .pill, .seg:not([role="tablist"]) > button, html.tabs-mini .seg[role="tablist"] button { min-height: 44px; }
  details > summary, .check-row, .v3-chk { min-height: 44px; box-sizing: border-box; }
  .search input, .field input, .field select, select { min-height: 44px; }
}
/* 鍵盤焦點（v187 無障礙）：輸入框、選單、開關原本把 outline 拿掉，只靠 1 px 邊框變色（有些地方還被蓋掉），鍵盤使用者看不出焦點在哪；統一補 2 px 外框 */
:is(input, select, textarea):focus-visible { outline: 2px solid var(--link); outline-offset: 1px; }
input.switch:focus-visible, input[type=checkbox]:focus-visible, input[type=radio]:focus-visible, input[type=range]:focus-visible { outline: 2.5px solid var(--link); outline-offset: 2px; }
/* 地圖潛點用鍵盤（Tab）選到時：Leaflet 的標記本身是 0×0，外框要畫在看得到的圓點上 */
.leaflet-marker-icon:focus { outline: none; }
.leaflet-marker-icon:focus-visible > :first-child { outline: 2.5px solid var(--link); outline-offset: 3px; }

/* ---------- 潛點卡片（v190）：標題下一行狀態、小標籤、入水規定一個區塊、潛點介紹、ⓘ 資料來源分組 ---------- */
:root { --warn-text: var(--orange); }
:root[data-theme="light"] { --warn-text: #9A5300; }
@media (prefers-color-scheme: light) { :root[data-theme="auto"] { --warn-text: #9A5300; } }
.mode-badge { flex-wrap: wrap; row-gap: 6px; }
.sc-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: 4px; }
.sc-chip { position: relative; border: 0; font: 600 12px/1 var(--font); letter-spacing: .02em; color: var(--text-2); background: var(--soft); box-shadow: inset 0 0 0 1px var(--line);
  padding: 5px 9px; border-radius: 999px; cursor: pointer; }
.sc-chip::after { content: ''; position: absolute; inset: -10px -2px; }   /* 觸控範圍 ≥ 44 px */
.sc-chip.done { color: var(--green-text); }
.sc-chip:hover { background: var(--pill-hover); }
.sc-status { margin: 8px 0 0; font-size: 14px; font-weight: 600; line-height: 1.45; display: flex; align-items: baseline; gap: 7px; color: var(--text-2); }
.sc-status::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--green); transform: translateY(-1px); }
.sc-status.st-red { color: var(--red-text); } .sc-status.st-red::before { background: var(--red); }
.sc-status.st-orange { color: var(--warn-text); } .sc-status.st-orange::before { background: var(--orange); }
.sc-status.hidden { display: none; }
.port-line { margin: 10px 0 0; }

/* 入水規定：一個區塊，一條一行（最多兩行，點開看全文），嚴重的在上面 */
.safety { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }
.safety.hidden { display: none; }
.safety-h { margin: 0 0 8px; display: flex; align-items: baseline; gap: 8px; font-size: 15px; font-weight: 800; letter-spacing: .04em; }
.safety-h small { font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.local-rules { border-radius: 16px; background: var(--soft); overflow: hidden; }
.local-rules.hidden { display: none; }
.lr-item { position: relative; margin: 0; padding: 10px 12px; font-size: 14px; line-height: 1.5; color: var(--text); }
.lr-item + .lr-item { box-shadow: inset 0 1px 0 var(--line); }
.lr-item b { font-weight: 700; margin-right: 6px; color: var(--warn-text); }
.lr-item.sev2 b { color: var(--muted); }
.lr-item.sev0 { background: rgba(255,77,77,.10); }
.lr-item.sev0 b, .lr-item.sev0 .acc-now { color: var(--red-text); }
.lr-item .acc-now { display: inline; margin-right: 6px; color: var(--warn-text); }
.lr-item .lr-t { color: var(--text); }
.lr-item.sev0 .lr-t { display: block; margin-top: 2px; }
details.lr-item { padding-right: 32px; }
details.lr-item > summary { list-style: none; cursor: pointer; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
details.lr-item > summary::-webkit-details-marker { display: none; }
details.lr-item[open] > summary { display: block; -webkit-line-clamp: unset; }
details.lr-item::after { content: '›'; position: absolute; right: 13px; top: 9px; color: var(--muted); font-size: 18px; transition: transform .2s; pointer-events: none; }
details.lr-item[open]::after { transform: rotate(90deg); }
/* v207 規則條列：特殊潛水分成證照、裝備、限制（限制是小標籤）；長的規定展開後一段一行 */
.lr-body { margin: 8px 0 2px; }
.lr-list { padding-left: 18px; } .lr-list li { margin: 3px 0; }
.lr-spec .sp-name { font-weight: 700; }
.lr-spec[open] .sp-first { display: none; }   /* 展開後第一項證照就在下面的條列裡，不重複 */
.sp-g + .sp-g { margin-top: 8px; }
.sp-g h5 { margin: 0 0 3px; font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--muted); }
.sp-g ul { margin: 0; padding-left: 18px; } .sp-g li { margin: 2px 0; }
.sp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-chip { display: inline-block; padding: 3px 9px; border-radius: 999px; background: var(--band); color: var(--text); font-size: 13px; font-weight: 600; line-height: 1.4; }
.sp-note { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
details.lr-item.fits { padding-right: 12px; } details.lr-item.fits::after { display: none; } details.lr-item.fits > summary { cursor: default; }
.lr-ok { display: block; margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--green-text); }
.closed-line { margin: 0 0 8px; padding: 10px 12px; border-radius: 16px; background: rgba(255,77,77,.12); box-shadow: none; }

/* 潛點介紹：深度・能見度・季節三格，下面一段文字 */
.about-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 8px; margin: 6px 0 0; }
.about-facts div { padding: 10px 12px; border-radius: 14px; background: var(--soft); }
.about-facts dt { font-size: 12px; color: var(--muted); }
.about-facts dd { margin: 2px 0 0; font-size: 15px; font-weight: 600; color: var(--text); }
.about-text { margin: 10px 0 0; font-size: 14px; line-height: 1.6; color: var(--text-2); }
.about-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
.about-tags i { font-style: normal; font-size: 12px; padding: 3px 9px; border-radius: 999px; background: var(--soft); color: var(--text-2); }
details.sec.about { padding-bottom: 4px; }

/* 現場回報：跟其他區塊一樣的分隔線，不再是一個框 */
.rep-line { margin: 12px 0 0; padding: 12px 0 4px; border-radius: 0; background: none; border-top: 1px solid var(--line); }
.rep-line .rep-head b { font-size: 15px; font-weight: 800; letter-spacing: .04em; }

/* ⓘ 資料來源：依主題分組，每則標題、發布者・日期、連結 */
.sources { margin: 12px 0 4px; padding: 6px 14px 12px; border-radius: 16px; background: var(--soft); }
.src-head { display: flex; align-items: center; justify-content: space-between; }
.src-title { margin: 0; font-size: 15px; font-weight: 800; letter-spacing: .04em; }
.src-x { position: relative; width: 36px; height: 36px; margin-right: -8px; }
.src-x::after { content: ''; position: absolute; inset: -4px; }
.src-group { margin-top: 10px; border-radius: 10px; transition: background .6s; }
.src-group.flash { background: var(--pill-hover); }
.src-group h4 { margin: 0 0 2px; font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--muted); }
.sources .src-list li { padding: 7px 0; }
.sources .src-list a, .sources .src-list b { display: block; font-size: 14px; font-weight: 600; color: var(--link); }
.sources .src-list b { color: var(--text); }
.sources .src-list small { display: block; font-size: 12px; color: var(--muted); }
.sources .src-note { display: block; margin-top: 2px; font-size: 13px; color: var(--text-2); }
.sources .src-status b { font-weight: 500; }
.sources .src-status small { color: var(--warn-text); font-weight: 600; }
.src-foot { margin: 6px 0 0; font-size: 12px; color: var(--muted); }
#editSec .lin-hint { margin-top: 4px; }
@media (max-width: 767px), (max-width: 900px) and (orientation: portrait), (max-width: 900px) and (max-height: 499px) {
  .apply-sub { flex-basis: 100%; justify-content: center; text-align: center; }
}

/* ---------- v193 效能：長清單分批顯示（「顯示更多」列）、日誌期間篩選（Liquid Glass 合併時保留這段） ---------- */
.more-row { display: flex; justify-content: center; padding: 10px 0; list-style: none; cursor: default; }
.list li.more-row, .list li.more-row:hover { background: none; border: 0; }
tr.more-row { display: table-row; }
tr.more-row td { text-align: center; padding: 10px 0; }
.more-btn { min-height: 36px; }
.log-period { width: 100%; margin: 8px 0 0; background: var(--band); color: var(--text); border: 0; border-radius: var(--radius-sm); padding: 9px 10px; font: 14px var(--font); }
.rv-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.rv-filter select, .rv-filter input { flex: 1 1 140px; min-width: 0; background: var(--band); color: var(--text); border: 0; border-radius: var(--radius-sm); padding: 9px 10px; min-height: 44px; font: 14px var(--font); }
/* ==========================================================================
   Liquid Glass 27（v193）：iOS 27／macOS 27 毛玻璃全面改版
   放在檔案最後，覆蓋前面各版的玻璃設定；只改外觀，不改版面結構與選擇器。
   1. 材質分三層：chrome（浮動控制項：搜尋、分頁列、地圖按鈕）＜ sheet（底部抽屜、側欄）＜ thick（選單、彈出視窗、表單）；
      卡片與清單是玻璃上的「填色層」（不另外模糊，捲動不掉格）。透明度都從玻璃滑桿 --glass-a 推算，並設下限確保文字對比 ≥ 4.5。
   2. 玻璃邊緣：外側 0.5 px 髮絲線（亮底上分得出邊）＋內側 0.5 px 亮邊＋上緣高光＋下緣微弱折射光＋由上而下的光澤漸層。
   3. 圓角同心：外框圓角 − 內距 ＝ 內層圓角（抽屜 34 → 卡片 22 → 卡片內 14；分頁列膠囊 → 選取膠囊）。
   4. 動態：抽屜吸附、按下縮放、選單出現用輕微彈簧（linear()；不支援時退回 cubic-bezier）；減少動態時全部關掉。
   5. 降低透明度／增加對比：改實色、不模糊、邊線加深。
   ========================================================================== */
:root {
  --lg-rgb: 12, 26, 50;
  --lg-chrome: max(.66, calc(var(--glass-a) - .08));
  --lg-sheet: clamp(.82, calc(var(--glass-a) + .04), .97);
  --lg-thick: clamp(.9, calc(var(--glass-a) + .16), .98);
  --lg-blur: max(24px, var(--glass-blur));
  --lg-sat: 185%;
  --lg-fill: rgba(255, 255, 255, .05);
  --lg-fill-2: rgba(255, 255, 255, .08);
  --lg-fill-hi: rgba(255, 255, 255, .16);
  --lg-sep: rgba(255, 255, 255, .1);
  --lg-rim: rgba(255, 255, 255, .16);
  --lg-spec: rgba(255, 255, 255, .26);
  --lg-floor: rgba(255, 255, 255, .06);
  --lg-hair: rgba(0, 0, 0, .38);
  --lg-sheen: linear-gradient(180deg, rgba(255, 255, 255, .085) 0%, rgba(255, 255, 255, .025) 32%, rgba(255, 255, 255, 0) 58%);
  --lg-drop: 0 1px 2px rgba(0, 0, 0, .22), 0 10px 30px -6px rgba(0, 0, 0, .42), 0 26px 60px -18px rgba(0, 0, 0, .45);
  --lg-drop-sm: 0 1px 2px rgba(0, 0, 0, .2), 0 6px 18px -4px rgba(0, 0, 0, .38);
  --lg-ring: 0 0 0 .5px var(--lg-hair), inset 0 0 0 .5px var(--lg-rim), inset 0 1px 0 var(--lg-spec), inset 0 -1px 0 var(--lg-floor);
  --lg-sel: rgba(255, 255, 255, .15);
  --lg-tint: #6FC1FF; --link: #8CC2FF; --red-text: #FFA3A3; --lg-ph: #C9D6E8;
  --lg-blue: linear-gradient(180deg, #3D9BFF, #1F6FDB 62%, #1A63C8);
  --muted: #CAD6E6;
  --spring: linear(0, .006, .025 2.1%, .101 4.4%, .231 7.1%, .576 13.4%, .713 16.5%, .823 19.8%, .907 23.4%, .964 27.3%, 1.001 31.6%, 1.019 36.4%, 1.022 41.8%, 1.014 48.9%, 1.002 60.1%, .998 73%, 1);
  --spring-fast: linear(0, .041 2.2%, .156 4.7%, .55 12.3%, .78 18.4%, .906 24.6%, .975 31.4%, 1.008 39.6%, 1.015 48.4%, 1.006 62%, 1);
  --ease-out: cubic-bezier(.2, .9, .25, 1);
  /* iOS 字級（pt → px）：大標 34／標題一 28／標題二 22／標題三 20／標題列 17／內文 17／說明 16／副標 15／註腳 13／圖說 12、11 */
  --t-title1: 800 28px/1.2 var(--font); --t-title2: 800 22px/1.25 var(--font); --t-title3: 700 20px/1.25 var(--font);
  --t-headline: 700 17px/1.3 var(--font); --t-subhead: 400 15px/1.4 var(--font); --t-footnote: 400 13px/1.4 var(--font);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro TC", "PingFang TC", "Hiragino Sans CNS", "Microsoft JhengHei", "Noto Sans TC", "Helvetica Neue", Arial, sans-serif;
}
:root[data-theme="light"] {
  --lg-rgb: 248, 251, 255;
  --lg-chrome: max(.63, calc(var(--glass-a) - .06)); --lg-sheet: clamp(.75, var(--glass-a), .97); --lg-thick: clamp(.86, calc(var(--glass-a) + .12), .99);
  --lg-fill: rgba(255, 255, 255, .66); --lg-fill-2: rgba(21, 50, 95, .06); --lg-fill-hi: rgba(21, 50, 95, .1); --lg-sep: rgba(21, 50, 95, .1);
  --lg-rim: rgba(255, 255, 255, .75); --lg-spec: rgba(255, 255, 255, .95); --lg-floor: rgba(255, 255, 255, .4); --lg-hair: rgba(16, 42, 90, .14);
  --lg-sheen: linear-gradient(180deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .18) 30%, rgba(255, 255, 255, 0) 56%);
  --lg-drop: 0 1px 2px rgba(16, 42, 90, .08), 0 10px 28px -8px rgba(16, 42, 90, .2), 0 24px 56px -20px rgba(16, 42, 90, .26);
  --lg-drop-sm: 0 1px 2px rgba(16, 42, 90, .08), 0 6px 16px -6px rgba(16, 42, 90, .22);
  --lg-sel: rgba(255, 255, 255, .92); --lg-tint: #0844A0; --muted: #313D4B; --link: #0B458C; --red-text: #961414; --lg-ph: #263241;
}
@media (prefers-color-scheme: light) {
  :root[data-theme="auto"] {
    --lg-rgb: 248, 251, 255;
    --lg-chrome: max(.63, calc(var(--glass-a) - .06)); --lg-sheet: clamp(.75, var(--glass-a), .97); --lg-thick: clamp(.86, calc(var(--glass-a) + .12), .99);
    --lg-fill: rgba(255, 255, 255, .66); --lg-fill-2: rgba(21, 50, 95, .06); --lg-fill-hi: rgba(21, 50, 95, .1); --lg-sep: rgba(21, 50, 95, .1);
    --lg-rim: rgba(255, 255, 255, .75); --lg-spec: rgba(255, 255, 255, .95); --lg-floor: rgba(255, 255, 255, .4); --lg-hair: rgba(16, 42, 90, .14);
    --lg-sheen: linear-gradient(180deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .18) 30%, rgba(255, 255, 255, 0) 56%);
    --lg-drop: 0 1px 2px rgba(16, 42, 90, .08), 0 10px 28px -8px rgba(16, 42, 90, .2), 0 24px 56px -20px rgba(16, 42, 90, .26);
    --lg-drop-sm: 0 1px 2px rgba(16, 42, 90, .08), 0 6px 16px -6px rgba(16, 42, 90, .22);
    --lg-sel: rgba(255, 255, 255, .92); --lg-tint: #0844A0; --muted: #313D4B; --link: #0B458C; --red-text: #961414; --lg-ph: #263241;
  }
}
/* 舊變數改指到新材質（沿用 var(--glass)、var(--lg-ring) 的元件一起換） */
:root, :root[data-theme] { --glass: rgba(var(--lg-rgb), var(--lg-chrome)); --glass-rgb: var(--lg-rgb); --sheet: rgba(var(--lg-rgb), var(--lg-sheet)); --glass-shadow: var(--lg-drop); }
/* 玻璃裡面：卡片、分組、輸入框改成半透明的填色層（不另外模糊） */
#panel, .sheet-body, .glass, #guide {
  --surface: var(--lg-fill); --band: var(--lg-fill-2); --soft: var(--lg-fill-2); --line: var(--lg-sep); --pill-hover: var(--lg-fill-hi); --input: var(--lg-fill-2);
}

/* ---------- 材質：浮動控制項（chrome） ---------- */
.glass, .leaflet-bar, .leaflet-control-layers, #fabs {
  background-color: rgba(var(--lg-rgb), var(--lg-chrome)) !important; background-image: var(--lg-sheen) !important;
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat)); backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  box-shadow: var(--lg-ring), var(--lg-drop-sm) !important;
}
#fabs .fab.glass { background-image: none !important; }
.v3-top, .v3-bottom, .v3-legend, .v3-info { background-color: rgba(16, 20, 26, max(.72, var(--glass-a))) !important; --lg-rim: rgba(255, 255, 255, .14); --lg-spec: rgba(255, 255, 255, .22); --lg-hair: rgba(0, 0, 0, .4); }
/* ---------- 材質：抽屜與側欄（sheet） ---------- */
#panel.glass { background-color: rgba(var(--lg-rgb), var(--lg-sheet)) !important; box-shadow: var(--lg-ring), var(--lg-drop) !important; }
/* ---------- 材質：選單、建議、表單、吐司（thick，前景） ---------- */
.lp-menu.glass, #topSuggest.glass, .start-ask.glass, #toast.glass, .sheet .sheet-body.glass {
  background-color: rgba(var(--lg-rgb), var(--lg-thick)) !important; box-shadow: var(--lg-ring), var(--lg-drop) !important;
}

.tour-tip.glass, .leaflet-control-layers-expanded { background-color: rgba(var(--lg-rgb), var(--lg-thick)) !important; }
.tour-tip.glass { box-shadow: var(--lg-ring), var(--lg-drop) !important; border-radius: 28px !important; }
.tour-caret { background: rgba(var(--lg-rgb), var(--lg-thick)); }
/* 表單容器（tabindex=-1，只為了讓螢幕閱讀器從標題開始讀）不畫焦點框；裡面的按鈕照樣有 */
.sheet-body[tabindex="-1"]:focus { outline: none; }
.login-card { border-radius: 32px; box-shadow: var(--lg-ring), var(--lg-drop) !important; }

/* ---------- 卡片、分組清單、磚：玻璃上的填色層（同心圓角） ---------- */
.card, details.region, .group { box-shadow: inset 0 0 0 .5px var(--lg-sep), inset 0 1px 0 var(--lg-floor); }
#panel .card { border-radius: 22px; }
.group, details.region { border-radius: 18px; }
.tile { border-radius: 16px; box-shadow: inset 0 0 0 .5px var(--lg-sep), inset 0 1px 0 var(--lg-floor); }
.tile.primary { background: var(--lg-blue); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42), inset 0 0 0 .5px rgba(255, 255, 255, .22), 0 6px 16px -6px rgba(31, 111, 219, .7) !important; }

/* ---------- 按鈕：玻璃膠囊／填色 ---------- */
.pill { box-shadow: inset 0 0 0 .5px var(--lg-sep), inset 0 1px 0 var(--lg-floor); }
.pill.primary, .pill.on { background: var(--lg-blue); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42), inset 0 0 0 .5px rgba(255, 255, 255, .2), 0 6px 16px -6px rgba(31, 111, 219, .7); }
.chip { box-shadow: inset 0 0 0 .5px var(--lg-sep), inset 0 1px 0 var(--lg-floor); }
.icon, .mini-btn { box-shadow: inset 0 0 0 .5px var(--lg-sep), inset 0 1px 0 var(--lg-floor); }
#fabs .fab.on { background: var(--lg-blue) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 4px 12px -4px rgba(31, 111, 219, .8) !important; }

/* ---------- 分段控制（iOS 27）：凹槽軌道＋浮起的玻璃選取膠囊 ---------- */
.seg:not([role="tablist"]) { background: var(--lg-fill-2); box-shadow: inset 0 0 0 .5px var(--lg-sep), inset 0 1px 2px rgba(0, 0, 0, .1); padding: 3px; }
.seg:not([role="tablist"]) button { color: var(--text-2); }
.seg:not([role="tablist"]) button.active { background: var(--lg-sel); color: var(--text); font-weight: 700;
  box-shadow: inset 0 0 0 .5px var(--lg-rim), inset 0 1px 0 var(--lg-spec), 0 1px 2px rgba(0, 0, 0, .16), 0 3px 8px -2px rgba(0, 0, 0, .2); }

/* ---------- 分頁列：浮動玻璃膠囊，選到的是一顆亮一點的玻璃膠囊，圖示與文字用強調色 ---------- */
.seg[role="tablist"] button { color: var(--text); }
.seg[role="tablist"] button.active, :root[data-theme] .seg[role="tablist"] button.active { background: var(--lg-sel); color: var(--lg-tint);
  box-shadow: inset 0 0 0 .5px var(--lg-rim), inset 0 1px 0 var(--lg-spec), 0 1px 3px rgba(0, 0, 0, .14); }
.seg[role="tablist"] .tab-lb { font-size: 11px; font-weight: 600; letter-spacing: .04em; }
html.tabs-float .seg[role="tablist"] {
  padding: 4px; background-color: rgba(var(--lg-rgb), var(--lg-chrome)) !important; background-image: var(--lg-sheen) !important;
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat)); backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  box-shadow: var(--lg-ring), var(--lg-drop) !important;
}

/* ---------- 開關（52×30，圓鈕是帶高光的白珠）；不動外框與邊框（v187 iPhone 開關變形的教訓） ---------- */
input.switch { background: rgba(120, 128, 140, .34); }
input.switch:checked { background: #30C25F; }
input.switch::after { background: linear-gradient(180deg, #FFFFFF, #F4F6F9); box-shadow: 0 0 0 .5px rgba(0, 0, 0, .05), 0 1px 3px rgba(0, 0, 0, .3); }
input.switch { transition: background .25s var(--ease-out); }
input.switch::after { transition: left .32s var(--spring-fast); }

/* ---------- 滑桿：白色玻璃圓鈕 ---------- */
input[type=range]::-webkit-slider-thumb { background: linear-gradient(180deg, #FFFFFF, #F4F6F9); box-shadow: 0 0 0 .5px rgba(0, 0, 0, .06), 0 1px 5px rgba(0, 0, 0, .35); }

/* ---------- 搜尋欄 ---------- */
#topSearch .ic, #topSearch input::placeholder { color: var(--lg-ph); }
.search input, .field input, .field textarea { background: var(--lg-fill-2); box-shadow: inset 0 0 0 .5px var(--lg-sep); }
.search input:focus, .field input:focus, .field textarea:focus { border-color: transparent; box-shadow: inset 0 0 0 1px var(--lg-tint), 0 0 0 4px rgba(56, 160, 255, .22); }

/* ---------- 清單 ---------- */
#panel .list li.active { background: var(--lg-blue); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 4px 12px -6px rgba(31, 111, 219, .8); }
.group-head { font-weight: 600; font-size: 13px; letter-spacing: .04em; color: var(--muted); }

/* ---------- 字級（iOS 字級表；中文一律正字距） ---------- */
#scName { font-size: 24px; font-weight: 800; line-height: 1.2; letter-spacing: .04em; }
#scName .sc-sub { font: var(--t-subhead); letter-spacing: .02em; }
details.sec > summary { font-size: 16px; letter-spacing: .04em; }

/* ---------- 動態：按下縮放、選單出現、表單升起 ---------- */
.pill, .tile, .chip, .mini-btn, .icon, .fab, .seg button, .row-btn, .lp-menu button { transition: transform .35s var(--spring-fast), background-color .2s, color .2s, box-shadow .2s; }
.pill:active, .tile:active, .chip:active, .mini-btn:active, .fab:active, .seg button:active, .lp-menu button:active { transform: scale(.95); }
.icon:active { transform: scale(.9); }
.lp-menu:not(.hidden), #topSuggest:not(.hidden) { animation: lgPop .38s var(--spring) backwards; transform-origin: 50% 0; }
@keyframes lgPop { from { opacity: 0; translate: 0 -10px; } to { opacity: 1; translate: 0 0; } }
.sheet:not(.hidden) > .sheet-body { animation: lgRise .46s var(--spring) backwards; }
/* 用 margin 而不是 transform：transform 的小數位移會讓按鈕量起來差 0.0001 px（觸控範圍測試） */
@keyframes lgRise { from { opacity: 0; margin-bottom: -36px; } to { opacity: 1; margin-bottom: 0; } }

/* ---------- 手機：浮動的底部抽屜（半開、收起時左右留邊，全開時貼齊） ---------- */
@media (max-width: 767px), (max-width: 900px) and (orientation: portrait), (max-width: 900px) and (max-height: 499px) {
  :root { --sheet-in: 6px; }
  .scroll { padding-left: 12px; padding-right: 12px; }
  #tab-sites .row-search, .sp-tagbar { margin-left: -12px; margin-right: -12px; padding-left: 12px; padding-right: 12px; }
  #panel { left: calc(var(--sheet-in) + var(--safe-l)); right: calc(var(--sheet-in) + var(--safe-r)); padding-left: 0; padding-right: 0; border-radius: 34px 34px 0 0;
    transition: transform .5s var(--ease-out), left .4s var(--ease-out), right .4s var(--ease-out);
    transition: transform .55s var(--spring), left .45s var(--spring), right .45s var(--spring); }
  body.sheet-full #panel { left: 0; right: 0; padding-left: var(--safe-l); padding-right: var(--safe-r); }
  /* 全開＝閱讀模式：材質加厚（像 iOS 的大尺寸表單），長文字不受背後地圖影響 */
  body.sheet-full #panel.glass { background-color: rgba(var(--lg-rgb), var(--lg-thick)) !important; }
  #panel.dragging { transition: left .3s, right .3s; }
  /* 把手不能被 flex 壓扁（內容很多時高度會被擠成 0） */
  #panel > .grabber { flex: none; }
  html.tabs-float .seg[role="tablist"] { left: calc(16px + var(--safe-l)); right: calc(16px + var(--safe-r)); bottom: calc(8px + var(--safe-b)); }
  .sheet { padding: 0 8px calc(8px + var(--safe-b)); }
  .sheet-body { border-radius: 34px; padding-bottom: 18px; max-height: calc(100dvh - var(--safe-t) - 28px - var(--safe-b)); }
}

/* ---------- 地圖上的潛點名稱：小玻璃膠囊（不模糊：一次幾十個，平移時不掉格） ---------- */
.dm-site-label { background: rgba(12, 26, 50, .8); box-shadow: 0 0 0 .5px rgba(0, 0, 0, .35), inset 0 0 0 .5px rgba(255, 255, 255, .16), inset 0 1px 0 rgba(255, 255, 255, .18), 0 2px 6px rgba(0, 0, 0, .3); font-weight: 600; letter-spacing: .02em; }
.wv-tag { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45); }

/* ---------- 桌面版（macOS 27）：浮動的玻璃側欄＋工具列上分組的玻璃膠囊，地圖延伸到側欄與工具列底下 ---------- */
@media (min-width: 1024px) {
  :root:not(.embed) { --ctl: 34px; --tb-bar: 54px; --win-in: 10px;
    --tb-h: calc(var(--tb-bar) + var(--safe-t) + var(--win-in)); --tb-y: calc(var(--safe-t) + var(--win-in) + (var(--tb-bar) - var(--ctl)) / 2);
    --d-ctl: transparent; --d-ctl-h: var(--lg-fill-hi); --d-ctl-ring: transparent; }
  body { --sb-w: calc(var(--sb-full) + var(--win-in)); }
  body.panel-collapsed { --sb-w: 0px; }
  :root:not(.embed) body #panel { left: calc(var(--win-in) + var(--safe-l)); top: calc(var(--win-in) + var(--safe-t)); bottom: var(--win-in); width: calc(var(--sb-full) - var(--win-in)); border-radius: 24px;
    background-color: rgba(var(--lg-rgb), var(--lg-sheet)) !important; background-image: var(--lg-sheen) !important; box-shadow: var(--lg-ring), var(--lg-drop) !important; }
  :root:not(.embed) body #panel.collapsed { transform: translateX(calc(-100% - 40px)); }
  :root:not(.embed) body #panel .brand { height: var(--tb-bar); padding-top: 0; padding-left: calc(14px + var(--safe-l) * 0); }
  :root:not(.embed) #panel > nav.seg[role="tablist"] button { border-radius: 12px; }
  :root:not(.embed) #panel > nav.seg[role="tablist"] button.active { background: var(--lg-fill-hi); color: var(--text); box-shadow: inset 0 0 0 .5px var(--lg-sep); }
  :root:not(.embed) #panel > nav.seg[role="tablist"] .tab-ic { color: var(--lg-tint) !important; }
  /* 工具列底板拿掉：只留上緣一層淡淡的漸層（捲動邊緣效果），控制項各自是玻璃膠囊 */
  :root:not(.embed) body #deskBar { background: linear-gradient(180deg, rgba(0, 8, 20, .24), rgba(0, 8, 20, 0)) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; height: calc(var(--tb-h) + 18px); pointer-events: none; }
  /* #fabs 不能自己加 backdrop-filter：會變成裡面 position: fixed 的側欄開關的定位框（開關跑掉）；玻璃畫在 ::before */
  :root:not(.embed) body #fabs { background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important; }
  :root:not(.embed) body #fabs::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
    background-color: rgba(var(--lg-rgb), var(--lg-chrome)); background-image: var(--lg-sheen);
    -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat)); backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat)); box-shadow: var(--lg-ring), var(--lg-drop-sm); }
  :root:not(.embed) body :is(#topSearch, .leaflet-control-zoom.leaflet-bar, .leaflet-top.leaflet-right .leaflet-control-layers:not(.leaflet-control-layers-expanded)) {
    background-color: rgba(var(--lg-rgb), var(--lg-chrome)) !important; background-image: var(--lg-sheen) !important;
    -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat)) !important; backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat)) !important;
    box-shadow: var(--lg-ring), var(--lg-drop-sm) !important; }
  :root:not(.embed) body #fabs { padding: 3px !important; height: calc(var(--ctl) + 6px); margin-top: -3px; }
  :root:not(.embed) body .leaflet-control-zoom.leaflet-bar { padding: 3px; margin-top: calc(var(--tb-y) - 3px) !important; }
  :root:not(.embed) body .leaflet-top.leaflet-right .leaflet-control-layers:not(.leaflet-control-layers-expanded) .leaflet-control-layers-toggle { width: calc(var(--ctl) + 6px); height: calc(var(--ctl) + 6px); }
  :root:not(.embed) body .leaflet-top.leaflet-right .leaflet-control { margin-top: calc(var(--tb-y) - 3px); }
  :root:not(.embed) body #fabs #panelToggle { width: calc(var(--ctl) + 6px); height: calc(var(--ctl) + 6px); margin-top: -3px; background-color: rgba(var(--lg-rgb), var(--lg-chrome)) !important; background-image: var(--lg-sheen) !important;
    -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat)); backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat)); box-shadow: var(--lg-ring), var(--lg-drop-sm) !important; }
  :root:not(.embed) body #topSearch { height: calc(var(--ctl) + 6px); margin-top: -3px; padding: 0 6px 0 14px; color: var(--muted); }
  :root:not(.embed) body #topSearch:focus-within { box-shadow: var(--lg-ring), 0 0 0 3.5px rgba(56, 160, 255, .5), var(--lg-drop-sm) !important; }
  :root:not(.embed) #topSuggest, :root:not(.embed) .leaflet-control-layers-expanded .leaflet-control-layers-list { background-color: rgba(var(--lg-rgb), var(--lg-thick)) !important; background-image: var(--lg-sheen) !important; box-shadow: var(--lg-ring), var(--lg-drop) !important; }
  /* 工具列標題：自己一顆玻璃膠囊（絕對定位左右都給、寬度 fit-content、margin auto ＝ 在可用範圍置中），地圖再亮再暗都讀得到 */
  :root:not(.embed) body #deskTitle { width: fit-content; margin: 0 auto; right: calc(10px + var(--ctl) + 14px + var(--fabs-w, 220px) + 8px + 2 * var(--ctl) + 10px + 14px); top: calc(var(--tb-y) - 3px); height: calc(var(--ctl) + 6px); padding: 0 16px; border-radius: var(--pill);
    background-color: rgba(var(--lg-rgb), var(--lg-chrome)); background-image: var(--lg-sheen);
    -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat)); backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat)); box-shadow: var(--lg-ring), var(--lg-drop-sm); }
  :root:not(.embed) .sheet .sheet-body { background-color: rgba(var(--lg-rgb), var(--lg-thick)) !important; background-image: var(--lg-sheen) !important; box-shadow: var(--lg-ring), var(--d-win) !important; border-radius: 26px; animation: lgRise .42s var(--spring) backwards; }
  body.desk-set #panel > .scroll { background: rgba(var(--lg-rgb), .35); box-shadow: inset .5px 0 0 var(--lg-sep); border-radius: 0 24px 24px 0; }
  body.desk-set .desk-set-title { background: rgba(var(--lg-rgb), .6); }
}
@media (min-width: 1024px) and (pointer: coarse) { :root:not(.embed) { --ctl: 40px; --tb-bar: 60px; } }

/* ---------- 特大字（像 iOS 的輔助使用大字）：潛點標題不再被右上四顆按鈕擠成一字一行，按鈕移到標題上方；標頭只留中文字標 ---------- */
@media (max-width: 1023px) {
  :root[data-fs="xl"] #siteCard > .card-head { flex-wrap: wrap-reverse; row-gap: 4px; }
  :root[data-fs="xl"] #siteCard > .card-head > div:not(.card-tools) { flex: 1 1 100%; min-width: 0; }
  :root[data-fs="xl"] #siteCard > .card-head:has(#scArt:not(.hidden)) > div:not(.card-tools) { flex-basis: calc(100% - 64px); }
  :root[data-fs="xl"] #siteCard > .card-head > .card-tools { margin-left: auto; }
  :root[data-fs="xl"] #panel .brand .dm-word > span { display: none; }
}

/* ---------- 降低透明度／增加對比／減少動態 ---------- */
@media (prefers-reduced-transparency: reduce) {
  :root, :root[data-theme] { --lg-chrome: .985; --lg-sheet: 1; --lg-thick: 1; }
  .glass, #fabs, .leaflet-bar, .leaflet-control-layers, html.tabs-float .seg[role="tablist"], #panel.glass, #fabs::before, #topSearch, .sheet-body { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background-image: none !important; }
}
/* 不支援背景模糊的瀏覽器：沒有模糊的半透明會讓地圖細節穿透文字，改接近實色 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root, :root[data-theme] { --lg-chrome: .94; --lg-sheet: .97; --lg-thick: .985; }
}
@media (prefers-contrast: more) {
  :root, :root[data-theme] { --lg-chrome: .96; --lg-sheet: .99; --lg-thick: 1; --lg-hair: rgba(0, 0, 0, .7); --lg-sep: rgba(127, 127, 127, .55); --lg-rim: rgba(255, 255, 255, .4); }
  .card, .group, details.region, .tile, .pill, .chip { box-shadow: inset 0 0 0 1px var(--lg-sep); }
}
@media (prefers-reduced-motion: reduce) {
  .pill, .tile, .chip, .mini-btn, .icon, .fab, .seg button, .row-btn, .lp-menu button, input.switch, input.switch::after, #panel { transition-duration: .01ms !important; }
  .pill:active, .tile:active, .chip:active, .mini-btn:active, .fab:active, .seg button:active, .icon:active { transform: none; }
  .lp-menu:not(.hidden), #topSuggest:not(.hidden), .sheet:not(.hidden) > .sheet-body { animation: none; }
}

/* ==========================================================================
   v194 玻璃補強：深色模式「地圖不變暗」時的對比、省電玻璃（低階手機自動降模糊）
   ========================================================================== */
/* 深色模式的連結、強調色、紅字再亮一點：地圖變暗後白雲仍有 brightness(.8) ≈ #CCC，半開抽屜（.84）裡卡片上的磚原本 4.2–4.4:1，現在 ≥ 4.6:1；
   淺色模式的值在 :root[data-theme="light"]（權重較高）不受影響 */
:root { --link: #ADD6FF; --lg-tint: #9AD4FF; --red-text: #FFC2C2; }
/* 深色模式但地圖沒變暗（設定「深色模式時地圖也變暗」關掉）：背後可能是白雲、沙灘、亮的衛星影像。
   浮動控制項材質加厚到 .8、抽屜 .91，搜尋提示字與強調色調亮一點、選取膠囊淡一點，純白背景上也 ≥ 4.5:1；
   地圖有變暗（預設）與淺色模式不受影響，平常的玻璃一樣清透。數字見 tools/a11y-test.mjs 的對比檢查。 */
:root[data-theme="dark"]:not(.map-night) {
  --lg-chrome: max(.8, calc(var(--glass-a) - .06)); --lg-sheet: clamp(.91, calc(var(--glass-a) + .1), .97);
  --lg-ph: #D6E1EF; --lg-tint: #A6DAFF; --lg-sel: rgba(255, 255, 255, .1);
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"]:not(.map-night) {
    --lg-chrome: max(.8, calc(var(--glass-a) - .06)); --lg-sheet: clamp(.91, calc(var(--glass-a) + .1), .97);
    --lg-ph: #D6E1EF; --lg-tint: #A6DAFF; --lg-sel: rgba(255, 255, 255, .1);
  }
}

/* 省電玻璃（html.glass-lite）：設定 → 外觀「玻璃效果」選「省電」，或「自動」時 desk.js 量到捲動、拖抽屜、平移地圖會掉格。
   所有即時模糊（backdrop-filter）拿掉，材質改成接近實色（模糊是低階手機 GPU 最貴的一層），外觀其他部分（髮絲線、高光、圓角）不變 */
/* v238：省電也跟著「清澈 ↔ 著色」滑桿，只是不模糊；沒有模糊時底色至少 .8／.86，衛星圖上字仍清楚（原本固定 .9／.95，滑桿拉到清澈也看不出差別） */
:root.glass-lite[data-theme] { --lg-chrome: max(.8, var(--glass-a)); --lg-sheet: clamp(.86, calc(var(--glass-a) + .06), .97); --lg-thick: .985; }
:root.glass-lite *, :root.glass-lite *::before, :root.glass-lite *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
:root.glass-lite:not(.embed) body :is(#topSearch, .leaflet-control-zoom.leaflet-bar, .leaflet-top.leaflet-right .leaflet-control-layers) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
/* 系統的降低透明度、增加對比、不支援模糊的瀏覽器比上面兩種更實：放在後面重新蓋過（選擇器權重與上面相同，靠順序） */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { :root[data-theme][data-theme] { --lg-chrome: .94; --lg-sheet: .97; --lg-thick: .985; } }
@media (prefers-reduced-transparency: reduce) { :root[data-theme][data-theme] { --lg-chrome: .985; --lg-sheet: 1; --lg-thick: 1; } }
@media (prefers-contrast: more) { :root[data-theme][data-theme] { --lg-chrome: .96; --lg-sheet: .99; --lg-thick: 1; } }

/* 設定 → 外觀：玻璃效果（自動／完整／省電）接在清澈↔著色滑桿下面 */
.glass-mode { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 10px; margin-top: 8px; }
.glass-mode .seg { flex: 0 1 220px; }
/* 滑桿的觸控範圍（手機 44 px，上下用負邊界撐出來）：多了這一列後，列高不再被拉高，要自己留出 44 px，否則會蓋到上一列的按鈕 */
.glass-row .glass-slider { min-height: 44px; }
.glass-mode .gm-note { flex: 1 1 100%; text-align: right; font-size: 13px; line-height: 1.4; }

/* ==========================================================================
   v194 潛伴分享日誌（share.js）與潛點收藏分組：沿用 v193 的玻璃表單（.sheet-body.glass）與膠囊按鈕，觸控目標 ≥ 44 px
   ========================================================================== */
.fg-bar { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 6px; margin: 4px 0 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.fg-bar::-webkit-scrollbar { display: none; }
.fg-bar .fg-chip { flex: none; min-height: 44px; max-width: 14em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.fg-bar .fg-manage { color: var(--link); }
.shr-body { width: min(560px, 100%); max-height: calc(100dvh - 48px); overflow-y: auto; }
.shr-body .card-head .icon, .shr-mini { min-width: 44px; min-height: 44px; }
.shr-body .actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.shr-body .actions .pill { min-height: 44px; }
.shr-pick .check-row, .shr-body .check-row { min-height: 44px; margin: 0; }
.shr-priv { margin-top: 8px; }
.shr-list { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.shr-card { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: var(--radius-sm); background: var(--band); min-height: 44px; cursor: pointer; }
.shr-card input { width: 22px; height: 22px; margin: 2px 0 0; flex: none; }
.shr-card.off { opacity: .6; cursor: default; }
.shr-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; overflow-wrap: anywhere; }
.shr-facts { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 14px; }
.shr-cond, .shr-seen, .shr-note { font-size: 13px; color: var(--muted); white-space: pre-wrap; }
.shr-tag { font-size: 12px; font-weight: 700; color: var(--link); }
.shr-pf { width: 100%; height: 48px; margin-top: 4px; }
.shr-pf polyline { fill: none; stroke: var(--blue-fill); stroke-width: 2; vector-effect: non-scaling-stroke; }
.shr-qr { display: flex; justify-content: center; }
.shr-qr canvas { width: min(296px, 80vw); height: auto; border-radius: var(--radius-sm); image-rendering: pixelated; }
.fg-row, .fg-site { display: flex; align-items: center; gap: 4px; padding: 0 0 0 4px; background: var(--band); border-radius: var(--radius-sm); }
.fg-row .fg-open { flex: 1; display: flex; justify-content: space-between; align-items: center; min-height: 44px; background: none; border: 0; color: inherit; font: inherit; text-align: left; padding: 0 8px; cursor: pointer; }
.fg-site .fg-sname { flex: 1; padding: 0 8px; overflow-wrap: anywhere; }
.fg-add { display: flex; gap: 8px; align-items: flex-end; }
.fg-add .field { flex: 1; margin-bottom: 0; }
.fg-add .pill { min-height: 44px; }

/* 新功能卡片（v194，guide.js NEWS_ROWS）：超過 4 列時排緊一點，卡片比畫面高就在卡片裡捲動（按鈕一定看得到） */
.tour-tip.card { max-height: calc(100dvh - 24px - var(--safe-t, 0px) - var(--safe-b, 0px)); overflow-y: auto; overscroll-behavior: contain; }
.tour-body ul.tour-news.many { gap: 10px; margin-top: 8px; }
.tour-news.many li { grid-template-columns: 34px 1fr; gap: 10px; }
.tour-news.many .tn-ic { width: 34px; height: 34px; border-radius: 10px; }
.tour-news.many .tn-ic .ic { width: 18px; height: 18px; }
.tour-news.many .tn-tx { font-size: 13px; line-height: 1.4; gap: 0; }

/* v195：玻璃效果滑桿要看得出差別——淺色抽屜 .72～.97、浮動控制項 .58 起（原本 .9／.8 起，滑桿幾乎沒作用）；直接放在抽屜上的次要文字加深以維持 ≥ 4.5:1 */
/* ---------- v195 潛點卡片標題：四顆圓鈕只佔第一行右側，名稱、類型與狀態往下用整行寬（iPhone 上原本被擠成一欄兩三個字） ---------- */
#siteCard .card-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 12px; align-items: start; }
#siteCard .card-head > div:not(.card-tools) { display: contents; }
#siteCard .card-head #scArt { grid-column: 1; grid-row: 1 / span 2; align-self: start; }
#siteCard .card-head #scKm { grid-column: 2; grid-row: 1; align-self: center; min-width: 0; }
#siteCard .card-head .card-tools { grid-column: 3; grid-row: 1; }
#siteCard .card-head #scName { grid-column: 2 / -1; grid-row: 2; min-width: 0; }
#siteCard .card-head #scArt.hidden ~ div #scKm { grid-column: 1 / 3; }
#siteCard .card-head #scArt.hidden ~ div #scName { grid-column: 1 / -1; }
#siteCard .card-head #scMode { grid-column: 1 / -1; grid-row: 3; justify-self: start; }
#siteCard .card-head #scStatus { grid-column: 1 / -1; grid-row: 4; }
#siteCard .card-head #scKm .sc-tz { display: block; margin-top: 2px; color: var(--muted); font-weight: 500; letter-spacing: 0; font-variant-numeric: tabular-nums; }   /* v199 國外潛點的當地時間 */

/* v196 iPhone 版面健檢（tools/layout-audit.mjs）：設定列標題左、控制項右、放不下換行撐滿；窄卡片（SE、特大字）用容器查詢改排；zoom 字級除回 100dvh；Safari 選單高度 */
/* 設定列 */
.row > span:first-child { flex: 0 1 auto; min-width: min(4em, 100%); overflow-wrap: break-word; }
.row > .row-val { flex-shrink: 0; max-width: 50%; }
.row > .row-val:has(button, input, select, .switch) { max-width: none; }
.row > .row-val.peer-acts { flex-shrink: 1; flex-wrap: wrap; justify-content: flex-end; row-gap: 24px; }
.tab-cfg-row > span:first-child, :root[data-fs] .tab-cfg-row > span:first-child { white-space: nowrap; min-width: auto; }
:root[data-fs="xl"] .tab-cfg-row .tab-cfg-ic { margin-right: 2px; }
:root[data-fs="xl"] .tab-cfg-row { padding-inline: 10px; gap: 8px; }
.row > .row-val .link { white-space: nowrap; }
.row > .switch, .row > input[type=checkbox] { flex: none; }
.row:has(> .seg.mini) { flex-wrap: wrap; row-gap: 10px; }
.row > .seg.mini, .row > .seg.mini:has(> button:nth-child(4)) { flex: 1 0 auto; max-width: 100%; margin: 0; }
.row > .seg.mini > button, .off-body .off-opt .seg.mini > button { flex: 1 0 auto; white-space: nowrap; padding-inline: 10px; }
:root[lang="en"] .row > .seg.mini > button { white-space: normal; flex: 1 1 0; min-width: 0; }
:root[lang="en"] .row > .seg.mini { flex-shrink: 1; min-width: 0; }
.glass-row { row-gap: 10px; }
.glass-row .glass-slider { flex: 1 1 200px; margin-left: 0; grid-template-columns: auto minmax(96px, 1fr) auto; }
.glass-row .glass-slider .gs-note, .glass-mode .gm-note { text-align: left; }
.glass-mode { margin-top: 0; justify-content: stretch; }
.glass-mode .seg { flex: 1 1 100%; }
.off-body .off-opt { flex-wrap: wrap; row-gap: 8px; }
.off-body .off-opt > span { flex: 0 1 auto; min-width: 0; }
.off-body .off-opt .seg.mini { flex: 1 0 auto; max-width: 100%; }

/* 潛點卡片 */
#siteCard { container: sitecard / inline-size; }
@container sitecard (max-width: 330px) {
  #siteCard > .tiles { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  #siteCard .sc-more .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  #siteCard .card-head .card-tools { grid-column: 1 / -1; grid-row: 1; justify-self: end; }
  #siteCard .card-head #scArt { grid-row: 2 / span 2; }
  #siteCard .card-head #scKm { grid-row: 2; }
  #siteCard .card-head #scName { grid-row: 3; }
  #siteCard .card-head #scMode { grid-row: 4; }
  #siteCard .card-head #scStatus { grid-row: 5; }
}
@container sitecard (max-width: 330px) {
  details.sec > summary { flex-wrap: wrap; row-gap: 2px; }
  details.sec > summary > :is(.sec-meta, small) { order: 5; flex: 1 1 100%; flex-wrap: wrap; }
  .fc-table { display: block; overflow-x: auto; overscroll-behavior-x: contain; }
  .fc-table th { white-space: nowrap; }
  #scForecast > summary { flex-wrap: wrap; white-space: normal; }
  #scForecast > summary > small { order: 5; flex: 1 1 100%; margin-left: 0; }
}
@container sitecard (max-width: 240px) { .sea-lights { grid-template-columns: 1fr; } }
@container sitecard (max-width: 300px) {
  #levelEdit, #modeEdit { flex-wrap: wrap; border-radius: 18px; }
  #levelEdit > button, #modeEdit > button { flex: 1 1 auto; }
}
@container sitecard (max-width: 300px) { :root[lang="en"] .sea-lights { grid-template-columns: 1fr; } }
.sea-lights li span:not(.sea-dot) { min-width: 0; }
.sea-lights li b { flex: none; }
#logList { container: loglist / inline-size; }
/* 新版 iOS Safari 的 <details> 內容區不把寬度傳給表格，width:100% 會縮成內容寬、潛點欄被擠成「龍…」：改以日誌清單（容器）的寬度為準 */
#logList .log-year { display: block; container-type: inline-size; }   /* v238：年份卡片本身當容器，下面的 100cqi 才是卡片寬（沒有容器時 cqi 退回畫面寬）；也讓卡片寬度不跟著內容縮 */
#logList .log-year::details-content { display: block; width: 100%; }
/* 很窄的時候（小手機、分割畫面）不顯示水溫欄，潛點留得下名字 */
@container loglist (max-width: 300px) {
  .log-head, .log-row { grid-template-columns: 46px minmax(0, 1fr) 44px 32px; column-gap: 6px; }
  .log-head > :nth-child(5), .log-row > :nth-child(5) { display: none; }
}
#logForm { container: logform / inline-size; }
@container logform (max-width: 330px) {
  #logForm > .actions, #logForm .actions:last-of-type { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #logForm .actions .pill { white-space: normal; }
}
:root[lang="en"] #logForm .actions .pill { white-space: normal; }
.fg-site { flex-wrap: wrap; justify-content: flex-end; }
.fg-site .fg-sname { flex: 1 1 7em; min-width: 0; }
#psBody { container: psbody / inline-size; }
@container psbody (max-width: 300px) {
  #psBody .ps-facts { grid-template-columns: 1fr; row-gap: 8px; }
  #psBody .ps-facts > div { padding: 0; }
  #psBody .ps-facts > div + div { border-left: 0; }
}
.lv-legend { flex-wrap: wrap; row-gap: 2px; }
.row-btn.pack-more > span:first-child { align-items: center; }
.pack-more-t { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
@media (pointer: coarse) { .slider { min-height: 44px; margin: 0; } }
.login-card > * { flex-shrink: 0; }
.login-later { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.sc-chips { row-gap: 22px; }
@media (max-width: 767px), (max-width: 900px) and (orientation: portrait), (max-width: 900px) and (max-height: 499px) {
  :root[data-fs="l"] .sheet-body { max-height: calc((100dvh - var(--safe-t) - 28px - var(--safe-b)) / 1.15); }
  :root[data-fs="xl"] .sheet-body { max-height: calc((100dvh - var(--safe-t) - 28px - var(--safe-b)) / 1.3); }
  :root[data-fs="l"] .ps-sheet.sheet .sheet-body { height: min(820px, calc((100dvh - 96px) / 1.15)); max-height: none; }
  :root[data-fs="xl"] .ps-sheet.sheet .sheet-body { height: min(820px, calc((100dvh - 96px) / 1.3)); max-height: none; }
}
.em-row { flex-wrap: wrap; row-gap: 6px; }
.em-row > div { flex: 1 1 9em; }
.em-row > div ~ * { margin-left: auto; }
.em-row > div ~ * ~ * { margin-left: 0; }
.rv-row > b:nth-child(2):last-child { grid-column: 2 / -1; }
.nt-top { flex-wrap: wrap; row-gap: 0; }
.nt-top .nt-title { flex: 1 1 8em; min-width: 0; }
.nt-bar { flex-wrap: wrap; }
.nt-bar .nt-acts { flex-wrap: wrap; margin-left: auto; }
.nt-sheet .link.nt-lk { white-space: nowrap; }
#toast { max-width: calc(100vw - 32px); border-radius: 22px !important; text-align: center; }
@media (pointer: coarse) {
  select:not([multiple]):not([size]) { height: 44px; box-sizing: border-box; }
  .sources .src-list li { padding: 2px 0; }
  .sources .src-list a { display: flex; align-items: center; min-height: 44px; }
  .em-warn { row-gap: 0; }
  .em-warn a { display: inline-flex; align-items: center; min-height: 44px; }
  .sc-chip::after { inset: -11px -2px; }
  .ops-link, #opsDash a.ops-link { display: inline-flex; align-items: center; min-height: 44px; }
}
/* 國家底下的地區（v197）：比一般地區標頭內縮一層 */
.list li.group.fold.sub, :root:not(.embed) #panel .list li.group.fold.sub { padding-left: 26px; font-weight: 600; }
/* 洲 → 國家 → 地區（v198）：國家底下的地區再內縮一層 */
.list li.group.fold.sub2, :root:not(.embed) #panel .list li.group.fold.sub2 { padding-left: 44px; }
/* 直播鏡頭管理（v219）：對應潛點的標籤 */
.cam-sites { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.cam-sites .chip { cursor: default; display: inline-flex; align-items: center; gap: 4px; }
.cam-sites .chip button { border: 0; background: none; color: inherit; font-size: 16px; line-height: 1; padding: 0 2px; cursor: pointer; min-width: 24px; min-height: 24px; }
.cam-form fieldset { border: 0; padding: 0; margin: 0; }
/* 最後查證（C9，v219） */
.src-verified { margin: 0 0 10px; font-size: 13px; color: var(--muted); }
.src-verified.stale { color: var(--warn-text); }
.ver-reg summary { cursor: pointer; padding: 6px 0; display: flex; justify-content: space-between; gap: 8px; }
.ver-reg ul { margin: 0 0 8px; padding-left: 1.2em; }
.ver-reg li { margin: 2px 0; }
/* 監控（C5，v219） */
.mon-list { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 4px; }
.mon-list li { display: flex; gap: 8px; align-items: baseline; font-size: 14px; }
.mon-list li::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--green, #16a34a); transform: translateY(-1px); }
.mon-list li.warn::before { background: var(--orange); }
.mon-list li.alert::before { background: var(--red, #dc2626); }
.mon-list li span { color: var(--muted); }
.mon-list li.alert span, .mon-list li.warn span { color: var(--warn-text); }
/* 在地規格編輯表單（v220） */
.pe-form details.pe-sec { border-top: 1px solid var(--line); padding: 6px 0; }
.pe-form summary { cursor: pointer; font-weight: 600; padding: 6px 0; }
.pe-form h4 { margin: 10px 0 4px; font-size: 14px; }
.pe-item { border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; margin: 6px 0; }
.pe-checks { border: 0; padding: 0; margin: 6px 0; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.pe-checks legend { width: 100%; font-size: 13px; color: var(--muted); margin-bottom: 2px; }
.pe-bad input, .pe-bad select, .pe-bad textarea, .pe-checks.pe-bad { outline: 2px solid var(--red); outline-offset: 1px; }
.pe-err { color: var(--red-text); }
/* 生物照片（v221，維基共享資源） */
.sp-photo { margin: 0 0 8px; }
.sp-ph { display: block; width: 100%; padding: 0; border: 0; background: var(--soft); border-radius: 12px; overflow: hidden; cursor: zoom-in; }
.sp-ph img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.sp-photo figcaption { font-size: 11px; color: var(--muted); margin-top: 4px; line-height: 1.4; }
.sp-photo figcaption a { color: inherit; }

.ver-cty { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 4px; }
.ver-cty li { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.ver-cty li.late b, .ver-cty li.late span { color: var(--red-text); }
/* 生物頁（v222）：分段按鈕和搜尋框之間留距離（.seg.mini 的 margin: 0 比較精確會蓋掉 .bio-view）；標籤列右邊漸淡提示可以往右滑 */
.seg.mini.bio-view { display: flex; margin: 0 0 12px; }
.sp-tagbar { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
/* 全站搜尋框統一（v224）：左側放大鏡（和頂部搜尋列同一個圖形）、同樣的左內距；顏色跟著主題（--muted）。頂部搜尋列有自己的圖示，不重複
   桌機設定頁的樣式用 background 簡寫會清掉圖示、選擇器又很長，這兩個屬性用 !important（只限搜尋框） */
:root { --search-ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23A9B9D1%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%227%22/%3E%3Cpath%20d%3D%22m20%2020-4-4%22/%3E%3C/svg%3E"); }
:root[data-theme="light"] { --search-ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%235B6B84%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%227%22/%3E%3Cpath%20d%3D%22m20%2020-4-4%22/%3E%3C/svg%3E"); }
@media (prefers-color-scheme: light) { :root[data-theme="auto"] { --search-ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%235B6B84%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%227%22/%3E%3Cpath%20d%3D%22m20%2020-4-4%22/%3E%3C/svg%3E"); } }
input[type="search"]:not(#topFilter) { background-image: var(--search-ic) !important; background-repeat: no-repeat !important; background-position: 12px 50% !important; background-size: 18px 18px !important; padding-left: 38px !important; }

/* AR（相機畫面）與 3D（深色海底場景）上的面板：不跟隨淺色主題，一律深色玻璃與白字（淺色模式時 .glass 的 !important 淺色底、白色反光會讓字看不清楚） */
#ar, #v3 { color-scheme: dark; --text: #FFFFFF; --text-2: #E3EDF9; --muted: #C2D0E3; --line: rgba(255,255,255,.14); --soft: rgba(255,255,255,.1); --input: rgba(255,255,255,.12);
  --pill-hover: rgba(255,255,255,.2); --lg-fill: rgba(255,255,255,.08); --lg-fill-2: rgba(255,255,255,.12); --lg-fill-hi: rgba(255,255,255,.2); --lg-sep: rgba(255,255,255,.14);
  --surface: rgba(255,255,255,.08); --band: rgba(255,255,255,.12); --glass-edge: rgba(255,255,255,.16); --glass-hi: rgba(255,255,255,.18); --glass-hi2: rgba(255,255,255,.04); --link: #8FD3FF;
  --lg-rim: rgba(255,255,255,.16); --lg-spec: rgba(255,255,255,.14); --lg-floor: rgba(255,255,255,.04); --grab: rgba(255,255,255,.35); }
#ar .glass, #v3 .glass { background: rgba(12, 20, 32, .7) !important; color: #fff; box-shadow: var(--lg-ring), 0 8px 24px rgba(0,0,0,.35) !important; }
#ar .ar-range, #ar .ar-range output, #v3 .v3-chk { color: #fff; }
#ar .seg button:not(.active), #v3 .seg button:not(.active) { color: rgba(255,255,255,.86); }

/* 繪圖分頁入口：主要（筆繪）與次要（上傳審核）按鈕分開、一樣高，說明字收在下面；逐點繪製收成一張卡片列 */
.pz-entry { display: grid; gap: 10px; margin: 0 0 18px; }
.pz-entry .pill.wide { margin: 0; min-height: 48px; font-size: 16px; gap: 8px; }
.pz-entry .hint { margin: 2px 4px 0; text-wrap: pretty; }
#drawClassic { background: var(--surface); border-radius: var(--radius-sm); padding: 0 14px; }
#drawClassic > summary.group-head { margin: 0; min-height: 50px; color: var(--text); font-size: 15px; letter-spacing: 0; }
#drawClassic[open] { padding-bottom: 14px; }

/* 觸控範圍：小按鈕與篩選標籤至少 32 px 高（原本 23–26 px 不好按） */
.pill.small, .chip { min-height: 32px; display: inline-flex; align-items: center; justify-content: center; }
.sp-tags em.cons, .sp-badge.cons { color: color-mix(in srgb, var(--green-text) 78%, var(--text)); }
/* 設定返回鈕、文字連結按鈕：外觀不變，觸控範圍放大（上下各多 8 px） */
.set-back { min-height: 44px; display: flex; align-items: center; margin: -6px 0 4px; }
button.link { padding-block: 8px; margin-block: -8px; }
#copyMeId { min-width: 36px; min-height: 36px; }
/* 並排欄位：標題換行時輸入框仍對齊同一條底線（例：潛水計劃的「預計最大深度（m）」） */
.bio-row { align-items: flex-end; }
/* 國外潛點卡片的當地時間：不在詞中間斷行，兩行長度平均 */
.sc-tz { word-break: keep-all; text-wrap: balance; }
/* AR 手動校正：拖曳畫面調方位與仰角；有校正時在底部工具列上方顯示目前的修正量與「重設」 */
#arLayer { touch-action: none; }
.ar-cal { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(var(--arb, 150px) + 12px + var(--safe-b)); display: flex; align-items: center; gap: 10px;
  padding: 6px 6px 6px 14px; border-radius: 980px; background: rgba(12, 20, 32, .74); color: #fff; font: 600 13px var(--font); white-space: nowrap;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 6px 18px rgba(0,0,0,.3); }
.ar-cal.hidden { display: none; }
.ar-cal .pill { min-height: 32px; padding: 0 14px; background: rgba(255,255,255,.16); color: #fff; }
#ar { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
/* 緊急醫療標題列跟其他段落（入水規定、海況）同一個格式：深色標題＋灰色補充；紅色只留給撥打鈕。撥打鈕和標題文字同一條中線（summary 上 12 下 4、內容 28 高 → 中線 26） */
details.sec.emergency > summary { color: var(--text); }
details.sec.emergency > summary::before { content: ''; flex: none; width: 18px; height: 18px; border-radius: 5px; background: #D32F2F url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 12px no-repeat; }
.em-quick { top: 11px; }
/* v264 潛點頁各區塊標題前的圖示（和緊急醫療同一種 iOS 設定式色塊）；色塊用背景色、圖示是白線 */
details.sec:is(#scRules, #scForecast, #liveBox, #scBT, #scLife, #scFac, #editSec) > summary::before { content: ''; flex: none; width: 18px; height: 18px; border-radius: 5px; background: var(--sec-c) var(--sec-i) center / 12px no-repeat; }
#scRules { --sec-c: #E8A317; --sec-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 12h-5'/%3E%3Cpath d='M15 8h-5'/%3E%3Cpath d='M19 17V5a2 2 0 0 0-2-2H4'/%3E%3Cpath d='M8 21h12a2 2 0 0 0 2-2v-1a1 1 0 0 0-1-1H11a1 1 0 0 0-1 1v1a2 2 0 1 1-4 0V5a2 2 0 1 0-4 0v2a1 1 0 0 0 1 1h3'/%3E%3C/svg%3E"); }
#scForecast { --sec-c: #1E88E5; --sec-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12q2.5 2 5 0t5 0 5 0 5 0'/%3E %3Cpath d='M2 19q2.5 2 5 0t5 0 5 0 5 0'/%3E %3Cpath d='M2 5q2.5 2 5 0t5 0 5 0 5 0'/%3E%3C/svg%3E"); }
#liveBox { --sec-c: #E53935; --sec-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5'/%3E%3Crect x='2' y='6' width='14' height='12' rx='2'/%3E%3C/svg%3E"); }
#scBT { --sec-c: #00897B; --sec-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v16'/%3E %3Cpath d='M20.001 19A2 2 0 0022 17V5a2 2 0 00-1.999-2L16 3.002A5 5 0 0012 5a5 5 0 00-4-2H4a2 2 0 00-2 2v12a2 2 0 001.999 2H8a5 5 0 014 2 5 5 0 014-2z'/%3E%3C/svg%3E"); }
#scLife { --sec-c: #0097A7; --sec-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12c-1.8-3.6-4.6-5.5-8-5.5S7.2 8.4 6 12c1.2 3.6 3.6 5.5 7 5.5s6.2-1.9 8-5.5Z'/%3E%3Cpath d='M6 12 2.5 8.2v7.6Z'/%3E%3Ccircle cx='16.8' cy='10.8' r='1' fill='%23fff' stroke='none'/%3E%3Cpath d='M10.8 9c.8 2 .8 4 0 6'/%3E%3C/svg%3E"); }
#scFac { --sec-c: #43A047; --sec-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2 7 4.41-4.41A2 2 0 0 1 7.83 2h8.34a2 2 0 0 1 1.42.59L22 7'/%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'/%3E%3Cpath d='M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4'/%3E%3Cpath d='M2 7h20'/%3E%3Cpath d='M22 7v3a2 2 0 0 1-2 2a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 16 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 12 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 8 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 4 12a2 2 0 0 1-2-2V7'/%3E%3C/svg%3E"); }
#editSec { --sec-c: #78909C; --sec-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z'/%3E %3Cpath d='m15 5 4 4'/%3E%3C/svg%3E"); }

/* v240 管理員儀表板：潛能串接開關（說明字放在標題下面，開關靠右） */
.dof-row { gap: 12px; min-height: 56px; }
.dof-row > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.dof-row small { font-size: 13px; line-height: 1.4; }
.dof-row.dof-all { border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 4px; }

/* v242 會員進階說明（帳號 →「會員進階」、或點到上鎖的功能） */
.plus-box { display: grid; gap: 10px; }
.plus-what { font-size: 16px; }
.plus-st { font-weight: 600; }
.plus-list { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; }
.plus-buy { min-height: 48px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.plus-buy small { font-size: 12px; font-weight: 500; opacity: .85; }

/* ==========================================================================
   v245 地圖為主（方案 C）：頭像取代設定分頁、分類膠囊、地圖右側的圖層與 3D、圖層面板
   原本的設定分頁按鈕、工具類浮動按鈕、Leaflet 圖層控制都還在 DOM（深連結、快捷鍵、測試照舊），只是不顯示，改由新入口轉呼叫
   ========================================================================== */
.seg[role="tablist"] button.tab-set { display: none !important; }
#fabs .fab-tool { display: none !important; }
.leaflet-control-layers { display: none !important; }

/* 搜尋列右邊的頭像：有名字顯示第一個字，沒有顯示人形圖示 */
#topMe { order: 9; flex: none; width: 34px; height: 34px; margin-left: 2px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: var(--blue-fill); color: var(--on-blue); font: 700 15px/1 var(--font); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); transition: transform .12s; }
#topMe { position: relative; }
#topMe::after { content: ''; position: absolute; inset: -6px -6px -6px -6px; border-radius: 50%; }   /* 看起來 34px、可點範圍 46px */
#topMe .ic { width: 18px; height: 18px; }
#topMe:active { transform: scale(.94); }
#topMe:focus-visible { outline: 2px solid var(--accent-2, #38B6FF); outline-offset: 2px; }

/* 分類膠囊：搜尋列正下方，跟著搜尋列走（手機、平板、桌面都一樣）；看起來 36px、可點範圍 48px */
.map-chips { position: absolute; left: 0; top: calc(100% + 8px); width: 100%; display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none; padding: 6px 2px; margin: -6px -2px; -webkit-overflow-scrolling: touch; }
.map-chips::-webkit-scrollbar { display: none; }
/* 右緣漸隱：提示還可以往左滑 */
.map-chips { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
.map-chip { position: relative; flex: none; height: 36px; padding: 0 14px; border: 0; border-radius: var(--pill); cursor: pointer;
  font: 500 14px/1 var(--font); color: var(--text);
  /* 和搜尋列同一種玻璃，但小字壓在地圖標籤上要更厚（≥ .9）才讀得清楚 */
  background-color: rgba(var(--lg-rgb), max(.9, var(--lg-chrome))); background-image: var(--lg-sheen);
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat)); -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  box-shadow: var(--lg-ring), var(--lg-drop-sm); transition: background .18s, color .18s, transform .12s; }
.map-chip::after { content: ''; position: absolute; inset: -6px -2px; }
.map-chip:active { transform: scale(.96); }
.map-chip.on { background-color: var(--blue-fill); background-image: none; color: var(--on-blue); box-shadow: var(--lg-drop-sm); }
.map-chip:focus-visible { outline: 2px solid var(--accent-2, #38B6FF); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .map-chip, #topMe { transition: none; } }

/* 手機：Leaflet 縮放鈕、浮動按鈕讓出膠囊那一排 */
@media (max-width: 767px), (max-width: 900px) and (orientation: portrait), (max-width: 900px) and (max-height: 499px) {
  /* 舊規則（頂端控制項與座標列留空隙）是 !important，這裡也要 */
  .leaflet-top.leaflet-left, .leaflet-top.leaflet-right, .leaflet-top { top: calc(112px + var(--safe-t)) !important; }
  body.show-coord .leaflet-top.leaflet-left, body.show-coord .leaflet-top.leaflet-right, body.show-coord .leaflet-top { top: calc(150px + var(--safe-t)) !important; }
  #fabs { max-height: calc(100dvh - var(--map-b) - 10px - 170px - var(--safe-t)); }
  #toast { top: calc(112px + var(--safe-t)) !important; }   /* 提示框放在膠囊列下面，不蓋住篩選 */
}
/* 桌面版：搜尋列在上方工具列，膠囊接在下面、可以比搜尋列寬 */
@media (min-width: 1024px) {
  :root:not(.embed) .map-chips { width: max-content; max-width: calc(100vw - var(--sb-w) - 140px); top: calc(100% + 10px); }
  :root:not(.embed) #topMe { width: 26px; height: 26px; font-size: 12px; }
  :root:not(.embed) #topMe .ic { width: 15px; height: 15px; }
  :root:not(.embed) #toast { top: calc(var(--tb-h) + 62px); }
}

/* v264 選單收斂：清單上方的篩選（附近、浪小、去過、可入水、最愛、岸潛／船潛）和地圖膠囊是同一組，同一個畫面只留一組。
   桌面與平板：膠囊一直看得到，清單不再重複；手機：面板拉到全螢幕時膠囊被蓋住，這時才在清單上方顯示、膠囊收起來 */
:root:not(.embed) #tab-sites > .row-search, :root:not(.embed) #tab-sites > #modeSeg { display: none; }
@media (max-width: 767px), (max-width: 900px) and (orientation: portrait), (max-width: 900px) and (max-height: 499px) {
  :root:not(.embed) body.sheet-full #tab-sites > .row-search { display: flex; }
  :root:not(.embed) body.sheet-full #tab-sites > #modeSeg { display: flex; }
  :root:not(.embed) body.sheet-full .map-chips { visibility: hidden; }
}

/* v264 選單收斂：設定裡和別處重複的列（地圖浪高、現場回報、地圖方向在圖層面板；訂閱的潛點在通知中心）留在頁面上給程式與設定同步用，不顯示 */
#tab-data .moved-row { display: none !important; }

/* 圖層面板 */
.layer-body { width: min(520px, 100%); max-height: calc(100dvh - 48px); overflow-y: auto; display: grid; gap: 10px; }
.ly-h { margin: 8px 0 0; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--muted); }
.ly-bases { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.ly-base { min-height: 48px; padding: 8px 12px; border: 0; border-radius: 14px; cursor: pointer; text-align: left;
  font: 500 14px/1.3 var(--font); color: var(--text); background: var(--soft); box-shadow: inset 0 0 0 1px var(--line); transition: background .15s, box-shadow .15s; }
.ly-base.on { background: var(--blue-fill); color: var(--on-blue); box-shadow: none; }
.ly-row { min-height: 48px; }
.ly-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.ly-tool { min-height: 44px; }
.ly-tool.on { background: var(--blue-fill); color: var(--on-blue); }

/* 骰子膠囊（v246）：圖示＋字；擲的時候骰子轉一圈半 */
.map-chip.act { display: inline-flex; align-items: center; gap: 6px; padding-left: 11px; }
.map-chip .ic { width: 16px; height: 16px; flex: none; }
.map-chip.rolling .ic { animation: dice-roll .65s cubic-bezier(.3, .7, .3, 1); }
@keyframes dice-roll { 0% { transform: rotate(0) scale(1); } 40% { transform: rotate(320deg) scale(1.25); } 100% { transform: rotate(540deg) scale(1); } }
@media (prefers-reduced-motion: reduce) { .map-chip.rolling .ic { animation: none; } }

/* 儀表板「資料來源」（v248） */
.ing-h { margin: 14px 0 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
#ingestDash .rv-item + .rv-item { margin-top: 8px; }
#ingestDash .ing-src p { margin: 6px 0 0; }
.ing-more > summary { cursor: pointer; padding: 10px 2px; color: var(--muted); font-size: 14px; }

/* 語言（v249）：六種語言；日韓、簡中用各自的字型（同一個漢字在各地字形不同） */
:lang(zh-Hans) { --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Helvetica Neue", Arial, sans-serif; }
:lang(ja) { --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo", "Noto Sans JP", "Helvetica Neue", Arial, sans-serif; }
:lang(ko) { --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", "Helvetica Neue", Arial, sans-serif; }
/* 設定的語言列：標題一行、六個選項排成整齊的格子（3×2，窄螢幕 2×3），不再擠在膠囊形的框裡（v252） */
.row.lang-row { flex-wrap: wrap; row-gap: 10px; padding-top: 12px; padding-bottom: 12px; }
.row.lang-row > span { flex: 1 0 100%; }
.row > .seg.lang-seg { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; flex: 1 0 100%; width: 100%; max-width: none; margin: 0; border-radius: 14px; }
.row > .seg.lang-seg > button { white-space: nowrap; min-height: 40px; border-radius: 11px; }
@media (max-width: 380px) { .row > .seg.lang-seg { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lang-note, #fxNote { margin: 6px 16px 10px; line-height: 1.5; }
/* 設定列裡的下拉選單：和其他控制一樣的外觀（原本是瀏覽器預設樣式） */
.row > select { flex: none; min-width: 112px; max-width: 50%; min-height: 36px; padding: 0 30px 0 12px; border: 0; border-radius: 10px; background: var(--band) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a96a8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center; color: var(--text); font: 500 14px var(--font); appearance: none; -webkit-appearance: none; cursor: pointer; }
.lang-menu { position: fixed; z-index: 1300; min-width: 176px; padding: 6px; border-radius: 16px; display: grid; gap: 2px; }
.lang-menu button { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 10px; background: none; color: var(--text); font: 500 15px/1 var(--font); text-align: left; cursor: pointer; }
.lang-menu button:hover, .lang-menu button:focus-visible { background: var(--soft); outline: none; }
.lang-menu button[aria-checked="true"] { color: var(--accent, #1A66CC); font-weight: 600; }
.lang-menu small { font-size: 11px; font-weight: 600; padding: 2px 6px; border-radius: 6px; background: var(--soft); color: var(--muted); }

/* ---------- 潛點頁（v250，改版第 2 階段）---------- */
/* 動作列：一排可以橫滑的膠囊（原本的磚格版面一律蓋掉）；右緣漸隱提示還有 */
#siteCard > .tiles.place-actions { display: flex !important; grid-template-columns: none !important; gap: 8px !important; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scrollbar-width: none; margin: 14px -2px 6px; padding: 2px 2px 4px;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); }
#siteCard > .tiles.place-actions::-webkit-scrollbar { display: none; }
#siteCard > .tiles.place-actions > .tile:not(.hidden) { flex: none; flex-direction: row; gap: 7px; min-height: 0; height: 44px; padding: 0 16px; border-radius: var(--pill);
  scroll-snap-align: start; font-size: 14px; font-weight: 600; white-space: nowrap; background: var(--soft); box-shadow: inset 0 0 0 1px var(--line); }
#siteCard > .tiles.place-actions > .tile .ti { font-size: 17px; }
#siteCard > .tiles.place-actions > .tile .ti .ic { width: 18px; height: 18px; }
#siteCard > .tiles.place-actions > .tile.primary { background: var(--blue-fill); box-shadow: 0 4px 14px -6px rgba(26, 102, 204, .6); }
#siteCard > .tiles.place-actions > .tile.more { padding: 0 14px; }

/* 分頁導覽：捲到卡片時黏在面板頂端；目前那段底下一條線 */
.place-tabs { position: sticky; top: 0; z-index: 6; display: flex; gap: 2px; margin: 6px -14px 10px; padding: 0 10px;
  background-color: rgba(var(--lg-rgb), max(.92, var(--lg-sheet))); backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat)); -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  box-shadow: 0 1px 0 var(--line); overflow-x: auto; scrollbar-width: none; }
.place-tabs::-webkit-scrollbar { display: none; }
.place-tabs button { position: relative; flex: none; height: 44px; padding: 0 12px; border: 0; background: none; color: var(--muted); font: 600 14px/1 var(--font); cursor: pointer; }
.place-tabs button::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: transparent; transition: background .18s; }
.place-tabs button.on { color: var(--link); }
.place-tabs button.on::after { background: var(--link); }
.place-tabs button:focus-visible { outline: 2px solid var(--accent-2, #38B6FF); outline-offset: -4px; border-radius: 10px; }

/* 緊急醫療固定列：卡片底部一直看得到 */
.em-dock { position: sticky; bottom: calc(var(--dock-b, 0px) + 6px); z-index: 6; display: flex; align-items: center; gap: 8px; margin: 14px -4px 0; padding: 8px 8px 8px 14px; border-radius: 18px;
  background-color: rgba(var(--lg-rgb), max(.94, var(--lg-sheet))); backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat)); -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  box-shadow: inset 0 0 0 1px rgba(255, 77, 77, .28), 0 6px 20px -10px rgba(0, 0, 0, .35); }
.em-dock-t { color: var(--red-text); font-size: 14px; margin-right: auto; }
.em-dock-q { display: inline-flex; gap: 6px; }
.em-dock-q a { display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 12px; border-radius: var(--pill); font-size: 14px; font-weight: 700; text-decoration: none; background: var(--red, #E5484D); color: #fff; position: relative; }
.em-dock-q a.alt { background: var(--soft); color: var(--red-text); }
.em-dock-q a::after { content: ''; position: absolute; inset: -4px -2px; }
.em-dock-q .ic { width: 15px; height: 15px; }
.em-dock-more { height: 36px; padding: 0 10px; border: 0; border-radius: var(--pill); background: none; color: var(--link); font: 600 13px/1 var(--font); cursor: pointer; position: relative; }
.em-dock-more::after { content: ''; position: absolute; inset: -4px 0; }

/* 探索：沒選潛點時清單上方 */
.explore { margin: 10px 0 14px; }
.ex-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.ex-head h2 { margin: 0; font-size: 17px; }
.ex-cards { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding: 2px 2px 6px; margin: 0 -2px; }
.ex-cards::-webkit-scrollbar { display: none; }
.ex-card { flex: none; width: 156px; display: grid; gap: 6px; padding: 12px; border: 0; border-radius: 18px; text-align: left; cursor: pointer; scroll-snap-align: start; color: var(--text);
  background: var(--soft); box-shadow: inset 0 0 0 1px var(--line); font: 400 13px/1.3 var(--font); transition: transform .12s; }
.ex-card:active { transform: scale(.97); }
.ex-card:focus-visible { outline: 2px solid var(--accent-2, #38B6FF); outline-offset: 2px; }
.rep-live { display: flex; margin-top: 8px; }
.cb-note { display: block; font-size: 12px; color: var(--muted); font-weight: 400; margin-top: 2px; }   /* 雲端備份（v263）的小字說明 */
.ex-stamp { position: relative; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: color-mix(in srgb, var(--lv) 72%, var(--text));
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--lv) 70%, transparent), inset 0 0 0 4px var(--soft), inset 0 0 0 5px color-mix(in srgb, var(--lv) 45%, transparent);
  transform: rotate(-8deg); font: 700 18px/1 var(--font); }
.ex-stamp > span { transform: rotate(8deg); }
.ex-stamp.been:not(.art) { background: color-mix(in srgb, var(--lv) 22%, var(--soft)); }
.ex-stamp.art { box-shadow: 0 1px 3px rgba(0,0,0,.18); transform: none; background: var(--card); }
.ex-stamp img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; display: block; }
.ex-been { position: absolute; right: -4px; bottom: -3px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--ok, #1f9d55); color: #fff; box-shadow: 0 0 0 2px var(--soft); transform: rotate(8deg); }
.ex-stamp.art .ex-been { transform: none; }
.ex-been .ic { width: 12px; height: 12px; stroke-width: 3; }
.ex-name { display: flex; align-items: flex-start; gap: 6px; }
.ex-name b { font-size: 14px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ex-name .lv-dot { margin-top: 4px; flex: none; }
.ex-meta { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.ex-meta > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ex-dist { color: var(--link); font-weight: 600; }
.ex-recent { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.ex-recent .muted { margin-right: 4px; }
@media (prefers-reduced-motion: reduce) { .ex-card, .place-tabs button::after { transition: none; } }

/* 搜尋列頭像的照片（v250：名片照片或 Google 帳號照片） */

#topMe .me-pic { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }

/* 卡片內容捲進畫面時（鍵盤 Tab、捲到某段）避開黏在上方的分頁列與下方的緊急固定列 */
#siteCard > *, #siteCard .sec, #siteCard :is(button, a, summary, input, select, textarea) { scroll-margin-top: 60px; scroll-margin-bottom: 72px; }

/* ---------- 海況時間軸（v251，改版第 3 階段）：地圖底部，手機在抽屜上方 ---------- */
.sea-time { position: fixed; z-index: 800; left: 12px; right: 12px; bottom: calc(var(--map-b, 0px) + 12px); padding: 8px 12px 10px; border-radius: 22px;
  background-color: rgba(var(--lg-rgb), max(.92, var(--lg-chrome))); background-image: var(--lg-sheen);
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat)); -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  box-shadow: var(--lg-ring), var(--lg-drop-sm); }
.sea-time[hidden] { display: none; }
.st-top { display: flex; align-items: center; gap: 8px; }
.st-play { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--blue-fill); color: var(--on-blue); cursor: pointer; }
.st-play .ic { width: 18px; height: 18px; }
.st-when { flex: 1; min-width: 0; display: grid; line-height: 1.15; }
.st-when b { font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.st-when small { font-size: 11px; color: var(--muted); }
.st-vars { flex: none; }
.st-vars button { min-height: 36px; padding: 0 10px; position: relative; }
.st-vars button::after { content: ''; position: absolute; inset: -4px 0; }
.st-min { flex: none; width: 44px; height: 44px; }
.st-track { position: relative; padding: 6px 4px 14px; }
.st-range { width: 100%; height: 32px; margin: 0; accent-color: var(--link); cursor: pointer; }
.st-ticks { position: absolute; left: 4px; right: 4px; bottom: 0; height: 12px; pointer-events: none; }
.st-ticks span { position: absolute; transform: translateX(-50%); font-size: 11px; color: var(--muted); white-space: nowrap; }
.st-ticks span::before { content: ''; position: absolute; left: 50%; top: -10px; width: 1px; height: 7px; background: var(--line); }
.sea-time.min { left: auto; right: 72px; padding: 0; border-radius: var(--pill); }
.st-open { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 16px; border: 0; background: none; color: var(--text); font: 600 14px/1 var(--font); cursor: pointer; }
.st-open .ic { width: 16px; height: 16px; color: var(--link); }
/* 標籤：風、週期、水溫（浪高沿用原本的 .wv-tag） */
.wv-tag.wv-wind, .wv-tag.wv-period, .wv-tag.wv-sst { display: inline-flex; align-items: center; gap: 2px; }
/* 桌面：地圖中間、寬度固定 */
@media (min-width: 1024px) {
  :root:not(.embed) .sea-time:not(.min) { left: var(--map-cx); right: auto; width: min(560px, calc(100vw - var(--sb-w) - 160px)); transform: translateX(-50%); bottom: 20px; }
  :root:not(.embed) .sea-time.min { left: auto; right: 84px; bottom: 20px; }
}
/* 手機：右邊留給地圖按鈕；顯示選項換到第二行，時間不會被蓋住 */
@media (max-width: 1023px) {
  .sea-time:not(.min) { right: 68px; }
  .st-top { flex-wrap: wrap; row-gap: 6px; }
  .st-vars { order: 3; flex: 1 0 100%; display: flex; }
  .st-vars button { flex: 1; padding: 0 6px; }
}

/* ---------- 服務公告（v252，notice.js）：地圖上方、分類膠囊下面；停機（紅）不能關 ---------- */
.sys-notice { position: fixed; z-index: 900; left: 12px; right: 12px; top: calc(var(--safe-t, 0px) + 104px); display: grid; gap: 8px; pointer-events: none; }
.sys-notice[hidden] { display: none; }
.sn-item { pointer-events: auto; display: flex; align-items: flex-start; gap: 10px; padding: 10px 6px 10px 14px; border-radius: 18px; box-shadow: var(--lg-ring), var(--lg-drop-sm); }
.sn-item p { flex: 1; margin: 0; padding: 3px 0; font-size: 14px; line-height: 1.45; }
.sn-ic { flex: none; padding-top: 3px; } .sn-ic .ic { width: 18px; height: 18px; }
.sn-info .sn-ic { color: var(--link); } .sn-warn .sn-ic { color: var(--orange); } .sn-down .sn-ic { color: var(--red); }
.sn-down { box-shadow: inset 0 0 0 1.5px var(--red), var(--lg-drop-sm); padding-right: 14px; }
.sn-x { flex: none; width: 44px; height: 44px; margin: -10px 0 -10px -4px; }
@media (min-width: 1024px) { :root:not(.embed) .sys-notice { left: var(--map-cx); right: auto; width: min(560px, calc(100vw - var(--sb-w) - 160px)); transform: translateX(-50%); top: 120px; } }
.login-note { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 12px; padding: 10px 12px; border-radius: 14px; background: var(--warn-bg, rgba(255, 159, 10, .14)); color: var(--warn-text); font-size: 14px; line-height: 1.45; text-align: left; }
.login-note .ic { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.login-google:disabled { opacity: .5; cursor: not-allowed; }
/* 儀表板：服務公告與登入（v252） */
.dash-sub { margin: 14px 0 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.sa-auto { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 6px 0 10px; padding: 10px 12px; border-radius: 14px; box-shadow: inset 0 0 0 1.5px var(--red); }
.sa-auto p { flex: 1 1 240px; margin: 0; font-size: 14px; }
.sa-n { align-items: center; gap: 10px; } .sa-n > span:nth-child(2) { flex: 1; min-width: 0; }
.sa-form { display: grid; gap: 8px; }
.sa-apps { display: flex; gap: 16px; border: 0; padding: 0; margin: 0; } .sa-apps legend { font-size: 13px; color: var(--muted); padding: 0; margin-bottom: 4px; }
.sa-apps label { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.sa-n { display: flex; } .sa-n .rv-st { flex: none; } .sa-n .pill { flex: none; }
.sa-pub { justify-self: start; min-width: 120px; }
.sa-meta { display: block; margin-top: 2px; }

/* ---------- 今天潛這裡（v254，改版第 4 階段，dive-day.js）：潛點卡片裡的進度、面板最上面的提示條 ---------- */
.dive-mode { container-type: inline-size; margin: 4px 0 14px; padding: 14px 14px 12px; border-radius: 18px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); scroll-margin-top: 60px; }
.dv-head { display: flex; align-items: center; gap: 8px; }
.dv-head h2 { flex: 1; display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; font-weight: 700; }
.dv-head h2 .ic { width: 18px; height: 18px; color: var(--link); }
.dv-count { font: 600 13px/1 var(--font); color: var(--muted); font-variant-numeric: tabular-nums; }
.dv-end { min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--link); font: 500 14px var(--font); cursor: pointer; }
.dv-bar { height: 6px; margin: 4px 0 12px; border-radius: 3px; background: var(--band); overflow: hidden; }
.dv-bar i { display: block; height: 100%; border-radius: 3px; background: var(--green); transition: width .4s var(--spring, ease); }
.dv-steps { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 0; list-style: none; }
.dv-step { width: 100%; min-height: 64px; display: grid; justify-items: center; align-content: start; gap: 5px; padding: 4px 0; border: 0; border-radius: 12px; background: none; color: var(--muted); font: 500 11.5px/1.2 var(--font); cursor: pointer; }
.dv-step:hover { background: var(--soft); }
.dv-ic { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--band); color: var(--text-2); }
.dv-ic .ic { width: 17px; height: 17px; }
.dv-t { text-align: center; overflow-wrap: anywhere; }
.dv-step.done .dv-ic { background: var(--green); color: #fff; }
.dv-step.done { color: var(--text); }
.dv-step.skip .dv-ic { background: none; box-shadow: inset 0 0 0 1.5px var(--line); color: var(--muted); }
.dv-step.skip { opacity: .7; }
.dv-step.next .dv-ic { background: var(--blue-fill); color: var(--on-blue); box-shadow: 0 0 0 3px rgba(31, 111, 219, .22); }
.dv-step.next { color: var(--text); font-weight: 700; }
.dv-next { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; box-shadow: 0 -1px 0 var(--line); }
.dv-hint { flex: 1 1 100%; display: grid; gap: 2px; min-width: 0; }   /* 說明自己一行，「開始」「略過」並排在下面（手機不會掉成三行） */
.dv-hint b { font-size: 15px; } .dv-hint small { font-size: 13px; color: var(--muted); }
.dv-next .pill { flex: none; min-height: 44px; padding-inline: 18px; } .dv-next .pill.primary { flex: 1; }
.dv-done { margin: 12px 0 0; font-weight: 600; color: var(--green-text, var(--green)); }
/* 七個步驟：卡片窄（手機、桌面的側邊面板）排兩行 4＋3，寬的時候一行；看的是卡片寬度不是螢幕寬度，字不會被拆成兩半 */
@container (max-width: 520px) { .dv-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 8px; } }
.dive-bar { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; margin: 0 0 10px; padding: 8px 12px; border: 0; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.dive-bar > .ic { flex: none; width: 20px; height: 20px; color: var(--link); }
.dive-bar > .ic:last-child { width: 16px; height: 16px; color: var(--muted); }
.dive-bar span { flex: 1; min-width: 0; display: grid; gap: 1px; } .dive-bar b { font-size: 15px; } .dive-bar small { font-size: 13px; color: var(--muted); }
.dive-bar:hover { background: var(--soft); }
#actToday[aria-pressed="true"] .ti { background: var(--blue-fill); color: var(--on-blue); }

/* ---------- 日誌列表（v255）：一支一列的 grid，取代 <table>（iOS 的 <details> 會把表格縮成內容寬）；潛點拿剩下的寬度，數字欄對齊 ---------- */
.log-rows { display: grid; }
.log-head, .log-row { display: grid; grid-template-columns: 52px minmax(0, 1fr) 46px 34px 44px; column-gap: 8px; align-items: center; padding: 0 12px; }
.log-head { position: sticky; top: 0; z-index: 1; min-height: 30px; background: var(--band); color: var(--muted); font: 600 12px var(--font); letter-spacing: .04em; }
.log-row { width: 100%; min-height: 52px; padding-top: 7px; padding-bottom: 7px; border: 0; border-top: 1px solid var(--line); background: none; color: var(--text); text-align: left; font: inherit; cursor: pointer; }
.log-row:hover { background: var(--soft); }
.log-row.active { background: var(--soft); box-shadow: inset 3px 0 var(--blue); }
.lr-date { display: grid; gap: 1px; font-family: var(--font-lat); font-variant-numeric: tabular-nums; }
.lr-date b { font-size: 14px; font-weight: 600; } .lr-date small { font-size: 11.5px; color: var(--muted); }
.lr-site { display: grid; gap: 2px; min-width: 0; }
.lr-name { font-size: 15px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lr-line { display: flex; align-items: center; gap: 6px; min-width: 0; }
.lr-meta { flex: none; display: flex; align-items: center; gap: 4px; color: var(--muted); font-size: 12px; }
.lr-meta .ic { flex: none; width: 13px; height: 13px; }
.lr-who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--muted); }
.lr-n { text-align: right; font: 500 14px var(--font-lat); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lr-n small { margin-left: 1px; font-size: 11px; color: var(--muted); }
.log-head .lr-n { font: inherit; }
#logList .more-row { display: flex; justify-content: center; padding: 10px; border-top: 1px solid var(--line); }
.log-row.no-site .lr-name { color: var(--muted); font-weight: 400; }

/* v265 潛點頁「生物分布」（site-life.js）：月份、這個月可能看到（潛能生態參考）、大家的紀錄 */
.life-body { padding-bottom: 6px; }
.lf-mon { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; margin: 4px -2px 2px; padding: 2px; }
.lf-mon::-webkit-scrollbar { display: none; }
.lf-mon button { position: relative; flex: 1 1 0; min-width: 24px; height: 32px; padding: 0; border: 0; border-radius: var(--pill); background: var(--soft); color: var(--text); font: 600 13px var(--font); font-variant-numeric: tabular-nums; cursor: pointer; }
.lf-mon button[aria-pressed="true"] { background: var(--blue-fill); color: var(--on-blue); }
.lf-mon button.now::after { content: ''; position: absolute; left: 50%; bottom: 3px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentColor; opacity: .7; }
.lf-mon button:focus-visible, .lf-chip:focus-visible, .lf-row:focus-visible { outline: 2px solid var(--accent-2, #38B6FF); outline-offset: 2px; }
.t-h .lf-ref { margin-left: 6px; padding: 1px 6px; border-radius: var(--pill); background: var(--soft); font-size: 11px; font-weight: 600; letter-spacing: 0; }
.lf-lv { display: grid; grid-template-columns: 40px 1fr; gap: 8px; align-items: start; margin: 8px 0; }
.lf-lv-t { padding-top: 8px; font-size: 12px; color: var(--muted); }
.lf-lv-t.lv-common { color: #2E9D5B; }
.lf-lv-t.lv-often { color: #B7800F; }
.lf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lf-chip { display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 4px 12px 4px 9px; border: 0; border-radius: var(--pill); background: var(--soft); color: var(--text); font: 500 14px var(--font); cursor: pointer; box-shadow: inset 0 0 0 .5px var(--lg-sep, var(--line)); }
.lf-chip:active, .lf-row:active { transform: scale(.97); }
.lf-chip svg { width: 18px; height: 18px; flex: none; color: var(--muted); }
.lf-chip[aria-expanded="true"] { background: var(--blue-fill); color: var(--on-blue); }
.lf-chip[aria-expanded="true"] svg { color: currentColor; }
.lf-sig { font-style: normal; font-size: 11px; color: #E8A317; }
.lf-chip[aria-expanded="true"] .lf-sig { color: currentColor; }
.lf-detail { display: grid; grid-template-columns: 72px 1fr; gap: 12px; align-items: start; margin: 4px 0 10px; padding: 12px; border-radius: var(--radius-sm, 14px); background: var(--soft); }
.lf-detail img { width: 72px; height: 72px; border-radius: 16px; object-fit: cover; background: var(--surface); }
.lf-detail b { display: block; font-size: 16px; }
.lf-detail small { display: block; margin-top: 1px; }
.lf-detail p { margin: 6px 0 8px; }
.lf-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.lf-acts .pill { display: inline-flex; align-items: center; gap: 5px; text-decoration: none; }
.lf-acts .ic { width: 15px; height: 15px; }
.lf-com { list-style: none; margin: 4px 0 6px; padding: 0; }
.lf-com li + li { border-top: .5px solid var(--lg-sep, var(--line)); }
.lf-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 6px 0; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.lf-ic { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--soft); color: var(--muted); }
.lf-ic svg { width: 20px; height: 20px; }
.lf-ic-t { font-size: 14px; font-weight: 700; }
.lf-name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lf-name b { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lf-name small { color: var(--muted); font-size: 12px; }
.lf-spark { flex: none; display: flex; align-items: flex-end; gap: 2px; width: 70px; height: 22px; }
.lf-spark i { flex: 1; height: calc(var(--h) * 100%); min-height: 2px; border-radius: 1.5px; background: var(--accent, #1E88E5); opacity: calc(.3 + var(--h) * .7); }
@media (prefers-reduced-motion: reduce) { .lf-chip:active, .lf-row:active { transform: none; } }

/* v265 UI 檢查：潛點動作列還有按鈕在外面的那一邊淡出（place-ui.js 依捲動位置切換） */
#siteCard > .tiles.place-actions.fade-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 64px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 64px), transparent); }
#siteCard > .tiles.place-actions.fade-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px); mask-image: linear-gradient(90deg, transparent, #000 48px); }
#siteCard > .tiles.place-actions.fade-l.fade-r { -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 64px), transparent); mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 64px), transparent); }
/* v265 UI 檢查：還沒有任何日誌時只留開始的地方（統計、目標、圖表、工具列都是空的，先收起來；行前打包與潛水前有關，留著） */
#tab-log.log-none :is(#logStats, #logGoals, #logRecords, #logCharts, #logTagBar, #dupBar, #logExportMenu, #logPeriod) { display: none !important; }
#tab-log.log-none > .row-search, #tab-log.log-none .log-tools > :not(#packOpen) { display: none; }
.log-empty { display: grid; justify-items: center; gap: 10px; margin: 18px 0 8px; padding: 26px 20px 22px; border-radius: var(--radius, 20px); background: var(--soft); text-align: center; }
.log-empty .le-ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: var(--blue-fill); color: var(--on-blue); box-shadow: 0 8px 20px -10px rgba(26, 102, 204, .7); }
#logList .log-empty .le-ic svg { width: 28px; height: 28px; }
.log-empty h2 { margin: 4px 0 0; font-size: 19px; font-weight: 700; letter-spacing: .01em; }
.log-empty p { margin: 0; max-width: 34ch; color: var(--muted); font-size: 14px; line-height: 1.55; }
.log-empty .le-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 6px; }
.log-empty .le-acts .pill { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 18px; }
#logList .log-empty .le-acts svg { width: 17px; height: 17px; }
.dm-site-label.tip-off { visibility: hidden; }   /* v265：和更優先的潛點名稱重疊時先藏起來（app.js declutterTips） */

/* v266 換網域：舊網址上方的搬家提示（move.js） */
.move-bar { position: fixed; z-index: 1300; left: 50%; top: calc(8px + var(--safe-t, 0px)); transform: translateX(-50%); width: min(560px, calc(100vw - 16px)); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 12px 14px; border-radius: 18px; box-shadow: var(--lg-drop, 0 10px 30px rgba(0,0,0,.25)); }
.move-bar .mv-t { flex: 1 1 220px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.move-bar .mv-t b { font-size: 15px; }
.move-bar .mv-t small { color: var(--muted); font-size: 13px; line-height: 1.45; }
.move-bar .mv-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.move-bar .pill { min-height: 40px; text-decoration: none; display: inline-flex; align-items: center; }