/* =====================================================================
   甲版「現場工作台」版面與自有元件
   只用 --hp-* 色票；共用元件（按鈕、膠囊、開關、彈窗…）在 shared/base.css
   桌機：整頁固定在視窗內，只有內容區（.a-main）會捲動
   手機（≤820）：整頁自然捲動，頂部固定、底部分頁列固定
   ===================================================================== */

:root {
  --a-gap: 28px;          /* 內容區四周留白 */
  --a-gut: 10px;          /* 捲軸寬（base.css 設 10px），scrollbar-gutter 兩側各留一份 */
  --a-top-h: 64px;        /* 頂部導覽高度 */
  --a-bbar-h: 64px;       /* 手機底部分頁高度 */
  --a-radius: 14px;
}
@media (max-width: 820px) {
  :root { --a-gap: 16px; --a-top-h: 56px; }
}

/* ---------- 外框 ---------- */
html, body { height: 100%; }
body.a-app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}
.a-head { flex: none; position: relative; z-index: 30; }
.a-main {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable both-edges;
  /* 左右減掉捲軸預留寬，視覺上四邊都是 --a-gap */
  padding: var(--a-gap) calc(var(--a-gap) - var(--a-gut));
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.a-main > [hidden], .a-panel[hidden] { display: none !important; }
.a-panel { display: contents; }

/* ---------- 頂部導覽 ---------- */
.a-top {
  display: flex;
  align-items: center;
  gap: 20px;
  height: var(--a-top-h);
  padding: 0 var(--a-gap);
  background: var(--hp-bg-2);
  border-bottom: 1px solid var(--hp-border);
}
.a-brand { display: flex; align-items: center; gap: 12px; flex: none; color: inherit; text-decoration: none; min-width: 0; }
.a-logo {
  width: 36px; height: 36px; flex: none; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--hp-brand-bg); border: 1px solid var(--hp-brand-bd); color: var(--hp-brand-ink);
  box-shadow: inset 0 1px 0 var(--hp-btn-hl);
}
.a-brand__txt { min-width: 0; }
.a-brand b { display: block; font-size: 16px; line-height: 1.2; letter-spacing: .01em; }
.a-brand small { display: block; color: var(--hp-text-3); font-size: 12px; line-height: 1.3; white-space: nowrap; }

.a-nav { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; padding-left: 12px; border-left: 1px solid var(--hp-border); }
.a-nav__item {
  display: inline-flex; align-items: center; gap: 8px;
  box-sizing: border-box; height: 40px; padding: 0 14px;
  border: 1px solid transparent; border-radius: 10px;
  background: transparent; color: var(--hp-text-2);
  font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap;
  text-decoration: none; cursor: pointer;
  transition: transform .12s ease, background .15s, color .15s, box-shadow .15s;
}
.a-nav__item .hp-icon { width: 18px; height: 18px; color: var(--hp-text-3); }
.a-nav__item .hp-icon--chevron-down { width: 16px; height: 16px; margin-left: -2px; }
.a-nav__item:hover { color: var(--hp-text); background: var(--hp-row-hover); transform: translateY(-1px); }
.a-nav__item:active { transform: translateY(1px); }
.a-nav__item:focus-visible { outline: 2px solid var(--hp-ring); outline-offset: 2px; }
.a-nav__item.is-active {
  color: var(--hp-text);
  border-color: var(--hp-btn2-bd);
  background: linear-gradient(180deg, var(--hp-btn2-top), var(--hp-btn2-bot));
  box-shadow: inset 0 1px 0 var(--hp-btn-hl), var(--hp-btn-drop);
}
.a-nav__item.is-active .hp-icon { color: var(--hp-brand-3); }
.a-top__right { display: flex; align-items: center; gap: 8px; flex: none; margin-left: auto; }
.a-user { padding: 0 10px 0 4px; gap: 8px; }
.a-user .hp-icon { width: 16px; height: 16px; color: var(--hp-text-3); }
.a-avatar {
  width: 30px; height: 30px; flex: none; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--hp-brand-bg); border: 1px solid var(--hp-brand-bd); color: var(--hp-brand-ink);
  font-size: 13px; font-weight: 800;
}
.a-avatar--lg { width: 56px; height: 56px; font-size: 22px; }

/* ---------- 下拉選單（導覽列「現場」「使用者」） ---------- */
.a-menu {
  position: fixed;
  z-index: 200;
  width: 300px;
  max-width: calc(100vw - 32px);
  padding: 6px;
  border: 1px solid var(--hp-border-2);
  border-radius: 12px;
  background: var(--hp-surface);
  box-shadow: var(--hp-shadow-pop);
}
.a-menu[hidden] { display: none; }
.a-menu__head { display: flex; align-items: center; gap: 10px; padding: 10px 10px 12px; border-bottom: 1px solid var(--hp-border); margin-bottom: 6px; }
.a-menu__head b { display: block; font-size: 14px; }
.a-menu__head small { display: block; color: var(--hp-text-3); font-size: 12px; }
.a-menu__item {
  display: flex; align-items: center; gap: 12px;
  min-height: 48px; padding: 6px 10px;
  border-radius: 8px; color: var(--hp-text); text-decoration: none;
}
.a-menu__item:hover, .a-menu__item:focus-visible { background: var(--hp-row-hover); outline: none; }
.a-menu__item > .hp-icon { width: 18px; height: 18px; color: var(--hp-text-3); }
.a-menu__item > span { flex: 1; min-width: 0; }
.a-menu__item b { display: block; font-size: 14px; font-weight: 700; }
.a-menu__item small { display: block; color: var(--hp-text-3); font-size: 12px; }
.a-menu__item.is-current { background: var(--hp-brand-bg); }
.a-menu__item.is-current > .hp-icon--check { color: var(--hp-brand-ink); }
.a-menu__sep { height: 1px; margin: 6px 4px; background: var(--hp-border); }

