/* OC-5a 總營運後台儀表板樣稿的樣式（只給樣稿用，OC-5b 會改寫成新後台自己的 static）。
   照新後台的 CSP 寫：不載入外部資源、字型只用系統字、顏色全是 CSS 變數；HTML 裡沒有 style 屬性與 <style>。
   顏色跟著系統的淺色／深色；圖表的三個系列色用 dataviz 參考色盤的前三格（藍、橘、青，淺深兩組各自驗過）。 */

:root {
  color-scheme: light dark;

  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --bg: #ffffff;
  --band: #f4f7fb;
  --band-2: #e9eff7;
  --surface: #ffffff;
  --surface-2: #f6f8fb;
  --surface-3: #eef2f8;
  --text: #1a2330;
  --text-strong: #0d1520;
  --muted: #586473;
  --faint: #7d8896;
  --border: #e2e8f0;
  --border-strong: #c9d2de;
  --grid: #e8edf3;

  --primary: #1f4e8c;
  --primary-solid: #1f4e8c;
  --primary-hover: #194073;
  --primary-soft: #e8eef7;
  --on-primary: #ffffff;
  --focus: #2a78d6;

  --ok: #16883a;
  --ok-fg: #1e6b3a;
  --ok-bg: #e7f4eb;
  --ok-soft: #bfe3cb;
  --warn-soft: #f7dc8f;
  --warn: #e5a000;
  --warn-fg: #7a4a00;
  --warn-bg: #fff4d9;
  --bad: #d03b3b;
  --bad-fg: #b42318;
  --bad-bg: #fdecea;

  --s1: #2a78d6;
  --s2: #eb6834;
  --s3: #1baf7a;
  --s3-soft: #bfe9d8;

  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(16, 24, 35, .05), 0 6px 18px rgba(16, 24, 35, .06);
  --shadow-lift: 0 2px 4px rgba(16, 24, 35, .08), 0 14px 32px rgba(16, 24, 35, .14);
  --gap: 18px;
  --gutter: 16px;
  --page: 1320px;
  --dur: 140ms;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0c1117;
    --band: #111821;
    --band-2: #16202c;
    --surface: #141b24;
    --surface-2: #19222d;
    --surface-3: #1e2935;
    --text: #e2e8ef;
    --text-strong: #f6f8fb;
    --muted: #a0acba;
    --faint: #7a8796;
    --border: #232e3b;
    --border-strong: #34445a;
    --grid: #212b37;

    --primary: #8db4ec;
    --primary-solid: #2f6bc0;
    --primary-hover: #3a78cf;
    --primary-soft: #1a2940;
    --on-primary: #ffffff;
    --focus: #6aa6f0;

    --ok: #2fb257;
    --ok-fg: #7fd79d;
    --ok-bg: #13301e;
    --ok-soft: #1e5a33;
    --warn-soft: #6b5414;
    --warn: #f0b429;
    --warn-fg: #f4cf78;
    --warn-bg: #3a2c0c;
    --bad: #ec5a5a;
    --bad-fg: #ff9d92;
    --bad-bg: #3e1817;

    --s1: #3987e5;
    --s2: #d95926;
    --s3: #199e70;
    --s3-soft: #164a39;

    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 18px rgba(0, 0, 0, .25);
    --shadow-lift: 0 2px 4px rgba(0, 0, 0, .5), 0 14px 32px rgba(0, 0, 0, .45);
  }
}

@media (min-width: 700px) {
  :root { --gutter: 24px; }
}

@media (min-width: 1100px) {
  :root { --gutter: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; }
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
}

