@font-face { font-family: Geist; src: url(vendor/Geist-Variable.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }
:root {
  --font: Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: light;
  --bg: #f5f6f8; --surface: #fff; --subtle: #f9fafb; --hover: #f2f4f7; --top-bg: rgba(255, 255, 255, .94);
  --line: #e6e8ec; --line-2: #d4d8de; --line-3: #b6bdc8;
  --ink: #101828; --ink-2: #475467; --ink-3: #8b94a3; --placeholder: #a5adba;
  --accent: #2468cc; --accent-hover: #1d58b3; --accent-soft: #edf3fc; --accent-soft-2: #e1ebfb; --accent-line: #c9daf4; --accent-ink: #1b4f9c; --link: #2468cc; --on-accent: #fff;
  --good: #0ca30c; --good-ink: #067306; --good-soft: #edf8ed; --good-line: #c9e9c9;
  --warn: #fab219; --warn-ink: #8a5300; --warn-soft: #fff8e6; --warn-line: #f1d084;
  --bad: #d03b3b; --bad-hover: #b93131; --bad-ink: #b42318; --bad-soft: #fdf1f0; --bad-line: #f4c7c2;
  --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --bar-muted: #d3d9e2; --bar-hover: #b4becd;
  --seg-bg: #eceef2; --tint: rgba(16, 24, 40, .06); --chip-hover: #e7eaef; --track: #d4d8de; --track-2: #e6e9ee;
  --grid: #edf0f3; --axis: #c8ced8; --row-hover: #f8f9fb; --row-bad: #fffafa;
  --scrim: rgba(16, 24, 40, .32); --inverse: #101828; --on-inverse: #fff; --inverse-good: #7ee2a0; --inverse-bad: #ffa29b;
  --google-bg: #fff; --google-line: #dadce0; --google-ink: #1f1f1f; --google-hover: #f8faff;
  --r: 12px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow-lg: 0 24px 48px -12px rgba(16, 24, 40, .24), 0 4px 10px -4px rgba(16, 24, 40, .08);
  --ring: 0 0 0 3px rgba(36, 104, 204, .2);
}
@media screen {
  :root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0b0f17; --surface: #121823; --subtle: #161d2a; --hover: #1c2433; --top-bg: rgba(14, 19, 28, .88);
    --line: #232d3d; --line-2: #313d52; --line-3: #46546b;
    --ink: #e7ebf2; --ink-2: #aab4c4; --ink-3: #7b8699; --placeholder: #5b6678;
    --accent: #3b7ce8; --accent-hover: #5590f0; --accent-soft: #14233e; --accent-soft-2: #1b2e50; --accent-line: #24406e; --accent-ink: #9cc2ff; --link: #7fb0ff; --on-accent: #fff;
    --good: #2fb96c; --good-ink: #6fdca0; --good-soft: #0f2a1d; --good-line: #1d4d34;
    --warn: #f0b23a; --warn-ink: #f4c76a; --warn-soft: #2b2312; --warn-line: #5a4719;
    --bad: #e5484d; --bad-hover: #f06065; --bad-ink: #ff9592; --bad-soft: #2d1517; --bad-line: #5b2427;
    --s1: #4c8df6; --s2: #f0894c; --s3: #34c38f; --bar-muted: #2c374a; --bar-hover: #3d4b63;
    --seg-bg: #0d121b; --tint: rgba(255, 255, 255, .08); --chip-hover: #253044; --track: #344157; --track-2: #232d3d;
    --grid: #1b2331; --axis: #33405a; --row-hover: #171f2d; --row-bad: #21151a;
    --scrim: rgba(0, 0, 0, .6); --inverse: #e7ebf2; --on-inverse: #0b0f17; --inverse-good: #15803d; --inverse-bad: #b42318;
    --google-bg: #131314; --google-line: #8e918f; --google-ink: #e3e3e3; --google-hover: #1f1f20;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .45);
    --shadow-lg: 0 24px 48px -12px rgba(0, 0, 0, .7), 0 4px 10px -4px rgba(0, 0, 0, .5);
    --ring: 0 0 0 3px rgba(76, 141, 246, .35);
  }
}
* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.5 var(--font); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }
/* 頁面上的文字一律不能選取；只有輸入框可以選取、編輯 */
body { -webkit-user-select: none; user-select: none; }
input, textarea, select { -webkit-user-select: text; user-select: text; }
[x-cloak] { display: none !important; }
button, input, select { font: inherit; color: inherit; }
h1, h2, h3, p, dl, dd { margin: 0; }
.i { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.num, .r { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); font-size: 12.5px; letter-spacing: -.01em; }
.muted { color: var(--ink-3); }
.grow { flex: 1; }
.boot { display: grid; place-items: center; min-height: 70vh; color: var(--ink-3); }

/* ---------- 頂列 ---------- */
.top { position: sticky; top: 0; z-index: 20; background: var(--top-bg); backdrop-filter: saturate(180%) blur(8px); border-bottom: 1px solid var(--line); }
.top-in { max-width: 1440px; margin: 0 auto; height: 60px; padding: 0 32px; display: flex; align-items: center; gap: 36px; }
.brand { display: flex; align-items: center; gap: 10px; }
.logo { width: 30px; height: 30px; border-radius: 8px; background: var(--accent); display: grid; place-items: center; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .18); }
.logo .i { width: 17px; height: 17px; fill: var(--on-accent); stroke: none; }
.brand b { display: block; font-size: 14.5px; font-weight: 650; letter-spacing: -.01em; line-height: 1.25; }
.brand small { display: block; font-size: 12px; color: var(--ink-3); line-height: 1.25; }
.tabs { display: flex; gap: 2px; align-self: stretch; }
.tabs button { border: 0; background: none; padding: 0 12px; cursor: pointer; color: var(--ink-2); font-weight: 550; position: relative; transition: color .15s; }
.tabs button:hover { color: var(--ink); }
.tabs button.on { color: var(--ink); }
.tabs button.on::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--ink); }
.top-r { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.save { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-3); margin-right: 4px; white-space: nowrap; }
.save .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--good); }
.save.dirty .dot, .save.saving .dot { background: var(--warn); }
.save.error, .save.conflict { color: var(--bad-ink); font-weight: 550; }
.save.error .dot, .save.conflict .dot { background: var(--bad); }
.month-btn { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px 0 12px; border: 1px solid var(--line-2); border-radius: 9px; background: var(--surface); cursor: pointer; font-weight: 600; box-shadow: var(--shadow-sm); transition: border-color .15s; }
.month-btn:hover { border-color: var(--line-3); }
.month-btn .i:last-child { color: var(--ink-3); }

