/* 漫畫風主題：粗黑描邊、錯位陰影、消防紅／反光黃／天空藍（依第二大隊犀牛吉祥物插圖） */
:root {
  --ink: #141414; --red: #e3262b; --red-dark: #b5161b; --yellow: #ffd60a; --sky: #1d7fe0; --sky-light: #d8ecff;
  --navy: #14254a; --paper: #ffffff; --cream: #fff8e1; --ok: #1f9d55; --bad: #e3262b; --muted: #4a5568;
  --line: 3px solid var(--ink); --shadow: 5px 5px 0 var(--ink); --shadow-sm: 3px 3px 0 var(--ink);
}
* { box-sizing: border-box; }
html { background: #e9f4ff; }
body {
  margin: 0; color: var(--ink);
  font: 16px/1.65 "Huninn", "PingFang TC", "Microsoft JhengHei", sans-serif;
  background-color: #e9f4ff;
  background-image: radial-gradient(rgba(29,127,224,.18) 1.6px, transparent 1.7px);
  background-size: 14px 14px;
}
img { max-width: 100%; }

/* ---- 標題列 ---- */
header {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center;
  padding: 10px 16px; background: var(--red); border-bottom: var(--line);
  box-shadow: 0 6px 0 var(--yellow), 0 9px 0 var(--ink); margin-bottom: 18px; position: relative; z-index: 2;
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.emblem { width: 64px; height: 64px; border-radius: 50%; border: var(--line); background: #fff; box-shadow: var(--shadow-sm); flex: none; }
h1 {
  font-size: 22px; margin: 0; color: #fff; line-height: 1.25; letter-spacing: 1px;
  text-shadow: 2px 2px 0 var(--ink), -1px -1px 0 var(--ink), 1px -1px 0 var(--ink), -1px 1px 0 var(--ink);
}
h1 span { display: inline-block; margin-left: 8px; background: var(--yellow); color: var(--ink); text-shadow: none;
  padding: 0 8px; border: 2px solid var(--ink); border-radius: 6px; transform: rotate(-2deg); font-size: 18px; }
header .sub { color: #fff; font-size: 13px; text-shadow: 1px 1px 0 var(--ink); }
#who[hidden] { display: none; }
#who { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: #fff; text-shadow: 1px 1px 0 var(--ink); }
#whoName { background: var(--navy); padding: 2px 10px; border: 2px solid var(--ink); border-radius: 20px; }
h2 { font-size: 20px; margin: 0 0 12px; }
.sub { color: var(--muted); font-size: 14px; }
.note { color: var(--muted); font-size: 14px; }
.err { color: var(--bad); font-size: 15px; font-weight: 700; }

/* ---- 共用元件 ---- */
main { padding: 0 16px 48px; max-width: 1440px; margin: 0 auto; }
.card { background: var(--paper); border: var(--line); border-radius: 12px; padding: 16px; margin: 0 0 18px; box-shadow: var(--shadow); }
label { display: block; margin: 0 0 10px; font-size: 15px; }
input, select, textarea {
  font: inherit; color: var(--ink); background: #fff; border: 2px solid var(--ink); border-radius: 8px; padding: 4px 8px;
}
input:focus, select:focus { outline: 3px solid var(--yellow); outline-offset: 1px; }
label input, label select { display: block; width: 100%; margin-top: 4px; }
button {
  font: inherit; font-size: 15px; border: 2px solid var(--ink); background: var(--red); color: #fff; border-radius: 10px;
  padding: 4px 14px; cursor: pointer; box-shadow: var(--shadow-sm); transition: transform .06s, box-shadow .06s;
  text-shadow: 1px 1px 0 rgba(0,0,0,.35);
}
button:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
button:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
button.ghost { background: #fff; color: var(--ink); text-shadow: none; }
button.save { background: var(--sky); white-space: nowrap; }
button:disabled { opacity: .55; cursor: default; transform: none; }
button:focus-visible, [tabindex]:focus-visible { outline: 3px dashed var(--ink); outline-offset: 3px; }
::selection { background: var(--yellow); color: var(--ink); }
@media (pointer: coarse) { button { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { button { transition: none; } }
#who button { padding: 2px 10px; }
#export { background: var(--yellow); color: var(--ink); text-shadow: none; }

/* ---- 分頁列 ---- */
nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; align-items: center; }
nav button { background: #fff; color: var(--ink); text-shadow: none; border-radius: 22px; padding: 5px 16px; }
nav button.on { background: var(--yellow); transform: rotate(-1.5deg); box-shadow: 4px 4px 0 var(--ink); }
#gUnit { margin-left: auto; border-width: 3px; border-radius: 22px; box-shadow: var(--shadow-sm); }
#status { margin: 0 0 10px; }

/* ---- 橫幅 ---- */
.banner {
  position: relative; height: 210px; border: var(--line); border-radius: 14px; box-shadow: var(--shadow);
  background-size: cover; background-repeat: no-repeat; margin: 0 0 18px; overflow: hidden;
}
.banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,37,74,.55), rgba(20,37,74,0) 60%); }
.banner .btitle {
  position: absolute; left: 18px; bottom: 16px; z-index: 1; color: #fff; font-size: 26px; line-height: 1.3; max-width: 70%;
  text-shadow: 3px 3px 0 var(--ink), -1px -1px 0 var(--ink), 1px -1px 0 var(--ink), -1px 1px 0 var(--ink);
}
.banner .bdue {
  position: absolute; right: 16px; top: 14px; z-index: 1; background: var(--yellow); border: 3px solid var(--ink);
  padding: 2px 12px; border-radius: 8px; transform: rotate(3deg); box-shadow: var(--shadow-sm); font-size: 17px;
}

/* ---- 總覽數字卡 ---- */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin-bottom: 18px; }
.stat { position: relative; }
.stat .sub { color: var(--ink); font-size: 15px; }
.stat .num { font-family: "Bangers", "Huninn", sans-serif; font-size: 40px; letter-spacing: 2px; line-height: 1.1; color: var(--red); text-shadow: 2px 2px 0 var(--ink); }
.bar { height: 16px; background: #fff; border: 2px solid var(--ink); border-radius: 10px; overflow: hidden; margin-top: 8px; }
.bar i {
  display: block; height: 100%; border-right: 2px solid var(--ink);
  background: repeating-linear-gradient(-45deg, #4fb3ff 0 8px, #1d7fe0 8px 16px);
}

/* ---- 表格 ---- */
.tablewrap { overflow-x: auto; background: var(--paper); border: var(--line); border-radius: 12px; box-shadow: var(--shadow); }
table { border-collapse: collapse; width: 100%; font-size: 15px; font-variant-numeric: tabular-nums; }
th, td { border-bottom: 2px solid var(--ink); border-right: 1px dashed #9aa5b1; padding: 7px 9px; text-align: left; vertical-align: top; white-space: nowrap; }
th { background: var(--navy); color: #fff; position: sticky; top: 0; font-weight: 400; letter-spacing: 1px; border-right-color: #3d5a8a; }
tr:nth-child(odd) td { background: var(--cream); }
td.wrap { white-space: normal; min-width: 180px; }
tr.done td:first-child { border-left: 8px solid var(--ok); }
tr.todo td:first-child { border-left: 8px solid #cfd8e3; }
tr.saving { opacity: .6; }
tr.dirty td, .mcard.dirty { background: #fff3a8 !important; }
tr.dirty td:first-child { border-left: 8px solid var(--red); }
.mcard.dirty, #addForm.dirty { outline: 4px solid var(--red); outline-offset: 2px; }
#addForm.dirty { background: #fff3a8; border-radius: 8px; }
#addForm.dirty #addBtn, .dirty button.save { background: var(--red); animation: nudge 1.1s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { transform: none; } 50% { transform: scale(1.08) rotate(-2deg); } }
@media (prefers-reduced-motion: reduce) { #addForm.dirty #addBtn, .dirty button.save { animation: none; } }
/* 未儲存提醒列：固定在畫面下方 */
#dirtybar { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 50; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center;
  max-width: calc(100vw - 24px); padding: 10px 16px; background: var(--yellow); border: var(--line); border-radius: 14px; box-shadow: var(--shadow); font-size: 17px; }
@media (max-width: 760px) { #dirtybar { left: 8px; right: 8px; bottom: 8px; transform: none; max-width: none; font-size: 16px; } }

/* ---- 標籤 ---- */
.tag { display: inline-block; padding: 0 8px; border-radius: 6px; border: 2px solid var(--ink); background: #fff; font-size: 13px; }
.tag.bad { background: var(--yellow); color: var(--ink); transform: rotate(-4deg); box-shadow: 2px 2px 0 var(--ink); }
.tag.bad::before { content: "💥 "; }
.tag.ok { background: #b9f3c9; } .tag.warn { background: #ffe08a; }

.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 14px; }
.filters select, .filters input { border-width: 3px; border-radius: 10px; box-shadow: var(--shadow-sm); }
.form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.form label { margin: 0; }

/* ---- 手機卡片 ---- */
.mcard { background: var(--paper); border: var(--line); border-left: 10px solid #cfd8e3; border-radius: 12px; padding: 10px 12px; margin: 0 0 14px; box-shadow: var(--shadow-sm); }
.mcard.done { border-left-color: var(--ok); }
.mcard label { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 6px 0; }
.mcard label select, .mcard label input { flex: 1; max-width: 60%; min-height: 38px; }
.mhead { margin-bottom: 2px; font-size: 17px; }
.mfoot { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }

/* ---- 照片視窗 ---- */
#modal { position: fixed; inset: 0; background: rgba(20,37,74,.6); z-index: 50; display: flex; align-items: flex-start; justify-content: center; padding: 24px 12px; overflow-y: auto; }
.mbox { background: var(--paper); border: var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 16px; width: 100%; max-width: 780px; }
.mtop { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.upl { display: inline-block; margin: 8px 8px 8px 0; }
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 10px; }
.pcell img { width: 100%; border-radius: 8px; border: 2px solid var(--ink); display: block; }
.pcell button { margin-top: 6px; }
.pcell img { cursor: zoom-in; }
.pend { margin: 8px 0 4px; padding: 10px 12px; background: #fff8d6; border: 2px dashed var(--ink); border-radius: 12px; }
#pview { position: fixed; inset: 0; z-index: 70; background: rgba(10,16,34,.92); display: flex; align-items: center; justify-content: center; padding: 56px 12px 40px; }
#pview img { max-width: 100%; max-height: 100%; border: 3px solid #fff; border-radius: 8px; background: #fff; }
#pview button { position: absolute; z-index: 1; }
#pview button[data-pv="x"] { top: 10px; right: 12px; }
#pview button[data-pv="-1"], #pview button[data-pv="1"] { top: 50%; transform: translateY(-50%); font-size: 30px; line-height: 1; padding: 8px 16px; }
#pview button[data-pv="-1"] { left: 10px; } #pview button[data-pv="1"] { right: 10px; }
#pview .pvn { position: absolute; bottom: 10px; left: 0; right: 0; text-align: center; color: #fff; font-size: 15px; }

/* ---- 登入頁：主視覺 ---- */
#loginWrap {
  min-height: calc(100vh - 110px); margin: -18px 0 0; padding: 32px 16px;
  background: url("img/hero.webp") center 30% / cover no-repeat;
  display: flex; align-items: center; justify-content: flex-end; border-bottom: var(--line);
}
#loginWrap[hidden] { display: none; }
.narrow { max-width: 380px; width: 100%; margin: 0 6vw 0 0; }
#login h2 { font-size: 24px; }
#login h2::after { content: ""; display: block; width: 72px; height: 8px; background: var(--yellow); border: 2px solid var(--ink); border-radius: 6px; margin-top: 6px; }
#cover { position: fixed; inset: 0; background: #fff; z-index: 99; }

@media (max-width: 760px) {
  h1 { font-size: 17px; } h1 span { font-size: 14px; margin-left: 4px; }
  .emblem { width: 48px; height: 48px; }
  header .sub { font-size: 11px; }
  main { padding: 0 10px 40px; }
  .banner { height: 130px; } .banner .btitle { font-size: 19px; max-width: 85%; } .banner .bdue { font-size: 14px; }
  #loginWrap { justify-content: center; align-items: flex-end; background-position: 30% 20%; min-height: calc(100vh - 90px); }
  .narrow { margin: 0; }
  #gUnit { margin-left: 0; }
}

/* 新增成功提示 */
.flash { position: fixed; top: 18px; left: 50%; transform: translateX(-50%) rotate(-2deg); z-index: 60; background: var(--yellow);
  border: 3px solid var(--ink); border-radius: 12px; padding: 8px 18px; font-size: 18px; box-shadow: var(--shadow); }
tr.justadded td, .mcard.justadded { background: #c9f7d5 !important; }

/* ---- 甘特圖 ---- */
.gantt .g-head, .gantt .g-row { display: grid; grid-template-columns: 170px 1fr 170px; gap: 12px; align-items: center; }
.gantt .g-head { margin-bottom: 4px; }
.gantt .g-head .g-track { height: 22px; border: none; background: none; box-shadow: none; }
.gantt .g-head span { position: absolute; transform: translateX(-50%); font-family: "Lilita One", "Huninn", sans-serif; font-size: 17px; letter-spacing: .5px; white-space: nowrap; }
.gantt .g-head span.g-first { transform: none; }
.gantt .g-head span.g-last { transform: translateX(-100%); }
.g-row { padding: 6px 0; border-top: 2px dashed #c6d3e3; cursor: pointer; }
.g-row:hover { background: var(--cream); }
.g-label { font-size: 14px; line-height: 1.35; }
.g-track { position: relative; height: 30px; background: #eef4fb; border: 2px solid var(--ink); border-radius: 8px; }
.g-bar { position: absolute; top: 3px; bottom: 3px; background: #fff; border: 2px solid var(--ink); border-radius: 6px; overflow: hidden; }
.g-bar i { display: block; height: 100%; background: repeating-linear-gradient(-45deg, #4fb3ff 0 8px, #1d7fe0 8px 16px); }
.g-bar.behind { border-color: var(--red-dark); }   /* 落後只換框色：整條塗色會被看成已經做了一大段 */
.g-bar.behind i { background: repeating-linear-gradient(-45deg, #ff7a7a 0 8px, var(--red) 8px 16px); }
.g-today { position: absolute; top: -6px; bottom: -6px; width: 0; border-left: 3px solid var(--red); }
.g-head .g-today { top: 0; bottom: -4px; }
.g-head .g-today::before { content: "今天"; position: absolute; top: -2px; left: 4px; font-size: 13px; color: var(--red); white-space: nowrap; }
.g-expect { position: absolute; bottom: -9px; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 10px solid var(--ink); transform: translateX(-7px); }
.g-num { font-size: 15px; white-space: nowrap; }
.g-num .tag { margin-left: 6px; }
@media (max-width: 760px) {
  .gantt .g-head, .gantt .g-row { grid-template-columns: 1fr; gap: 4px; }
  .gantt .g-head > div:first-child, .gantt .g-head > div:last-child { display: none; }
  .gantt .g-head span.g-minor { display: none; }
}

/* 任務列：目前選的任務（之後會有多個任務） */
.taskbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 12px; }
.taskbar .tlabel { background: var(--navy); color: #fff; border: 2px solid var(--ink); border-radius: 8px; padding: 0 10px; font-size: 14px; }
.taskbar b { font-size: 20px; font-weight: 400; text-shadow: 1px 1px 0 var(--yellow); }

/* ---- 大巨蛋看板 ---- */
.dbanner { background-position: center 40%; }
[id^="dSec"] { scroll-margin-top: 78px; }
/* 區塊跳轉列：捲動時固定在上方 */
.secnav {
  position: sticky; top: 8px; z-index: 5; display: flex; gap: 8px; overflow-x: auto; padding: 6px 8px; margin: 0 0 14px;
  background: var(--navy); border: var(--line); border-radius: 14px; box-shadow: var(--shadow-sm);
}
.secnav button { flex: 0 0 auto; min-width: 120px; background: #fff; color: var(--ink); text-shadow: none; box-shadow: none; border-radius: 20px; }
.secnav button:hover, .secnav button:active { transform: none; box-shadow: none; background: var(--yellow); }
.secnav button[aria-current="true"] { background: var(--yellow); }
.secnav button:focus-visible { outline-color: var(--yellow); outline-offset: 1px; }
/* 表頭排序鈕：箭頭用 CSS 畫，目前排序的那欄才顯示 */
.thsort { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.thsort:hover { transform: none; box-shadow: none; text-decoration: underline; }
.thsort:focus-visible { outline: 3px dashed var(--yellow); outline-offset: 3px; }
th[aria-sort="ascending"] .thsort::after, th[aria-sort="descending"] .thsort::after { content: ""; border: 5px solid transparent; }
th[aria-sort="ascending"] .thsort::after { border-bottom-color: var(--yellow); margin-top: -5px; }
th[aria-sort="descending"] .thsort::after { border-top-color: var(--yellow); margin-top: 5px; }
/* 失敗提示 */
.fail {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 70; width: min(560px, calc(100% - 24px));
  display: flex; gap: 12px; align-items: flex-start; justify-content: space-between;
  background: var(--paper); border: var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 12px 14px;
}
.fail b { color: var(--red-dark); }
.fail button { flex: none; }
.dfilters { gap: 10px 24px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.filters .actions { display: flex; flex-wrap: wrap; gap: 10px; margin-left: auto; }
.chip { border-radius: 20px; padding: 3px 14px; }
.chip.on { background: var(--yellow); }
.grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 12px; }
.statline { display: flex; flex-wrap: wrap; gap: 4px 24px; margin: 0 0 18px; font-size: 15px; }
.statline b { color: var(--red-dark); }
.grid.charts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.chartbox { position: relative; height: 280px; }
.grid.charts .card { min-width: 0; }
.tablewrap.tall { max-height: 520px; margin-bottom: 18px; }
.drow { cursor: pointer; }
.drow:hover td, .drow:focus-visible td { background: #d8ecff !important; }
.drow:focus-visible { outline-offset: -3px; }
.kv th { position: static; width: 8.5em; white-space: normal; }
.kv td.wrap { min-width: 0; overflow-wrap: anywhere; }
.empty { text-align: center; }
.card h2.next { margin-top: 18px; }
.dcard { display: block; width: 100%; text-align: left; color: var(--ink); text-shadow: none; font-size: 15px; border-left: var(--line); cursor: pointer; }
.dcard span { display: block; }
.dcard .dmeta { color: var(--muted); font-size: 14px; }
.dcard .dtags { margin-top: 6px; min-height: 0; }
.dcard .dtags:empty { display: none; }
.dcard .tag { display: inline-block; }
.more { text-align: center; }
.timeline { position: relative; margin: 0 0 24px; padding-left: 8px; }
.tl { display: grid; grid-template-columns: 150px 1fr; gap: 14px; position: relative; }
.tl::before { content: ""; position: absolute; left: 142px; top: 0; bottom: 0; border-left: 4px solid var(--ink); }
.tdate { font-family: "Bangers", "Huninn", sans-serif; font-size: 18px; letter-spacing: 1px; padding-top: 14px; text-align: right; padding-right: 22px; white-space: nowrap; }
.tl .tbody { margin-bottom: 14px; }
.ttext { margin-top: 6px; font-size: 15px; }
.ttext.clamp { max-height: 8.25em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
button.morebtn { background: var(--yellow); color: var(--ink); text-shadow: none; }
.ttext + button { margin-top: 8px; }
#domeText, #lgText { width: 100%; font-size: 15px; }
@media (max-width: 760px) {
  .grid.charts { grid-template-columns: 1fr; }
  .grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .grid.four .num { font-size: 28px; letter-spacing: 1px; }
  .filters .actions { margin-left: 0; width: 100%; }
  .secnav button { flex: 1 0 auto; min-width: 0; }
  .tl { grid-template-columns: 1fr; } .tl::before { display: none; } .tdate { text-align: left; padding: 0; }
}

/* 第一層：專案切換卡片 */
.taskbar { gap: 12px; margin-bottom: 16px; }
.pcard { display: inline-flex; align-items: center; gap: 8px; font-size: 18px; padding: 8px 18px; border-radius: 14px;
  background: #fff; color: var(--ink); text-shadow: none; border: 3px solid var(--ink); box-shadow: var(--shadow-sm); opacity: .75; }
.pcard .picon { font-size: 22px; }
.pcard.on { background: var(--yellow); opacity: 1; transform: rotate(-1deg) scale(1.03); box-shadow: var(--shadow); }
.pcard.admin { background: var(--navy); color: #fff; }
#tabs[hidden] { display: none; }
@media (max-width: 760px) { .pcard { font-size: 15px; padding: 6px 12px; } }

/* ---- 活動看板（近期活動） ---- */
.adome { margin: 0 14px 10px; } .adome a { color: var(--sky); font-weight: 700; }
.abanner { background-position: center 60%; }
.abanner.part { height: 150px; margin: 18px 0 14px; }
.act { padding: 0; }
.act > summary {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 12px 16px; cursor: pointer; list-style: none;
  border-radius: 9px; font-size: 18px;
}
.act > summary::-webkit-details-marker { display: none; }
.act > summary::before { content: "▸"; font-size: 20px; transition: transform .1s; }
.act[open] > summary::before { transform: rotate(90deg); }
.act[open] > summary { background: var(--cream); border-bottom: var(--line); border-radius: 9px 9px 0 0; }
.act > summary:focus-visible { outline: 3px dashed var(--ink); outline-offset: 3px; }
.act > summary:hover { background: var(--cream); }
.ahint { margin-left: auto; padding: 2px 12px; font-size: 14px; white-space: nowrap; background: var(--yellow); border: 2px solid var(--ink); border-radius: 10px; box-shadow: var(--shadow-sm); }
.ahint::after { content: "點開看時程 ▾"; }
.act[open] .ahint { background: #fff; }
.act[open] .ahint::after { content: "收合 ▴"; }
.adate { font-family: "Bangers", "Huninn", sans-serif; font-size: 22px; letter-spacing: 1px; color: var(--red-dark); }
.atitle { font-size: 20px; }
.asum { flex: 1 1 100%; color: var(--muted); font-size: 14px; }
.abox { padding: 16px; }
.tag.sup { background: var(--yellow); box-shadow: 2px 2px 0 var(--ink); }
.asupport { display: grid; gap: 6px; margin: 0 0 14px; padding: 10px 14px; background: #fffbe0; border: 2px solid var(--ink); border-radius: 10px; }
.anow { margin: 0 0 14px; padding: 12px 14px; background: var(--sky-light); border: var(--line); border-radius: 12px; box-shadow: var(--shadow-sm); }
.anow h3 { margin: 6px 0 4px; font-size: 17px; }
.anow ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.anow p { margin: 0; }
.atime { font-family: "Bangers", "Huninn", sans-serif; font-size: 20px; letter-spacing: 1px; white-space: nowrap; }
.anow .atime { font-size: 17px; }
/* 依檢視方式顯示時間軸或總表 */
.abox[data-view="tl"] .atb, .abox[data-view="tb"] .atl { display: none; }
.aitem { display: grid; grid-template-columns: 124px 1fr; gap: 12px; margin: 0 0 12px; }
.aitem .atime { text-align: right; padding-top: 8px; }
.aitem .atime span { display: block; font-size: 16px; color: var(--muted); }
.abody { background: var(--paper); border: var(--line); border-left-width: 12px; border-radius: 12px; padding: 10px 12px; box-shadow: var(--shadow-sm); }
.atags { display: flex; flex-wrap: wrap; gap: 6px; }
.aname { font-size: 18px; margin-top: 4px; }
.abody ul, .atable ul { margin: 4px 0 0; padding-left: 1.2em; font-size: 15px; }
.asup { margin-top: 6px; font-size: 15px; background: #fffbe0; border: 2px dashed var(--ink); border-radius: 8px; padding: 2px 10px; display: inline-block; }
.aitem.past { opacity: .55; }
.aitem.now .abody { box-shadow: 0 0 0 4px var(--yellow), var(--shadow); }
.atable caption { caption-side: top; text-align: left; padding: 8px 10px; font-size: 18px; }
.atable th, .atable td { white-space: normal; border-right: 2px solid var(--ink); font-size: 14px; line-height: 1.45; }
.atable thead th { position: static; text-align: center; vertical-align: middle; min-width: 108px; }
.atable thead th:first-child { min-width: 0; }
.atable .hnote { font-size: 12px; opacity: .85; }
.atable thead .tag.sup { color: var(--ink); box-shadow: none; font-size: 12px; }
.atable tbody th { background: var(--navy); color: #fff; font-family: "Bangers", "Huninn", sans-serif; font-size: 16px; letter-spacing: 1px; text-align: center; white-space: nowrap; padding: 4px 8px; }
.atable tbody td { padding: 4px 8px; height: 30px; }
.atable tr:nth-child(odd) td { background: #fff; }
.atable tr:nth-child(even) td { background: #f4f8fd; }
.atable td.fill { border: 2px solid var(--ink); }
.atable td.fill.past { opacity: .6; }
.atable td.fill.now { box-shadow: inset 0 0 0 4px var(--yellow); }
.atable tr.nowrow th { background: var(--red); }
@media (max-width: 760px) {
  .act > summary { padding: 10px 12px; } .atitle { font-size: 18px; } .abox { padding: 12px 10px; }
  .abanner.part { height: 110px; }
  .aitem { grid-template-columns: 1fr; gap: 2px; }
  .aitem .atime { text-align: left; padding: 0; } .aitem .atime span { display: inline; }
}
/* 列印：只印按下「列印總表」的那個活動，A4 橫式 */
@media print {
  @page { size: A4 landscape; margin: 8mm; }
  body.act-print { background: #fff; }
  body.act-print header, body.act-print .taskbar, body.act-print nav, body.act-print #status, body.act-print .banner,
  body.act-print .noprint, body.act-print .act:not(.printing), body.act-print .act > summary, body.act-print .atl, body.act-print .fail { display: none !important; }
  body.act-print main { padding: 0; max-width: none; }
  body.act-print .act, body.act-print .tablewrap { border: none; box-shadow: none; margin: 0; overflow: visible; }
  body.act-print .abox { padding: 0; }
  body.act-print .abox .atb { display: block !important; }
  body.act-print .asupport { margin-bottom: 6px; padding: 4px 10px; font-size: 12px; }
  body.act-print .atable th, body.act-print .atable td { font-size: 10.5px; padding: 2px 5px; }
  body.act-print .atable tbody td { height: 15px; }
  body.act-print .atable caption { font-size: 15px; padding: 0 0 4px; }
  body.act-print .atable ul { font-size: 10.5px; }
  body.act-print * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
/* 時鐘：捲動時固定在上方 */
.aclock {
  position: sticky; top: 8px; z-index: 5; width: fit-content; margin: 0 0 12px; padding: 4px 16px;
  background: var(--navy); color: #fff; border: var(--line); border-radius: 22px; box-shadow: var(--shadow-sm); font-size: 15px;
}
.aclock b, .acount b { font-family: "Bangers", "Huninn", sans-serif; font-weight: 400; letter-spacing: 1px; font-variant-numeric: tabular-nums; }
.aclock b { font-size: 20px; color: var(--yellow); margin-left: 6px; }
.acount { font-size: 16px; }
.acount b { display: block; font-size: 30px; line-height: 1.2; color: var(--red); text-shadow: 2px 2px 0 var(--ink); }
.ain { color: var(--red-dark); font-size: 14px; white-space: nowrap; }
#status[hidden] { display: none; }
@media (max-width: 760px) { .acount b { font-size: 24px; } }
/* 日期與時間的數字用 Lilita One：原本漫畫字體的 7 很像 1，勤務時間不能看錯 */
.adate, .atime, .aclock b, .acount b, .atable tbody th {
  font-family: "Lilita One", "Huninn", "PingFang TC", "Microsoft JhengHei", sans-serif; font-weight: 400; letter-spacing: .5px; font-variant-numeric: tabular-nums;
}
/* 活動勤務看板的標題、標籤、活動名稱、按鈕用毛筆漫畫體（英數字用 Lilita One）；細項說明的小字維持圓體比較好讀 */
.abanner .btitle, .atitle, .act .tag, .aname, .anow h3, .asupport b, .act button, .atable caption, .atable thead th, .atable td b {
  font-family: "Lilita One", "Potta One", "Huninn", "PingFang TC", "Microsoft JhengHei", sans-serif; font-weight: 400;
}

/* ---- 犀牛巡邏隊（新聞與社群巡邏） ---- */
.wstats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.wstats .card { padding: 10px 12px; margin: 0; }
.wstats .num { font-size: 32px; }
.witem { display: block; background: var(--paper); border: var(--line); border-left-width: 10px; border-left-color: #cfd8e3; border-radius: 12px; padding: 9px 12px; margin: 0 0 12px;
  box-shadow: var(--shadow-sm); color: var(--ink); text-decoration: none; }
.witem.local { border-left-color: var(--yellow); }
.witem:hover { background: var(--cream); }
.witem:focus-visible { outline: 3px dashed var(--ink); outline-offset: 3px; }
.wmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; }
.wtime { font-family: "Lilita One", "Huninn", sans-serif; font-size: 16px; letter-spacing: .5px; color: var(--red-dark); margin-right: 2px; }
.worigin { color: var(--muted); }
.wtext { display: block; margin-top: 4px; font-size: 16px; overflow-wrap: anywhere; }
/* 置頂區：4 小時內的火警、災害 */
.wpin { background: #fff0f0; border: var(--line); border-color: var(--red); border-radius: 14px; box-shadow: 5px 5px 0 var(--red-dark); padding: 12px 14px 4px; margin: 0 0 20px; }
.wpin.none { background: var(--paper); border-color: var(--ink); box-shadow: var(--shadow-sm); padding-bottom: 10px; }
.wpin h2 { font-size: 19px; margin: 0 0 10px; }
.wpin.none h2 { margin-bottom: 4px; } .wpin .note { margin: 0; }
.witem.pin { border-left-color: #f0a0a0; }
.witem.pin.taipei { border-left-color: var(--red); background: var(--cream); }
.witem.pin .wtime { min-width: 5.5em; }
/* 分區標題（還沒有橫幅圖時用） */
.wsechead { display: flex; align-items: center; gap: 12px; font-size: 21px; margin: 22px 0 12px; padding: 6px 14px; background: var(--navy); color: #fff; border: var(--line); border-radius: 12px; box-shadow: var(--shadow-sm); }
.wsechead span { margin-left: auto; font-size: 15px; background: var(--yellow); color: var(--ink); border: 2px solid var(--ink); border-radius: 8px; padding: 0 10px; }
.banner.wsec { height: 150px; margin: 22px 0 14px; }
.wnone { margin: 0 0 12px; padding: 0 4px; }
/* 標題字：英數字用 Lilita One，中文統一用圓體（Potta One 缺「內」等繁體字，同一行會混兩種字型） */
.wbanner .btitle, .wsec .btitle, .wsec .bdue, .wsechead, .wpin h2, .wsum h2, .wbox .tag, .wbox button, .wstats .sub {
  font-family: "Lilita One", "Huninn", "PingFang TC", "Microsoft JhengHei", sans-serif; font-weight: 400;
}
.wstats .num { font-family: "Lilita One", "Huninn", sans-serif; }
.wsum { background: var(--paper); border: var(--line); border-radius: 14px; box-shadow: var(--shadow-sm); padding: 12px 14px; margin: 0 0 20px; }
.wsum h2 { font-size: 19px; margin: 0 0 10px; }
.wsumgrid { margin-bottom: 12px; }
.wstats.wsumgrid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.wstats .card[data-jump], .wstats .card[data-k] { cursor: pointer; }
.wstats .card[data-jump]:hover, .wstats .card[data-k]:hover { filter: brightness(0.96); }
.wstats .card.on { outline: 4px solid var(--ink); outline-offset: -4px; }
[role=button]:focus-visible { outline: 3px dashed var(--ink); outline-offset: 3px; }
#wList, [id^="wsec-"] { scroll-margin-top: 12px; }
.wsumlist { list-style: none; margin: 0; padding: 0; }
.wsumlist li { margin: 6px 0; }
.wsumlist a { color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.wsumlist a:hover { text-decoration: underline; }
.whit { display: block; margin-top: 4px; font-size: 14px; color: #555; overflow-wrap: anywhere; }
.wev { margin: 0 0 12px; }
.wev > .witem { margin-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.wrel { border: var(--line); border-top: none; border-radius: 0 0 12px 12px; background: #fff; padding: 6px 12px; font-size: 14px; }
.wrel summary { cursor: pointer; }
.wrel a { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: inherit; text-decoration: none; padding: 4px 0; border-top: 1px dashed #ccc; overflow-wrap: anywhere; }
.wrel a:hover { background: var(--cream); }
.wfold > summary { cursor: pointer; list-style: none; }
.wfold > summary::-webkit-details-marker { display: none; }
.wfold > summary::before { content: "▸ "; } .wfold[open] > summary::before { content: "▾ "; }
.wfold > .note { margin: 0 4px 10px; }
/* 顏色各管一件事：紅＝重大、要注意；黃＝轄區；灰虛線＝未證實；0 變灰 */
.wbox .tag.bad { background: var(--red); color: #fff; }
.wbox .tag.unv { background: #fff; color: var(--muted); border-style: dashed; }
.wbox .tag.hot { background: #ff7a45; color: #fff; font-weight: 700; box-shadow: 2px 2px 0 var(--ink); }
.wstats .num.zero { color: #aab4c0; text-shadow: none; }
.wfirst { font-size: 13px; color: var(--muted); }
/* 一行結論 */
.wverdict { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 12px; padding: 8px 12px; border: 2px solid var(--ink); border-radius: 10px; background: #eafbea; font-size: 17px; line-height: 1.45; }
.wverdict.alert { background: #fff0f0; border-color: var(--red); box-shadow: 3px 3px 0 var(--red-dark); cursor: pointer; }
.wverdict.info { background: var(--cream); cursor: pointer; }
.wv-icon { margin-right: -4px; }
.wupd { margin-left: auto; font-size: 13px; color: var(--muted); white-space: nowrap; }
.wabout { margin: -6px 0 14px; }
.wabout > summary { cursor: pointer; color: var(--muted); font-size: 14px; display: inline-block; padding: 10px 0; }
.wabout > .note { margin: 0 0 4px; }
.wrel summary { padding: 10px 0; }
@media (max-width: 760px) { .wstats.wsumgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wstats.wsumgrid > .card:first-child { grid-column: 1 / -1; } .wbanner { height: 70px; } .wbanner .btitle { bottom: 10px; }
  .taskbar { flex-wrap: nowrap; overflow-x: auto; padding: 4px 4px 10px; margin: -4px -4px 6px; scrollbar-width: none; }
  .taskbar::-webkit-scrollbar { display: none; }
  .taskbar .pcard { flex: 0 0 auto; } }
@media (max-width: 760px) { .wstats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } .wstats .sub { font-size: 13px; } .wstats .note { display: none; } .banner.wsec { height: 110px; } .wsechead { font-size: 18px; } .wstats .num { font-size: 24px; } .wstats .card { padding: 8px; } }

/* ---- 活動勤務看板：附近即時影像（路口攝影機）。外框比照「現在進行中」，標題條比照總表的深藍表頭 ---- */
.acam { margin: 0 0 14px; background: var(--paper); border: var(--line); border-radius: 12px; box-shadow: var(--shadow-sm); overflow: hidden; }
.chead { display: flex; align-items: center; gap: 12px; margin: 0; padding: 6px 14px; font-size: 19px; background: var(--navy); color: #fff; border-bottom: var(--line); }
.chead span { margin-left: auto; font-size: 14px; background: var(--yellow); color: var(--ink); border: 2px solid var(--ink); border-radius: 8px; padding: 0 10px; transform: rotate(-2deg); }
.cbody { padding: 12px 14px; }
.cbody .filters { margin-bottom: 12px; }
.cbody > .note { margin: 0; } .cbody > .chint { margin: -4px 0 12px; }
.cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin: 0 0 14px; }
/* 一格一支攝影機：漫畫格（粗框、錯位陰影），路口名稱寫在下面的深藍字條上 */
.ctile { margin: 0; min-width: 0; display: flex; flex-direction: column; background: var(--navy); border: var(--line); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; cursor: zoom-in; transition: transform .06s; }
.ctile:hover { transform: translate(-1px, -1px); }
.ctile.big { grid-column: 1 / -1; cursor: zoom-out; transform: none; }
.cscreen { position: relative; }
.ctile video { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--navy); }
.ctile.big video { object-fit: contain; max-height: 78vh; }
.ctile.off video { opacity: .2; }
.cstate { position: absolute; top: 8px; left: 8px; }
.ctile figcaption { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 6px 10px; border-top: var(--line); color: #fff; font-size: 16px; line-height: 1.4; }
.ctile figcaption b { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; font-weight: 400; }
.cdist { background: var(--yellow); white-space: nowrap; }
.chead, .chead span, .ctile figcaption b {
  font-family: "Lilita One", "Potta One", "Huninn", "PingFang TC", "Microsoft JhengHei", sans-serif; font-weight: 400;
}
.csrc { margin: 0; } .csrc a, .cfail a { color: var(--sky); }
.cfail { background: var(--cream); border: 2px dashed var(--ink); border-radius: 12px; padding: 12px 14px; }
.cfail p { margin: 0 0 8px; }
@media (max-width: 760px) { .cbody { padding: 10px; } .cgrid { grid-template-columns: 1fr; gap: 12px; } .chead { font-size: 17px; } }
#stAdd[hidden] { display: none; }
/* 百貨清冊：儲存、照片、刪除固定在表格最右邊，表格再寬也看得到 */
.stbl th, .stbl td { padding: 7px 7px; }
.stbl td.wrap { min-width: 130px; }
.stbl select { padding-left: 6px; padding-right: 4px; }
.stbl th.ops, .stbl td.ops { position: sticky; right: 0; border-left: 2px solid var(--ink); border-right: 0; box-shadow: -6px 0 8px -4px rgba(20,37,74,.35); }
.stbl th.ops { z-index: 3; }
.stbl td.ops { z-index: 1; background: var(--paper); width: 150px; min-width: 150px; white-space: normal; }
.stbl td.ops button.save { display: block; width: 100%; white-space: normal; }
.stbl td.ops > div { display: flex; gap: 6px; margin-top: 6px; }
.stbl td.ops > div button { flex: 1; padding-left: 6px; padding-right: 6px; white-space: nowrap; }

.stbl tr:nth-child(odd) td.ops { background: var(--cream); }
.stbl td.note { white-space: normal; min-width: 78px; font-size: 12px; line-height: 1.35; }

/* ---- 犀牛留言版 ---- */
.nbbanner { background-position: center 45%; }
.nbbanner::after { background: linear-gradient(90deg, rgba(20,37,74,.5), rgba(20,37,74,0) 42%); }
.nbbanner .btitle, .nbnew, .nbsec, .nb h3, .nbbar button, .nbedit button, .nbempty h2, .nbstate button, #neTitle {
  font-family: "Lilita One", "Potta One", "Huninn", "PingFang TC", "Microsoft JhengHei", sans-serif; font-weight: 400;
}
.nbbanner .btitle { font-size: 34px; letter-spacing: 2px; }
.nb-yellow { --c: #fff3a0; --t: #ffb703; } .nb-pink { --c: #ffd3df; --t: #ff6b9a; } .nb-blue { --c: #cfe8ff; --t: #3f9bf0; }
.nb-green { --c: #d6f5c6; --t: #48b85c; } .nb-orange { --c: #ffdcae; --t: #ff8a3d; } .nb-purple { --c: #e6d7ff; --t: #9a6cf0; }
/* 「寫一張留言」那一條 */
.nbnew {
  display: flex; align-items: center; gap: 12px; width: 100%; max-width: 680px; margin: 26px auto 18px; padding: 8px 14px 8px 110px; position: relative;
  background: var(--cream); color: var(--muted); text-shadow: none; text-align: left; font-size: 19px; border: var(--line); border-radius: 16px; box-shadow: var(--shadow); min-height: 62px;
}
.nbnew[hidden] { display: none; }
.nbnew img { position: absolute; left: 12px; bottom: 0; width: 88px; height: auto; pointer-events: none; }
.nbnew span { flex: 1; }
.nbnew b { background: var(--red); color: #fff; border: 2px solid var(--ink); border-radius: 10px; padding: 2px 12px; font-weight: 400; font-size: 16px; white-space: nowrap; text-shadow: 1px 1px 0 rgba(0,0,0,.35); }
.nbbar { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; margin: 0 0 18px; }
.nbbar input { flex: 1 1 220px; max-width: 360px; border-width: 3px; border-radius: 22px; padding: 5px 14px; box-shadow: var(--shadow-sm); }
.nbbar .note { margin-right: auto; }
.nbbar [hidden] { display: none; }
.nbsec { font-size: 20px; margin: 4px 0 16px; }
.nbhint { margin: 0 0 18px; }
/* 一格一格往下排，長短不一 */
.nbgrid { columns: 250px; column-gap: 20px; padding: 10px 4px 0; margin-bottom: 8px; }
.nb {
  position: relative; display: inline-block; width: 100%; margin: 0 0 30px; break-inside: avoid;
  transform: rotate(var(--r, 0deg)); filter: drop-shadow(4px 5px 0 rgba(20,20,20,.9)); transition: transform .15s;
}
.nb:hover, .nb:focus-within { transform: rotate(0deg) translateY(-4px) scale(1.015); z-index: 2; }
/* 黑框＋右下角摺起來：外層黑、內層色紙，兩層都切掉一個角 */
.nbin { background: var(--ink); padding: 3px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%); }
.nbpaper {
  position: relative; background: var(--c); padding: 22px 14px 10px; min-height: 96px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 25px), calc(100% - 25px) 100%, 0 100%);
  background-image: linear-gradient(rgba(255,255,255,.35), rgba(255,255,255,0) 40%);
}
.nbpaper::after {
  content: ""; position: absolute; right: 0; bottom: 0; width: 25px; height: 25px; border-top: 3px solid var(--ink); border-left: 3px solid var(--ink);
  background: linear-gradient(135deg, rgba(20,20,20,.22) 50%, transparent 50%);
}
/* 紙膠帶／圖釘 */
.nbtape {
  position: absolute; z-index: 1; left: 50%; top: -11px; width: 92px; height: 24px; margin-left: -46px; transform: rotate(-3deg);
  background: repeating-linear-gradient(135deg, var(--t) 0 7px, rgba(255,255,255,.75) 7px 12px); opacity: .9;
  border-left: 2px dashed rgba(20,20,20,.35); border-right: 2px dashed rgba(20,20,20,.35);
}
.nb:nth-child(even) .nbtape { transform: rotate(4deg); left: 42%; }
.nbtack {
  position: absolute; z-index: 1; left: 50%; top: -13px; width: 26px; height: 26px; margin-left: -13px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff9a9d 0 18%, var(--red) 19% 100%); border: 3px solid var(--ink);
}
.nb h3 { margin: 0 0 6px; font-size: 19px; line-height: 1.35; overflow-wrap: anywhere; }
.nbtext { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 16px; line-height: 1.6; }
.nbtext.clamp { max-height: 14.4em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 75%, transparent); mask-image: linear-gradient(#000 75%, transparent); }
.nbtext a { color: var(--navy); }
.nbmore { all: unset; cursor: pointer; font-size: 14px; color: var(--navy); text-decoration: underline; padding: 4px 0; }
.nbmore:focus-visible { outline: 3px dashed var(--ink); outline-offset: 2px; }
.nbitems { list-style: none; margin: 8px 0 0; padding: 0; }
.nbitems label { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 3px 0; cursor: pointer; overflow-wrap: anywhere; }
.nbitems input, .nelist input[type="checkbox"] { flex: none; width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--red); }
.nbitems span { min-width: 0; }
.nbitems .done span { text-decoration: line-through; opacity: .6; }
.nb footer { display: flex; gap: 6px; align-items: flex-end; justify-content: space-between; margin-top: 12px; padding-right: 22px; min-height: 34px; }
.nbwho { font-size: 12.5px; line-height: 1.45; color: rgba(20,20,20,.72); overflow-wrap: anywhere; }
.nbops { display: flex; gap: 4px; flex: none; opacity: .55; transition: opacity .15s; }
.nb:hover .nbops, .nb:focus-within .nbops { opacity: 1; }
.nbops button { min-height: 0; padding: 1px 6px; font-size: 14px; box-shadow: none; border-radius: 8px; background: rgba(255,255,255,.7); }
.nbops button:hover, .nbops button:active { transform: none; box-shadow: none; background: #fff; }
.nbops button[aria-pressed="true"] { background: var(--yellow); }
.nbstate { margin-top: 10px; font-size: 14px; }
.nbstate.bad { background: #fff; border: 2px solid var(--red); border-radius: 8px; padding: 6px 8px; color: var(--red-dark); }
.nbstate button { min-height: 0; padding: 1px 8px; font-size: 14px; margin-top: 4px; }
.nb.pending { opacity: .7; }
.nb.gone .nbpaper { background-color: #e3e3e3; }
.nbgood { position: absolute; right: -14px; top: -22px; width: 64px; height: auto; z-index: 2; transform: rotate(10deg); pointer-events: none; }
.nbempty img { display: block; margin: 0 auto 6px; }
.nbempty h2 { margin-bottom: 4px; }
.nbcheer { position: fixed; right: 16px; bottom: -10px; width: 190px; z-index: 80; pointer-events: none; animation: nbcheer 1.8s ease-out both; }
@keyframes nbcheer { 0% { transform: translateY(110%) rotate(-8deg); } 18% { transform: translateY(0) rotate(4deg); } 30% { transform: translateY(8%) rotate(-3deg); } 42%, 78% { transform: translateY(0) rotate(0); } 100% { transform: translateY(110%); } }
/* 寫／改留言的視窗 */
.nbedit { width: 100%; max-width: 520px; background: var(--c); border: var(--line); border-radius: 6px; box-shadow: var(--shadow); padding: 16px; margin-top: 4vh; transition: background-color .15s; }
.nbedit input[type="text"], .nbedit #neTitle, .nbedit textarea { width: 100%; background: rgba(255,255,255,.6); }
.nbedit #neTitle { font-size: 19px; margin-bottom: 8px; }
.nbedit textarea { display: block; resize: vertical; min-height: 110px; line-height: 1.6; margin-bottom: 8px; }
.nbedit input:focus, .nbedit textarea:focus { outline: 3px solid var(--ink); outline-offset: 1px; background: #fff; }
.nelist { list-style: none; margin: 0 0 8px; padding: 0; }
.nelist li { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.nelist input[type="checkbox"] { margin: 0; }
.nelist button { flex: none; padding: 1px 9px; box-shadow: none; }
.nerow { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-top: 12px; }
.necolors { display: flex; gap: 8px; }
.nedot { width: 32px; height: 32px; min-height: 0; padding: 0; border-radius: 50%; background: var(--c); box-shadow: none; }
.nedot[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px var(--ink); }
#nePin[aria-pressed="true"] { background: var(--yellow); }
.neacts { display: flex; gap: 8px; margin-left: auto; }
#neErr { margin: 8px 0 0; }
#neErr:empty { display: none; }
@media (max-width: 760px) {
  .nbbanner .btitle { font-size: 24px; }
  .nbnew { font-size: 16px; padding-left: 84px; margin-top: 20px; min-height: 54px; } .nbnew img { width: 68px; left: 8px; }
  .nbgrid { columns: 2; column-gap: 12px; padding: 10px 2px 0; }
  .nb { margin-bottom: 24px; } .nbpaper { padding: 20px 10px 8px; } .nb h3 { font-size: 16.5px; } .nbtext { font-size: 14.5px; }
  .nbtape { width: 64px; margin-left: -32px; height: 20px; top: -9px; }
  .nb footer { flex-direction: column; align-items: flex-start; padding-right: 0; } .nbops { opacity: 1; padding-right: 24px; }
  .nbops button { padding: 4px 9px; font-size: 15px; }
  .nbgood { width: 48px; right: -6px; top: -16px; }
  .nbedit { margin-top: 0; padding: 12px; } .nbcheer { width: 140px; }
}
@media (max-width: 340px) { .nbgrid { columns: 1; } }
@media (prefers-reduced-motion: reduce) { .nb, .nb:hover, .nb:focus-within { transform: none; transition: none; } .nbcheer { animation-duration: .01s; } }

/* 犀牛留言版：稱呼、停用名單 */
.nbnickcard { max-width: 520px; margin-left: auto; margin-right: auto; }
.nbnick { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 12px 0 4px; }
.nbnick input { flex: 1 1 200px; max-width: 280px; font-size: 18px; border-width: 3px; border-radius: 12px; padding: 6px 12px; }
.nbnickcard h2, .nbnick button { font-family: "Lilita One", "Potta One", "Huninn", "PingFang TC", "Microsoft JhengHei", sans-serif; font-weight: 400; }
#nkErr:empty { display: none; }
.nbmail { font-size: 11.5px; color: var(--red-dark); overflow-wrap: anywhere; }
.nbbanlist { list-style: none; margin: 8px 0 0; padding: 0; }
.nbbanlist li { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 8px 0; border-top: 2px dashed rgba(20,20,20,.2); }
#liteBtn { margin-top: 10px; width: 100%; }
#liteBtn[hidden] { display: none; }

/* ---- 犀牛辦業務：防火管理到場指導 ---- */
.bizhead h2 { font-family: "Lilita One", "Huninn", "PingFang TC", "Microsoft JhengHei", sans-serif; font-weight: 400; font-size: 26px; margin: 4px 0 0; }
.bizhead .note { margin: 0 0 14px; }
.vsec h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-family: "Lilita One", "Huninn", "PingFang TC", "Microsoft JhengHei", sans-serif; font-weight: 400; }
.vsec h2 button { font-size: 14px; } .vsec h2 button:first-of-type { margin-left: auto; }
.vtop { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 4px 0 10px; }
.vbig { font-family: "Lilita One", "Huninn", sans-serif; font-size: 52px; line-height: 1; color: var(--red); text-shadow: 3px 3px 0 var(--ink); }
.vtxt { display: flex; flex-direction: column; font-size: 17px; } .vtxt b { color: var(--red-dark); }
.vbar { position: relative; height: 18px; background: #fff; border: 2px solid var(--ink); border-radius: 10px; margin: 8px 0 6px; }
.vbar i { display: block; height: 100%; border-radius: 8px 0 0 8px; background: repeating-linear-gradient(-45deg, #4fb3ff 0 8px, #1d7fe0 8px 16px); }
.vbar b { position: absolute; top: -6px; bottom: -6px; width: 3px; background: var(--red); margin-left: -1px; }
.vunits { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.vunit { margin: 0; padding: 10px 12px; border-top-width: 10px; }
.vunit.ok { border-top-color: var(--ok); } .vunit.near { border-top-color: var(--yellow); } .vunit.far { border-top-color: var(--red); }
.vunit[role=button] { cursor: pointer; transition: transform .06s, box-shadow .06s; }
.vunit[role=button]:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ink); }
.vmore { margin-top: 8px; padding: 4px 0; text-align: center; border: 2px solid var(--ink); border-radius: 8px; background: var(--yellow); font-size: 14px; font-family: "Lilita One", "Huninn", "PingFang TC", sans-serif; }
.vunit.on .vmore { background: #fff; } .vunit.on { outline: 4px solid var(--ink); outline-offset: -4px; background: var(--cream); }
.vname { display: flex; align-items: center; gap: 6px; font-size: 18px; font-family: "Lilita One", "Huninn", "PingFang TC", sans-serif; }
.vrate { font-family: "Lilita One", "Huninn", sans-serif; font-size: 30px; line-height: 1.1; }
.vunit .note { margin: 0; } .vgap { color: var(--red-dark); }
#vList { margin: 18px 0 0; scroll-margin-top: 12px; }
.vtable td, .vtable th { font-size: 14px; padding: 5px 8px; text-align: left; vertical-align: top; }
.vdone { margin-top: 10px; } .vdone summary { cursor: pointer; font-weight: 700; }
.vup > summary { cursor: pointer; list-style: none; } .vup > summary::-webkit-details-marker { display: none; }
.vup > summary h2 { margin: 0; } .vup > summary h2::after { content: " ▸"; } .vup[open] > summary h2::after { content: " ▾"; }
.vprev { margin-top: 10px; padding: 10px 12px; border: 2px dashed var(--ink); border-radius: 10px; background: var(--cream); }
.vprev p { margin: 0 0 8px; }
@media (max-width: 760px) { .vunits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .vbig { font-size: 40px; } .vtxt { font-size: 15px; } .vrate { font-size: 24px; } }

/* 犀牛辦業務：公安動態演練 */
.drphase h2 .note { font-family: "Huninn", "PingFang TC", sans-serif; font-size: 14px; margin: 0; }
.drlist { margin-top: 14px; padding-top: 10px; border-top: 3px dashed var(--ink); }
.drlist h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; } .drlist h3 button { margin-left: auto; font-size: 14px; }
.drtable td .note { margin: 0; font-size: 12px; }
.drst { display: inline-block; white-space: nowrap; padding: 0 8px; border: 2px solid var(--ink); border-radius: 6px; font-size: 13px; background: #fff; }
.drst.done { background: #b9f3c9; } .drst.doing { background: #cfe0ff; } .drst.plan { background: #fff; } .drst.none { background: #eee; color: #555; }
.drst.late { background: var(--yellow); } .drst.closed { background: #eee; color: #777; text-decoration: line-through; }
.dredit td { background: #fff3c4; }
.drk { display: none; color: #666; } @media (max-width: 600px) { .drk { display: inline; } }
.drform { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px 12px; }
.drform label { display: flex; flex-direction: column; font-size: 13px; gap: 2px; }
.drbtns { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.drbtns .note { margin: 0; }
@media (max-width: 600px) {   /* 手機：名單改成一家一塊，填寫的格子才不會被擠出畫面 */
  .drtable, .drtable tbody, .drtable tr, .drtable td { display: block; width: auto; }
  .drtable tr:first-child { display: none; }
  .drtable tr.drrow { padding: 8px 10px; border-bottom: 2px dashed #ccc; }
  .drtable tr.drrow td { border: 0; padding: 1px 0; background: none !important; }
  .drtable tr.drrow td:first-child:not(:only-child) { font-size: 12px; color: #666; }
  .drtable tr.drrow td:empty { display: none; }
  .drtable tr.drrow.on { background: #fff3c4; }
  .drform { grid-template-columns: 1fr; }
}
.drbtnrow, .drask { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.drbtnrow button, .drask button { font-size: 13px; padding: 3px 10px; }
.drask { padding: 6px 8px; background: #fff3c4; border: 2px solid var(--ink); border-radius: 8px; font-size: 13px; }
.drask input { font-size: 14px; }
.drck { width: 28px; text-align: center; } .drck input { width: 20px; height: 20px; }
.drbatch { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; } .drbatch .note { margin: 0; }
.drbatchbox { margin: 8px 0; background: var(--cream); }
.drbline { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; padding: 4px 0; border-bottom: 1px dashed #bbb; }
.drundo { display: flex; align-items: center; gap: 8px; margin: 8px 0; padding: 4px 10px; background: #b9f3c9; border: 2px solid var(--ink); border-radius: 8px; font-size: 14px; }
.drmail { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; padding: 6px 10px; background: #ffe9a8; border: 2px solid var(--ink); border-radius: 8px; font-size: 14px; }
@media (max-width: 600px) { .drtable td.drck { float: right; } }
/* 犀牛巡邏隊精簡工具列（2026-10-16）：數字併進按鈕，放在犀牛速報下面 */
.wtools { padding: 10px 12px; margin: 0 0 14px; }
.wtools .chips { margin-bottom: 8px; }
.wtools .wcnt b { margin-left: 2px; }
.wtools .wtoolrow { margin: 0; }
.wtools .wtoolnote { margin: 6px 0 0; font-size: 13px; }
@media (max-width: 760px) { .wtools .chip { padding: 2px 10px; font-size: 14px; } .wtools .wtoolrow .actions button { padding: 4px 10px; } }
.wsumhead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.wsumhead .chips { gap: 6px; }
.wsumhead .chip { font-size: 14px; padding: 2px 10px; }
.wtools .wsrc { margin-bottom: 6px; }
.wtools .wsrc .card { padding: 6px 10px; }
.wtools .wsrc .num { font-size: 26px; line-height: 1.1; }
.wtools .wsrc .note { font-size: 12px; margin: 0; }
.wtools .wsrcon { margin: 0 0 8px; font-size: 13px; }
/* 活動看板現場地圖（2026-10-17）：Mini Motorways 風格，圖示是柔和圓角膠囊；impeccable 評分後加概況、圖例、手機浮層 */
.amap { scroll-margin-top: 70px;
  /* 現場地圖色票：字與底對比都 ≥ 4.5（車輛深紅白字最醒目，監視器／過期車淺底深字退後） */
  --map-ink: #3e4a5c; --map-ink-2: #5d6878; --map-dark: #26324a; --map-paper: #f3f0e8;
  --map-car: #c9372c; --map-old: #d5d9df; --map-cam: #dbe3f7; --map-cam-many: #c9d6f5; --map-cam-dot: #6a8ad6;
  --map-post: #2e7d57; --map-live: #b0306f; --map-on: #1f7a50; --map-off: #6b7482; --map-warn: #c0392b; }
.amapbar { padding: 10px 14px 0; align-items: center; }
.amapbar .amapsp { flex: 1; }
.amapspots { padding-top: 6px; } .amapspots .chip { font-size: 14px; }
.amapwrap { display: grid; grid-template-columns: 1fr 340px; gap: 12px; padding: 10px 14px 14px; }
.amapmap { height: 560px; border: var(--line); border-radius: 14px; overflow: hidden; position: relative; }
.amapside { position: relative; border: var(--line); border-radius: 12px; padding: 10px 12px; background: #fff; overflow: auto; max-height: 560px; }
.amapside p { margin: 6px 0; }
.amaphead { font-size: 17px; margin-bottom: 8px; }
.amapnums { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 6px 0 10px; }
.amapnums div { background: var(--map-paper); border-radius: 10px; padding: 8px 10px; }
.amapnums b { display: block; font: 700 26px/1.1 "Noto Sans TC", sans-serif; color: var(--map-ink); }
.amapnums span { font-size: 13px; color: var(--map-ink-2); }
.amapx { position: absolute; top: 4px; right: 4px; width: 44px; height: 44px; min-height: 0; padding: 0; border-radius: 50%; font-size: 22px; line-height: 1; z-index: 2; }
.amapside.sel > b { display: block; padding-right: 48px; min-height: 30px; }
.amapvid { margin-top: 8px; position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: 8px; overflow: hidden; }
.amapvid iframe, .amapvid video { width: 100%; height: 100%; border: 0; display: block; }
.amapstat { position: absolute; left: 8px; bottom: 8px; z-index: 2; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; max-width: calc(100% - 50px); background: rgba(255,255,255,.88); border-radius: 10px; padding: 4px 10px; font: 500 12px "Noto Sans TC", sans-serif; color: var(--map-ink); pointer-events: none; }
.amaplg i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin: 0 3px 0 6px; vertical-align: -1px; }
.amaplg i.car { background: var(--map-car); } .amaplg i.old { background: var(--map-old); box-shadow: inset 0 0 0 1px var(--map-off); } .amaplg i.cam { background: var(--map-cam-many); box-shadow: inset 0 0 0 1px var(--map-cam-dot); } .amaplg i.live { background: var(--map-live); } .amaplg i.post { background: var(--map-post); }
.amaplink { font-weight: 700; color: var(--map-off); } .amaplink.on { color: var(--map-on); }
.amappin { font: 500 13px "Noto Sans TC", sans-serif; padding: 4px 10px; border-radius: 999px; border: 0; color: #fff; box-shadow: 0 3px 8px rgba(40,50,70,.25); white-space: nowrap; cursor: pointer; min-height: 0; }
.amappin::before { content: ""; position: absolute; left: 50%; top: 50%; width: max(44px, 100%); height: 44px; transform: translate(-50%, -50%); }   /* 外觀不變，手指可點範圍 44px */
.amappin.car { background: var(--map-car); z-index: 3; } .amappin.car.old { background: var(--map-old); color: var(--map-dark); }
.amappin.cam { background: var(--map-cam); color: var(--map-dark); padding: 2px 5px; font-size: 11px; box-shadow: 0 0 0 1px rgba(38,50,74,.18), 0 2px 6px rgba(40,50,70,.2); }
.amappin.cam.many { padding: 3px 8px; font-size: 12px; font-weight: 700; background: var(--map-cam-many); }
.amappin.post { background: var(--map-post); } .amappin.live { background: var(--map-live); }
.amapmap .maplibregl-ctrl-group button { min-height: 0; border: 0; border-radius: 0; box-shadow: none; transform: none; background-color: #fff; }
.amapmap .maplibregl-ctrl-group { border-radius: 10px; box-shadow: 0 2px 8px rgba(40,50,70,.18); }
.amapsub { margin-top: 14px; padding-top: 10px; border-top: 1px dashed #c9c3b5; } .amapsub .note { display: none; }
.amaperr { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 16px; text-align: center; background: var(--map-paper); color: var(--map-ink); }
.amaploading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--map-paper); color: var(--map-ink-2); font: 500 15px "Noto Sans TC", sans-serif; pointer-events: none; }
.amaperr b { font-size: 18px; }
.amapwarn { color: var(--map-warn); font-weight: 700; }
.amapnums .amapbad { background: #fbe9e7; } .amapnums .amapbad b { color: var(--map-warn); } .amapnums .amapbad .chip { font-size: 13px; padding: 0 8px; margin-top: 4px; }
.amaplist { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; } .amaplist button { text-align: left; min-height: 44px; }
.amapmode { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px dashed #c9c3b5; font-weight: 700; color: var(--map-ink); }
.amapmode .chip { font-size: 14px; padding: 2px 10px; flex: none; }
@media (max-width: 760px) {
  .amapwrap { grid-template-columns: 1fr; padding: 8px; } .amapmap { height: 60vh; } .amapside { max-height: none; }
  .amapside.sel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; max-height: 62vh; border-radius: 16px 16px 0 0; border-width: 3px 0 0; box-shadow: 0 -6px 24px rgba(0,0,0,.25); padding: 14px 14px 22px; }
  .amapstat .amaplg { display: none; }
  .amapsub, .amapbar [data-amapbig] { display: none; }
  .amapbar { flex-wrap: nowrap; overflow-x: auto; padding: 8px 10px 6px; scrollbar-width: none; } .amapbar::-webkit-scrollbar { display: none; }
  .amapbar .chip { flex: none; font-size: 14px; padding: 2px 10px; } .amapbar .amapsp { flex: 1 0 4px; }
  .amapspots { padding-top: 0; }
}
/* 指揮面板 #command（2026-10-18 示意版）：應變中心大螢幕，一頁看完不用捲；字大、燈號同時有顏色和文字 */
.cmd { --c-red: #e3262b; --c-amber: #f0a020; --c-green: #1f9d55; --map-ink: #3e4a5c; --map-ink-2: #5d6878; --map-paper: #f3f0e8; --map-car: #c9372c; --map-post: #2e7d57;
  display: grid; grid-template-rows: auto auto 72px minmax(0, 1fr) 210px; gap: 12px; height: calc(100vh - 215px); min-height: 700px; min-width: 0; }
.cmd:fullscreen { height: 100vh; min-height: 0; padding: 14px; background: #e9f4ff; overflow: hidden; }
.cmdtop { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; background: var(--navy); color: #fff; border: var(--line); border-radius: 14px; padding: 10px 16px; box-shadow: var(--shadow-sm); }
.cmdtop > * { min-width: 0; }
.cmdtitle { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cmdtitle b { font: 400 22px "Potta One", sans-serif; letter-spacing: 1px; }
.cmdtitle > span:not(.tag) { background: var(--yellow); color: var(--ink); border: 2px solid var(--ink); border-radius: 6px; padding: 0 8px; font-weight: 700; }
.cmddemo { color: var(--ink); font-size: 12px; padding: 0 6px; }
.cmdphase { display: flex; gap: 4px; list-style: none; margin: 0 0 0 auto; padding: 0; }
.cmdphase li { display: flex; flex-direction: column; align-items: center; min-width: 72px; padding: 3px 10px; border-radius: 10px; background: rgba(255,255,255,.12); color: #c5cfe0; line-height: 1.3; }
.cmdphase li b { font-size: 15px; } .cmdphase li span { font: 13px "Lilita One", sans-serif; letter-spacing: 1px; }
.cmdphase li.done { color: #8d9ab3; } .cmdphase li.done b::before { content: "✓ "; }
.cmdphase li.on { background: var(--yellow); color: var(--ink); border: 2px solid var(--ink); }
.cmdclock { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.cmdclock b { font: 30px "Lilita One", sans-serif; letter-spacing: 2px; } .cmdclock span { font-size: 14px; color: var(--yellow); font-weight: 700; }
.cmdfull { flex: none; }
.cmdnums { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.cmdnum { background: #fff; border: var(--line); border-radius: 12px; padding: 6px 14px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.cmdnum > span { font-size: 14px; color: var(--muted); font-weight: 700; }
.cmdnum b { font: 34px/1.1 "Lilita One", sans-serif; letter-spacing: 1px; } .cmdnum b i { font-style: normal; font-size: 20px; color: var(--muted); }
.cmdnum small { font-size: 13px; color: var(--muted); }
.cmdnum.lights b { display: flex; gap: 8px; } .cmdnum.lights em { font-style: normal; min-width: 44px; text-align: center; border-radius: 8px; color: #fff; border: 2px solid var(--ink); }
.cmdnum.lights.pending b { flex-wrap: wrap; }
.cmdnum.lights.pending em { font: 700 14px/2 sans-serif; white-space: nowrap; flex-shrink: 0; min-width: 0; padding: 0 3px; }
.cmdnum.lights em.red { background: var(--c-red); } .cmdnum.lights em.amber { background: var(--c-amber); color: var(--ink); } .cmdnum.lights em.green { background: var(--c-green); }
.cmdnum.cmdweather > span { display: flex; justify-content: space-between; gap: 6px; }
.cmdweather-source { font-style: normal; font-weight: 400; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdforecast em { font-style: normal; color: var(--c-red); font-weight: 700; }
.cmdnum.cmdweather-warn { background: #fff3b0; }
.cmdweather-warning { flex-basis: 100%; order: 99; background: #ffd60a; color: var(--ink); border: 2px solid var(--ink); border-radius: 8px; padding: 2px 10px; font-weight: 700; }
.cmdweather-warning[hidden] { display: none; }
.cmdmain { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); gap: 12px; min-height: 0; }
.cmdmap { position: relative; border: var(--line); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-sm); min-height: 0; }
.cmdmap .maplibregl-ctrl-group button { min-height: 0; border: 0; border-radius: 0; box-shadow: none; transform: none; background-color: #fff; }
.cmdside, .cmdbox { background: #fff; border: var(--line); border-radius: 14px; padding: 10px 12px; overflow: auto; min-height: 0; box-shadow: var(--shadow-sm); }
.cmdside h3, .cmdbox h3 { margin: 0 0 8px; font-size: 18px; display: flex; align-items: baseline; gap: 8px; }
.cmdside h3 span, .cmdbox h3 span { font-size: 13px; color: var(--muted); font-weight: 400; }
.cmdzh { margin-top: 14px !important; padding-top: 10px; border-top: 2px dashed #c9c3b5; }
.cmdissue { border: 2px solid var(--ink); border-left-width: 10px; border-radius: 10px; padding: 8px 10px; margin-bottom: 10px; cursor: pointer; background: #fff; }
.cmdissue.red { border-left-color: var(--c-red); background: #fff1f0; } .cmdissue.amber { border-left-color: var(--c-amber); background: #fff8e8; }
.cmdissue.sel { box-shadow: 0 0 0 3px var(--yellow), 3px 3px 0 3px var(--ink); }
.cmdissue .cmdih { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.cmdissue > b { font-size: 17px; display: block; margin-bottom: 4px; }
.cmdissue dl { margin: 0; display: grid; gap: 2px; font-size: 14px; line-height: 1.45; }
.cmdissue dl div { display: grid; grid-template-columns: 52px 1fr; } .cmdissue dt { color: var(--muted); font-weight: 700; } .cmdissue dd { margin: 0; }
.cmdask { margin: 6px 0 0; font-weight: 700; color: var(--red-dark); }
.cmdago { font: 15px "Lilita One", sans-serif; letter-spacing: 1px; color: var(--muted); }
.cmdlight { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; padding: 0 8px; border-radius: 6px; border: 2px solid var(--ink); background: #fff; }
.cmdlight i, .cmdzones .dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--ink); flex: none; }
.cmdlight.red i, .dot.red { background: var(--c-red); } .cmdlight.amber i, .dot.amber { background: var(--c-amber); } .cmdlight.green i, .dot.green { background: var(--c-green); }
.cmdlight.red { background: var(--c-red); color: #fff; }
.cmdzones { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cmdzones button { width: 100%; display: flex; align-items: center; gap: 8px; text-align: left; padding: 4px 10px; box-shadow: none; border-width: 2px; }
.cmdzones button b { flex: 1; font-size: 15px; } .cmdzones button span { font-size: 13px; color: var(--muted); }
.cmdzones button.on { background: var(--yellow); }
.cmdbottom { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); gap: 12px; min-height: 0; }
.cmdcams { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; height: calc(100% - 34px); }
.cmdcams figure { margin: 0; min-width: 0; min-height: 0; display: flex; flex-direction: column; } .cmdcams .amapvid { margin: 0; position: relative; flex: 1; min-height: 0; aspect-ratio: auto; background: #000; border-radius: 8px; overflow: hidden; }
.cmdcams video { width: 100%; height: 100%; display: block; object-fit: cover; }
.cmdcams .cstate { position: absolute; left: 6px; top: 6px; font-size: 12px; }
.cmdcams figcaption { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdsocial { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cmdsocial li { border-bottom: 1px dashed #c9c3b5; padding-bottom: 6px; cursor: pointer; } .cmdsocial p { margin: 2px 0; font-size: 15px; line-height: 1.4; } .cmdsocial small { color: var(--muted); }
.amappin.cmdzlabel { font-weight: 700; font-size: 14px; padding: 4px 12px; border: 2px solid #fff; }
.amappin.cmdzlabel.red { background: var(--c-red); z-index: 4; } .amappin.cmdzlabel.amber { background: var(--c-amber); color: #26324a; } .amappin.cmdzlabel.green { background: var(--c-green); }
.amappin.car.busy { background: #7a4fd0; }
@media (max-width: 1100px) {
  .cmd { height: auto; min-height: 0; grid-template-rows: none; grid-template-columns: minmax(0, 1fr); }
  .cmdmain, .cmdbottom { grid-template-columns: 1fr; } .cmdmap { height: 60vh; } .cmdnums { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cmdnum.cmdweather { grid-column: 1 / -1; }
  .cmdphase { margin: 0; overflow-x: auto; max-width: 100%; } .cmdcams { grid-template-columns: 1fr; height: auto; } .cmdcams .amapvid { flex: none; aspect-ratio: 16 / 9; }
}

/* 119：所有新增規則限於指揮面板，不影響其他地圖。 */
.cmd .cmdmapwrap { position: relative; min-width: 0; min-height: 0; }
.cmd .cmdmapwrap > .cmdmap { height: 100%; }
.cmd .cmd119-scope { position: absolute; right: 12px; top: 12px; z-index: 5; font-size: 13px; min-height: 36px; }
.cmd .cmd119-scope[aria-pressed="true"] { background: var(--yellow); }
.cmd .cmd119-bar { min-width: 0; height: 72px; overflow: hidden; border: 2px solid var(--ink); border-radius: 10px; background: #fff; }
.cmd .cmd119-bar.has-fire { background: var(--c-red); color: #fff; }
.cmd .cmd119 { position: relative; display: flex; min-width: 0; height: 100%; gap: 6px; }
.cmd .cmd119-summary { flex: 0 0 260px; min-width: 0; padding: 3px 8px; display: flex; flex-direction: column; justify-content: center; font-size: 13px; line-height: 1.4; background: #e6f6ff; }
.cmd .cmd119-summary.has-fire { background: var(--c-red); color: #fff; }
.cmd .cmd119-source { color: inherit; font-size: 10px; white-space: nowrap; }
.cmd .cmd119-status { align-self: center; color: var(--muted); font-size: 13px; }
.cmd .cmd119-delay { position: absolute; bottom: 0; left: 2px; padding: 0 4px; font-size: 10px; background: var(--yellow); color: var(--ink); }
.cmd .cmd119 ul { display: flex; flex: 1; min-width: 0; gap: 6px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; list-style: none; padding: 3px 3px 6px; margin: 0; }
.cmd .cmd119 li { flex: 0 0 210px; min-width: 0; scroll-snap-align: start; }
.cmd .cmd119-row { display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 0; min-width: 0; text-align: left; font-size: 12px; line-height: 1.35; white-space: nowrap; padding: 2px 7px; background: #fff; color: var(--ink); border: 1px solid #c9c3b5; border-radius: 6px; box-shadow: none; text-shadow: none; }
.cmd .cmd119-row > * { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.cmd .cmd119-row small { font-size: 11px; }
.cmd .cmd119-row:hover { background: #fff8e1; transform: none; }
.cmd .cmd119-row:disabled { opacity: .6; cursor: default; }
.cmd .cmd119-row.fire { color: var(--red-dark); font-weight: 700; background: #fff1f0; }
.cmd .cmd119-row.selected { background: #fff3b0; border: 2px solid var(--sky); box-shadow: inset 0 0 0 1px var(--sky); }
.cmd .amappin.c119 { min-height: 0; width: 30px; height: 30px; padding: 0; font-size: 18px; border: 2px solid var(--ink); border-radius: 50%; text-shadow: none; }
.cmd .amappin.c119 small { position: absolute; top: -7px; right: -10px; font: 700 9px/13px sans-serif; background: var(--navy); color: #fff; padding: 0 3px; border: 1px solid #fff; border-radius: 4px; pointer-events: none; }
.cmd .amappin.c119.fire { width: 34px; height: 34px; border: 3px solid var(--c-red); background: #ffe3df; z-index: 4; }
.cmd .amappin.c119.ems { background: #e6f6ff; }
.cmd .amappin.c119.other { background: #fff3b0; }
.cmd .amappin.c119.selected { width: 42px; height: 42px; font-size: 24px; z-index: 6; outline: 3px solid var(--sky); outline-offset: 3px; }
.cmd .amappin.c119.pulse { animation: cmd119-pulse .7s ease-out 2; }
@keyframes cmd119-pulse { from { box-shadow: 0 0 0 0 rgba(29,127,224,.8); } to { box-shadow: 0 0 0 16px rgba(29,127,224,0); } }
@media (prefers-reduced-motion: reduce) { .cmd .amappin.c119.pulse { animation: none; } }
@media (max-width: 1100px) {
  .cmd .cmdmapwrap { height: 60vh; }
  .cmd .cmd119-bar { height: 122px; }
  .cmd .cmd119 { flex-direction: column; gap: 0; }
  .cmd .cmd119-summary { flex: 0 0 48px; padding: 2px 8px; display: block; }
  .cmd .cmd119-summary > span { margin-left: 8px; }
  .cmd .cmd119-source { display: block; }
  .cmd .cmd119-delay { top: 0; bottom: auto; left: auto; right: 0; }
}
.cmd .cmdcount-seconds { font-size: 24px; }

/* 現場地圖：多支直播切換 */
.amaplives { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.amaplives .chip.on { background: var(--yellow); }

/* 指揮面板：直播占影像區第一格；#cmdCams 用 display: contents 讓監視器跟直播排在同一個格線 */
#cmdCams { display: contents; }
.cmdlive iframe { width: 100%; height: 100%; border: 0; display: block; }
.cmdlive figcaption { display: flex; gap: 4px; overflow-x: auto; }
.cmdlive figcaption .chip { font-size: 12px; padding: 0 8px; min-height: 0; }
.cmdlive figcaption .chip.on { background: var(--yellow); }
.cmdlive[hidden] { display: none; }

/* 大螢幕指揮版面（2026-10-19）：一個畫面塞滿不用捲；左邊地圖＋影像，右邊需處置＋輿情 */
main:has(#view > .cmd) { max-width: none; }
.cmd { grid-template-rows: auto auto 64px minmax(0, 1fr); height: max(calc(100dvh - 16px), 860px); min-height: 0; gap: 10px; }
@media (max-height: 950px) { .cmdleft { grid-template-rows: minmax(0, 1fr) 150px; } .cmdnum b { font-size: 28px; } }
.cmd:fullscreen { height: 100vh; }
.cmdtop { padding: 6px 14px; }
.cmdnums { grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.6fr); gap: 10px; }
.cmdnum { padding: 6px 12px; }
.cmdmain { grid-template-columns: minmax(0, 1fr) minmax(380px, 27%); gap: 10px; }
.cmdleft { display: grid; grid-template-rows: minmax(0, 1fr) 200px; gap: 10px; min-width: 0; min-height: 0; }
.cmdright { display: grid; grid-template-rows: minmax(0, 1.4fr) minmax(0, 1fr); gap: 10px; min-width: 0; min-height: 0; }
.cmd .cmd119-bar { height: 64px; }
.cmd .cmd119-summary { flex-basis: 290px; font-size: 15px; }
.cmd .cmd119-source { font-size: 12px; }
.cmd .cmd119 li { flex: 1 0 240px; max-width: 360px; }
.cmd .cmd119-row { font-size: 14px; padding: 3px 9px; }
.cmd .cmd119-row small { font-size: 12px; }
/* 天氣卡 */
.cmdnum.cmdweather { gap: 1px; }
.cmdnum.cmdweather > span { align-items: center; }
.cmdwx-light { font-style: normal; font-size: 13px; font-weight: 700; padding: 0 8px; border: 2px solid var(--ink); border-radius: 6px; background: #e8f7ee; white-space: nowrap; }
.cmdwx-light.amber { background: var(--yellow); } .cmdwx-light.red { background: var(--c-red); color: #fff; }
.cmdwx-now { display: flex; align-items: center; gap: 10px; }
.cmdwx-now span { font-size: 14px; line-height: 1.25; color: var(--ink); font-weight: 700; }
.cmdnum.cmdweather small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdwx-slot { display: inline-block; margin-right: 6px; } .cmdwx-slot.wet { color: var(--c-red); font-weight: 700; }
.cmdnum.cmdweather .cmdweather-source { font-size: 11px; color: var(--muted); }
.cmdnum.cmdweather-red { background: #ffe3df; }
@media (max-width: 1100px) {
  .cmd { height: auto; min-height: 0; grid-template-rows: none; }
  .cmdnums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cmdphase li { flex: none; } .cmdphase li b { white-space: nowrap; }
  .cmdmain { grid-template-columns: minmax(0, 1fr); }
  /* 手機順序：地圖 → 需處置 → 影像 → 輿情 */
  .cmdleft, .cmdright { display: contents; }
  .cmd .cmdmapwrap { order: 1; } .cmdside { order: 2; } .cmd .cmdcambox { order: 3; } .cmdright > .cmdbox { order: 4; }
  .cmd .cmdcambox { height: auto; }
  .cmdright > * { max-height: 70vh; }
  .cmd .cmd119-bar { height: 122px; }
  .cmd .cmd119 li { flex: 0 0 220px; }
}
.cmdphase li.wait { opacity: .6; }
.cmdsr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 格子高度（2026-10-19 使用者：要完整一點）：平常內容多高就撐多高、整頁往下捲；全螢幕投影才維持一個畫面塞滿、框內捲 */
.cmd { height: auto; grid-template-rows: auto auto 64px auto; }
.cmdleft { grid-template-rows: auto auto; }
.cmd .cmdmapwrap { height: clamp(520px, 64vh, 780px); }
.cmd .cmdcambox { height: auto; }
.cmdcams { height: auto; }
.cmdcams .amapvid { flex: none; aspect-ratio: 16 / 9; }
.cmdright { grid-template-rows: auto auto; align-content: start; }
.cmdside, .cmdbox { overflow: visible; }
.cmd:fullscreen { grid-template-rows: auto auto 64px minmax(0, 1fr); }
.cmd:fullscreen .cmdleft { grid-template-rows: minmax(0, 1fr) 200px; }
.cmd:fullscreen .cmdright { grid-template-rows: minmax(0, 1.4fr) minmax(0, 1fr); }
.cmd:fullscreen .cmdmapwrap { height: auto; }
.cmd:fullscreen .cmdcams { height: calc(100% - 34px); }
.cmd:fullscreen .cmdcams .amapvid { flex: 1; aspect-ratio: auto; }
.cmd:fullscreen .cmdside, .cmd:fullscreen .cmdbox { overflow: auto; }
@media (max-height: 950px) { .cmd:fullscreen .cmdleft { grid-template-rows: minmax(0, 1fr) 150px; } }
/* 輿情真實資料 */
.cmdsoc-meta { margin: -4px 0 8px; font-size: 13px; color: var(--muted); }
.cmdsocial li a { display: block; color: inherit; text-decoration: none; }
.cmdsocial li a:hover p { text-decoration: underline; }
.cmdsocial li.local { background: #fff8e1; border-radius: 6px; padding: 4px 6px; }
.cmdsocial .tag { margin-right: 4px; }
@media (max-width: 1100px) { .cmd .cmdmapwrap { height: 60vh; } .cmdright > * { max-height: none; } }

/* 輿情移到最下面一整排（2026-10-19）：右欄只放需處置＋分區燈號，左右高度比較平均 */
.cmd { grid-template-rows: auto auto 64px auto auto; }
.cmdleft, .cmdright { align-content: start; }
.cmdright { grid-template-rows: auto; }
.cmdsocbox .cmdsocial { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); column-gap: 16px; }
.cmd:fullscreen { grid-template-rows: auto auto 64px minmax(0, 1fr) 190px; }
.cmd:fullscreen .cmdright { grid-template-rows: minmax(0, 1fr); }
.cmd:fullscreen .cmdsocbox .cmdsocial { grid-auto-flow: column; grid-auto-columns: minmax(340px, 1fr); grid-template-columns: none; overflow-x: auto; }
@media (max-width: 1100px) { .cmdsocbox .cmdsocial { grid-template-columns: 1fr; } }


/* 每一塊都能放大（2026-10-19）：右上角 ⛶；放大後蓋滿畫面，背景變暗，✕ 或 Esc 關閉 */
.cmd .cmdzbtn { min-height: 0; padding: 1px 9px; font-size: 15px; line-height: 1.5; border: 2px solid var(--ink); border-radius: 8px; background: #fff; color: var(--ink); box-shadow: none; text-shadow: none; z-index: 7; }
.cmd .cmdzbtn:hover { background: var(--yellow); transform: none; }
.cmdcambox, .cmdsocbox, #cmd119Bar, #cmdSide { position: relative; }
.cmdcambox > .cmdzbtn, .cmdsocbox > .cmdzbtn, #cmd119Bar > .cmdzbtn, #cmdSide > .cmdzbtn { position: absolute; top: 8px; right: 10px; }
#cmd119Bar > .cmdzbtn { top: 4px; right: 6px; }
.cmdmapwrap > .cmdzbtn { position: absolute; top: 12px; right: 12px; font-size: 17px; padding: 4px 10px; }
.cmd .cmd119-scope { right: 62px; }
.cmdnum.cmdweather > span .cmdzbtn { margin-left: 6px; font-size: 13px; padding: 0 7px; }
.cmdnum.cmdweather > span { justify-content: flex-start; } .cmdnum.cmdweather > span .cmdwx-light { margin-left: auto; }
body.cmdzooming { overflow: hidden; }
.cmd .cmdzoomed { position: fixed !important; inset: 12px !important; z-index: 2000 !important; width: auto !important; height: auto !important; max-height: none !important; overflow: auto !important; margin: 0 !important;
  background: #fff; box-shadow: 0 0 0 100vmax rgba(14, 24, 44, .6) !important; border-radius: 16px; }
.cmd .cmdzoomed > .cmdzbtn { position: fixed; top: 22px; right: 24px; font-size: 18px; padding: 4px 14px; background: var(--yellow); z-index: 2001; }
/* 地圖 */
.cmd .cmdmapwrap.cmdzoomed { overflow: hidden !important; padding: 0; }
.cmd .cmdmapwrap.cmdzoomed > .cmdmap { height: 100%; border-radius: 16px; }
.cmd .cmdmapwrap.cmdzoomed > .cmd119-scope { top: 22px; right: 140px; }
/* 影像：大畫面並排 */
.cmd .cmdcambox.cmdzoomed { padding: 16px 20px; }
.cmd .cmdcambox.cmdzoomed .cmdcams { height: auto; grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); gap: 14px; }
.cmd .cmdcambox.cmdzoomed .amapvid { flex: none; aspect-ratio: 16 / 9; }
.cmd .cmdcambox.cmdzoomed h3 { font-size: 22px; }
/* 需處置＋分區燈號：字放大 */
.cmd #cmdSide.cmdzoomed { padding: 20px 28px; }
.cmd #cmdSide.cmdzoomed > :not(.cmdzbtn) { zoom: 1.35; }
/* 119：完整清單 */
.cmd #cmd119Bar.cmdzoomed { padding: 16px 20px; }
.cmd #cmd119Bar.cmdzoomed .cmd119 { flex-direction: column; height: auto; gap: 12px; }
.cmd #cmd119Bar.cmdzoomed .cmd119-summary { flex: none; font-size: 20px; padding: 10px 14px; border-radius: 10px; }
.cmd #cmd119Bar.cmdzoomed .cmd119 ul { flex-wrap: wrap; overflow: visible; gap: 10px; }
.cmd #cmd119Bar.cmdzoomed .cmd119 li { flex: 1 1 320px; max-width: none; height: 78px; }
.cmd #cmd119Bar.cmdzoomed .cmd119-row { font-size: 17px; padding: 6px 12px; } .cmd #cmd119Bar.cmdzoomed .cmd119-row small { font-size: 14px; }
.cmd #cmd119Bar.cmdzoomed.has-fire { background: #fff; color: var(--ink); }
/* 輿情：完整列表、字放大 */
.cmd .cmdsocbox.cmdzoomed { padding: 18px 24px; }
.cmd .cmdsocbox.cmdzoomed > :not(.cmdzbtn) { zoom: 1.2; }
.cmd .cmdsocbox.cmdzoomed .cmdsocial { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); overflow: visible; }
/* 天氣：逐時表 */
.cmd #cmdWeather.cmdzoomed { padding: 20px 28px; gap: 6px; }
.cmd #cmdWeather.cmdzoomed > :not(.cmdwx-table):not(.cmdwx-tnote) { zoom: 1.3; }
.cmdwx-table { border-collapse: collapse; margin-top: 12px; font-size: 17px; width: 100%; max-width: 900px; }
.cmdwx-table caption { text-align: left; font-weight: 700; font-size: 19px; margin-bottom: 6px; }
.cmdwx-table th, .cmdwx-table td { border-bottom: 1px solid #ddd6c6; padding: 6px 10px; text-align: center; }
.cmdwx-table th { background: var(--navy); color: #fff; } .cmdwx-table tr.wet td { color: var(--c-red); font-weight: 700; }
@media (max-width: 760px) {
  .cmd .cmdzoomed { inset: 4px !important; border-radius: 10px; }
  .cmd .cmdzoomed > .cmdzbtn { top: 10px; right: 10px; }
  .cmd .cmdcambox.cmdzoomed .cmdcams { grid-template-columns: 1fr; }
  .cmd #cmdSide.cmdzoomed > :not(.cmdzbtn), .cmd .cmdsocbox.cmdzoomed > :not(.cmdzbtn) { zoom: 1.1; }
  .cmd .cmdsocbox.cmdzoomed .cmdsocial { grid-template-columns: 1fr; }
  .cmdwx-table { font-size: 14px; } .cmdwx-table th, .cmdwx-table td { padding: 4px 4px; }
}
.cmd #cmd119Bar.cmdzoomed .cmd119 ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.cmd #cmd119Bar.cmdzoomed .cmd119 li { max-width: none; }