/* 色彩：藍是主色（量測的對象就是品牌，用一個色相的深淺）；競品退成灰；狀態色只用在提醒。 */
:root {
  color-scheme: light;
  --page: #f9f9f7; --surface: #fcfcfb; --ink: #0b0b0b; --ink2: #52514e; --muted: #898781;
  --grid: #e1e0d9; --axis: #c3c2b7; --border: rgba(11, 11, 11, .10);
  --blue: #2a78d6; --blue-strong: #1c5cab; --good: #006300; --crit: #d03b3b; --warn: #fab219;
  --shadow: 0 1px 2px rgba(11, 11, 11, .04);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page: #0d0d0d; --surface: #1a1a19; --ink: #fff; --ink2: #c3c2b7; --muted: #898781;
    --grid: #2c2c2a; --axis: #383835; --border: rgba(255, 255, 255, .10);
    --blue: #3987e5; --blue-strong: #6da7ec; --good: #0ca30c; --crit: #ec6a6a; --shadow: none;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0d0d0d; --surface: #1a1a19; --ink: #fff; --ink2: #c3c2b7; --muted: #898781;
  --grid: #2c2c2a; --axis: #383835; --border: rgba(255, 255, 255, .10);
  --blue: #3987e5; --blue-strong: #6da7ec; --good: #0ca30c; --crit: #ec6a6a; --shadow: none;
}
:root { --wash: color-mix(in srgb, var(--blue) 10%, transparent); --track: color-mix(in srgb, var(--blue) 14%, var(--surface)); --hover: color-mix(in srgb, var(--ink) 5%, transparent); }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--page); color: var(--ink); font: 15px/1.65 system-ui, -apple-system, "Segoe UI", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif; }
h1, h2, h3, p { margin: 0; }
a { color: var(--blue-strong); }
button { font: inherit; color: inherit; cursor: pointer; }
svg { display: block; }

/* ---- 共用元件 ---- */
.btn { border: 1px solid var(--border); background: var(--surface); border-radius: 8px; padding: 7px 14px; line-height: 1.4; transition: background .12s; }
.btn:hover { background: var(--hover); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.primary { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 600; }
.btn.primary:hover { filter: brightness(1.08); background: var(--blue); }
.btn.sm { padding: 4px 10px; font-size: 13px; border-radius: 6px; }
.btn.ghost { border-color: transparent; background: none; color: var(--ink2); }
.btn.ghost:hover { background: var(--hover); }
.btn.danger { color: var(--crit); }
input, textarea, select { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; width: 100%; outline: none; }
input:focus, textarea:focus, select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--wash); }
textarea { resize: vertical; line-height: 1.55; }
label.field { display: block; font-size: 13px; color: var(--ink2); margin: 16px 0 6px; }
label.field:first-child { margin-top: 0; }
.hint { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.mute { color: var(--muted); font-size: 13px; }
.num { font-variant-numeric: tabular-nums; }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 20px 22px; box-shadow: var(--shadow); }
.card + .card { margin-top: 16px; }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.card-head h3 { font-size: 15px; font-weight: 600; }
.eyebrow { font-size: 13px; color: var(--ink2); }

.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; padding: 2px; background: var(--surface); }
.seg button { border: 0; background: none; padding: 4px 12px; border-radius: 6px; font-size: 13px; color: var(--ink2); }
.seg button.on { background: var(--blue); color: #fff; font-weight: 600; }

.chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: 999px; font-size: 12.5px; line-height: 1.6; background: var(--hover); color: var(--ink2); white-space: nowrap; }
.chip.self { background: var(--wash); color: var(--blue-strong); font-weight: 600; }
.chip.yes { background: color-mix(in srgb, var(--good) 14%, transparent); color: var(--good); }
.chip.no { background: color-mix(in srgb, var(--crit) 12%, transparent); color: var(--crit); }
.chip.warn { background: color-mix(in srgb, var(--warn) 28%, transparent); color: var(--ink); }

.delta { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; }
.delta.up { color: var(--good); } .delta.down { color: var(--crit); } .delta.flat { color: var(--ink2); }
.delta small { font-weight: 400; color: var(--muted); }

.alert { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border-radius: 10px; margin-bottom: 12px; background: color-mix(in srgb, var(--crit) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--crit) 25%, transparent); font-size: 14px; }
.alert svg { flex: none; margin-top: 3px; color: var(--crit); }