/* ---------- 選單 ---------- */
.menu-wrap { position: relative; }
.menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; min-width: 260px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 6px; }
.menu-label { font-size: 12px; color: var(--ink-3); padding: 6px 10px 4px; }
.menu-item { width: 100%; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 0; background: none; border-radius: 8px; cursor: pointer; text-align: left; font-weight: 500; }
.menu-item:hover { background: var(--hover); }
.menu-item .tag { margin-left: auto; }
.menu-item .i.ok { color: var(--accent); }
.menu-item.danger { color: var(--bad-ink); }
.menu-sep { height: 1px; background: var(--line); margin: 6px 4px; }
.menu-new { display: flex; gap: 6px; padding: 4px 6px 6px; }
.menu-new .input { flex: 1; }

/* ---------- 基本元件 ---------- */
.tag { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 12px; font-weight: 550; line-height: 1; white-space: nowrap; background: var(--hover); color: var(--ink-2); }
.tag .i { width: 12px; height: 12px; }
.tag.lg { height: 26px; font-size: 13px; padding: 0 10px; }
.tag-accent { background: var(--accent-soft); color: var(--accent-ink); }
.tag-good { background: var(--good-soft); color: var(--good-ink); }
.tag-warn { background: var(--warn-soft); color: var(--warn-ink); }
.tag-bad { background: var(--bad-soft); color: var(--bad-ink); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font-weight: 550; font-size: 13.5px; cursor: pointer; white-space: nowrap; box-shadow: var(--shadow-sm); transition: background .15s, border-color .15s, box-shadow .15s, transform .06s; }
.btn:hover { background: var(--subtle); border-color: var(--line-3); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: 0 1px 2px rgba(36, 104, 204, .35), inset 0 1px 0 rgba(255, 255, 255, .14); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-danger { background: var(--bad); border-color: var(--bad); color: var(--on-accent); }
.btn-danger:hover { background: var(--bad-hover); border-color: var(--bad-hover); }
.btn-ghost { border-color: transparent; background: transparent; box-shadow: none; color: var(--ink-2); }
.btn-ghost:hover { background: var(--hover); border-color: transparent; color: var(--ink); }
.btn-text-danger { border-color: transparent; background: transparent; box-shadow: none; color: var(--bad-ink); padding: 0 10px; }
.btn-text-danger:hover { background: var(--bad-soft); border-color: transparent; }
.btn-icon { width: 36px; padding: 0; }
.btn.sm { height: 30px; padding: 0 10px; font-size: 13px; border-radius: 8px; }
.btn-dashed { width: 100%; border-style: dashed; box-shadow: none; color: var(--ink-2); }
.link { border: 0; background: none; padding: 0; color: var(--link); font-weight: 550; cursor: pointer; }
.link:hover { text-decoration: underline; }
:is(.btn, .link, .tabs button, .seg button, .st, .pstep, .chip, .month-btn, .menu-item, .kpi):focus-visible { outline: none; box-shadow: var(--ring); }

.input { height: 36px; width: 100%; min-width: 0; padding: 0 11px; border: 1px solid var(--line-2); border-radius: 9px; background: var(--surface); transition: border-color .15s, box-shadow .15s, background .15s; }
.input:hover { border-color: var(--line-3); }
.input:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); background: var(--surface); }
.input::placeholder { color: var(--placeholder); }
.input.num { text-align: right; font-variant-numeric: tabular-nums; }
/* 黃色＝還沒填的必填欄位（沿用試算表的習慣），填了就變回白色 */
.input.req:placeholder-shown { background: var(--warn-soft); border-color: var(--warn-line); }
.input.req:placeholder-shown::placeholder { color: var(--warn-ink); opacity: .7; }
.input:disabled { background: var(--subtle); color: var(--ink-2); border-color: var(--line); cursor: not-allowed; }
.input.invalid { border-color: var(--bad); box-shadow: 0 0 0 3px rgba(208, 59, 59, .15); }
.input.sm { height: 30px; font-size: 13px; border-radius: 8px; }
.affix { position: relative; display: flex; align-items: center; }
.affix .input { padding-right: 34px; }
.affix > span { position: absolute; right: 11px; color: var(--ink-3); font-size: 13px; pointer-events: none; }

.seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--seg-bg); border-radius: 10px; }
.seg button { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 0; border-radius: 8px; background: none; color: var(--ink-2); font-weight: 550; font-size: 13px; cursor: pointer; }
.seg button.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(16, 24, 40, .1), 0 0 0 1px rgba(16, 24, 40, .04); }
.cnt { display: inline-grid; place-items: center; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 6px; background: var(--tint); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.cnt.warn { background: var(--warn-soft); color: var(--warn-ink); }
.cnt.bad { background: var(--bad-soft); color: var(--bad-ink); }
.chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border: 0; border-radius: 6px; background: var(--hover); font-size: 12.5px; }
button.chip { cursor: pointer; }
button.chip:hover { background: var(--chip-hover); }
.switch { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); cursor: pointer; user-select: none; }
.switch input { appearance: none; width: 32px; height: 18px; border-radius: 9px; background: var(--track); position: relative; cursor: pointer; transition: background .15s; margin: 0; }
.switch input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: transform .15s; }
.switch input:checked { background: var(--accent); }
.switch input:checked::after { transform: translateX(14px); }