/* ---------- 頂部橫幅區（斷線） ---------- */
.a-alerts:empty, .a-sitebanner:empty { display: none; }
.a-alerts .hp-banner, .a-sitebanner .hp-banner { padding-left: var(--a-gap); padding-right: var(--a-gap); }
.a-sitebanner { flex: none; }

/* ---------- 工作台頁首（工地名稱＋合約＋資料時間＋分頁籤） ---------- */
.a-sitehead {
  padding: 12px var(--a-gap) 0;
  background: linear-gradient(180deg, var(--hp-bg-2), var(--hp-bg));
  border-bottom: 1px solid var(--hp-border);
}
.a-sitehead__row { display: flex; align-items: center; gap: 14px; min-height: 48px; }
.a-sitehead__ic {
  width: 44px; height: 44px; flex: none; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--hp-surface); border: 1px solid var(--hp-border-2); color: var(--hp-brand-3);
  box-shadow: inset 0 1px 0 var(--hp-btn-hl);
}
.a-sitehead__name { margin: 0; font-size: 24px; font-weight: 800; line-height: 1.25; letter-spacing: .01em; white-space: nowrap; }
.a-sitehead__switch { display: none; }
.a-sitehead__info { display: none; }
.a-sitehead__meta { flex: 1; min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; }
.a-sitehead__fresh { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.a-sitehead__tabs { padding: 10px 0 12px; }

/* ---------- 頁面標題列（選擇現場、紀錄、帳號） ---------- */
.a-pagehead { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 10px 20px; flex: none; }
.a-pagehead h1 { margin: 0; font-size: 22px; font-weight: 800; line-height: 1.3; }
.a-pagehead p { margin: 2px 0 0; color: var(--hp-text-3); font-size: 13px; }
.a-pagehead__act { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ---------- 卡片標題列 ---------- */
.a-cardhead { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; min-height: 40px; }
.a-cardhead h2 { margin: 0; font-size: 16px; font-weight: 800; line-height: 1.3; display: flex; align-items: center; gap: 8px; }
.a-cardhead h2 .hp-icon { width: 18px; height: 18px; color: var(--hp-brand-3); }
.a-cardhead__sub { color: var(--hp-text-3); font-size: 13px; }
.a-cardhead__act { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.a-label { color: var(--hp-text-3); font-size: 12px; font-weight: 700; letter-spacing: .04em; }

/* 撐滿：最後一張主卡撐到內容區底；內容多就卡內捲 */
.a-fill { flex: 1 1 0; min-height: 300px; display: flex; flex-direction: column; gap: 14px; }
.a-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; }

/* ---------- 選擇現場：一個工地一張卡（<1700 橫列；≥1700 卡片格線） ---------- */
.a-sitelist { display: flex; flex-direction: column; gap: 12px; flex: none; }
.a-siterow {
  --hp-card-pad: 16px 20px;
  display: grid;
  grid-template-columns: minmax(200px, 16%) 228px minmax(0, 1fr) 190px;
  grid-template-areas: "site counts meters go" "issue issue meters go";
  align-items: center;
  column-gap: 24px;
}
.a-siterow__site { grid-area: site; display: flex; align-items: center; gap: 12px; min-width: 0; }
.a-siterow > .a-counts { grid-area: counts; }
.a-siterow__go { grid-area: go; }
/* 最近異常：橘字，只在有客觀異常時出現 */
.a-issue { grid-area: issue; display: flex; align-items: flex-start; gap: 6px; margin: 10px 0 0; color: var(--hp-warn-ink); font-size: 13px; font-weight: 600; line-height: 1.5; min-width: 0; }
.a-issue .hp-icon { width: 15px; height: 15px; flex: none; margin-top: 2px; }
.a-issue b { margin-right: 8px; font-weight: 800; }
.a-siterow__name { min-width: 0; }
.a-siterow__name h2 { margin: 0; font-size: 18px; font-weight: 800; line-height: 1.3; }
.a-siterow__pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.a-siterow__pills:empty { min-height: 24px; } /* 沒有膠囊（免合約）也保留同樣高度，同一列的工地名稱才會對齊 */
.a-siterow__meters { grid-area: meters; min-width: 0; align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding-left: 24px; border-left: 1px solid var(--hp-border); }
.a-siterow__meters .a-mlist { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px 24px; }
.a-siterow__go { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.a-sitecard__ic {
  width: 42px; height: 42px; flex: none; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--hp-bg-2); border: 1px solid var(--hp-border); color: var(--hp-brand-3);
}
.a-counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.a-count { padding: 8px 12px; border-radius: 10px; background: var(--hp-bg-2); min-width: 0; }
.a-count b { display: block; font-size: 22px; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; }
.a-count span { display: flex; align-items: center; gap: 6px; color: var(--hp-text-3); font-size: 12px; font-weight: 600; }
.a-count span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--_c); flex: none; }
.a-count--on { --_c: var(--hp-success); }
.a-count--off { --_c: var(--hp-error); }
.a-count--offline { --_c: var(--hp-mute); }
.a-count--on b { color: var(--hp-ok-ink); }
.a-count--off b { color: var(--hp-error-ink); }
.a-count--offline b { color: var(--hp-mute-ink); }
.a-count.is-zero b { color: var(--hp-text-3); }
.a-mlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.a-mlist li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 12px; font-size: 13px; }
.a-mlist__name { color: var(--hp-text-2); font-weight: 600; min-width: 0; }
.a-mlist__val { font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.a-mlist__val em { font-style: normal; font-weight: 600; font-size: 12px; color: var(--hp-text-3); margin-left: 3px; }
.a-mlist__last { grid-column: 1 / -1; color: var(--hp-text-3); font-size: 12px; }
.a-mlist li.is-offline .a-mlist__val { color: var(--hp-mute); }
.a-when { display: inline-flex; align-items: center; gap: 6px; color: var(--hp-text-3); font-size: 13px; min-width: 0; }
.a-when .hp-icon { width: 15px; height: 15px; }

/* ---------- 控制：設備面板＋今日動態 ---------- */
/* 排法：手機與 821–999 上下疊；1000–1699 左設備、右今日動態；≥1700 設備在上、今日動態在下撐滿 */
.a-ctl { flex: 1 0 auto; display: flex; flex-direction: column; gap: 16px; min-height: 0; }
.a-board { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.a-today { display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 0; container-type: inline-size; }
.a-today .a-cardhead h2 .hp-icon { color: var(--hp-brand-3); }
/* 與左邊篩選分頁籤同高（32px），同一列只有一種控件高度 */
.a-today .a-cardhead .hp-btn { height: 32px; }
/* 今日動態清單：桌機在區內捲動（絕對定位，不撐高整列） */
.a-today__body { position: relative; flex: 1 1 auto; min-height: 240px; }
.a-today__scroll {
  position: absolute; inset: 0; overflow: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column;
  margin: 0 -8px; padding: 0 8px;
}
/* 今日次數：四格一列 */
.a-tstats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.a-tstat { min-width: 0; padding: 8px; border-radius: 10px; background: var(--hp-bg-2); }
.a-tstat b { display: block; font-size: 20px; font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; }
.a-tstat span { display: block; color: var(--hp-text-3); font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 今日動態區太窄（1024 寬）：次數改 2×2，字不截斷 */
@container (max-width: 300px) { .a-tstats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.a-tl { list-style: none; margin: 0; padding: 0; }
.a-tl__item {
  display: grid; align-items: center;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  grid-template-areas: "time dev act" "time op act";
  gap: 2px 12px;
  padding: 10px 0; border-top: 1px solid var(--hp-border);
}
.a-tl__item:first-child { border-top: 0; padding-top: 2px; }
.a-tl__time { grid-area: time; align-self: start; padding-top: 1px; color: var(--hp-text-2); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.a-tl__dev { grid-area: dev; font-size: 14px; font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }
.a-tl__act { grid-area: act; }
.a-tl__op { grid-area: op; color: var(--hp-text-3); font-size: 12px; }
.a-tl__op .a-op .hp-icon { width: 14px; height: 14px; }

@media (min-width: 1000px) and (max-width: 1699px) {
  .a-ctl { display: grid; grid-template-columns: minmax(0, 1fr) clamp(320px, 28%, 400px); align-items: stretch; }
  /* 開關只有 1～2 台：左右各半，設備卡直排，不讓兩張小卡縮在左上角 */
  .a-ctl[data-n="1"], .a-ctl[data-n="2"] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .a-ctl[data-n="1"] .a-devgrid, .a-ctl[data-n="2"] .a-devgrid { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1700px) {
  .a-board { flex: none; }
  .a-today { flex: 1 1 auto; min-height: 320px; }
  .a-tl__item {
    grid-template-columns: 120px minmax(0, 1.6fr) 150px minmax(0, 1fr);
    grid-template-areas: "time dev act op";
    gap: 0 20px; padding: 13px 4px;
  }
  .a-tl__item:first-child { padding-top: 4px; }
  .a-tstats { grid-template-columns: repeat(4, minmax(0, 200px)); }
  .a-tl__time { align-self: center; padding-top: 0; font-size: 14px; }
  .a-tl__op { font-size: 13px; }
}

/* 設備卡格線：張數少時撐滿整列（auto-fit），最多 5 欄 */
.a-devgrid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, max(280px, calc((100% - 56px) / 5))), 1fr)); }
.a-dev {
  position: relative;
  display: flex; flex-direction: column; gap: 12px;
  min-width: 0; padding: 14px 16px;
  border: 1px solid var(--hp-border); border-radius: 12px;
  background: var(--hp-surface-2);
  box-shadow: var(--hp-shadow-card);
}
/* 開啟中：很淡的綠色外框；離線：灰色虛線框（不用彩色細條） */
.a-dev[data-state="on"] { border-color: color-mix(in srgb, var(--hp-ok-bd) 60%, var(--hp-border)); }
.a-dev[data-state="offline"] { border-style: dashed; border-color: var(--hp-mute-bd); }
.a-dev__head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.a-dev__ic {
  width: 42px; height: 42px; flex: none; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--hp-mute-bd); background: var(--hp-mute-bg); color: var(--hp-mute-ink);
}
.a-dev[data-state="on"] .a-dev__ic { border-color: var(--hp-ok-bd); background: var(--hp-ok-bg); color: var(--hp-ok-ink); }
.a-dev[data-state="off"] .a-dev__ic { border-color: var(--hp-error-bd); background: var(--hp-error-bg); color: var(--hp-error-ink); }
.a-dev__title { flex: 1; min-width: 0; }
.a-dev__title h3 { margin: 0; font-size: 15px; font-weight: 800; line-height: 1.35; overflow-wrap: anywhere; }
.a-dev__title small { display: block; color: var(--hp-text-3); font-size: 12px; font-weight: 600; }
/* 同編號電表即時功率：左說明、右數值，一列排完 */
.a-dev__meter { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 10px; background: var(--hp-bg-2); min-width: 0; }
.a-dev__mv { flex: 1; min-width: 0; }
.a-dev__mv small { display: block; color: var(--hp-text-3); font-size: 12px; line-height: 1.45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a-dev__mv .a-dev__last { display: block; color: var(--hp-text-3); font-size: 12px; line-height: 1.45; word-break: keep-all; }
.a-dev__mval { flex: none; font-size: 20px; font-weight: 800; line-height: 1.25; font-variant-numeric: tabular-nums; white-space: nowrap; }
.a-dev__mval em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--hp-text-3); margin-left: 3px; }
.a-dev__meter.is-offline .a-dev__mval { color: var(--hp-mute); }
.a-dev__foot { margin-top: auto; display: flex; align-items: center; gap: 12px; min-height: 52px; padding-top: 10px; border-top: 1px solid var(--hp-border); }
.a-dev__state { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.a-dev__state.is-steps { gap: 4px; }
.a-dev__meta { color: var(--hp-text-3); font-size: 12px; line-height: 1.45; }
.a-dev__meta--warn { color: var(--hp-warn-ink); font-weight: 600; }
.a-dev__ctl { display: flex; align-items: center; flex: none; }
.a-dev__word { font-size: 17px; font-weight: 800; line-height: 1.3; }
.a-dev[data-state="on"] .a-dev__word { color: var(--hp-ok-ink); }
.a-dev[data-state="off"] .a-dev__word { color: var(--hp-error-ink); }
.a-dev[data-state="offline"] .a-dev__word { color: var(--hp-mute-ink); }
/* 唯讀（合約到期／檢視者）：不是停用的開關，只標「唯讀」 */
.a-ro {
  display: inline-flex; align-items: center; gap: 6px;
  box-sizing: border-box; height: 32px; padding: 0 12px;
  border: 1px solid var(--hp-border-2); border-radius: 999px;
  background: var(--hp-bg-2); color: var(--hp-text-2);
  font-size: 13px; font-weight: 700; white-space: nowrap;
}
.a-ro .hp-icon { width: 14px; height: 14px; color: var(--hp-text-3); }
.a-pill-wrap { white-space: normal; height: auto; min-height: 24px; line-height: 1.45; padding-top: 3px; padding-bottom: 3px; border-radius: 12px; }
.a-filter-empty { padding: 32px 12px; text-align: center; color: var(--hp-text-3); }

/* 內容內提示（設備全部離線說明等） */
.a-notice {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--hp-info-bd); background: var(--hp-info-bg); color: var(--hp-info-ink);
  font-size: 14px; line-height: 1.55;
}
.a-notice .hp-icon { width: 20px; height: 20px; margin-top: 1px; }
.a-notice b { color: var(--hp-text); }
.a-notice span { color: var(--hp-text-2); }