/* ---- 版面 ---- */
#login { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
#loginForm { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 32px 30px; width: min(360px, 100%); display: grid; gap: 14px; box-shadow: 0 8px 30px rgba(0, 0, 0, .06); }
#loginForm .logo { width: 44px; height: 44px; }
#loginForm h1 { font-size: 22px; }
.err { color: var(--crit); font-size: 13px; min-height: 1.4em; }

#app { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }
aside { position: sticky; top: 0; height: 100vh; padding: 22px 14px; display: flex; flex-direction: column; gap: 22px; border-right: 1px solid var(--border); background: var(--surface); }
.brandrow { display: flex; align-items: center; gap: 10px; padding: 0 8px; }
.brandrow .logo { width: 30px; height: 30px; flex: none; }
.brandrow b { font-size: 16px; display: block; line-height: 1.2; }
.brandrow span { font-size: 12px; color: var(--muted); }
nav { display: grid; gap: 2px; }
nav a { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 9px; color: var(--ink2); text-decoration: none; font-size: 14.5px; }
nav a svg { flex: none; width: 18px; height: 18px; }
nav a:hover { background: var(--hover); color: var(--ink); }
nav a.on { background: var(--wash); color: var(--blue-strong); font-weight: 600; }
.side-foot { margin-top: auto; display: grid; gap: 4px; }

main { min-width: 0; }
.topbar { display: flex; align-items: center; gap: 14px; padding: 14px 40px; min-height: 60px; }
.topbar .spacer { flex: 1; }
#mockBanner { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 5px 12px; border-radius: 8px; background: color-mix(in srgb, var(--warn) 24%, var(--surface)); border: 1px solid color-mix(in srgb, var(--warn) 55%, transparent); }
#view { padding: 4px 40px 64px; max-width: 1180px; }
.page-head { margin: 8px 0 22px; }
.page-head h2 { font-size: 26px; font-weight: 700; letter-spacing: .01em; }
.page-head p { color: var(--ink2); margin-top: 4px; }

.grid-main { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 16px; align-items: start; }
.stack { display: grid; gap: 16px; }
.stack > .card + .card { margin-top: 0; }
.grid4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.grid4 .card + .card { margin-top: 0; }

/* ---- 數字 ---- */
.hero { font-size: 60px; line-height: 1.05; font-weight: 700; letter-spacing: -.01em; }
.tile-val { font-size: 32px; line-height: 1.15; font-weight: 700; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row.end { justify-content: flex-end; }
.row.between { justify-content: space-between; }

/* 用量計：底是同色淺階，填色隨用量變 */
.meter { height: 8px; border-radius: 4px; background: var(--track); overflow: hidden; margin: 10px 0 8px; }
.meter i { display: block; height: 100%; border-radius: 4px; background: var(--blue); }
.meter.warn i { background: var(--warn); } .meter.crit i { background: var(--crit); }

/* ---- 圖 ---- */
.chart { position: relative; width: 100%; }
.chart svg { overflow: visible; }
.chart .grid line { stroke: var(--grid); stroke-width: 1; }
.chart .tick { font-size: 11.5px; fill: var(--muted); }
.chart .cross { stroke: var(--axis); stroke-width: 1; }
.tip { position: fixed; left: 0; top: 0; z-index: 20; pointer-events: none; background: var(--ink); color: var(--page); font-size: 12.5px; line-height: 1.5; padding: 7px 10px; border-radius: 8px; white-space: nowrap; box-shadow: 0 4px 16px rgba(0, 0, 0, .18); opacity: 0; transition: opacity .08s; }
.tip.on { opacity: 1; }
.tip b { font-weight: 600; }

.hbar { display: grid; grid-template-columns: minmax(70px, 130px) minmax(0, 1fr) 56px; gap: 14px; align-items: center; padding: 6px 0; }
.hbar .name { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar .name.self { font-weight: 700; }
.hbar .track { height: 20px; position: relative; }
.hbar .fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--muted); border-radius: 0 4px 4px 0; min-width: 2px; opacity: .55; }
.hbar .fill.self { background: var(--blue); opacity: 1; }
.hbar .fill.seq { background: var(--blue); opacity: 1; }
.hbar .val { font-size: 14px; text-align: right; font-weight: 600; }

.matrix { width: 100%; border-collapse: separate; border-spacing: 2px; }
.matrix th { font-size: 13px; color: var(--ink2); font-weight: 500; padding: 4px 8px; text-align: center; }
.matrix th:first-child { text-align: left; }
.matrix td.name { font-size: 14px; padding: 4px 8px 4px 0; white-space: nowrap; }
.matrix td.cell { text-align: center; padding: 9px 6px; border-radius: 6px; font-size: 14px; font-weight: 600; }