/* ---------- 版面 ---------- */
.wrap { max-width: 1440px; margin: 0 auto; padding: 28px 32px 80px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.page-head h1 { display: flex; align-items: center; gap: 10px; font-size: 24px; font-weight: 650; letter-spacing: -.02em; line-height: 1.25; }
.crumb { font-size: 13px; color: var(--ink-3); margin-bottom: 4px; }
.sub { color: var(--ink-2); margin-top: 4px; }
.actions { display: flex; align-items: center; gap: 8px; }
.stack > * + * { margin-top: 16px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-sm); }
.card-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 0; }
.card-h h2 { font-size: 15px; font-weight: 600; letter-spacing: -.005em; }
.card-h p { font-size: 13px; color: var(--ink-3); margin-top: 2px; }
.card-b { padding: 16px 20px 20px; }
.card-f { padding: 14px 20px; border-top: 1px solid var(--line); background: var(--subtle); border-radius: 0 0 var(--r) var(--r); }
.banner { display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: 16px; border-radius: 10px; font-size: 13.5px; }
.banner.info { background: var(--accent-soft); color: var(--accent-ink); border: 1px solid var(--accent-line); }
.banner.good { background: var(--good-soft); color: var(--good-ink); border: 1px solid var(--good-line); }
.lead { max-width: 76ch; color: var(--ink-2); text-wrap: pretty; }
.stepbody > * + * { margin-top: 16px; }
.toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.search { position: relative; width: 280px; }
.search .i { position: absolute; left: 11px; top: 10px; color: var(--ink-3); }
.search .input { padding-left: 34px; }