/* ---------- 數據：主卡（約 2/3）＋右欄其他電表小卡 ---------- */
.a-data { flex: 1 0 auto; display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); min-height: 0; }
.a-data:not([data-side="0"]) { grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr); }
/* 只有一張小卡且完全沒有讀數：排在主卡下方一條 */
.a-data.a-data--stack { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
.a-data--stack .a-mside { margin: 0; padding: 0; overflow: visible; }
.a-data--stack .a-mini { flex: none; display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 2fr); align-items: center; gap: 12px 24px; }
.a-data--stack .a-mini__vals { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.a-data--stack .a-mini__spark { display: none; }
.a-data--stack .a-meter__chart { min-height: 160px; }
.a-meter { display: flex; flex-direction: column; gap: 14px; min-width: 0; min-height: 0; }
.a-meter__head, .a-mini__head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.a-meter__ic {
  width: 40px; height: 40px; flex: none; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  background: var(--hp-brand-bg); border: 1px solid var(--hp-brand-bd); color: var(--hp-brand-ink);
}
.is-offline .a-meter__ic { background: var(--hp-mute-bg); border-color: var(--hp-mute-bd); color: var(--hp-mute-ink); }
.a-meter__title { flex: 1; min-width: 0; }
.a-meter__title h3 { margin: 0; font-size: 15px; font-weight: 800; line-height: 1.35; overflow-wrap: anywhere; }
.a-meter__title small { display: block; color: var(--hp-text-3); font-size: 12px; }
/* 主卡四個大數字：一列排開 */
.a-vals { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 10px; }
.a-val { padding: 12px 14px; border-radius: 10px; background: var(--hp-bg-2); min-width: 0; }
.a-val__lab { display: flex; align-items: center; gap: 6px; color: var(--hp-text-3); font-size: 12px; font-weight: 600; }
.a-val__lab .hp-icon { width: 14px; height: 14px; color: var(--hp-brand-3); }
.a-meter.is-offline .a-val__lab .hp-icon { color: var(--hp-mute); }
.a-val b { display: block; font-size: 24px; font-weight: 800; line-height: 1.3; font-variant-numeric: tabular-nums; white-space: nowrap; }
.a-val b em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--hp-text-3); margin-left: 3px; }
.a-val.is-main b { color: var(--hp-brand-ink); }
.a-val.is-off b { color: var(--hp-mute); }
.a-val__last { display: block; color: var(--hp-text-3); font-size: 12px; line-height: 1.4; word-break: keep-all; }
.a-meter__charthead { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.a-meter__chart { flex: 1 1 auto; min-height: 220px; position: relative; color: var(--hp-brand-3); }
.a-meter__chart > svg { position: absolute; inset: 0; }
.a-meter.is-offline .a-meter__chart { color: var(--hp-mute); }
/* 右欄小卡：數值摘要＋功率小曲線（小卡多時欄內捲動） */
.a-mside { display: flex; flex-direction: column; gap: 12px; min-height: 0; margin: 0 -6px; padding: 0 6px; }
.a-mini { --hp-card-pad: 14px 16px; flex: 1 0 auto; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.a-mini .a-meter__ic { width: 36px; height: 36px; border-radius: 10px; }
.a-mini__vals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; }
.a-mini__v { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; padding: 6px 10px; border-radius: 8px; background: var(--hp-bg-2); }
.a-mini__v span { color: var(--hp-text-3); font-size: 12px; font-weight: 600; white-space: nowrap; }
.a-mini__v b { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.a-mini__v b em { font-style: normal; font-size: 11px; font-weight: 600; color: var(--hp-text-3); margin-left: 2px; }
.a-mini__v.is-off b { color: var(--hp-mute); }
.a-mini__spark { flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px; min-height: 64px; }
.a-mini__svg { flex: 1 1 auto; min-height: 40px; position: relative; color: var(--hp-brand-3); }
.a-mini__svg > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.a-mini.is-offline .a-mini__svg { color: var(--hp-mute); }
/* 小卡三張以上、高度不夠時拿掉小曲線，數值優先 */
@media (max-height: 900px) and (min-width: 821px) {
  .a-data[data-side="3"] .a-mini__spark, .a-data[data-side="4"] .a-mini__spark { display: none; }
}

/* ---------- 紀錄：表格（桌機）／卡片（手機） ---------- */
.a-evtable { min-width: 560px; table-layout: fixed; }
.a-evtable .a-col-time { width: 128px; }
.a-evtable .a-col-act { width: 110px; }
.a-evtable .a-col-site { width: 26%; }
.a-evtable .a-col-dev { width: 50%; }
.a-evtable--site .a-col-dev { width: 32%; }
/* 窄桌機（821–1199）：工地／設備欄讓一點寬給「操作者」，名字長時操作者可換行，不被切字 */
@media (max-width: 1199px) {
  .a-evtable--site .a-col-site { width: 22%; }
  .a-evtable--site .a-col-dev { width: 28%; }
  .a-evtable td .a-op { white-space: normal; }
}
.a-evtable td { overflow-wrap: anywhere; }
.a-evtable td.a-td-time { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--hp-text-2); }
.a-evtable td.a-td-act { white-space: nowrap; }
.a-evtable thead th { position: sticky; top: 0; z-index: 1; box-shadow: inset 0 -1px 0 var(--hp-grid); }
.a-op { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.a-op .hp-icon { width: 15px; height: 15px; color: var(--hp-text-3); }
.a-op--manual { color: var(--hp-text-2); }
.a-op--sys { color: var(--hp-text-3); }
.a-evlist { display: none; list-style: none; margin: 0; padding: 0; flex-direction: column; gap: 10px; }
.a-ev {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border: 1px solid var(--hp-border); border-radius: 12px;
  background: var(--hp-surface); box-shadow: var(--hp-shadow-card);
}
.a-ev__main { flex: 1; min-width: 0; }
.a-ev__main b { display: block; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.a-ev__main small { display: block; color: var(--hp-text-3); font-size: 12px; }
.a-ev__side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.a-ev__side time { color: var(--hp-text-3); font-size: 12px; font-variant-numeric: tabular-nums; }

/* ---------- 空狀態 ---------- */
.a-empty {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 32px 16px; text-align: center; color: var(--hp-text-3); font-size: 13px;
}
/* 只放大空狀態本身的圖示（> 直接子層），裡面按鈕的圖示維持原大小 */
.a-empty > .hp-icon { width: 32px; height: 32px; color: var(--hp-text-3); margin-bottom: 4px; }
.a-empty b { color: var(--hp-text-2); font-size: 15px; }

/* ---------- 現場資訊 ---------- */
.a-infogrid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); flex: none; }
.a-infogrid > .hp-card { display: flex; flex-direction: column; gap: 14px; }
.a-kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 18px; margin: 0; font-size: 14px; }
.a-kv dt { color: var(--hp-text-3); white-space: nowrap; }
.a-kv dd { margin: 0; color: var(--hp-text); font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.a-kv dd.is-mute { color: var(--hp-text-3); font-weight: 400; }
.a-term { display: flex; flex-direction: column; gap: 8px; }
.a-term__bar { position: relative; height: 8px; border-radius: 999px; background: var(--hp-bg-3); overflow: hidden; }
.a-term__bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--_c, var(--hp-success)); }
.a-term__ends { display: flex; justify-content: space-between; gap: 12px; color: var(--hp-text-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.a-term__left { font-size: 14px; color: var(--hp-text-2); }
.a-term__left b { font-size: 22px; color: var(--hp-text); margin-right: 4px; font-variant-numeric: tabular-nums; }
.a-items { display: flex; flex-wrap: wrap; gap: 8px; }
.a-bigstat { display: flex; align-items: baseline; gap: 6px; }
.a-bigstat b { font-size: 34px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.a-bigstat span { color: var(--hp-text-3); font-size: 14px; }
/* 設備清冊：圖示＋名稱＋類型兩行 */
.a-inv { display: flex; align-items: center; gap: 12px; min-width: 0; }
.a-inv > div { min-width: 0; }
.a-inv b { display: block; font-weight: 700; line-height: 1.4; }
.a-inv small { display: block; color: var(--hp-text-3); font-size: 12px; line-height: 1.4; }
.a-inv__ic { width: 34px; height: 34px; flex: none; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--hp-bg-2); border: 1px solid var(--hp-border); color: var(--hp-brand-3); }
.a-inv--pair .a-inv__ic { width: 28px; height: 28px; border-radius: 8px; color: var(--hp-text-3); }
.a-invtable td { padding-top: 10px; padding-bottom: 10px; }
.a-hint { margin: 0; color: var(--hp-text-3); font-size: 13px; line-height: 1.6; }
.a-card-foot { margin-top: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- 紀錄頁篩選 ---------- */
.a-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; flex: none; }
.a-filters > .a-field { width: 176px; }
.a-filters > .a-field--site { width: 200px; }
.a-filters > .a-field--dev { width: 260px; }
.a-field { display: grid; gap: 6px; min-width: 0; font-size: 13px; font-weight: 600; color: var(--hp-text-2); }
.a-filters__sum { margin-left: auto; color: var(--hp-text-3); font-size: 13px; line-height: 40px; white-space: nowrap; }
.a-logbody { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.hp-modal .a-hint { margin-top: 8px; }
.hp-modal .a-form .a-hint { margin-top: 0; }

/* ---------- 帳號頁 ---------- */
.a-acct {
  flex: 1 1 0; min-height: 520px;
  display: grid; gap: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "profile notify security";
}
.a-acct > .hp-card { display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.a-acct__profile { grid-area: profile; }
.a-acct__notify { grid-area: notify; }
.a-acct__security { grid-area: security; }
.a-acct .a-scroll { margin: 0 -8px; padding: 0 8px; display: flex; flex-direction: column; gap: 10px; }
.a-acct .a-scroll > .a-sec-title, .a-acct__sites > .a-sec-title { margin-top: 8px; }
.a-acct__kv, .a-acct__sites { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.a-acct__kv > .a-me { margin-bottom: 4px; }
.a-sec { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.a-sec > .a-sec-title { margin-top: 8px; }
.a-me { display: flex; align-items: center; gap: 14px; }
.a-me b { display: block; font-size: 18px; font-weight: 800; }
.a-me small { display: block; color: var(--hp-text-3); font-size: 13px; }
.a-rows { list-style: none; margin: 0; padding: 0; }
.a-row { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 0; border-top: 1px solid var(--hp-border); }
.a-rows > .a-row:first-child { border-top: 0; }
.a-rows--compact .a-row { min-height: 48px; padding: 8px 0; }
.a-row__ic {
  width: 36px; height: 36px; flex: none; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--hp-bg-2); border: 1px solid var(--hp-border); color: var(--hp-text-2);
}
.a-row__ic--line { color: var(--hp-line); }
.a-row__main { flex: 1; min-width: 0; }
.a-row__main b { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; font-weight: 700; }
.a-row__main small { display: block; color: var(--hp-text-3); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.a-row__side { flex: none; display: flex; align-items: center; gap: 8px; color: var(--hp-text-3); font-size: 12px; }
.a-row__when { display: flex; flex-direction: column; align-items: flex-end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.a-row__when b { color: var(--hp-text-2); font-weight: 700; }
.a-sec-title { margin: 6px 0 0; color: var(--hp-text-3); font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.a-pushstats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.a-pushstats div { padding: 10px 12px; border-radius: 10px; background: var(--hp-bg-2); }
.a-pushstats b { display: block; font-size: 22px; font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; }
.a-pushstats span { color: var(--hp-text-3); font-size: 12px; font-weight: 600; }
.a-push { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--hp-border); }
.a-push:first-child { border-top: 0; }
.a-push__dot { width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; flex: none; background: var(--_c, var(--hp-brand-2)); }
.a-push__main { flex: 1; min-width: 0; }
.a-push__main b { display: block; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.a-push__main small { display: block; color: var(--hp-text-3); font-size: 12px; line-height: 1.5; }
.a-push-table { display: none; }
.a-push-table table { table-layout: fixed; }
.a-push-table .a-col-time { width: 128px; }
.a-push-table .a-col-act { width: 110px; }
.a-push-table thead th { position: sticky; top: 0; z-index: 1; box-shadow: inset 0 -1px 0 var(--hp-grid); }
.a-push time { flex: none; color: var(--hp-text-3); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- 表單（彈窗內） ---------- */
.a-form { display: grid; gap: 14px; }
.a-form .a-field { font-size: 13px; }

/* ---------- 手機底部分頁 ---------- */
.a-bbar { display: none; }
.a-mob { display: none !important; }
/* 帳號：寬螢幕左欄放個人資料＋登入安全、右邊兩欄放通知（推播紀錄改表格） */
@media (min-width: 1700px) {
  .a-acct {
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "profile notify notify" "security notify notify";
  }
  .a-acct__profile .a-scroll { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 28px; align-content: start; }
  .a-acct__profile .a-acct__sites > .a-sec-title { margin-top: 0; }
  .a-acct__security .a-row { min-height: 52px; padding: 7px 0; }
  .a-acct__notify .a-push-list { display: none; }
  .a-acct__notify .a-push-table { display: block; }
  .a-acct__notify .a-pushstats { grid-template-columns: repeat(3, minmax(0, 220px)); }
}
/* 選擇現場：寬螢幕改卡片格線（6 欄底，每張占 --span 欄；同列平分、等高、底緣切齊） */
@media (min-width: 1700px) {
  .a-sitelist { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
  .a-siterow {
    grid-column: span var(--span, 2);
    --hp-card-pad: 20px 22px;
    grid-template-columns: minmax(0, 1fr) 228px;
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas: "site counts" "issue issue" "meters meters" "go go";
    align-items: start;
  }
  .a-siterow__site { align-self: center; }
  .a-issue { margin-top: 14px; }
  .a-siterow__meters { justify-content: flex-start; margin-top: 16px; padding: 0; border-left: 0; }
  .a-siterow__meters .a-mlist { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px 28px; }
  .a-siterow__go {
    flex-direction: row; align-items: center; justify-content: space-between;
    margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hp-border);
  }
}

/* =====================================================================
   寬度斷點
   ===================================================================== */
@media (max-width: 1199px) {
  .a-acct {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "profile notify" "security notify";
  }
  .a-infogrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .a-infogrid > .a-info-contract { grid-column: 1 / -1; }
}
@media (max-width: 1100px) {
  .a-nav__item { padding: 0 11px; }
  .a-user__name { display: none; }
  .a-user { padding: 0 8px 0 4px; }
}

@media (max-width: 820px) {
  html, body { height: auto; }
  /* 直向排列＋最小一個螢幕高：內容少時底部分頁仍貼齊螢幕底 */
  body.a-app {
    display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; height: auto; overflow: visible;
  }
  .a-head { position: sticky; top: 0; z-index: 40; }
  .a-main { flex: 1 0 auto; overflow: visible; padding: var(--a-gap); scrollbar-gutter: auto; gap: 14px; }
  .a-top { gap: 12px; }
  .a-nav, .a-user { display: none; }
  .hp-card { --hp-card-pad: 16px; }

  /* 頁首：工地名稱列（可切換）＋狀態列 */
  .a-sitehead { padding: 10px var(--a-gap) 12px; }
  .a-sitehead__row { flex-wrap: wrap; gap: 8px 10px; min-height: 0; }
  .a-sitehead__ic, .a-sitehead__tabs { display: none; }
  .a-sitehead__name { flex: 1; min-width: 0; font-size: 20px; white-space: normal; }
  .a-sitehead.is-multi .a-sitehead__name { display: none; }
  .a-sitehead.is-multi .a-sitehead__switch { display: inline-flex; }
  .a-sitehead__switch {
    flex: 1; min-width: 0; justify-content: flex-start; gap: 8px;
    padding: 0 12px; font-size: 17px; font-weight: 800;
  }
  .a-sitehead__switch > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; line-height: 1.5; }
  .a-sitehead__switch .hp-icon--chevron-down { margin-left: auto; color: var(--hp-text-3); }
  .a-sitehead__info { display: inline-flex; }
  .a-sitehead__meta { flex: 1 1 100%; }
  .a-sitehead__fresh { margin-left: 0; }

  /* 設備面板在手機拿掉外框，設備卡直接排 */
  .a-board { padding: 0; background: transparent; border: 0; box-shadow: none; gap: 12px; }
  .a-board .a-cardhead { min-height: 0; }
  .a-board .a-cardhead__act { width: 100%; margin-left: 0; }
  .a-board .hp-tabs { width: 100%; }
  .a-board .hp-tab { flex: 1 1 0; min-width: 0; padding: 0 6px; gap: 4px; }
  .a-devgrid { gap: 12px; }
  .a-dev { background: var(--hp-surface); }
  /* 今日動態放在設備卡下面，整頁自然捲動 */
  .a-ctl { gap: 14px; }
  .a-today__body { position: static; min-height: 0; }
  .a-today__scroll { position: static; overflow: visible; margin: 0; padding: 0; }

  .a-fill { flex: none; min-height: 0; }
  .a-scroll { overflow: visible; }
  .a-recent, .a-logcard { padding: 0; background: transparent; border: 0; box-shadow: none; }
  .a-evtable-wrap { display: none; }
  .a-evlist { display: flex; }

  .a-siterow { grid-template-columns: minmax(0, 1fr); grid-template-areas: "site" "counts" "issue" "meters" "go"; gap: 14px; }
  .a-issue { margin: 0; }
  .a-siterow__meters { padding: 12px 0 0; border-left: 0; border-top: 1px solid var(--hp-border); }
  .a-siterow__meters .a-mlist { grid-template-columns: minmax(0, 1fr); }
  .a-siterow__go { flex-direction: row; align-items: center; justify-content: space-between; }
  /* 數據：主卡在上、其他電表小卡依序往下 */
  .a-data, .a-data:not([data-side="0"]) { display: flex; flex-direction: column; gap: 14px; flex: none; }
  .a-meter { gap: 12px; }
  .a-vals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .a-val b { font-size: 20px; }
  .a-meter__chart { flex: none; height: 200px; min-height: 0; }
  .a-mside { margin: 0; padding: 0; }
  .a-mini, .a-data--stack .a-mini { flex: none; display: flex; align-items: stretch; }
  .a-data--stack .a-mini__vals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .a-mini__spark { flex: none; min-height: 0; }
  .a-mini__svg { flex: none; height: 56px; min-height: 0; }

  .a-infogrid { grid-template-columns: minmax(0, 1fr); }
  .a-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .a-filters > .a-field { width: auto; }
  .a-filters .a-field--site, .a-filters .a-field--dev, .a-filters__sum { grid-column: 1 / -1; }
  .a-filters__sum { margin-left: 0; line-height: 1.4; }
  .a-logbody { display: block; }

  .a-acct { display: flex; flex-direction: column; flex: none; min-height: 0; }
  .a-acct .a-scroll { margin: 0; padding: 0; }

  .a-pagehead h1 { font-size: 20px; }
  .a-desk { display: none !important; }
  .a-mob { display: flex !important; }
  .a-pagehead__act { width: 100%; }
  .a-pagehead__act > .hp-btn { flex: 1; }

  /* 底部分頁：控制／數據／紀錄／我的 */
  .a-bbar {
    position: sticky; bottom: 0; z-index: 45;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    height: calc(var(--a-bbar-h) + env(safe-area-inset-bottom));
    padding: 0 8px env(safe-area-inset-bottom);
    background: var(--hp-bg-2);
    border-top: 1px solid var(--hp-border-2);
    box-shadow: var(--hp-shadow-pop);
  }
  .a-bbar__item {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    color: var(--hp-text-3); font-size: 12px; font-weight: 700; text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .a-bbar__ic {
    width: 52px; height: 30px; border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s, transform .12s;
  }
  .a-bbar__ic .hp-icon { width: 22px; height: 22px; }
  .a-bbar__item:active .a-bbar__ic { transform: translateY(1px); }
  .a-bbar__item.is-active { color: var(--hp-brand-ink); }
  .a-bbar__item.is-active .a-bbar__ic {
    background: var(--hp-brand-bg);
    box-shadow: inset 0 0 0 1px var(--hp-brand-bd);
  }
}

/* =====================================================================
   登入頁（左右分割；手機只留表單）
   ===================================================================== */
body.a-login {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(440px, 1fr);
}
.a-login__brand {
  position: relative;
  overflow: hidden;
  display: flex; flex-direction: column; gap: 32px;
  padding: 36px 48px;
  border-right: 1px solid var(--hp-border);
  background:
    radial-gradient(ellipse 70% 55% at 18% 8%, color-mix(in srgb, var(--hp-brand) 30%, transparent), transparent 70%),
    radial-gradient(ellipse 60% 50% at 95% 100%, color-mix(in srgb, var(--hp-info) 16%, transparent), transparent 70%),
    var(--hp-bg-2);
}
/* 淡淡的施工藍圖格線 */
.a-login__brand::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--hp-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--hp-border) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(180deg, var(--hp-text), transparent 85%);
  -webkit-mask-image: linear-gradient(180deg, var(--hp-text), transparent 85%);
}
.a-login__brand > * { position: relative; }
.a-login__pitch { margin-top: auto; max-width: 560px; }
.a-login__pitch h2 { margin: 0 0 12px; font-size: 34px; font-weight: 800; line-height: 1.3; letter-spacing: .01em; }
.a-login__pitch h2 span { color: var(--hp-brand-3); }
.a-login__pitch p { margin: 0; color: var(--hp-text-2); font-size: 16px; line-height: 1.7; }
.a-login__copy { margin-top: auto; color: var(--hp-text-3); font-size: 12px; }

/* 現場狀態示意（不是真實資料，只示範畫面語意） */
.a-demo {
  width: min(520px, 100%);
  padding: 16px;
  border: 1px solid var(--hp-border-2);
  border-radius: 16px;
  background: color-mix(in srgb, var(--hp-surface) 88%, transparent);
  box-shadow: var(--hp-shadow-pop);
  backdrop-filter: blur(4px);
}
.a-demo__head { display: flex; align-items: center; gap: 10px; padding: 0 2px 12px; color: var(--hp-text-2); font-size: 13px; font-weight: 700; }
.a-demo__head .hp-icon { width: 16px; height: 16px; color: var(--hp-brand-3); }
.a-demo__head span:last-child { margin-left: auto; color: var(--hp-text-3); font-weight: 600; }
.a-demo__rows { display: grid; gap: 8px; }
.a-demo__row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 12px;
  background: var(--hp-surface-2); border: 1px solid var(--hp-border);
}
.a-demo__row[data-state="offline"] { border-style: dashed; border-color: var(--hp-mute-bd); }
.a-demo__ic { width: 36px; height: 36px; flex: none; border-radius: 10px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--hp-mute-bd); background: var(--hp-mute-bg); color: var(--hp-mute-ink); }
.a-demo__row[data-state="on"] .a-demo__ic { border-color: var(--hp-ok-bd); background: var(--hp-ok-bg); color: var(--hp-ok-ink); }
.a-demo__row[data-state="off"] .a-demo__ic { border-color: var(--hp-error-bd); background: var(--hp-error-bg); color: var(--hp-error-ink); }
.a-demo__name { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; }
.a-demo__name small { display: block; color: var(--hp-text-3); font-size: 12px; font-weight: 600; }
.a-demo__word { font-size: 14px; font-weight: 800; }
.a-demo__row[data-state="on"] .a-demo__word { color: var(--hp-ok-ink); }
.a-demo__row[data-state="off"] .a-demo__word { color: var(--hp-error-ink); }
.a-demo__row[data-state="offline"] .a-demo__word { color: var(--hp-mute-ink); }
.a-demo .hp-toggle { cursor: default; }
.a-demo__wave { margin-top: 12px; padding: 10px 12px 6px; border-radius: 12px; background: var(--hp-bg-2); color: var(--hp-brand-3); }
.a-demo__wave small { display: block; color: var(--hp-text-3); font-size: 12px; font-weight: 600; }
.a-demo__wave svg { display: block; width: 100%; height: 54px; }

.a-login__side {
  position: relative;
  display: flex; flex-direction: column;
  min-height: 100vh; min-height: 100dvh;
  padding: 28px 48px;
  overflow: auto;
}
.a-login__tools { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.a-login__mbrand { display: none; }
.a-login__box { width: min(400px, 100%); margin: auto; padding: 16px 0; }
.a-login__box h1 { margin: 0; font-size: 26px; font-weight: 800; line-height: 1.3; }
.a-login__box > p { margin: 6px 0 24px; color: var(--hp-text-3); font-size: 14px; }
.a-login form { display: grid; gap: 16px; }
.a-pw { position: relative; }
.a-pw .hp-input { padding-right: 44px; }
.a-pw__eye {
  position: absolute; right: 4px; top: 4px;
  width: 32px; height: 32px; border-radius: 8px; border: 0; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: transparent; color: var(--hp-text-3); cursor: pointer;
}
.a-pw__eye:hover { color: var(--hp-text); background: var(--hp-row-hover); }
.a-pw__eye:focus-visible { outline: 2px solid var(--hp-ring); outline-offset: 0; }
.a-login__line { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -4px 0; }
.a-login__submit { height: 44px; font-size: 15px; }
.a-or { display: flex; align-items: center; gap: 12px; color: var(--hp-text-3); font-size: 12px; margin: 4px 0 0; }
.a-or::before, .a-or::after { content: ""; flex: 1; height: 1px; background: var(--hp-border); }
.a-sso { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.a-sso .hp-btn { padding: 0 10px; }
.a-login__join { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--hp-border); color: var(--hp-text-3); font-size: 14px; }
.a-login__mfoot { display: none; }

@media (max-width: 1100px) {
  .a-login__brand { padding: 32px 36px; }
  .a-login__pitch h2 { font-size: 28px; }
  .a-login__side { padding: 24px 32px; }
}
@media (max-width: 820px) {
  body.a-login { display: block; }
  .a-login__brand { display: none; }
  .a-login__side { padding: 0 16px 20px; min-height: 100dvh; }
  .a-login__tools { justify-content: space-between; height: 64px; }
  .a-login__mbrand { display: flex; }
  .a-login__box { margin: 8px 0 auto; width: 100%; padding: 8px 0; }
  .a-login__box h1 { font-size: 22px; }
  .a-login__mfoot { display: block; text-align: center; color: var(--hp-text-3); font-size: 12px; padding-top: 16px; }
}

/* ---------- 正式站：未綁定／沒有工地的空狀態（v4 2026-10-08） ---------- */
.a-onboard { align-items: center; justify-content: center; gap: 20px; padding: 32px 24px; }
.a-onboard .a-empty { flex: none; padding: 0; }
.a-onboard__body { width: min(560px, 100%); display: grid; gap: 12px; }
.a-onboard__list { margin: 0; padding: 14px 18px; list-style: none; display: grid; gap: 8px; border: 1px solid var(--hp-border); border-radius: 12px; background: var(--hp-surface-2); color: var(--hp-text-2); font-size: 14px; }
.a-onboard__list li { display: flex; align-items: center; gap: 8px; }
.a-onboard__list .hp-icon { color: var(--hp-success); flex: none; }
.a-onboard__act { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
@media (max-width: 500px) {
  .a-onboard { padding: 24px 16px; }
  .a-onboard__act .hp-btn { flex: 1 1 100%; }
}