table.tbl { width: 100%; border-collapse: collapse; }
.tbl th { text-align: left; font-size: 12.5px; color: var(--muted); font-weight: 500; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.tbl td { padding: 11px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl td.r, .tbl th.r { text-align: right; }

/* 三格的強度符號：看得到「很常/偶爾/幾乎沒有」不只靠顏色 */
.lvl { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; margin-right: 6px; vertical-align: -2px; }
.lvl i { width: 4px; border-radius: 1px; background: var(--axis); }
.lvl i:nth-child(1) { height: 6px; } .lvl i:nth-child(2) { height: 10px; } .lvl i:nth-child(3) { height: 14px; }
.lvl i.on { background: var(--blue); }

.cols { display: flex; align-items: flex-end; gap: 3px; height: 28px; }
.cols i { width: 12px; border-radius: 3px 3px 0 0; background: var(--blue); min-height: 2px; }
.cols i.none { background: var(--axis); height: 2px !important; }

/* ---- 問 AI ---- */
.ask-box textarea { font-size: 16px; }
.pill { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 999px; padding: 5px 14px 5px 10px; font-size: 14px; cursor: pointer; user-select: none; background: var(--surface); }
.pill input { width: auto; accent-color: var(--blue); margin: 0; }
.pill:has(input:checked) { border-color: var(--blue); background: var(--wash); }
.pill:has(input:disabled) { opacity: .5; cursor: default; }
.run-card .two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 24px; margin-top: 16px; }
.run-card .sub { font-size: 12.5px; color: var(--muted); margin-bottom: 8px; }
.run-card .answer { white-space: pre-wrap; word-break: break-word; font-size: 15px; line-height: 1.8; }
.cite { padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 14px; word-break: break-all; line-height: 1.5; }
.cite:last-child { border: 0; }
.cite .d { display: block; font-size: 12.5px; color: var(--muted); }
mark { background: color-mix(in srgb, var(--warn) 32%, transparent); color: inherit; border-radius: 4px; padding: 1px 3px; }
mark.self { background: var(--wash); color: var(--blue-strong); font-weight: 700; }
.empty { text-align: center; color: var(--muted); padding: 36px 12px; }

/* ---- 設定 ---- */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.comp-card { border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin-top: 12px; background: var(--page); }

@media (max-width: 960px) {
  .grid-main { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  #app { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .brandrow { flex: none; white-space: nowrap; }
  .brandrow b { font-size: 15px; }
  #meter { display: none; }
  #mockBanner { font-size: 12px; padding: 4px 10px; }
  aside { position: static; height: auto; flex-direction: row; align-items: center; padding: 10px 12px; gap: 8px; overflow-x: auto; }
  .brandrow span, .side-foot { display: none; }
  nav { display: flex; gap: 2px; }
  nav a { padding: 8px 12px; white-space: nowrap; }
  .topbar { padding: 12px 16px; }
  #view { padding: 4px 16px 56px; }
  .hero { font-size: 48px; }
  .run-card .two, .two-col { grid-template-columns: 1fr; }
  .card { padding: 16px; }
  .hbar { grid-template-columns: 84px minmax(0, 1fr) 48px; gap: 10px; }
  .page-head h2 { font-size: 22px; }
}
@media (forced-colors: active) {
  .lvl i.on, .hbar .fill, .meter i { forced-color-adjust: none; }
}

/* ---- 簡報 ---- */
.stepno { width: 26px; height: 26px; border-radius: 50%; background: var(--blue); color: #fff; display: inline-grid; place-items: center; font-size: 14px; font-weight: 700; flex: none; }
.lead { font-size: 26px; line-height: 1.5; font-weight: 600; }
.lead b.good { color: var(--good); } .lead b.bad { color: var(--crit); }
ol.recs { margin: 0; padding: 0; list-style: none; counter-reset: r; }
ol.recs li { counter-increment: r; position: relative; padding: 8px 0 8px 32px; border-bottom: 1px solid var(--border); }
ol.recs li:last-child { border-bottom: 0; }
ol.recs li::before { content: counter(r); position: absolute; left: 0; top: 9px; width: 22px; height: 22px; border-radius: 50%; background: var(--hover); color: var(--ink2); display: grid; place-items: center; font-size: 12px; font-weight: 600; }
ol.recs li.self::before { background: var(--blue); color: #fff; }
ol.recs li.self { background: var(--wash); border-radius: 8px; padding-left: 40px; padding-right: 8px; }
ol.recs li.self::before { left: 8px; }
.note { font-size: 13px; color: var(--ink2); margin-top: 2px; line-height: 1.5; }
.cite .d { word-break: break-all; }
details > summary { list-style: none; } details > summary::before { content: "▸ "; } details[open] > summary::before { content: "▾ "; }
@media (max-width: 820px) { .lead { font-size: 21px; } }

/* ---- 重點整理 ---- */
.clip { padding: 24px 28px; }
.clip-kicker { font-size: 13px; color: var(--blue-strong); font-weight: 600; letter-spacing: .04em; }
.clip-title { font-size: 24px; line-height: 1.4; margin: 6px 0 16px; font-weight: 700; }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.tile { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; background: var(--page); }
.tile-v { font-size: 26px; font-weight: 700; line-height: 1.2; }
.tile-v.good { color: var(--good); } .tile-v.bad { color: var(--crit); }
.tile-l { font-size: 12.5px; color: var(--ink2); margin-top: 2px; }
.clip-body p { margin: 0 0 8px; font-size: 15.5px; line-height: 1.8; }
.tscroll { overflow-x: auto; }
table.src td, table.src th { padding: 8px 8px; font-size: 13.5px; }
table.src .d { display: block; font-size: 11.5px; color: var(--muted); word-break: break-all; }
.print-only { display: none; }
@media (max-width: 820px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .clip { padding: 18px; } .clip-title { font-size: 20px; } }

/* ---- 列印／另存 PDF：強制淺色、拿掉選單與按鈕、每家 AI 一頁 ---- */
@media print {
  @page { size: A4; margin: 12mm; }
  :root:root:root { color-scheme: light; --page: #fff; --surface: #fff; --ink: #0b0b0b; --ink2: #52514e; --muted: #6b6a66; --grid: #e1e0d9; --axis: #c3c2b7; --border: rgba(11,11,11,.18); --blue: #2a78d6; --blue-strong: #1c5cab; --good: #006300; --crit: #d03b3b; --warn: #fab219; --shadow: none; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body { background: #fff; font-size: 12px; }
  aside, .topbar, .noprint, #tip, .page-head p { display: none !important; }
  .print-only { display: block !important; }
  #app { display: block; }
  #view { padding: 0; max-width: none; }
  .page-head { display: none; }
  .card { box-shadow: none; border-radius: 6px; margin: 0 0 10px; padding: 14px 16px; }
  .clip { break-after: page; page-break-after: always; }
  .clip:last-of-type { break-after: auto; page-break-after: auto; }
  .clip-title { font-size: 18px; }
  .tile-v { font-size: 20px; }
  .clip-body p { font-size: 12.5px; line-height: 1.7; }
  tr, .hbar, .tile { break-inside: avoid; }
  .tscroll { overflow: visible; }
  table.src td, table.src th { font-size: 10.5px; padding: 5px 5px; }
  a { color: inherit; text-decoration: none; }
}
table.src td.num, table.src th.r { white-space: nowrap; }
table.src th { white-space: nowrap; }

.dom { font-size: 12px; color: var(--muted); }
@media print { a { color: var(--blue-strong) !important; text-decoration: underline !important; } }

.qbig { font-size: 30px; line-height: 1.35; font-weight: 700; margin: 4px 0 18px; }
.how-l { display: block; font-size: 13px; font-weight: 600; color: var(--blue-strong); letter-spacing: .04em; margin-bottom: 2px; }
.howbox { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; background: var(--page); margin: 8px 0 16px; }
.how-q { font-size: 22px; font-weight: 700; line-height: 1.4; margin-bottom: 8px; }
table.how { border-collapse: collapse; width: 100%; }
table.how th { text-align: left; white-space: nowrap; vertical-align: top; width: 76px; font-size: 13px; color: var(--ink2); font-weight: 600; padding: 3px 10px 3px 0; }
table.how td { font-size: 14px; padding: 3px 0; line-height: 1.6; }
@media (max-width: 820px) { .qbig { font-size: 24px; } .how-q { font-size: 19px; } }
@media print { .qbig { font-size: 22px; margin: 0 0 10px; } .how-q { font-size: 16px; } table.how td { font-size: 11.5px; } }
#demoBanner { font-size: 13px; padding: 5px 12px; border-radius: 8px; background: var(--wash); color: var(--blue-strong); border: 1px solid color-mix(in srgb, var(--blue) 30%, transparent); }