/* ---------- 總覽 ---------- */
.progress { list-style: none; margin: 0; padding: 16px 20px 20px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pstep { width: 100%; display: grid; grid-template-columns: 30px 1fr; column-gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); text-align: left; cursor: pointer; transition: background .15s, border-color .15s; }
.pstep:hover { background: var(--subtle); border-color: var(--line-2); }
.pstep-i { grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 650; background: var(--hover); color: var(--ink-2); }
.pstep.done .pstep-i { background: var(--good-soft); color: var(--good-ink); }
.pstep.attn .pstep-i { background: var(--bad-soft); color: var(--bad-ink); }
.pstep-t { font-weight: 600; }
.pstep-s { font-size: 12.5px; color: var(--ink-3); }
.pstep.attn .pstep-s { color: var(--bad-ink); }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.kpi { display: flex; flex-direction: column; justify-content: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-sm); padding: 18px 20px; text-align: left; }
.kpi.link { cursor: pointer; transition: border-color .15s; }
.kpi.link:hover { border-color: var(--line-2); }
.kpi-l { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 550; color: var(--ink-2); }
.kpi-l small { font-size: 12px; font-weight: 400; color: var(--ink-3); }
.kpi-v { display: flex; align-items: baseline; gap: 5px; margin-top: 10px; font-size: 28px; font-weight: 600; letter-spacing: -.025em; line-height: 1.15; }
.kpi-v small { font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--ink-3); }
.kpi-v .i { width: 20px; height: 20px; align-self: center; }
.kpi-v .i.bad { color: var(--bad); }
.kpi-v .i.good { color: var(--good); }
.kpi-s { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; font-size: 12.5px; color: var(--ink-3); }
.delta { color: var(--ink-2); font-weight: 550; font-variant-numeric: tabular-nums; }
.stack-bar { display: flex; gap: 2px; height: 14px; margin-top: 4px; }
.stack-bar > div { min-width: 3px; }
.stack-bar > div:first-child { border-radius: 4px 0 0 4px; }
.stack-bar > div:last-child { border-radius: 0 4px 4px 0; }
.s1 { background: var(--s1); } .s2 { background: var(--s2); } .s3 { background: var(--s3); }
.legend { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.legend li { display: grid; grid-template-columns: 10px 1fr auto 56px; align-items: center; gap: 10px; font-size: 13.5px; }
.legend .sw { width: 10px; height: 10px; border-radius: 3px; }
.legend b { font-weight: 600; font-variant-numeric: tabular-nums; }
.legend .pc { text-align: right; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.barlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.barlist li { display: grid; grid-template-columns: 150px minmax(0, 1fr) 90px 52px; align-items: center; gap: 12px; font-size: 13.5px; }
.bl-track { height: 8px; border-radius: 0 4px 4px 0; overflow: hidden; }
.bl-fill { display: block; height: 100%; background: var(--s1); border-radius: 0 4px 4px 0; }
.bl-v { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.bl-p { text-align: right; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cchart { position: relative; height: 230px; margin-left: 48px; }
.cc-grid { position: absolute; inset: 0 0 26px 0; }
.cc-tick { position: absolute; left: 0; right: 0; border-top: 1px solid var(--grid); }
.cc-tick:last-child { border-top-color: var(--axis); }
.cc-tick span { position: absolute; left: -48px; top: -9px; width: 40px; text-align: right; font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cc-cols { position: absolute; inset: 0; display: flex; }
.cc-col { flex: 1; display: flex; flex-direction: column; cursor: pointer; }
.cc-plot { flex: 1; position: relative; display: flex; align-items: flex-end; justify-content: center; }
.cc-bar { width: min(28px, 56%); min-height: 2px; border-radius: 4px 4px 0 0; background: var(--bar-muted); transition: background .15s; }
.cc-col:hover .cc-bar { background: var(--bar-hover); }
.cc-bar.cur, .cc-col:hover .cc-bar.cur { background: var(--s1); }
.cc-x { height: 26px; display: grid; place-items: center; font-size: 12px; color: var(--ink-3); }
.cc-tip { position: absolute; left: 50%; transform: translate(-50%, -8px); z-index: 2; display: flex; flex-direction: column; padding: 6px 10px; border-radius: 8px; background: var(--inverse); color: var(--on-inverse); font-size: 12px; white-space: nowrap; pointer-events: none; }
.cc-tip span { font-variant-numeric: tabular-nums; }
.empty-sm { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 150px; padding: 0 24px; text-align: center; font-size: 13.5px; color: var(--ink-3); }
.empty-ic { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--hover); color: var(--ink-2); }
.empty { padding: 72px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.empty h2 { font-size: 18px; font-weight: 650; }
.empty p { max-width: 46ch; color: var(--ink-2); }

/* ---------- 每月計費 ---------- */
.stepper { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-sm); overflow: hidden; }
.st { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 18px; border: 0; border-right: 1px solid var(--line); background: none; text-align: left; cursor: pointer; transition: background .15s; }
.st:last-child { border-right: 0; }
.st:hover { background: var(--subtle); }
.st.cur { background: var(--accent-soft); }
.st.cur::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent); }
.st-i { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--line-2); background: var(--surface); color: var(--ink-2); font-size: 13px; font-weight: 650; }
.st-i .i { width: 15px; height: 15px; stroke-width: 2.4; }
.st.cur .st-i { border-color: var(--accent); color: var(--accent); }
.st.done .st-i { background: var(--good); border-color: var(--good); color: var(--on-accent); }
.st.attn .st-i { background: var(--bad); border-color: var(--bad); color: var(--on-accent); }
.st b { display: block; font-size: 14px; font-weight: 600; }
.st small { display: block; font-size: 12.5px; color: var(--ink-3); }
.st.attn small { color: var(--bad-ink); }
.form { display: flex; flex-direction: column; gap: 10px; }
.frow { display: grid; grid-template-columns: minmax(0, 1fr) 210px; align-items: center; gap: 12px; }
.frow-l { display: flex; flex-direction: column; font-size: 13.5px; }
.frow-l small { font-size: 12px; color: var(--ink-3); }
.frow.v { grid-template-columns: minmax(0, 1fr); gap: 6px; }
.form-sep { margin-top: 6px; padding-top: 12px; border-top: 1px dashed var(--line); font-size: 12px; font-weight: 600; color: var(--ink-3); }
.form-sep:first-child { margin-top: 0; padding-top: 0; border: 0; }
.cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.acct { display: flex; flex-direction: column; gap: 4px; width: 172px; font-size: 12px; color: var(--ink-3); }
.sum { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 28px; }
.sum div { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.sum dt { color: var(--ink-2); }
.sum dd { font-weight: 600; font-variant-numeric: tabular-nums; }
.drop { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1.5px dashed var(--line-2); border-radius: var(--r); background: var(--surface); transition: background .15s, border-color .15s; }
.drop.over { border-color: var(--accent); background: var(--accent-soft); }
.drop-ic { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.drop-ic .i { width: 20px; height: 20px; }
.drop .drop-t { display: block; font-weight: 600; }
.drop p { font-size: 13px; color: var(--ink-3); }
.mprog { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.mbar { width: 140px; height: 6px; border-radius: 3px; background: var(--track-2); overflow: hidden; }
.mbar > span { display: block; height: 100%; border-radius: 3px; background: var(--good); transition: width .3s; }
.issues { list-style: none; margin: 0; padding: 4px 20px 8px; }
.issues li { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.issues li:last-child { border-bottom: 0; }
.issues li > span { flex: 1; }
.issues .i.bad { color: var(--bad); }
.issues .i.info { color: var(--ink-3); }
.okline { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border: 1px solid var(--good-line); border-radius: var(--r); background: var(--good-soft); color: var(--good-ink); font-weight: 550; }
.recon { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-sm); }
.recon > div { display: flex; flex-direction: column; gap: 2px; padding: 14px 18px; border-right: 1px solid var(--line); }
.recon > div:last-child { border-right: 0; }
.recon span { font-size: 12.5px; color: var(--ink-2); }
.recon b { font-size: 19px; font-weight: 600; letter-spacing: -.015em; }
.recon b.hl { color: var(--accent); }
.recon small { font-size: 12px; color: var(--ink-3); }
.closebar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-sm); }
.closebar b { display: block; font-weight: 600; }
.closebar p { font-size: 13px; color: var(--ink-3); }
.closebar p.warn { color: var(--bad-ink); }
.stepnav { display: flex; align-items: center; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }

/* ---------- 表格 ---------- */
.tscroll { overflow: auto; max-height: min(68vh, 760px); border-radius: var(--r); }
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.tbl th { position: sticky; top: 0; z-index: 2; height: 38px; padding: 0 14px; background: var(--subtle); border-bottom: 1px solid var(--line); text-align: left; font-size: 12.5px; font-weight: 550; color: var(--ink-2); white-space: nowrap; }
.tbl thead tr + tr th { top: 38px; }
.tbl th.grp { text-align: center; border-left: 1px solid var(--line); }
.tbl td { height: 48px; padding: 0 14px; border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--surface); }
.tbl td.bl, .tbl th.bl { border-left: 1px solid var(--line); }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tr.click { cursor: pointer; }
.tbl tbody tr:hover td { background: var(--row-hover); }
.tbl .r { text-align: right; }
.tbl td b { display: block; font-weight: 550; }
.tbl td small { display: block; font-size: 12px; line-height: 1.3; color: var(--ink-3); }
.tbl td small.up { color: var(--warn-ink); font-weight: 550; }
.tbl tfoot td { position: sticky; bottom: 0; z-index: 2; height: 46px; background: var(--subtle); border-top: 1px solid var(--line); border-bottom: 0; font-weight: 600; }
.tbl .sticky { position: sticky; left: 0; z-index: 1; box-shadow: 1px 0 0 var(--line); }
.tbl th.sticky { z-index: 3; }
.tbl tfoot td.sticky { z-index: 3; }
.tbl .sr1, .tbl .sr2 { position: sticky; z-index: 1; }
.tbl .sr1 { right: 0; width: 104px; min-width: 104px; }
.tbl .sr2 { right: 104px; box-shadow: -1px 0 0 var(--line); }
.tbl th.sr1, .tbl th.sr2, .tbl tfoot td.sr1, .tbl tfoot td.sr2 { z-index: 3; }
.tbl .w-in { width: 170px; }
.tbl .ellip { max-width: 420px; overflow: hidden; text-overflow: ellipsis; }
.tbl .warn-ink { color: var(--warn-ink); font-weight: 550; }
.tbl tr.row-bad td { background: var(--row-bad); }
.tbl td .i.chev { color: var(--ink-3); }
.empty-row { text-align: center; color: var(--ink-3); height: 96px !important; }

/* ---------- 側滑面板、對話框、通知 ---------- */
.overlay { position: fixed; inset: 0; z-index: 40; background: var(--scrim); }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 50; width: min(500px, 100vw); display: flex; flex-direction: column; background: var(--surface); border-left: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.dr-enter { transition: transform .24s cubic-bezier(.2, .8, .2, 1); }
.dr-leave { transition: transform .16s ease-in; }
.dr-from { transform: translateX(100%); }
.fade-enter, .fade-leave { transition: opacity .2s; }
.fade-from { opacity: 0; }
.dr-in { display: flex; flex-direction: column; height: 100%; }
.dr-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 24px 16px; border-bottom: 1px solid var(--line); }
.dr-h h2 { font-size: 19px; font-weight: 650; letter-spacing: -.015em; }
.dr-h p { font-size: 13px; color: var(--ink-3); }
.dr-b { flex: 1; overflow-y: auto; padding: 4px 24px 24px; }
.dr-f { display: flex; align-items: center; gap: 12px; padding: 14px 24px; border-top: 1px solid var(--line); background: var(--subtle); }
.dr-f .muted { flex: 1; text-align: right; font-size: 12.5px; }
.fsec { padding: 20px 0; border-bottom: 1px solid var(--line); }
.fsec:last-child { border-bottom: 0; }
.fsec h3 { font-size: 14px; font-weight: 600; }
.fsec-h { margin-bottom: 12px; }
.fsec-h p { font-size: 12.5px; color: var(--ink-3); }
.fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 12px; }
.mrow { display: grid; grid-template-columns: minmax(0, 1.3fr) 132px minmax(0, 1fr) 36px; gap: 8px; align-items: center; }
.ac-row { display: flex; align-items: center; gap: 16px; padding: 16px 18px; }
.ac-row p { margin-top: 2px; font-size: 13px; }
.ac-in { width: 200px; flex: none; }
.mrow + .mrow { margin-top: 12px; }
.mnote { grid-column: 1 / -1; margin-top: -3px; font-size: 12px; color: var(--ink-3); }
.mnote.bad { color: var(--bad-ink); }
.meters .btn-dashed { margin-top: 12px; }
.dr-hero { margin: 18px 0 4px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--subtle); }
.dr-hero span { font-size: 12.5px; color: var(--ink-2); }
.dr-hero b { display: block; font-size: 30px; font-weight: 600; letter-spacing: -.025em; line-height: 1.25; }
.dr-hero small { font-size: 12.5px; color: var(--ink-3); }
.mini { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 10px; }
.mini td { padding: 8px 0; border-bottom: 1px solid var(--line); }
.mini td + td { padding-left: 12px; }
.mini .r { text-align: right; }
.mini tr.tot td { font-weight: 600; }
.mini tr:last-child td { border-bottom: 0; }
.cl { margin-top: 6px; }
.cl-row { padding: 11px 0; border-bottom: 1px solid var(--line); }
.cl-top { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; }
.cl-top b { font-weight: 600; font-variant-numeric: tabular-nums; }
.cl-f { margin-top: 3px; font-size: 12px; line-height: 1.55; color: var(--ink-3); }
.cl-row.sub { border-bottom-style: dashed; }
.cl-row.total { border-bottom: 0; }
.cl-row.total .cl-top { font-size: 15.5px; font-weight: 650; }
.help-steps { list-style: none; margin: 16px 0 0; padding: 0; counter-reset: s; }
.help-steps li { position: relative; padding: 0 0 18px 40px; counter-increment: s; }
.help-steps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); font-size: 13px; font-weight: 650; }
.help-steps b { display: block; font-weight: 600; }
.help-steps p { margin-top: 2px; color: var(--ink-2); font-size: 13.5px; }
.formula { margin-top: 8px; padding: 10px 12px; border-radius: 8px; background: var(--subtle); border: 1px solid var(--line); font-size: 12.5px; line-height: 1.7; color: var(--ink-2); }
.modal-wrap { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: var(--scrim); }
.modal { width: min(440px, 100%); padding: 22px 24px 18px; background: var(--surface); border-radius: 14px; box-shadow: var(--shadow-lg); }
.modal h2 { font-size: 17px; font-weight: 650; letter-spacing: -.01em; }
.modal p { margin-top: 8px; color: var(--ink-2); white-space: pre-line; }
.modal-f { display: flex; justify-content: flex-end; gap: 8px; margin-top: 22px; }
.toast { position: fixed; bottom: 24px; left: 50%; z-index: 70; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 10px; background: var(--inverse); color: var(--on-inverse); font-size: 13.5px; box-shadow: var(--shadow-lg); }
.toast .i { color: var(--inverse-good); }
.toast.bad .i { color: var(--inverse-bad); }

