/* 共安守護盾 V4 視覺(20260926,照 Harry「九大頁面互動展示 V4.0」的配色與元件)
 * 藍白科技底 + 綠金品牌 + 紅色只給 SOS。只在守護盾版型載入,不影響工地系統。 */
:root { --sh-navy:#12376a; --sh-blue:#1262bb; --sh-sky:#e9f5ff; --sh-green:#0c916d; --sh-gold:#cba24c;
        --sh-ink:#19324b; --sh-muted:#5f7387; --sh-line:#e3ebf1; --sh-red:#ec183c; --sh-bg:#f5f8fc; }

body.sh { background: var(--sh-bg); color: var(--sh-ink); }
body.sh.sh-bg-welcome { background: linear-gradient(180deg, #eaf8ff 0%, #f5f8fc 72%); }

/* 頁首 */
.sh-head { position: sticky; top: 0; z-index: 30; background: #fff; box-shadow: 0 2px 12px #153b620f;
           padding-top: env(safe-area-inset-top); }
.sh-head .in { max-width: 28rem; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; gap: 8px; }
.sh-mark { display: flex; align-items: center; gap: 8px; color: #075a3c; font-weight: 900; font-size: 18px; min-width: 0; }
.sh-mark img { width: 34px; height: 34px; object-fit: contain; flex-shrink: 0; }
.sh-mark span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-circle { width: 40px; height: 40px; border-radius: 50%; background: #edf5ff; color: #115eaa; display: grid; place-items: center; flex-shrink: 0; }

/* 大圖 */
.sh-hero { position: relative; overflow: hidden; border-radius: 22px; min-height: 176px; background-size: cover; background-position: center;
           box-shadow: 0 8px 22px #0a5c9a18; }
.sh-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, #0c356cf0 0%, #0c356c00 55%), linear-gradient(90deg, #0c356cf2, #0c356bb3 55%, #0c356b66); }
.sh-hero .in { position: relative; color: #fff; padding: 20px; max-width: 88%; text-shadow: 0 1px 4px #0004; }
.sh-hero h1 { font-size: 26px; line-height: 1.3; font-weight: 900; margin: 6px 0; }
.sh-hero p { font-size: 13px; line-height: 1.6; }
.sh-hero .tag { display: inline-block; background: #ffffff3d; border: 1px solid #ffffff75; border-radius: 99px; padding: 3px 10px; font-size: 12px; font-weight: 700; }

/* 卡片、區塊標題 */
.sh-card { background: #fff; border: 1px solid #e7edf3; border-radius: 20px; padding: 16px; box-shadow: 0 5px 15px #193d5a0a; }
.sh-card h3 { font-size: 17px; font-weight: 900; color: #173d65; }
.sh-sec { display: flex; justify-content: space-between; align-items: center; margin: 18px 2px 8px; font-size: 16px; font-weight: 900; color: var(--sh-ink); }
.sh-link { color: #0872c5; font-size: 13px; font-weight: 800; padding: 6px 0; }
.sh-muted { color: var(--sh-muted); font-size: 13px; line-height: 1.6; }

/* 標籤 */
.sh-pill { display: inline-flex; align-items: center; gap: 4px; border-radius: 99px; background: #eaf8f1; color: #087e55; font-size: 12px; padding: 4px 10px; font-weight: 800; white-space: nowrap; }
.sh-pill.gold { background: #fff6e5; color: #8a5f12; }
.sh-pill.red { background: #fff0f1; color: #c72c42; }
.sh-pill.blue { background: #e8f4ff; color: #0b61ad; }

/* 按鈕 */
.sh-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 14px; min-height: 48px; padding: 0 16px;
          font-weight: 900; font-size: 15px; color: #fff; background: #116ec5; text-align: center; }
.sh-btn.full { width: 100%; }
.sh-btn.green { background: linear-gradient(110deg, #11a77b, #08765e); }
.sh-btn.red { background: linear-gradient(120deg, #ff2144, #d90e30); box-shadow: 0 7px 20px #ed143633; }
.sh-btn.soft { background: #edf5ff; color: #1260ab; }
.sh-btn.outline { background: #fff; color: #175b9e; border: 1px solid #a9cae8; }
.sh-btn.ghost-red { background: #fff; color: #c3183a; border: 2px solid #f3b3bf; }
.sh-btn:disabled { opacity: .55; }

/* 磚塊(活動、事故類型) */
.sh-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sh-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sh-tile { border: 1px solid #e3eaf0; border-radius: 16px; background: #fff; padding: 12px 6px; min-height: 80px; display: flex; flex-direction: column;
           align-items: center; justify-content: center; gap: 6px; text-align: center; font-size: 14px; font-weight: 800; color: var(--sh-ink); }
.sh-tile .ic { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(135deg, #e5f6ff, #e5f7e8); color: #0b61ad; }
.sh-tile .ic.red { background: #fff0f1; color: #dc2626; }
.sh-tile .ic.gray { background: #f1f5f9; color: #94a3b8; }
.sh-tile .ic.sm { width: 36px; height: 36px; border-radius: 12px; }
.sh-tile.on, .sh-tile:has(input:checked) { border: 2px solid #0a83ca; background: #eff9ff; }
.sh-tile.sm { min-height: 54px; flex-direction: row; font-size: 13px; }

/* 列表 */
.sh-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid #edf1f5; }
.sh-row:last-child { border-bottom: 0; }
.sh-row .main { flex: 1; min-width: 0; }
.sh-row strong { font-size: 15px; display: block; }
.sh-row small { display: block; color: var(--sh-muted); font-size: 12px; margin-top: 2px; }
.sh-ava { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; flex-shrink: 0; font-weight: 900; color: #0b61ad;
          background: linear-gradient(135deg, #e5f6ff, #e5f7e8); }
.sh-ava.round { border-radius: 50%; }
.sh-ava.sm { width: 30px; height: 30px; font-size: 12px; border: 2px solid #fff; }

/* 欄位 */
.sh-label { display: block; font-weight: 800; font-size: 14px; margin: 14px 0 6px; }
.sh-field { width: 100%; border: 1px solid #d3dfe9; border-radius: 12px; padding: 12px; background: #fff; font-size: 16px; color: #193b57; }
.sh-field:focus { outline: none; border-color: #328ad0; box-shadow: 0 0 0 3px #328ad022; }

/* 開關(不用 ws-ui 的圓鈕:加 .peer 讓 ws-ui 不接管) */
input.sh-switch { appearance: none; -webkit-appearance: none; width: 46px; height: 26px; background: #cdd8e1; border-radius: 20px; position: relative; flex-shrink: 0; cursor: pointer; transition: background .2s; border: 0; }
input.sh-switch::before { content: ""; position: absolute; width: 20px; height: 20px; border-radius: 50%; background: #fff; top: 3px; left: 3px; transition: left .2s; box-shadow: 0 1px 3px #0003; }
input.sh-switch:checked { background: #0ba779; }
input.sh-switch:checked::before { left: 23px; }

/* 提示框 */
.sh-notice { background: #fff8e9; border: 1px solid #f3dfb5; border-radius: 12px; padding: 10px 12px; font-size: 13px; color: #845c1a; line-height: 1.6; }

/* 分頁切換 */
.sh-tabs { display: flex; gap: 8px; background: #eef4fa; padding: 4px; border-radius: 14px; }
.sh-tabs a { flex: 1; text-align: center; border-radius: 11px; min-height: 42px; display: grid; place-items: center; font-weight: 800; font-size: 14px; color: #3f607e; }
.sh-tabs a.on { background: #116ec5; color: #fff; box-shadow: 0 3px 10px #116ec533; }
/* V1.3 救援協作頁分頁:「上傳影音總覽」字比較多,改成依字數分寬度 */
#rescue #tabs a { flex: 1 1 auto; padding: 0 4px; }
/* V1.4 全部救援動態大視窗:蓋住整個畫面(在頁首、底部選單之上;彈窗、提示、相機還在更上面) */
#feedWrap.fs { position: fixed; inset: 0; z-index: 50; margin: 0; background: #eef4fa; overflow-y: auto; overscroll-behavior: contain;
  padding: calc(10px + env(safe-area-inset-top)) 10px calc(14px + env(safe-area-inset-bottom)); }
#feedWrap.fs > * { max-width: 28rem; margin-left: auto; margin-right: auto; }
#feedWrap.fs #chat { max-height: none; height: calc(100dvh - 300px); min-height: 240px; }
#feedWrap [data-fs-close], #feedWrap [data-sup-open] { display: none; }   /* 平常畫面沒有「關閉」和「叫出補充」 */
#feedWrap.fs [data-fs-close] { display: grid; }
#feedWrap.fs [data-sup-open] { display: flex; }
#feedWrap.fs [data-fs-hint], #feedWrap.fs [data-fs-hide] { display: none; }
#feedWrap.fs #supWrap { display: none; }
#feedWrap.fs.sup-on #supWrap { display: block; }
#feedWrap.fs.sup-on #chat { height: 38dvh; }

/* 時間軸 */
.sh-tl { position: relative; padding-left: 8px; }
.sh-ev { border-left: 2px solid #d9eaf6; padding: 0 0 16px 18px; position: relative; }
.sh-ev:last-child { padding-bottom: 0; }
.sh-ev::before { content: ""; position: absolute; width: 12px; height: 12px; border-radius: 50%; background: #0aa37b; left: -7px; top: 4px; border: 2px solid #fff; }
.sh-ev.red::before { background: #e11d48; } .sh-ev.gray::before { background: #94a3b8; } .sh-ev.blue::before { background: #0ea5e9; }
.sh-ev strong { font-size: 14px; } .sh-ev small { display: block; color: var(--sh-muted); font-size: 12px; margin-top: 2px; }

/* 下方選單(中間一顆大 SOS) */
.sh-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: #fff; border-top: 1px solid #e3eaf1; box-shadow: 0 -6px 20px #0c35570a;
          padding-bottom: env(safe-area-inset-bottom); }
.sh-nav .in { max-width: 28rem; margin: 0 auto; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) 76px; align-items: start; padding: 0 2px; }   /* V1.5 六格:SOS 在最右邊 */
.sh-tab { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; font-weight: 800; color: #7a8a9c; padding: 6px 0 7px; white-space: nowrap; min-width: 0; letter-spacing: .02em; }
.sh-tab.on { color: #0b62b5; }
/* V1.5 圖示:雙色(淡色底塊 + 細線條);目前這頁在圖示後面加淡藍膠囊 */
.sh-tab-ic { display: grid; place-items: center; width: 48px; height: 30px; border-radius: 999px; transition: background-color .2s, box-shadow .2s; }
.sh-tab-ic svg { width: 23px; height: 23px; }
.sh-tab .sh-duo { fill: currentColor; stroke: none; opacity: .13; }
.sh-tab.on .sh-tab-ic { background: linear-gradient(180deg, #edf5fe, #dcebfb); box-shadow: inset 0 0 0 1px #cde1f6; }
.sh-tab.on .sh-duo { opacity: .24; }
/* 字比較長的語言(越南文、泰文)可以換成兩行,不擠出格子 */
.sh-tab-lb { display: block; max-width: 100%; padding: 0 1px; white-space: normal; text-align: center; line-height: 1.15; overflow-wrap: anywhere; }
/* SOS:最右邊的紅色大圓,比其他按鈕大(比原來 68px 小一點),不貼螢幕邊 */
.sh-tab.sos { margin-top: -24px; color: #d90e30; }
.sh-tab.sos b { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 62px; height: 62px; border-radius: 50%;
                background: radial-gradient(circle at 32% 28%, #ff5a6e, #e3082c 58%, #c40024); box-shadow: 0 6px 18px #e3082c55, inset 0 -3px 6px #9d001d40;
                color: #fff; font-size: 12px; font-weight: 900; border: 4px solid #fff; line-height: 1; gap: 1px; letter-spacing: .04em; }

/* 頁首商標(V6.16) */
.sh-brand { display: flex; align-items: center; gap: 6px; min-width: 0; }
.sh-brand img { width: 38px; height: 38px; object-fit: contain; mix-blend-mode: multiply; flex-shrink: 0; }
.sh-brand b { display: block; font-size: 19px; font-weight: 900; color: #0a6b3b; line-height: 1.1; letter-spacing: .5px; white-space: nowrap; }
.sh-brand small { display: block; font-size: 11px; font-weight: 800; color: #12376a; white-space: nowrap; }
.sh-hbtn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border-radius: 99px; background: #fff;
           border: 1px solid #d5e3ef; color: #12376a; font-size: 13px; font-weight: 800; white-space: nowrap; }
.sh-hbtn.red { background: linear-gradient(120deg, #ff2144, #d90e30); color: #fff; border: 0; }

/* V6.16 共用元件 */
.v6-page-title { font-size: 22px; font-weight: 900; color: #12376a; line-height: 1.25; }
.v6-steps { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: #6a7c8f; }
.v6-steps i { font-style: normal; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #cfd9e3; color: #fff; font-size: 12px; }
.v6-steps .on i { background: #116ec5; } .v6-steps .on { color: #12376a; }
.v6-steps hr { width: 26px; border: 0; border-top: 2px solid #cfd9e3; }
.v6-photo-tile { position: relative; display: block; background: #fff; border: 2px solid #e3eaf0; border-radius: 16px; overflow: hidden; text-align: left; }
.v6-photo-tile img.ph { width: 100%; height: 76px; object-fit: cover; display: block; }
.v6-photo-tile .cap { display: flex; align-items: center; gap: 6px; padding: 7px 8px 8px; }
.v6-photo-tile .cap b { display: block; font-size: 15px; font-weight: 900; color: #12376a; line-height: 1.2; }
.v6-photo-tile .cap small { display: block; font-size: 11px; color: #6a7c8f; line-height: 1.3; }
.v6-photo-tile .ico { width: 30px; height: 30px; border-radius: 10px; background: #e8f4ff; color: #0b61ad; display: grid; place-items: center; flex-shrink: 0; }
.v6-photo-tile.on, .v6-photo-tile:has(input:checked) { border-color: #116ec5; box-shadow: 0 0 0 2px #116ec533; }
.v6-photo-tile .chk { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%; background: #116ec5; color: #fff; display: none; place-items: center; border: 2px solid #fff; }
.v6-photo-tile.on .chk, .v6-photo-tile:has(input:checked) .chk { display: grid; }
.v6-grp { position: relative; flex-shrink: 0; width: 96px; background: #fff; border: 2px solid #e3eaf0; border-radius: 16px; overflow: hidden; text-align: center; }
.v6-grp .ph { width: 100%; height: 58px; object-fit: cover; display: block; background: linear-gradient(135deg, #e5f6ff, #e5f7e8); }
.v6-grp .ph.txt { display: grid; place-items: center; font-size: 24px; font-weight: 900; color: #0b61ad; }
.v6-grp b { display: block; font-size: 13px; font-weight: 900; color: #12376a; margin-top: 4px; padding: 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v6-grp small { display: block; font-size: 11px; color: #6a7c8f; padding-bottom: 6px; }
.v6-grp .chk { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; background: #cfd9e3; color: #fff; display: grid; place-items: center; }
.v6-grp.on, .v6-grp:has(input:checked) { border-color: #116ec5; }
.v6-grp.on .chk, .v6-grp:has(input:checked) .chk { background: #16a34a; }
.v6-bar { position: fixed; left: 0; right: 0; z-index: 35; bottom: calc(4.6rem + env(safe-area-inset-bottom)); padding: 0 12px; }
.v6-bar .in { max-width: 28rem; margin: 0 auto; background: #fff; border-radius: 18px; box-shadow: 0 8px 26px #0c355730; padding: 10px 12px; display: flex; align-items: center; gap: 10px; }
.v6-map { width: 100%; height: 240px; border-radius: 16px; overflow: hidden; background: #dfe9f1; z-index: 0; }
.v6-chip { display: inline-flex; align-items: center; gap: 4px; border-radius: 99px; background: #eef4fa; color: #3f607e; font-size: 13px; font-weight: 800; padding: 0 12px; min-height: 34px; white-space: nowrap; }
.v6-chip.on, .v6-chip:has(input:checked) { background: #116ec5; color: #fff; }
.v6-sos-btn { position: relative; width: clamp(132px, 40vw, 168px); height: clamp(132px, 40vw, 168px); border-radius: 50%; border: 0; background: radial-gradient(circle at 35% 30%, #ff5a6e, #e1062c 60%, #b8001f);
              color: #fff; box-shadow: 0 0 0 10px #ff203f22, 0 0 0 22px #ff203f11, 0 12px 30px #e1062c66; display: grid; place-items: center; touch-action: none; user-select: none; -webkit-user-select: none; }
.v6-sos-btn b { font-size: 44px; font-weight: 900; line-height: 1; letter-spacing: 2px; }
.v6-sos-btn small { font-size: 12px; font-weight: 700; opacity: .95; }
.v6-sos-btn svg.ring { position: absolute; inset: -8px; width: calc(100% + 16px); height: calc(100% + 16px); transform: rotate(-90deg); pointer-events: none; box-shadow: none !important; }
.v6-sos-btn svg.ring circle { fill: none; stroke: #fff; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 578; stroke-dashoffset: 578; }
.v6-sos-btn.hold svg.ring circle { transition: stroke-dashoffset 3s linear; stroke-dashoffset: 0; }
.v6-msg { max-width: 82%; border-radius: 16px; padding: 8px 12px; font-size: 14px; line-height: 1.5; background: #fff; border: 1px solid #e3eaf0; }
.v6-msg.mine { margin-left: auto; background: #116ec5; color: #fff; border: 0; }
.v6-msg.sender:not(.mine) { background: #fff0f1; border-color: #f5c2c9; }
.v6-msg .who { font-size: 12px; font-weight: 800; opacity: .8; }
.v6-msg img { border-radius: 10px; margin-top: 4px; max-height: 180px; }

/* 歡迎頁 */
.sh-welcome-art { height: 250px; background-size: cover; background-position: center; border-radius: 22px; position: relative; overflow: hidden; }
.sh-welcome-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, #fff 0%, transparent 60%); }
.sh-welcome-logo { width: 150px; display: block; margin: -80px auto 0; position: relative; z-index: 1; mix-blend-mode: multiply; }

/* 邀請頁分享按鈕(V6 第 08 頁) */
.v6-share { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: #3f607e; min-height: 58px; border-radius: 12px; padding: 4px 0; }
.v6-share > span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 99px; color: #fff; }
body.sh .v6-share, body.sh .v6-share em { font-size: 12px; font-style: normal; line-height: 1.2; text-align: center; overflow-wrap: anywhere; }
html:not([lang^=zh]) body.sh .v6-share em { font-size: 11px; }
.v6-share:active { background: #eef4fa; }

/* 字級(20260927 V6):工地版 ws-ui.css 把小字一律拉到 16px(年長工人看);
   守護盾照 Harry V6 的密度,最小 13px,不然標籤會被擠成兩行 */
body.sh .text-\[10px\], body.sh .text-\[11px\], body.sh .text-xs { font-size: 13px !important; line-height: 1.45 !important; }
body.sh .text-\[13px\] { font-size: 13px !important; line-height: 1.45 !important; }
body.sh .text-sm { font-size: 14px !important; line-height: 1.5 !important; }

/* SOS 頁快速事故標籤:五欄一列,4 個字要擠得下 */
.v6-inc { font-size: 12.5px; font-weight: 700; color: #12376a; line-height: 1.3; white-space: nowrap; letter-spacing: -.3px; }
@media (max-width: 380px) { .v6-sos-btn b { font-size: 36px; } }

/* 教育機構頁(V6 第 09 頁):區塊編號、步驟小卡、成效數字 */
.v6-num { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: #116ec5; color: #fff; font-weight: 900; font-size: 14px; display: grid; place-items: center; }
.v6-step-tile { background: #f5f8fb; border: 1px solid #e3eaf0; border-radius: 12px; padding: 8px 2px; text-align: center; min-width: 0; }
.v6-step-tile.on { background: #eaf4fd; border-color: #b9d8f3; }
.v6-step-tile b { display: block; font-size: 12px; font-weight: 800; color: #12376a; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v6-step-tile small { display: block; font-size: 11px; color: #6a7c8f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v6-stat { background: #f7fafc; border: 1px solid #e7edf3; border-radius: 12px; padding: 8px 2px; text-align: center; min-width: 0; }
.v6-stat small { display: block; font-size: 11px; font-weight: 700; color: #3f607e; line-height: 1.25; overflow-wrap: anywhere; }
.v6-stat b { display: block; font-size: 20px; font-weight: 900; color: #12376a; line-height: 1.25; }
.v6-stat em { display: block; font-style: normal; font-size: 10.5px; color: #6a7c8f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html:not([lang^=zh]) .v6-inc { white-space: normal; letter-spacing: 0; font-size: 11px; line-height: 1.2; overflow-wrap: anywhere; text-align: center; }

/* 頁首步驟條:只有目前這一步顯示文字,其他只留圓圈數字(外語字長,避免壓到商標) */
.v6-steps span:not(.on) { font-size: 0; gap: 0; }
.v6-steps hr { width: 16px; }
.sh-brand > span { min-width: 0; overflow: hidden; }
.sh-brand b, .sh-brand small { overflow: hidden; text-overflow: ellipsis; }
/* 外語活動名稱較長:照片卡標題縮一點,不要被折成兩行 */
html:not([lang^=zh]) .v6-photo-tile .cap b { font-size: 13.5px; letter-spacing: -.2px; }

/* 外語版面(越南文、泰文較長):步驟條只留數字、活動卡拿掉小圖示讓名稱一行放得下、泰文字比較高 */
html:not([lang^=zh]) .v6-steps span { font-size: 0; gap: 0; }
html:not([lang^=zh]) .v6-photo-tile .cap .ico { display: none; }
html:not([lang^=zh]) .v6-photo-tile .cap b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[lang=th] .sh-brand b { line-height: 1.3; font-size: 17px; }
html[lang=th] .sh-brand small { line-height: 1.35; }
/* 外語商標名稱比較長:頁首帳號按鈕只留頭像,商標才放得下(中文版不變) */
html:not([lang^=zh]) .sh-me-name { display: none; }
html:not([lang^=zh]) summary:has(.sh-me-name) { padding-right: 4px; }
/* 邀請頁 QR 旁的說明:外語字長,放不下就排到 QR 下面 */
html:not([lang^=zh]) .inv-qr { flex-wrap: wrap; justify-content: center; }
html:not([lang^=zh]) .inv-qr > div:last-child { min-width: 190px; }

/* 窄手機(≤380px):頁首右邊按鈕只留圖示、帳號只留頭像,商標名稱才不會被切掉 */
@media (max-width: 380px) {
  .sh-me-name, .hb-t { display: none; }
  summary:has(.sh-me-name) { padding-right: 4px; }
  .sh-brand img { width: 32px; height: 32px; }
  .sh-brand b { letter-spacing: 0; }
}
/* 外語:地圖、重新定位只留圖示,地址才看得到 */
html:not([lang^=zh]) .nz-hide { display: none; }
/* 首頁常用活動:外語名稱縮一點,不要超出小卡 */
html:not([lang^=zh]) .fav-lb { font-size: 11px; letter-spacing: -.3px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; padding: 0 2px; }
/* 外語問候、守護狀態字比較長:縮一點放一行 */
html:not([lang^=zh]) .sh-hello { font-size: 22px; }
html:not([lang^=zh]) .sh-status { font-size: 16px; }

/* 補充上傳資訊的五個按鈕(V1.1) */
.sh-att { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 70px; border-radius: 14px; background: #fff;
  border: 1px solid #e3eaf0; font-size: 12px; font-weight: 800; color: #12376a; text-align: center; line-height: 1.2; padding: 4px 2px; }
html[lang^=zh] .sh-att span { white-space: nowrap; font-size: 11.5px; letter-spacing: -.3px; }
html:not([lang^=zh]) .sh-att { font-size: 11px; letter-spacing: -.2px; padding: 4px 1px; }
/* 救援對話引用圖片(V1.1) */
.v6-msg .v6-quote { display: flex; align-items: center; gap: 6px; border-left: 3px solid #116ec5; background: #eef5fc; border-radius: 8px; padding: 4px 6px; margin: 2px 0 4px; }
.v6-msg .v6-quote img { width: 44px !important; height: 44px !important; object-fit: cover; border-radius: 6px; margin: 0 !important; }
.v6-msg .v6-quote span { font-size: 11px; color: #3f607e; font-weight: 700; }
.v6-msg .v6-qbtn { display: inline-flex; align-items: center; margin-top: 4px; border-radius: 99px; background: #fff; border: 1px solid #cfe0f1; color: #0b61ad; font-size: 12px; font-weight: 800; padding: 2px 10px; min-height: 28px; }
/* V1.2:動態裡的相片影音 */
.v6-msg .v6-media { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 4px; }
.v6-msg .v6-media > span { display: flex; flex-direction: column; align-items: flex-start; }
.v6-msg .v6-media img, .v6-msg .v6-media video { width: 100%; height: 110px; object-fit: cover; border-radius: 10px; margin: 0; background: #000; }
.v6-msg .v6-media audio { grid-column: 1 / -1; width: 100%; height: 40px; }
.v6-msg .v6-media > span.aud { grid-column: 1 / -1; }
.v6-msg .v6-body { overflow-wrap: anywhere; }

/* ================= V1.8 首頁(Harry:照「樣版圖」的比例 —— 矮、緊湊;字最小 11px 以外都照原圖;390 寬時主視覺到守護群組大致一屏看完) ================= */
.sh-head-mid { flex: 1 1 auto; min-width: 0; text-align: right; line-height: 1.3; }
/* 非中文的日期、問候比較長:首頁頁首只留商標圖,名稱文字收起來 */
html:not([lang^=zh]) .sh-head:has(.sh-head-mid) .sh-brand > span { display: none; }
.sh-head-mid .h17-date { font-size: 11px; font-weight: 700; color: #3f607e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-head-mid .h17-hi { font-size: 14px; font-weight: 900; color: #12376a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-head:has(.sh-head-mid) .sh-me-name { display: none; }
.sh-head:has(.sh-head-mid) summary:has(.sh-me-name) { padding-right: 4px; }
.sh-head:has(.sh-head-mid) .sh-brand small { display: none; }
@media (min-width: 400px) { .sh-head:has(.sh-head-mid) .sh-brand small { display: block; } }

/* 區塊間距:原圖很緊湊 */
.h17.space-y-3 > * + * { margin-top: 5px; }   /* V1.9 Harry:區塊間距再縮小 */

/* ② 主視覺(原圖約 1/3 寬高比) */
/* V1.9 Harry:主圖不要壓縮,跟活動設定頁的主圖一樣大(212,要有氣勢) */
.h17-hero { position: relative; min-height: 212px; margin-left: -4px; margin-right: -4px; border-radius: 22px; background-size: cover; background-position: 70% center; overflow: hidden; display: flex; align-items: center; }
.h17-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #0b2f66d9 0%, #0b2f6680 45%, #0b2f6600 72%); }
.h17-hero-in { position: relative; padding: 18px 20px; max-width: 70%; color: #fff; }
.h17-hero-t { font-size: 26px; font-weight: 900; line-height: 1.22; letter-spacing: .5px; text-shadow: 0 2px 8px #0005; }
.h17-hero-t::after { content: ''; display: block; width: 72%; height: 5px; margin-top: 7px; border-radius: 99px; background: linear-gradient(90deg, #ffc21a, #ff9500); }
.h17-hero-s { margin-top: 8px; font-size: 14px; font-weight: 700; line-height: 1.4; text-shadow: 0 1px 6px #0006; }

/* ③ 天氣列:細長一條,每格「圖示在左、字在右」 */
.h17-wx { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)) auto; align-items: center; min-height: 46px; background: #fff; border-radius: 14px; box-shadow: 0 3px 12px #0c355712; padding: 5px 6px 5px 8px; column-gap: 0; }
.h17-wx > * + * { border-left: 1px solid #e6edf4; }
.h17-wx-main { display: flex; align-items: center; gap: 4px; text-align: left; min-width: 0; padding-right: 4px; overflow: hidden; }
.h17-wx-main > span { display: block; overflow: hidden; }
.h17-wx-main .h17-wx-ic { width: 24px; height: 24px; color: #f59e0b; flex-shrink: 0; }
.h17-wx-main small { display: block; font-size: 10.5px; font-weight: 700; color: #4b6480; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h17-wx-main b { display: block; font-size: 17px; font-weight: 900; color: #12376a; line-height: 1.05; white-space: nowrap; }
.h17-wx-cell { display: flex; flex-direction: row; align-items: center; gap: 2px; padding: 0 2px 0 4px; min-width: 0; overflow: hidden; }
.h17-wx-cell svg { width: 13px; height: 13px; flex-shrink: 0; }
.h17-wx-cell small { display: block; font-size: 10.5px; letter-spacing: -.2px; font-weight: 700; color: #4b6480; line-height: 1.15; white-space: nowrap; }
.h17-wx-cell b { display: block; font-size: 13px; font-weight: 900; color: #12376a; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h17-wx-cell > span { min-width: 0; }
/* 英文、越南文、泰文的標籤比較長:可以換兩行,不擠出格子 */
html:not([lang^=zh]):not([lang=ja]) .h17-wx-cell small { white-space: normal; overflow-wrap: anywhere; line-height: 1.1; }
.h17-wx-more { align-self: center; margin-left: 4px; border: 0 !important; border-radius: 99px; background: #eaf3fd; color: #0b62b5; font-size: 10.5px !important; font-weight: 800; padding: 4px 7px; line-height: 1.2; white-space: nowrap; }   /* ws-ui.css 對 button 有 1rem !important(防 iOS 放大),這顆要蓋過去 */
.h17-wx-more-s { display: none; }
.h17-wx-detail { grid-column: 1 / -1; border-left: 0 !important; margin-top: 5px; padding-top: 5px; border-top: 1px dashed #e0e8f0; font-size: 11.5px; font-weight: 700; color: #3f607e; }

/* ④ 即時守護|Logo|預約守護(矮卡、副標一行、有 ›,盾牌凸出卡片) */
.h17-two { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 52px minmax(0, 1fr); align-items: center; min-height: 56px; margin-top: 8px !important; }
.h17-now, .h17-plan { display: flex; align-items: center; gap: 5px; min-height: 52px; border-radius: 14px; padding: 6px 8px; box-shadow: 0 3px 10px #0c355712; min-width: 0; }
.h17-now { background: linear-gradient(135deg, #fff1f2, #ffe4e6); border: 1px solid #fecdd3; margin-right: -26px; padding-right: 23px; }
.h17-plan { background: linear-gradient(135deg, #eff6ff, #dbeafe); border: 1px solid #bfdbfe; margin-left: -26px; padding-left: 25px; }
.h17-now b, .h17-plan b { display: block; font-size: 15px; font-weight: 900; line-height: 1.2; white-space: nowrap; }
.h17-now b { color: #e11d48; }
.h17-plan b { color: #0b62b5; }
.h17-now small, .h17-plan small { display: block; font-size: 10.5px; letter-spacing: -.3px; font-weight: 700; color: #4b5563; line-height: 1.25; }
.h17-two-ic { flex-shrink: 0; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; color: #fff; }
.h17-two-ic svg { width: 18px; height: 18px; }
.h17-two-ic.red { background: linear-gradient(145deg, #ff4d63, #d90e30); box-shadow: 0 3px 8px #d90e3040; }
.h17-two-ic.blue { background: linear-gradient(145deg, #3b8cff, #0a6cff); box-shadow: 0 3px 8px #0a6cff40; }
.h17-two-go { width: 13px; height: 13px; flex-shrink: 0; margin-left: auto; color: #6b7280; }
.h17-two-logo { position: relative; z-index: 2; width: 66px; height: 66px; margin: -10px -7px; object-fit: contain; mix-blend-mode: multiply; filter: drop-shadow(0 4px 8px #0a6b3b33); justify-self: center; }

/* ⑤ 守護進行中(一條矮橫條) */
.h17-live { position: relative; display: flex; align-items: center; gap: 8px; min-height: 58px; border-radius: 14px; padding: 6px 10px; overflow: hidden;
  background: linear-gradient(90deg, #f0fdf4 0%, #f0fdf4f2 50%, #f0fdf400 100%), var(--bg) right center / 55% auto no-repeat, #f0fdf4; border: 1.5px solid #86efac; box-shadow: 0 3px 10px #0c355712; }
.h17-live.off { background: #fff; border: 1px solid #e3eaf0; }
.h17-live-logo { width: 40px; height: 40px; object-fit: contain; flex-shrink: 0; mix-blend-mode: multiply; }
.h17-live-off-ic { width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; background: #f1f5f9; color: #94a3b8; display: grid; place-items: center; }
.h17-live-off-ic svg { width: 22px; height: 22px; }
.h17-live-t { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.h17-live-t b { font-size: 15px; font-weight: 900; color: #0a6b3b; line-height: 1.2; }
.h17-live.off .h17-live-t b { color: #374151; }
.h17-live-pill { display: inline-flex; align-items: center; gap: 3px; border-radius: 99px; background: #16a34a; color: #fff; font-size: 10px; font-weight: 900; padding: 0 6px; line-height: 1.6; }
.h17-live-pill::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #fff; }
.h17-live-s { font-size: 11px; color: #374151; line-height: 1.35; margin-top: 1px; }
.h17-live-s svg { width: 13px; height: 13px; }
.h17-live-btn { flex-shrink: 0; position: relative; z-index: 1; border-radius: 99px; background: #fff; color: #0b62b5; font-size: 13px; font-weight: 800; padding: 5px 11px; box-shadow: 0 2px 8px #0c355722; white-space: nowrap; }

/* 區塊標題(小、緊) */
.h17-sec { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 9px !important; }
.h17-sec > b { font-size: 15px; font-weight: 900; color: #12376a; padding-left: 7px; border-left: 3px solid #0a6cff; line-height: 1.2; }
.h17-sec > a { font-size: 12px; font-weight: 800; color: #0b62b5; white-space: nowrap; }
.h17-sec + * { margin-top: 4px !important; }

/* ⑥ 活動兩大類(矮長卡) */
.h17-cat { position: relative; display: flex; align-items: center; gap: 6px; min-height: 58px; border-radius: 14px; padding: 6px 26px 6px 7px; color: #fff; background-size: cover; background-position: center; overflow: hidden; }
.h17-cat::before { content: ''; position: absolute; inset: 0; }
.h17-cat.life::before { background: linear-gradient(90deg, #0b4fa8e6 0%, #0b4fa8a6 60%, #0b4fa833 100%); }
.h17-cat.work::before { background: linear-gradient(90deg, #c2410ce6 0%, #c2410ca6 60%, #c2410c33 100%); }
.h17-cat > * { position: relative; }
.h17-cat > .min-w-0 { padding-right: 0; }
.h17-cat-ic { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fffc; display: grid; place-items: center; }
.h17-cat-ic svg { width: 20px; height: 20px; }
.h17-cat b { display: block; font-size: 15px; font-weight: 900; line-height: 1.2; margin-bottom: 1px; }
.h17-cat small { display: block; font-size: 10.5px; font-weight: 700; line-height: 1.3; opacity: .95; letter-spacing: -.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h17-cat > .min-w-0 { overflow: hidden; }
.h17-cat-go { position: absolute; right: 6px; top: 50%; margin-top: -11px; width: 22px; height: 22px; border-radius: 50%; background: #fff; color: #12376a; display: grid; place-items: center; }
.h17-cat-go svg { width: 13px; height: 13px; }

/* ⑦ 我的常用活動(扁長方形照片,寬約高的 2 倍) */
.h17-fav { position: relative; display: block; aspect-ratio: 1.85 / 1; border-radius: 10px; overflow: hidden; background: #dbeafe; box-shadow: 0 2px 8px #0c355714; }
.h17-fav img, .h17-fav-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.h17-fav-ph { display: grid; place-items: center; background: linear-gradient(135deg, #e0f2fe, #d1fae5); color: #0b61ad; }
.h17-fav::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, #0b1f3fcc 0%, #0b1f3f00 60%); }
.h17-fav b { position: absolute; left: 3px; right: 3px; bottom: 3px; z-index: 1; text-align: center; color: #fff; font-size: 12px; font-weight: 900; line-height: 1.15; text-shadow: 0 1px 4px #0008; }
.h17-fav.on { outline: 2.5px solid #0a6cff; outline-offset: -2.5px; }
.h17-fav-on { position: absolute; top: 3px; right: 3px; z-index: 1; width: 16px; height: 16px; border-radius: 50%; background: #0a6cff; color: #fff; display: grid; place-items: center; }

/* ⑧ 今日小提醒(一行細條) */
.h17-tip { display: flex; align-items: center; gap: 7px; min-height: 36px; border-radius: 10px; padding: 4px 10px; background: linear-gradient(90deg, #fffbeb, #fef3c7); border: 1px solid #fde68a; }
.h17-tip-ic { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: #fbbf24; color: #fff; display: grid; place-items: center; }
.h17-tip-ic svg { width: 15px; height: 15px; }
.h17-tip b { font-size: 13px; font-weight: 900; color: #12376a; }
.h17-tip small { font-size: 11px; color: #4b5563; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ⑨ 本次守護群組(矮卡:圖示在左、頭像在右上,名稱人數在下) */
.h17-grps { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 18px) / 4); gap: 6px; overflow-x: auto; padding: 1px 1px 3px; scrollbar-width: none; }
.h17-grps::-webkit-scrollbar { display: none; }
.h17-grp { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 3px; align-content: center; min-height: 50px; border-radius: 10px; background: #fff; border: 1px solid #e3eaf0; padding: 5px 6px; box-shadow: 0 2px 8px #0c35570f; min-width: 0; }
.h17-grp.on { border-color: #93c5fd; }
.h17-grp-top { display: contents; }
.h17-grp-top .h17-grp-ic { grid-row: 1 / 4; align-self: center; }
.h17-grp b, .h17-grp small { grid-column: 2; }
.h17-grp .h17-ava { grid-column: 2; grid-row: 1; margin-bottom: 1px; min-height: 16px; }
.h17-grp-ic { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: #e8f2fd; color: #0b62b5; display: grid; place-items: center; }
.h17-grp-ic svg { width: 15px; height: 15px; }
.h17-ava { display: flex; min-width: 0; }
.h17-ava i { font-style: normal; width: 16px; height: 16px; margin-left: -4px; border-radius: 50%; border: 1.5px solid #fff; background: #cbd5e1; color: #fff; font-size: 8.5px; font-weight: 900; display: grid; place-items: center; }
.h17-ava i:first-child { margin-left: 2px; }
.h17-ava i:nth-child(2) { background: #94a3b8; }
.h17-ava i:nth-child(3) { background: #64748b; }
.h17-grp b { font-size: 11.5px; letter-spacing: -.2px; font-weight: 900; color: #12376a; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h17-grp small { font-size: 11px; color: #64748b; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h17-grp-chk { position: absolute; top: 4px; right: 4px; width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid #cbd5e1; display: grid; place-items: center; color: #fff; }
.h17-grp-chk svg { width: 10px; height: 10px; }
.h17-grp.on .h17-grp-chk { background: #16a34a; border-color: #16a34a; }
.h17-grp.add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border-style: dashed; border-color: #bfdbfe; background: #f5f9ff; color: #0b62b5; text-align: center; }
.h17-grp.add svg { width: 20px; height: 20px; }

/* 小手機(<380):再縮一點,不擠出框 */
@media (max-width: 379px) {
  .h17-hero-t { font-size: 23px; }
  .h17-wx-main .h17-wx-ic { display: none; }
  .h17-wx-main b { font-size: 15px; }
  .h17-wx-cell svg { display: none; }
  .h17-wx-cell { padding: 0 2px 0 4px; }
  .h17-wx-more { padding: 4px 6px; }
  .h17-wx-more-l { display: none; }
  .h17-wx-more-s { display: inline; }
  .h17-two { grid-template-columns: minmax(0, 1fr) 46px minmax(0, 1fr); }
  .h17-two-logo { width: 58px; height: 58px; }
  .h17-two-ic { width: 28px; height: 28px; }
  .h17-now b, .h17-plan b { font-size: 14px; }
  .h17-two-go { display: none; }
  .h17-cat b { font-size: 14px; }
  .h17-cat small { white-space: normal; }
  .h17-grps { grid-auto-columns: calc((100% - 12px) / 3); }
}

/* ===== 20261012 V2.0 極簡首頁(hm-*)與即時守護(gd-*) ===== */
.hm-hero { position: relative; margin: 0 -16px; aspect-ratio: 1024 / 1115; background-size: cover; background-position: center top; container-type: inline-size; }
.hm-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5%; background: linear-gradient(180deg, #f5f8fc00, var(--sh-bg)); pointer-events: none; }
.hm-copy { position: absolute; left: 6cqw; top: 6cqw; width: 66cqw; }
.hm-title { font-size: 9.4cqw; line-height: 1.22; font-weight: 900; color: #12376a; letter-spacing: .02em; text-shadow: 0 2px 10px #ffffffcc; }
.hm-title em { font-style: normal; color: #c89a2e; }
.hm-sub { margin-top: 3cqw; font-size: 4.5cqw; line-height: 1.55; font-weight: 800; color: #19324b; text-shadow: 0 1px 6px #ffffffe6; }
/* 紅鈕畫在圖上:紅色圓 x 340~690、y 760~1110(圖 1024×1115);圖示在上半,字放下半 */
.hm-sos { position: absolute; left: 33.2%; top: 68.2%; width: 34.2%; aspect-ratio: 1; border-radius: 50%;
          display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 3.6cqw; color: #fff; text-align: center; }
.hm-sos b { font-size: 7cqw; line-height: 1; font-weight: 900; letter-spacing: .02em; text-shadow: 0 2px 6px #0004; }
.hm-sos span { font-size: 3.8cqw; line-height: 1.25; font-weight: 900; margin-top: .6cqw; text-shadow: 0 1px 4px #0004; }
.hm-sos:active { transform: scale(.97); }
.hm-cap { margin: -6px auto 0; width: fit-content; position: relative; z-index: 1; background: #12376acc; color: #fff; font-size: 14px; font-weight: 800; border-radius: 99px; padding: 5px 16px; }
.hm-gold { text-align: center; margin: 10px 0 4px; }
.hm-gold span { display: inline-block; font-size: 24px; font-weight: 900; font-style: italic; letter-spacing: .06em;
                background: linear-gradient(180deg, #e9c46a, #a8771c); -webkit-background-clip: text; background-clip: text; color: transparent;
                padding: 0 26px; position: relative; }
.hm-gold span::before, .hm-gold span::after { content: ""; position: absolute; top: 55%; width: 22px; height: 3px; border-radius: 3px; background: #d8ad4f; }
.hm-gold span::before { left: 0; } .hm-gold span::after { right: 0; }
.hm-scenes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.hm-scene { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; cursor: pointer; }
.hm-scene img { width: 100%; max-width: 116px; aspect-ratio: 1; border-radius: 50%; object-fit: cover; box-shadow: 0 6px 16px #a8771c33; transition: transform .15s; }
.hm-scene b { font-size: 16px; font-weight: 900; color: #12376a; line-height: 1.3; }
.hm-scene:active img { transform: scale(.96); }
.hm-scene.on img { outline: 3px solid #0c916d; outline-offset: 2px; }
/* 選中狀態由 JS 切 .on(舊瀏覽器沒有 :has) */
.hm-scene.pick:not(.on) img { opacity: .55; }
.hm-scene.pick.on b { color: #0c916d; }
.hm-center { position: relative; background: #fff; border: 1px solid #e7edf3; border-radius: 20px; padding: 14px 14px 6px; box-shadow: 0 5px 15px #193d5a0f; }
.hm-center-link { position: absolute; inset: 0; border-radius: 20px; z-index: 0; }
.hm-center-head { display: flex; align-items: center; justify-content: space-between; border-left: 4px solid #0c916d; padding-left: 8px; }
.hm-center-head b { font-size: 18px; font-weight: 900; color: #12376a; }
.hm-center-all { font-size: 13px; font-weight: 800; color: #19324b; }
.hm-center-sub { font-size: 13px; color: var(--sh-muted); margin: 2px 0 6px 12px; }
.hm-item { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid #edf1f5; }
.hm-item img { width: 76px; height: 76px; border-radius: 14px; object-fit: cover; flex-shrink: 0; }
.hm-item-t { display: block; font-size: 17px; font-weight: 900; color: #12376a; margin: 3px 0 1px; }
.hm-item small { display: block; font-size: 12.5px; color: #44586c; line-height: 1.5; }
.hm-empty { position: relative; z-index: 0; font-size: 13px; color: var(--sh-muted); padding: 10px 0 8px; border-top: 1px solid #edf1f5; }

.gd-step { font-size: 12px; font-weight: 800; color: #0c916d; letter-spacing: .04em; }
.gd-grp { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 4px; border-top: 1px solid #edf1f5; }
.gd-grp input { width: 20px; height: 20px; accent-color: #0c916d; flex: none; }
.gd-grp b { display: block; font-size: 15px; color: #12376a; }
.gd-grp small { display: block; font-size: 12px; color: var(--sh-muted); }
.gd-chip span { display: grid; place-items: center; min-height: 44px; border-radius: 12px; border: 1px solid #dfe7ee; background: #fff; font-size: 14px; font-weight: 800; color: #44586c; }
.gd-chip input:checked + span { border-color: #0c916d; background: #eaf8f1; color: #087e55; }
.gd-card { background: #fff; border: 1px solid #e7edf3; border-radius: 20px; padding: 16px; box-shadow: 0 5px 15px #193d5a0f; border-top: 4px solid #0c916d; }
.gd-card.done { border-top-color: #1262bb; }
.gd-card-img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.gd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; margin-top: 14px; }
.gd-grid small { display: block; font-size: 12px; color: var(--sh-muted); }
.gd-grid b { font-size: 15px; font-weight: 900; color: #19324b; word-break: break-word; }
.gd-timer { font-size: 22px !important; color: #0c916d !important; font-variant-numeric: tabular-nums; }
.gd-tl { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid #dbe6ef; }
.gd-tl li { position: relative; display: flex; gap: 10px; padding: 6px 0; font-size: 14px; color: #19324b; }
.gd-tl li::before { content: ""; position: absolute; left: -20px; top: 12px; width: 10px; height: 10px; border-radius: 50%; background: #1262bb; }
.gd-tl li.now::before { background: #0c916d; box-shadow: 0 0 0 4px #0c916d33; }
.gd-tl time { flex: none; width: 3.2em; font-weight: 800; color: #5f7387; font-variant-numeric: tabular-nums; }

/* 舊瀏覽器不支援 cqw:首頁主視覺在手機上就是滿版寬,改用 vw(最寬 448px 封頂) */
@supports not (width: 1cqw) {
  .hm-copy { left: min(6vw, 27px); top: min(6vw, 27px); width: min(66vw, 296px); }
  .hm-title { font-size: min(9.4vw, 42px); }
  .hm-sub { margin-top: min(3vw, 13px); font-size: min(4.5vw, 20px); }
  .hm-sos { padding-bottom: min(3.6vw, 16px); }
  .hm-sos b { font-size: min(7vw, 31px); }
  .hm-sos span { font-size: min(3.8vw, 17px); margin-top: min(.6vw, 3px); }
}

/* 20261019 智慧行跡守護 */
.tr-switch { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.tr-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tr-knob { flex: none; position: relative; width: 50px; height: 30px; border-radius: 999px; background: #cbd5e1; transition: background .2s; }
.tr-knob::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px #0003; transition: transform .2s; }
.tr-switch input:checked + .tr-knob { background: #0c916d; }
.tr-switch input:checked + .tr-knob::after { transform: translateX(20px); }
.tr-switch input:focus-visible + .tr-knob { outline: 3px solid #1262bb55; outline-offset: 2px; }
.tr-switch b { display: block; font-size: 16px; font-weight: 900; color: #12376a; }
.tr-switch small { display: block; font-size: 12px; color: var(--sh-muted); }
.tr-res { display: grid; gap: 6px; margin-top: 6px; font-size: 13px; color: #5f7387; }
.tr-res button { text-align: left; min-height: 44px; padding: 8px 12px; border-radius: 12px; border: 1px solid #dfe7ee; background: #fff; font-size: 14px; color: #19324b; }
.tr-picked { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 8px 12px; border-radius: 12px; background: #eaf8f1; color: #087e55; font-size: 14px; font-weight: 800; }
.tr-picked span { flex: 1; min-width: 0; word-break: break-word; }
.tr-picked button { flex: none; min-height: 32px; padding: 0 10px; border-radius: 8px; border: 1px solid #b7e4d0; background: #fff; font-size: 13px; color: #087e55; }
.tr-picked.hidden { display: none; }
.tr-warn { font-size: 13px; font-weight: 700; color: #92400e; background: #fffbeb; border: 1px solid #fde68a; border-radius: 12px; padding: 8px 12px; }
.tr-map { height: 300px; border-radius: 14px; overflow: hidden; border: 1px solid #e7edf3; background: #f1f5f9; position: relative; z-index: 0; }
.tr-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 8px; font-size: 12px; color: #5f7387; }
.tr-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; vertical-align: -1px; }
.tr-now { animation: tr-pulse 1.6s ease-in-out infinite; }
@keyframes tr-pulse { 50% { stroke-opacity: .3; } }
/* 20261019 Harry #551:智慧行跡 最新位置 / 時間軸箭頭 / 全螢幕 / 儲存 */
.tr-tools { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.tr-tool { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 8px; border-radius: 12px; border: 1px solid #cfdcea; background: #fff; color: #12376a; font-size: 14px; font-weight: 800; white-space: nowrap; }
.tr-tool svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tr-tool-main { background: #dc2626; border-color: #dc2626; color: #fff; }
.tr-tool:disabled { opacity: .6; }
.tr-last { margin-bottom: 8px; padding: 10px 12px; border-radius: 12px; background: #fef2f2; border: 1px solid #fecaca; font-size: 14px; color: #7f1d1d; }
.tr-last-h { font-weight: 900; }
.tr-last-addr { font-size: 16px; font-weight: 900; color: #111827; margin-top: 2px; word-break: break-word; }
.tr-last-ll { font-size: 12px; color: #6b7280; margin-top: 2px; }
.tr-save { margin-bottom: 8px; padding: 10px 12px; border-radius: 12px; background: #f1f6fb; border: 1px solid #dfe7ee; }
.tr-dl { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 44px; padding: 6px 10px; border-radius: 12px; border: 1px solid #cfdcea; background: #fff; color: #12376a; font-size: 14px; font-weight: 800; text-align: center; }
.tr-dl small { font-size: 11px; font-weight: 700; color: #6b7280; }
.tr-dl-keep { background: #0c916d; border-color: #0c916d; color: #fff; }
.tr-kept { font-size: 13px; font-weight: 800; color: #087e55; }
.tr-play { display: flex; align-items: center; gap: 8px; }
.tr-step { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid #cfdcea; background: #fff; color: #12376a; display: grid; place-items: center; }
.tr-step svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.tr-step:disabled { opacity: .35; }
.tr-fs-close { display: none; min-height: 40px; padding: 0 14px; border-radius: 10px; background: #12376a; color: #fff; font-size: 14px; font-weight: 800; }
.tr-card.tr-full { position: fixed; inset: 0; z-index: 9999; margin: 0; border-radius: 0; display: flex; flex-direction: column; overflow-y: auto;
  padding: calc(12px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom)); }
.tr-card.tr-full .tr-map { flex: 1 0 auto; height: auto; min-height: 60vh; }
.tr-card.tr-full #trSave, .tr-card.tr-full #trSaveBtn, .tr-card.tr-full .tr-dest { display: none; }
.tr-card.tr-full .tr-tools { grid-template-columns: 1fr; }
.tr-card.tr-full .tr-fs-close { display: inline-block; }
.tr-card.tr-full #trFsBtn, .tr-card.tr-full .tr-hide-fs { display: none; }

/* 20261019 我的事件搜尋(Harry #554) */
.ev-form { display: grid; gap: 10px; }
.ev-q { display: flex; gap: 8px; }
.ev-q input { flex: 1; min-width: 0; min-height: 48px; border: 1px solid #c9d8e6; border-radius: 14px; padding: 0 14px; font-size: 16px; background: #fff; }
.ev-q .sh-btn { flex: none; }
.ev-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ev-lab { flex: none; width: 2.6em; font-size: 13px; font-weight: 800; color: var(--sh-muted); }
.ev-chip { position: relative; cursor: pointer; }
.ev-chip input { position: absolute !important; opacity: 0 !important; width: 1px !important; height: 1px !important; pointer-events: none; }
.ev-chip span { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 99px; border: 1px solid #cfdeec; background: #fff; color: #275175; font-size: 13px; font-weight: 700; white-space: nowrap; }
.ev-chip input:checked + span { background: #0b61ad; border-color: #0b61ad; color: #fff; }
.ev-chip input:focus-visible + span { outline: 2px solid #0b61ad; outline-offset: 2px; }
.ev-dates { display: flex; align-items: center; gap: 6px; padding-left: calc(2.6em + 6px); }
.ev-dates input { flex: 1; min-width: 0; min-height: 40px; border: 1px solid #c9d8e6; border-radius: 12px; padding: 0 10px; font-size: 15px; background: #fff; }
.ev-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #edf1f5; }
.ev-row:last-of-type { border-bottom: 0; }
.ev-ic { flex: none; width: 44px; height: 44px; border-radius: 99px; object-fit: cover; display: grid; place-items: center; font-size: 12px; font-weight: 900; }
.ev-ic-sos { background: #ec183c; color: #fff; }
.ev-ic-activity { background: #fff6e5; color: #8a5f12; }
.ev-body { flex: 1; min-width: 0; }
.ev-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.ev-top b { font-size: 15px; color: #12376a; line-height: 1.4; }
.ev-body small { display: block; color: var(--sh-muted); font-size: 12px; margin-top: 2px; line-height: 1.5; }
.ev-body small.ev-keep { color: #0b61ad; font-weight: 700; }
.ev-pager { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; }
.ev-pager [aria-disabled] { opacity: .45; }
.ev-entry { display: flex; gap: 8px; }
.ev-entry input { flex: 1; min-width: 0; min-height: 44px; border: 1px solid #c9d8e6; border-radius: 14px; padding: 0 12px; font-size: 16px; background: #fff; }
/* 20261019 智慧行跡第二輪:最新位置可收起、下載完成提示、保留期限 */
.tr-last { position: relative; cursor: pointer; }
.tr-last a, .tr-last button { cursor: pointer; }
.tr-last-x { position: absolute; top: 6px; right: 6px; width: 36px; height: 36px; border-radius: 99px; background: #fff; border: 1px solid #f3c2c9; color: #c72c42; font-size: 20px; line-height: 1; display: grid; place-items: center; }
.tr-last-h { padding-right: 40px; }
.tr-tool-main.on { box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px #ec183c; }
.tr-keep-note { font-size: 12px; font-weight: 700; color: #0b61ad; background: #edf5ff; border-radius: 10px; padding: 6px 10px; margin-bottom: 8px; }
.tr-dl-msg { display: grid; gap: 4px; margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: #f3f7fb; font-size: 13px; color: #275175; }
.tr-dl-msg.ok { background: #eaf8f1; color: #087e55; }
.tr-dl-msg.ok b { font-size: 15px; }
.tr-dl-msg.err { background: #fff0f1; color: #c72c42; }
.tr-dl-msg .tr-dl { margin-top: 4px; }
.tr-card.tr-full .tr-keep-note { display: none; }
.ev-dates.hidden { display: none; }
.ev-dates input, .ev-q input { width: 0; }
.ev-form, .ev-form > * { min-width: 0; }

/* 20261020 Harry #564 第 2 點:搜尋區縮小 —— 選項照樣攤開,每一項只佔一行,放不下就左右滑 */
.ev-form { gap: 6px; }
.ev-q input { min-height: 42px; }
.ev-chips { flex-wrap: nowrap; gap: 4px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 1px 0; }
.ev-chips::-webkit-scrollbar { display: none; }
.ev-lab { width: 2.4em; font-size: 12px; }
.ev-chip { flex: none; }
.ev-chip span { min-height: 30px; padding: 0 10px; font-size: 12.5px; }
.ev-dates { padding-left: calc(2.4em + 4px); }
.ev-dates input { min-height: 36px; }
.ev-back { display: inline-flex; align-items: center; gap: 2px; min-height: 36px; font-size: 14px; font-weight: 800; color: #0b61ad; }
.ev-go { display: flex; align-items: center; gap: 12px; min-height: 56px; }
.ev-go b { flex: 1; font-size: 15px; color: #12376a; }
.ev-go small { display: block; font-size: 12px; font-weight: 400; color: var(--sh-muted); }

/* 20261020 Harry #564 第 1 點:行跡播放鍵 + 速度 */
.tr-playbtn { background: #0b61ad; border-color: #0b61ad; color: #fff; }
.tr-playbtn svg { fill: currentColor; stroke: none; }
.tr-playbtn .tr-ic-pause { display: none; fill: none; stroke: currentColor; stroke-width: 3; }
.tr-playbtn.on .tr-ic-play { display: none; }
.tr-playbtn.on .tr-ic-pause { display: block; }
.tr-speed { display: flex; align-items: center; gap: 4px; margin-top: 8px; font-size: 12px; color: var(--sh-muted); }
.tr-speed button { min-width: 40px; min-height: 30px; border-radius: 99px; border: 1px solid #cfdeec; background: #fff; color: #275175; font-weight: 800; }
.tr-speed button.on { background: #0b61ad; border-color: #0b61ad; color: #fff; }
.ev-go-ic { color: #0b61ad; }

/* 20261020 Harry #575:救援協作頁頂端的查詢事件入口,精簡一點 */
.ev-go-sm { min-height: 48px; padding-top: 10px !important; padding-bottom: 10px !important; }
.ev-go-sm b { font-size: 14px; }
/* 20261020 Harry #575:行跡的左右箭頭、播放鍵、速度鍵適當縮小(44→36、速度 30→24) */
.tr-play { gap: 6px; }
.tr-step { width: 36px; height: 36px; }
.tr-step svg { width: 18px; height: 18px; }
.tr-playbtn .tr-ic-pause { stroke-width: 2.6; }
.tr-speed { margin-top: 6px; gap: 3px; }
.tr-speed button { min-width: 32px; min-height: 24px; font-size: 11.5px; padding: 0 6px; }