h1, h2, h3, p { margin: 0; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.wrap {
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ── 樣稿橫幅：一眼看出是假的 ── */
.mockbar {
  background: var(--band-2);
  color: var(--muted);
  font-size: 13px;
  border-bottom: 1px solid var(--border);
}
.mockbar .wrap { display: block; padding-top: 7px; padding-bottom: 7px; }
.mockbar strong { color: var(--text-strong); font-weight: 600; }

/* ── 版頭 ── */
.topbar {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 20;
}
.topbar__inner {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 64px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-strong);
  flex: none;
}
.brand:hover { text-decoration: none; }
.brand__mark { width: 30px; height: 30px; flex: none; }
.brand__mark .m-bg { fill: var(--primary-solid); }
.brand__mark .m-fg { fill: none; stroke: #ffffff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.brand__mark .m-dot { fill: #9fd6ff; }
.brand__name { font-weight: 700; font-size: 17px; letter-spacing: .01em; }
.brand__sub { color: var(--muted); font-size: 14px; padding-left: 10px; border-left: 1px solid var(--border-strong); }

.mainnav { flex: 1; min-width: 0; }
.mainnav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
}
.mainnav ul::-webkit-scrollbar { display: none; }
.mainnav a {
  display: block;
  padding: 7px 11px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 14px;
  white-space: nowrap;
}
.mainnav a:hover { background: var(--surface-3); color: var(--text-strong); text-decoration: none; }
.mainnav a[aria-current="page"] { background: var(--primary-soft); color: var(--primary); font-weight: 600; }

.topbar__right { display: flex; align-items: center; gap: 10px; flex: none; }

.account { position: relative; }
.account summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px 4px 4px;
  border-radius: 999px;
}
.account summary::-webkit-details-marker { display: none; }
.account summary:hover { background: var(--surface-3); }
.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 700;
  font-size: 14px;
}
.account__name { font-size: 14px; color: var(--muted); }
.account__menu,
.card__menu .menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 168px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-lift);
  padding: 6px;
  z-index: 30;
}
.account__menu a,
.menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border-radius: 8px;
  border: 0;
  background: none;
  color: var(--text);
  font-size: 14px;
  cursor: pointer;
}
.account__email { display: none; margin: 0; padding: 6px 10px 8px; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; border-bottom: 1px solid var(--border); }
.account__menu a:hover,
.menu button:hover { background: var(--surface-3); text-decoration: none; }
.menu .menu__danger { color: var(--bad-fg); }

/* ── 按鈕 ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-strong);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur), border-color var(--dur), box-shadow var(--dur);
}
.btn:hover { background: var(--surface-3); text-decoration: none; }
.btn--primary { background: var(--primary-solid); border-color: var(--primary-solid); color: var(--on-primary); }
.btn--primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn--small { min-height: 30px; padding: 0 10px; font-size: 13px; border-radius: 8px; }
.btn svg { width: 16px; height: 16px; }
.btn .i-stroke { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ── 頁首帶（同色系淺底） ── */
.hero {
  background: var(--band);
  border-bottom: 1px solid var(--border);
  padding: 26px 0 28px;
}
.hero__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.hero__date { color: var(--muted); font-size: 14px; }
.hero h1 { font-size: 26px; line-height: 1.25; font-weight: 700; color: var(--text-strong); margin-top: 2px; }
.hero__actions { display: flex; gap: 8px; align-items: center; }
.hero__note { color: var(--faint); font-size: 13px; }

/* ── 卡片牆 ── */
.boardzone { padding: 26px 0 40px; }
.board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
  align-items: stretch;
}
.card--s { grid-column: span 1; }
.card--m { grid-column: span 2; }
.card--l { grid-column: span 4; }