/* ---------- 登入、帳號、操作紀錄 ---------- */
/* ---------- 品牌標誌 ---------- */
.mark { display: block; width: 30px; height: 30px; flex: none; }
.mark.lg { width: 40px; height: 40px; }

/* ---------- 登入（左：品牌與功能說明；右：登入面板） ---------- */
.auth { position: fixed; inset: 0; z-index: 80; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); background: var(--bg); overflow-y: auto; }
.auth-side { position: relative; overflow: hidden; display: flex; border-right: 1px solid var(--line); color: #e7ebf2; background: radial-gradient(900px 520px at 0% 0%, rgba(59, 130, 246, .32), transparent 62%), linear-gradient(160deg, #10203f 0%, #0b1527 55%, #070d19 100%); }
.auth-side::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(180deg, #000, transparent 80%); }
.auth-side-in { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 48px; width: 100%; max-width: 540px; margin-left: auto; padding: 48px 56px 40px; }
.auth-logo { display: flex; align-items: center; gap: 12px; }
.auth-logo b { display: block; font-size: 16px; font-weight: 650; letter-spacing: -.01em; line-height: 1.3; }
.auth-logo small { display: block; font-size: 12.5px; opacity: .65; }
.auth-pitch h2 { font-size: 30px; line-height: 1.32; font-weight: 650; letter-spacing: -.02em; }
.auth-feats { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.auth-feats li { display: grid; grid-template-columns: 38px 1fr; gap: 14px; align-items: center; }
.auth-feats .i { width: 38px; height: 38px; padding: 10px; border-radius: 10px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); color: #9cc2ff; }
.auth-feats b { display: block; font-size: 14.5px; font-weight: 600; }
.auth-feats span { display: block; margin-top: 1px; font-size: 13px; opacity: .66; }
.auth-side-foot { font-size: 12.5px; opacity: .5; }
.auth-main { display: flex; flex-direction: column; min-height: 100vh; }
.auth-panel { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 20px; width: min(380px, calc(100% - 32px)); margin: 0 auto; padding: 48px 0 24px; }
.auth-panel h1 { font-size: 26px; font-weight: 650; letter-spacing: -.02em; }
.auth-lead { margin-top: -12px; color: var(--ink-2); }
.auth-go { width: 100%; height: 44px; font-size: 14.5px; }
.auth-err { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: var(--bad-soft); color: var(--bad-ink); border: 1px solid var(--bad-line); font-size: 13px; line-height: 1.55; }
.auth-err .i { margin-top: 2px; }
.auth-info { list-style: none; margin: 0; padding: 18px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; font-size: 13px; color: var(--ink-2); line-height: 1.55; }
.auth-info li { display: flex; gap: 10px; align-items: flex-start; }
.auth-info .i { margin-top: 2px; color: var(--ink-3); }
.auth-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 24px 20px; font-size: 12.5px; color: var(--ink-3); }
.auth-logo.compact { display: none; color: var(--ink); }
@media (max-width: 900px) {
  .auth { grid-template-columns: minmax(0, 1fr); }
  .auth-side { display: none; }
  .auth-logo.compact { display: flex; margin-bottom: 4px; }
}

/* ---------- 外觀切換（淺色／深色／跟隨系統） ---------- */
.theme-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 9px; background: var(--seg-bg); }
.theme-seg button { display: grid; place-items: center; width: 30px; height: 26px; border: 0; border-radius: 7px; background: none; color: var(--ink-3); cursor: pointer; }
.theme-seg button:hover { color: var(--ink); }
.theme-seg button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.theme-seg button:focus-visible { outline: none; box-shadow: var(--ring); }
.theme-seg .i { width: 15px; height: 15px; }
.menu-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 6px 4px 10px; font-size: 13px; color: var(--ink-2); }

/* ---------- 頭像（Google 大頭貼，沒有就顯示第一個字） ---------- */
.user-btn { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; }
.user-btn:focus-visible { outline: none; box-shadow: var(--ring); }
.avatar { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); font-weight: 650; border: 1px solid var(--accent-line); overflow: hidden; object-fit: cover; }
img.avatar { background: var(--hover); border-color: var(--line); }
.avatar.lg { width: 40px; height: 40px; font-size: 16px; }
.avatar.sm { width: 26px; height: 26px; font-size: 11.5px; }
.user-btn:hover .avatar { box-shadow: 0 0 0 3px var(--accent-soft-2); }
.menu-who { display: flex; align-items: center; gap: 12px; padding: 8px 10px 6px; }
.menu-who b { display: block; }
.menu-who div span { display: block; font-size: 12.5px; color: var(--ink-3); }
.person { display: flex; align-items: center; gap: 10px; }

/* ---------- 操作提示：每頁上方一列，關鍵字＋一句指示 ---------- */
.hints { list-style: none; margin: 0; padding: 12px 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px 28px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); font-size: 13px; line-height: 1.55; color: var(--ink-2); }
.hints li { display: flex; gap: 10px; align-items: baseline; }
.hints b { flex: none; min-width: 3em; font-weight: 600; color: var(--ink); }
.search.wide { width: 380px; }
.roles-note { margin-top: 14px; font-size: 12.5px; line-height: 1.6; }
.tbl tr.grp-row td { height: 40px; background: var(--subtle); border-top: 1px solid var(--line); }
.tbl tbody:first-of-type tr.grp-row td { border-top: 0; }
.tbl tr.grp-row:hover td { background: var(--subtle); }
.tbl tr.grp-row td > * + * { margin-left: 8px; }
.tbl tr.grp-bad td { background: var(--bad-soft); }
.tbl tr.grp-bad:hover td { background: var(--bad-soft); }
.grp-unit { font-weight: 650; font-size: 13.5px; color: var(--ink); }
.tbl tr.grp-first td { border-top: 2px solid var(--line-2); }
.chip-bad { background: var(--bad-soft); color: var(--bad-ink); }
.tbl .w-fix { width: 110px; }
@media print { .no-print { display: none !important; } .tbl tr.grp-row td { background: #f3f4f6 !important; } }
.print-only { display: none; }
@media (max-width: 1280px) {
  .tbl th, .tbl td { padding: 0 10px; }
}
@media (max-width: 1180px) {
  .kpis, .recon { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .recon > div:nth-child(2) { border-right: 0; }
  .recon > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 980px) {
  .grid-2, .cols-3 { grid-template-columns: minmax(0, 1fr); }
  .progress, .stepper { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .top-in { padding: 0 16px; gap: 16px; }
  .wrap { padding: 20px 16px 64px; }
  .brand small, .save span { display: none; }
}
@media (max-width: 720px) {
  .top-in { flex-wrap: wrap; height: auto; padding: 10px 16px 0; }
  .tabs { order: 3; width: 100%; height: 42px; }
  .frow { grid-template-columns: minmax(0, 1fr); }
  .search { width: 100%; }
  .page-head { flex-direction: column; align-items: flex-start; }
  .kpis { grid-template-columns: minmax(0, 1fr); }
}
@page { size: A4 landscape; margin: 10mm; }
@media print {
  body { background: #fff; font-size: 10.5px; }
  .top, .page-head, .stepper, .lead, .hints, .toolbar, .recon, .closebar, .stepnav, .banner, .drawer, .overlay, .toast, .modal-wrap { display: none !important; }
  .wrap { max-width: none; padding: 0; }
  .card { border: 0; box-shadow: none; }
  .tscroll { max-height: none; overflow: visible; }
  .tbl th, .tbl td { height: auto; padding: 4px 6px; position: static !important; box-shadow: none !important; }
  .tbl { font-size: 10px; }
  .print-only { display: block; }
  .print-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
  .print-head h2 { font-size: 15px; }
  .print-sign { display: flex; justify-content: flex-end; gap: 80px; margin-top: 18px; font-size: 12px; }
}

/* ---------- 共用小工具 ---------- */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.invisible { visibility: hidden; }
.clip { overflow: hidden; }
.mt-12 { margin-top: 12px; }
.mt-14 { margin-top: 14px; }
.mt-16 { margin-top: 16px; }
.w-84 { width: 84px; }
.w-230 { width: 230px; }
.span-all { grid-column: 1 / -1; }
.fine { font-size: 12.5px; }
kbd { display: inline-block; min-width: 20px; padding: 0 5px; border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 5px; background: var(--surface); font: 600 11.5px/18px var(--mono); color: var(--ink-2); text-align: center; }
.field-inline { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
.seg button:disabled { opacity: .55; cursor: not-allowed; }
.banner.bad { background: var(--bad-soft); color: var(--bad-ink); border: 1px solid var(--bad-line); }
.banner.bad .i { color: var(--bad); }

/* 補尾差的住戶：小計旁標 +1 */
.tbl td.adj::after { content: "+1"; margin-left: 3px; font-size: 10.5px; font-weight: 650; color: var(--accent-ink); vertical-align: super; }

/* 匯入預覽 */
.drawer.wide { width: min(760px, 100vw); }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.stats > div { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-right: 1px solid var(--line); }
.stats > div:last-child { border-right: 0; }
.stats span { font-size: 12.5px; color: var(--ink-2); }
.stats b { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.stats b.warn-ink { color: var(--warn-ink); }
.facts { margin: 14px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.7; color: var(--ink-2); }
.tscroll.short { max-height: 52vh; }

@media (max-width: 720px) {
  .tabs { overflow-x: auto; scrollbar-width: none; }
  .tabs button { flex: none; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats > div:nth-child(2) { border-right: 0; }
  .stats > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .field-inline { width: 100%; }
}
@media print {
  .tbl td.adj::after { content: none; }
  .print-sign { gap: 48px; }
}
.tbl td .namecell { display: flex; align-items: center; gap: 8px; }
.tbl td .namecell b { display: inline; }
@media (max-width: 720px) { .barlist li { grid-template-columns: 116px minmax(0, 1fr) 76px 44px; font-size: 12.5px; } }
.month-btn { white-space: nowrap; }
@media (max-width: 720px) {
  .drop { flex-wrap: wrap; align-items: flex-start; }
  .drop .grow { flex: 1 1 calc(100% - 60px); }
  .drop > .btn { width: 100%; }
  .ac-row { flex-wrap: wrap; }
  .ac-in { width: 100%; }
  .month-btn .tag { display: none; }
}

/* Google 登入按鈕（照 Google 的品牌規範：白底、灰框、彩色 G） */
.btn-google { gap: 10px; background: var(--google-bg); border-color: var(--google-line); color: var(--google-ink); font-weight: 600; }
.btn-google:hover { background: var(--google-hover); border-color: var(--google-line); }
.g-logo { width: 18px; height: 18px; flex: none; }

/* ---------- 使用教學 ---------- */
.guide { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: start; }
.guide-toc { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
.guide-toc b { padding: 0 10px 8px; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.guide-toc a { display: flex; gap: 10px; padding: 7px 10px; border-radius: 8px; color: var(--ink-2); text-decoration: none; }
.guide-toc a:hover { background: var(--hover); color: var(--ink); }
.guide-toc a span:first-child { width: 16px; flex: none; text-align: center; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.guide-body { display: flex; flex-direction: column; gap: 16px; max-width: 920px; }
.guide-sec { padding: 24px 28px 26px; scroll-margin-top: 84px; line-height: 1.7; }
.guide-sec h2 { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 650; letter-spacing: -.01em; }
.guide-sec h3 { margin: 22px 0 8px; font-size: 14.5px; font-weight: 600; scroll-margin-top: 84px; }
.g-no { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-ink); font-size: 13px; font-weight: 650; }
.g-lead { margin-top: 10px; color: var(--ink-2); }
.g-note { margin-top: 10px; font-size: 12.5px; color: var(--ink-3); }
.g-flow { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; margin-top: 16px; }
.g-flow > div { display: flex; flex-direction: column; justify-content: center; flex: 1 1 120px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--subtle); }
.g-flow > div.hl { background: var(--accent-soft); border-color: var(--accent-line); }
.g-flow b { font-size: 13.5px; font-weight: 600; }
.g-flow span { font-size: 12px; color: var(--ink-3); }
.g-arrow { display: grid; place-items: center; color: var(--ink-3); }
.g-tbl { width: 100%; margin-top: 12px; border-collapse: collapse; font-size: 13.5px; }
.g-tbl th, .g-tbl td { padding: 9px 12px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.g-tbl th { width: 30%; background: var(--subtle); font-weight: 600; }
.g-tbl thead th { color: var(--ink-2); font-size: 12.5px; font-weight: 550; }
.g-tbl tr.tot th, .g-tbl tr.tot td { background: var(--accent-soft); }
.g-tbl code, .guide-sec code { font-family: var(--mono); font-size: 12.5px; padding: 1px 5px; border-radius: 5px; background: var(--hover); }
.g-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.g-list li { display: grid; grid-template-columns: 5.5em 1fr; gap: 12px; }
.g-list b { font-weight: 600; }
.g-steps { margin: 12px 0 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.g-steps li::marker { color: var(--accent); font-weight: 650; }
.g-tips { list-style: none; margin: 14px 0 0; padding: 12px 16px; border-radius: 10px; background: var(--subtle); border: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }
.g-tips li { position: relative; padding-left: 16px; }
.g-tips li::before { content: ""; position: absolute; left: 2px; top: .7em; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.g-fig { margin: 16px 0 0; }
.g-fig img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-sm); background: var(--subtle); }
.g-fig.sm img { width: auto; max-width: min(100%, 520px); }
.g-fig figcaption { margin-top: 6px; font-size: 12.5px; color: var(--ink-3); }
.g-faq { border-top: 1px solid var(--line); }
.g-faq:first-of-type { margin-top: 10px; }
.g-faq summary { padding: 12px 0; font-weight: 600; cursor: pointer; }
.g-faq summary::marker { color: var(--ink-3); }
.g-faq p { padding: 0 0 14px 18px; color: var(--ink-2); }
@media (max-width: 980px) {
  .guide { grid-template-columns: minmax(0, 1fr); }
  .guide-toc { position: static; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .guide-toc b { grid-column: 1 / -1; }
  .guide-sec { padding: 20px 18px; }
  .g-list li { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .g-arrow { display: none; }
}
@media print {
  .guide { display: block; }
  .guide-toc { display: none; }
  .guide-sec { break-inside: avoid-page; border: 0; padding: 0 0 16px; }
  .g-fig img { max-height: 120mm; width: auto; }
}
.drawer.wide .tbl .ellip { max-width: 240px; }
.drawer.wide .tbl td:last-child { width: 1%; white-space: nowrap; }
.g-tbl thead th + th { width: auto; }
.g-fig a { display: block; cursor: zoom-in; }
.g-fig.sm a { display: inline-block; }

/* ---------- 操作紀錄 ---------- */
.au-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.au-stats > div { display: flex; flex-direction: column; gap: 2px; padding: 14px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-sm); }
.au-stats span { font-size: 12.5px; color: var(--ink-2); }
.au-stats b { font-size: 22px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.au-stats small { font-size: 12px; color: var(--ink-3); }
.au-stats .bad { border-color: var(--bad-line); background: var(--bad-soft); }
.au-stats .bad b, .au-stats .bad span { color: var(--bad-ink); }
.au-card { overflow: hidden; }
.au-filters { display: grid; grid-template-columns: 150px 150px 220px minmax(0, 1fr); gap: 12px; padding: 16px 18px 12px; border-bottom: 1px solid var(--line); }
.au-f { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--ink-3); }
.au-f .search { width: 100%; }
.au-f .search .i { top: 7px; }
.au-cats { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; padding: 10px 18px; border-bottom: 1px solid var(--line); background: var(--subtle); }
.au-list { max-height: min(70vh, 900px); overflow-y: auto; }
.au-day-h { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; padding: 8px 18px; background: var(--subtle); border-bottom: 1px solid var(--line); font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.au-day-h span:last-child { font-weight: 500; color: var(--ink-3); }
.au-row { border-bottom: 1px solid var(--line); }
.au-row:last-child { border-bottom: 0; }
.au-main { width: 100%; display: grid; grid-template-columns: 64px 220px 88px minmax(0, 1fr) 190px 16px; align-items: center; gap: 14px; padding: 10px 18px; border: 0; background: none; text-align: left; cursor: default; font-size: 13px; }
.au-main.has { cursor: pointer; }
.au-main.has:hover { background: var(--row-hover); }
.au-main:focus-visible { outline: none; box-shadow: inset var(--ring); }
.au-time { color: var(--ink-3); }
.au-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.au-who > span:last-child { min-width: 0; }
.au-who b, .au-who small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.au-who b { font-weight: 600; }
.au-who small { font-size: 11.5px; color: var(--ink-3); }
.au-cat { justify-self: start; padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 550; background: var(--hover); color: var(--ink-2); white-space: nowrap; }
.au-cat.c-data { background: var(--accent-soft); color: var(--accent-ink); }
.au-cat.c-export { background: var(--good-soft); color: var(--good-ink); }
.au-cat.c-account { background: var(--warn-soft); color: var(--warn-ink); }
.au-cat.c-security { background: var(--bad-soft); color: var(--bad-ink); }
.au-text { display: flex; align-items: baseline; gap: 8px; min-width: 0; color: var(--ink); }
.au-text > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.au-text em { flex: none; font-style: normal; font-size: 12px; color: var(--ink-3); }
.au-row.bad .au-text { color: var(--bad-ink); }
.au-meta { display: flex; flex-direction: column; font-size: 11.5px; color: var(--ink-3); text-align: right; font-variant-numeric: tabular-nums; }
.au-chev { color: var(--ink-3); transition: transform .15s; }
.au-row.open .au-chev { transform: rotate(180deg); }
.au-row.open .au-main { background: var(--subtle); }
.au-detail { padding: 0 18px 14px 96px; background: var(--subtle); }
.au-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.au-tbl th { padding: 7px 10px; text-align: left; font-weight: 550; color: var(--ink-2); background: var(--hover); border-bottom: 1px solid var(--line); }
.au-tbl td { padding: 7px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.au-tbl tr:last-child td { border-bottom: 0; }
.au-tbl td.from { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--line-3); }
.au-tbl td.to { font-weight: 550; }
.au-empty { padding: 48px 20px; text-align: center; color: var(--ink-3); }
.au-foot { display: flex; align-items: center; gap: 14px; }
@media (max-width: 1180px) {
  .au-main { grid-template-columns: 56px 180px 80px minmax(0, 1fr) 16px; }
  .au-meta { display: none; }
}
@media (max-width: 860px) {
  .au-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .au-filters { grid-template-columns: 1fr 1fr; }
  .au-q { grid-column: 1 / -1; }
  .au-main { grid-template-columns: 1fr auto; grid-template-areas: "who cat" "text text" "time chev"; gap: 6px 10px; }
  .au-who { grid-area: who; } .au-cat { grid-area: cat; justify-self: end; } .au-text { grid-area: text; } .au-time { grid-area: time; } .au-chev { grid-area: chev; }
  .au-detail { padding: 0 12px 12px; overflow-x: auto; }
}