.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  min-width: 0;
  transition: box-shadow var(--dur), transform var(--dur), border-color var(--dur);
}
.card__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0 10px;
  padding: 14px 14px 0 18px;
}
.card__head > div:first-child { display: contents; }
.card__head .card__title { grid-column: 1; grid-row: 1; }
.card__head .card__sub { grid-column: 1 / -1; grid-row: 2; }
.card__head .card__tools { grid-column: 2; grid-row: 1; }
.card__title { font-size: 15px; font-weight: 650; color: var(--text-strong); line-height: 1.35; }
.card__sub { font-size: 13px; color: var(--muted); margin-top: 2px; }
.card__tools { display: flex; align-items: center; gap: 4px; flex: none; }
.card__link { font-size: 13px; padding: 4px 6px; border-radius: 6px; white-space: nowrap; }
.card__body { padding: 14px 18px 18px; flex: 1; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.card__foot {
  margin-top: auto;
  font-size: 12.5px;
  color: var(--faint);
  display: flex;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.card__menu { position: relative; }
.card__menu summary {
  list-style: none;
  cursor: pointer;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: var(--faint);
  font-size: 18px;
  line-height: 1;
}
.card__menu summary::-webkit-details-marker { display: none; }
.card__menu summary:hover { background: var(--surface-3); color: var(--text-strong); }

/* ── 燈號：顏色＋形狀＋文字 ── */
.lt { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.lt svg { width: 12px; height: 12px; flex: none; }
.lt--ok { color: var(--ok-fg); }
.lt--warn { color: var(--warn-fg); }
.lt--bad { color: var(--bad-fg); }
.lt--ok .shape { fill: var(--ok); }
.lt--warn .shape { fill: var(--warn); }
.lt--bad .shape { fill: var(--bad); }
.lt--na { color: var(--faint); }
.lt--na .shape { fill: var(--border-strong); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.chip svg { width: 11px; height: 11px; }
.chip--ok { background: var(--ok-bg); color: var(--ok-fg); }
.chip--warn { background: var(--warn-bg); color: var(--warn-fg); }
.chip--bad { background: var(--bad-bg); color: var(--bad-fg); }
.chip--ok .shape { fill: var(--ok); }
.chip--warn .shape { fill: var(--warn); }
.chip--bad .shape { fill: var(--bad); }
.chip--plain { background: var(--surface-3); color: var(--muted); }
.chip--new { background: var(--primary-soft); color: var(--primary); }

.mac {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 0 6px;
  line-height: 20px;
  white-space: nowrap;
}

/* ── 今日總結 ── */
.card--summary { border-color: var(--border-strong); }
.card--summary::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 18px;
  bottom: 18px;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: var(--bad);
}
.summary { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 22px; }
.summary__count { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.worklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.worklist li {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.worklist__what { color: var(--text-strong); font-weight: 500; min-width: 0; }
.worklist__what small { display: block; color: var(--muted); font-weight: 400; font-size: 13px; }
.worklist__do { display: flex; align-items: center; gap: 8px; justify-content: flex-end; font-size: 13.5px; white-space: nowrap; }

.sources { display: flex; flex-direction: column; gap: 2px; }
.sources h3 { font-size: 13px; color: var(--muted); font-weight: 600; margin-bottom: 6px; }
.sources ul { list-style: none; margin: 0; padding: 0; }
.sources li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px dashed var(--border);
  font-size: 14px;
}
.sources li:last-child { border-bottom: 0; }

/* ── 數字 ── */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.kpis--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpi { background: var(--surface-2); border-radius: 10px; padding: 10px 12px; min-width: 0; }
.kpis--3 .kpi { padding: 10px 8px; }
.kpi__label { font-size: 12.5px; color: var(--muted); }
.kpi__num { font-size: 22px; font-weight: 700; color: var(--text-strong); line-height: 1.25; }
.kpi__num--bad { color: var(--bad-fg); }
.kpi__delta { font-size: 12.5px; color: var(--muted); }
.hero-num { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.hero-num__n { font-size: 34px; font-weight: 750; letter-spacing: -.01em; color: var(--text-strong); line-height: 1.1; }
.hero-num__u { font-size: 14px; color: var(--muted); }

.dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0; margin: 0; font-size: 14px; }
.dl dt { color: var(--muted); padding: 6px 12px 6px 0; border-bottom: 1px solid var(--border); white-space: nowrap; }
.dl dd { margin: 0; padding: 6px 0; border-bottom: 1px solid var(--border); text-align: right; color: var(--text-strong); min-width: 0; }
.dl dt:last-of-type,
.dl dd:last-of-type { border-bottom: 0; }
.mono { font-family: var(--font-mono); font-size: 13px; }

/* ── 表格（同色系斑馬紋） ── */
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th { font-size: 12.5px; font-weight: 600; color: var(--muted); text-align: left; padding: 0 8px 8px; white-space: nowrap; }
.tbl td { padding: 8px; border-top: 1px solid var(--border); vertical-align: middle; }
.tbl tbody tr:nth-child(even) td { background: var(--surface-2); }
.tbl .num { text-align: right; }
.tbl .ctr { text-align: center; }
.tbl td:first-child,
.tbl th:first-child { padding-left: 4px; }
.tbl .site { font-weight: 650; color: var(--text-strong); }
.tbl .who { color: var(--muted); font-size: 13px; white-space: nowrap; }
.tbl .up-phone { display: none; }
.tbl tr.is-building td { color: var(--muted); }
.scrollx { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }

.lights { display: inline-flex; gap: 6px; }
.lights svg { width: 13px; height: 13px; }
.lights .shape--ok { fill: var(--ok); }
.lights .shape--warn { fill: var(--warn); }
.lights .shape--bad { fill: var(--bad); }

/* ── 圖表：SVG 只畫圖形，文字一律在 HTML（手機縮放時字不會跟著變小） ── */
.chart { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; gap: 4px 8px; }
.chart__y {
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 11.5px;
  color: var(--faint);
  text-align: right;
  margin: -7px 0;
}
.chart__plot { grid-row: 1; grid-column: 2; position: relative; }
.chart__plot svg { display: block; width: 100%; }
.chart__x {
  grid-row: 2;
  grid-column: 2;
  display: grid;
  font-size: 11.5px;
  color: var(--faint);
  text-align: center;
}
.chart__x--8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.chart__x--12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.chart__x--ends { display: flex; justify-content: space-between; }
.card__body svg[class^="h-"] { display: block; width: 100%; }
.tbl svg.h-18 { width: 120px; }
.h-120 { height: 120px; }
.h-150 { height: 150px; }
.h-64 { height: 64px; }
.h-48 { height: 48px; }
.h-36 { height: 36px; }
.h-28 { height: 28px; }
.h-18 { height: 18px; }

.gridline { stroke: var(--grid); stroke-width: 1; vector-effect: non-scaling-stroke; }
.baseline { stroke: var(--border-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }
.line { fill: none; stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.line--s1 { stroke: var(--s1); }
.line--s2 { stroke: var(--s2); }
.area--s1 { fill: var(--s1); opacity: .12; }
.bar--s1 { fill: var(--s1); }
.bar--s2 { fill: var(--s2); }
.bar--s3 { fill: var(--s3); }
.bar--s3soft { fill: var(--s3-soft); }
.bar--ok { fill: var(--ok-soft); }
.bar--warn { fill: var(--warn); }
.bar--bad { fill: var(--bad); }
.bar--muted { fill: var(--border-strong); }
.hit { fill: transparent; }
.hit:hover { fill: var(--text); fill-opacity: .06; }

.heat { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 5px 10px; align-items: center; }
.heat__label { font-size: 13px; font-weight: 600; color: var(--text-strong); white-space: nowrap; }
.heat__label small { font-weight: 400; color: var(--muted); }
.heat svg { display: block; width: 100%; height: 20px; }
.cell--a { fill: var(--ok-soft); }
.cell--b { fill: var(--warn-soft); }
.cell--c { fill: var(--warn); }
.cell--d { fill: var(--bad); }
.heat__axis { grid-column: 2; display: flex; justify-content: space-between; font-size: 11.5px; color: var(--faint); }

.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--muted); align-items: center; }
.legend__item { display: inline-flex; align-items: center; gap: 6px; }
.legend__item b { color: var(--text-strong); font-weight: 650; }
.key { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.key--line { height: 3px; border-radius: 2px; width: 16px; }
.key--s1 { background: var(--s1); }
.key--s2 { background: var(--s2); }
.key--s3 { background: var(--s3); }
.key--s3soft { background: var(--s3-soft); border: 1px solid var(--s3); }
.key--a { background: var(--ok-soft); }
.key--b { background: var(--warn-soft); }
.key--c { background: var(--warn); }
.key--d { background: var(--bad); }

.say { font-size: 13.5px; color: var(--muted); }
.say b { color: var(--text-strong); font-weight: 600; }

.numbers { font-size: 13px; }
.numbers summary { cursor: pointer; color: var(--primary); width: max-content; }
.numbers .tbl { margin-top: 8px; font-size: 13px; }
.numbers .tbl td { padding: 5px 8px; }

/* ── 小列表 ── */
.rows { list-style: none; margin: 0; padding: 0; }
.rows li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid var(--border);
  font-size: 14px;
}
.rows li:first-child { border-top: 0; padding-top: 0; }
.rows__main { min-width: 0; }
.rows__main b { color: var(--text-strong); font-weight: 600; }
.rows__main small { display: block; color: var(--muted); font-size: 12.5px; }

.steps { display: flex; gap: 3px; margin-top: 6px; }
.steps span { flex: 1; height: 6px; border-radius: 3px; background: var(--surface-3); }
.steps .done { background: var(--s1); }
.steps .now { background: var(--warn); }

.duo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.mini__head { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.mini__head b { color: var(--text-strong); font-weight: 650; font-size: 14px; }

.timeline__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.timeline__list li {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid var(--border);
  font-size: 14px;
}
.timeline__list li:first-child { border-top: 0; }
.date { font-weight: 650; color: var(--text-strong); }
.days { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.tick--now { fill: var(--primary-solid); }
.tick--warn { fill: var(--warn); }
.tick--plain { fill: var(--faint); }
.track { fill: var(--surface-3); }

.pill { display: inline-block; font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: 999px; white-space: nowrap; }
.pill--live { background: var(--ok-bg); color: var(--ok-fg); }
.pill--ready { background: var(--primary-soft); color: var(--primary); }
.pill--plan { background: var(--surface-3); color: var(--muted); }

.hbar { display: grid; grid-template-columns: 56px minmax(0, 1fr) 70px; gap: 10px; align-items: center; font-size: 13.5px; }
.hbar svg { width: 100%; height: 14px; display: block; }
.hbar .v { text-align: right; color: var(--text-strong); font-weight: 600; }

/* ── 編輯版面 ── */
.card__edit { display: none; }
.is-editing .card__edit {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 10px 12px;
  margin: 10px 10px 0;
  border-radius: 10px;
  background: var(--primary-soft);
  font-size: 13px;
}
.is-editing .card { border-style: dashed; border-color: var(--border-strong); }
.is-editing .card__menu,
.is-editing .card__link { display: none; }
.is-editing .card__body { opacity: .78; pointer-events: none; }
.is-editing .card[draggable="true"] { cursor: grab; }
.card.is-dragging { opacity: .45; }
.card.is-drop-target { border-color: var(--focus); box-shadow: 0 0 0 3px var(--primary-soft), var(--shadow-lift); }
.card.is-flash { box-shadow: 0 0 0 3px var(--focus), var(--shadow-lift); }

.edit__handle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--primary);
  font-weight: 600;
  padding: 0 6px 0 2px;
  cursor: grab;
}
.edit__handle svg { width: 14px; height: 14px; }
.edit__handle .dots { fill: currentColor; }
.edit__fixed { color: var(--primary); font-weight: 600; }
.ebtn {
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  border-radius: 8px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  cursor: pointer;
  font-size: 13px;
  color: var(--text-strong);
}
.ebtn:hover { background: var(--surface-3); }
.ebtn[aria-pressed="true"] { background: var(--primary-solid); border-color: var(--primary-solid); color: var(--on-primary); }
.ebtn--danger { color: var(--bad-fg); }
.ebtn:disabled { opacity: .4; cursor: default; }
.eseg { display: inline-flex; align-items: center; gap: 2px; }
.eseg__label { color: var(--muted); margin-right: 2px; }
.espace { flex: 1; }
.echeck { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); cursor: pointer; }

.editbar { display: none; }
.is-editing .editbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 14px;
}
.editbar__msg { min-height: 1em; }

.tray { display: none; }
.is-editing .tray {
  display: block;
  margin-top: 26px;
  padding: 20px;
  border-radius: var(--radius);
  background: var(--band);
  border: 1px dashed var(--border-strong);
}
.tray h2 { font-size: 15px; color: var(--text-strong); }
.tray p { font-size: 13px; color: var(--muted); margin-top: 2px; }
.tray__list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.tray__list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
}
.tray__list b { color: var(--text-strong); font-weight: 600; }
.tray__list small { display: block; color: var(--muted); font-size: 12.5px; }
.tray__empty { color: var(--muted); font-size: 13px; }
.parking { display: none; }

.foot {
  border-top: 1px solid var(--border);
  background: var(--band);
  color: var(--faint);
  font-size: 13px;
  padding: 18px 0 calc(18px + env(safe-area-inset-bottom, 0px));
}

/* ── 平板：兩欄 ── */
@media (max-width: 1099px) {
  .board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card--l { grid-column: span 2; }
  .summary { grid-template-columns: minmax(0, 1fr); }
  .topbar__inner { flex-wrap: wrap; gap: 4px 16px; padding-top: 8px; }
  .mainnav { order: 3; flex-basis: 100%; padding-bottom: 8px; }
  /* 十個選單項換行排：橫向捲動會把後面幾項藏起來而且沒有任何提示（OC 外觀 #1） */
  .mainnav ul { flex-wrap: wrap; overflow-x: visible; }
  .topbar__right { margin-left: auto; }
}

/* ── 手機：一欄；「手機不顯示」的卡跳過；編輯只有 ↑ ↓ ── */
@media (max-width: 699px) {
  body { font-size: 15px; }
  .board { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .card--s,
  .card--m,
  .card--l { grid-column: span 1; }
  .card.is-hidden-mobile { display: none; }
  .is-editing .card.is-hidden-mobile { display: flex; opacity: .55; }
  .brand__sub { display: none; }
  .account__name { display: none; }
  /* 選單換行後頁首變高，不再釘在最上面，長頁的閱讀空間才不被吃掉（OC 外觀 #2） */
  .topbar { position: static; }
  .mainnav a { padding: 6px 10px; }
  /* 帳號選單：顯示登入的 Email（頁首的名字在手機上藏起來了），寬度貼著內容（OC 外觀 #7） */
  .account__menu { min-width: 0; width: max-content; max-width: calc(100vw - 2 * var(--gutter)); }
  .account__email { display: block; }
  .account__menu .btn { width: 100%; justify-content: center; margin-top: 6px; }
  .hero { padding: 18px 0 20px; }
  .hero h1 { font-size: 22px; }
  .hero__row { flex-direction: column; align-items: stretch; }
  .hero__actions { justify-content: space-between; }
  .worklist li { grid-template-columns: 82px minmax(0, 1fr); gap: 6px 8px; align-items: start; }
  .worklist li .chip { margin-top: 1px; justify-self: start; }
  .worklist__do { grid-column: 2; justify-content: flex-start; white-space: normal; flex-wrap: wrap; }
  .kpis { gap: 6px; }
  .kpi { padding: 8px 8px; }
  .kpi__label { font-size: 12px; }
  .kpi__num { font-size: 19px; }
  .tbl th { padding: 0 4px 8px; }
  .tbl td { padding: 8px 4px; }
  .tbl .who { display: block; font-size: 12px; }
  .tbl .up-phone { display: block; font-size: 12px; color: var(--muted); }
  .tbl .num-phone-hide { display: none; }
  .edit__handle { display: none; }
  .eseg--size { display: none; }
  .card__head { padding: 14px 14px 0; }
  .card__body { padding: 12px 14px 16px; }
  .hide-phone { display: none; }
}

/* OC-5b：沒有 JavaScript 的時候不顯示「拖拉」把手（dashboard.js 載入後替 html 加 js 這個 class）*/
.js-only { display: none; }
.js .js-only { display: inline-flex; }
.flash { margin: 12px 0; padding: 10px 14px; border-radius: 10px; background: var(--primary-soft); }
.flash.error { border-left: 4px solid var(--bad, #b91c1c); background: var(--bad-bg); color: var(--bad-fg); }
.reauth { margin: 24px auto; }
.reauth summary { cursor: pointer; color: var(--muted); }
.reauth input { max-width: 12rem; }

/* 系統狀態的每一格（舊總覽的表，放在總覽最下面的摺疊裡）與一般提示 */
.status-all { margin: 24px auto; }
.status-all summary { cursor: pointer; color: var(--muted); }
.notice { margin: 12px 0; padding: 10px 14px; border-radius: 10px; border-left: 4px solid var(--bad); background: var(--bad-bg); }
.level-red { color: var(--bad-fg); }
.level-yellow { color: var(--warn-fg, #8a5a00); }
.level-green { color: var(--ok-fg, #1b6e3f); }
.table-scroll { overflow-x: auto; }
table.cards { border-collapse: collapse; width: 100%; font-size: 14px; }
table.cards th, table.cards td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.lamp { font-weight: 600; }
.sub { display: block; color: var(--muted); font-size: 12.5px; }
.link-list { padding-left: 1.2em; }

/* 一般說明文字、狀態表的表格、沒有資料的燈形（OC-5b 補：樣稿裡沒有，因為樣稿全是假資料）*/
.note { color: var(--muted); font-size: 13.5px; margin: 8px 0; }
.shape--na { fill: var(--border-strong); }
table.status { margin-top: 8px; }