/* 喬義司色系(取自 choice-design.com.tw);狀態色另用綠/黃/棕,不和品牌紅混淆 */
:root {
    --brand: #c2001c;
    --brand-dark: #a30018;
    --brand-2: #c62410;
    --brand-orange: #e86150;
    --accent: #ffef09; /* 只當點綴線,不放文字 */
    --text: #393939;
    --muted: #6b6b6b;
    --bg: #f8f8f8;
    --line: #e3e5e8;
    --head: #f0f0f0;
    --good: #1e7b34;
    --good-text: #1e6b33;
    --good-bg: #e3f4e6;
    --near: #7a5a00;
    --near-bg: #fff2cc;
    --bad: #a14a00;
    --bad-bg: #fbe9d9;
}

* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.5 -apple-system, "PingFang TC", "Noto Sans TC", sans-serif; color: var(--text); background: var(--bg); }
main { padding: 16px 24px; }
h1 { font-size: 20px; margin: 0 0 12px; }
h2 { font-size: 16px; margin: 24px 0 8px; }
a { color: var(--brand); }
a:hover { color: var(--brand-dark); }
code { background: #eceef1; padding: 1px 4px; border-radius: 3px; }
.muted { color: var(--muted); }
.error { color: var(--bad); }
p.error { padding: 8px 12px; border-radius: 4px; background: var(--bad-bg); }

.site-header { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: space-between; align-items: center; padding: 10px 24px; background: #fff; border-bottom: 3px solid var(--brand); box-shadow: 0 2px 0 var(--accent); }
.brand { font-weight: 600; color: inherit; text-decoration: none; }
.company { margin-left: 10px; font-size: 12px; color: var(--muted); text-decoration: none; }
.nav { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.user { display: flex; gap: 6px; align-items: center; color: #555; }
.role { font-size: 12px; padding: 0 6px; border-radius: 3px; background: #eceef1; }
.site-footer { padding: 16px 24px; color: var(--muted); font-size: 12px; }
.site-footer a { color: inherit; }

button { font: inherit; padding: 6px 14px; border: 1px solid var(--brand); border-radius: 4px; background: var(--brand); color: #fff; cursor: pointer; }
button:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
button.link { padding: 0; border: 0; background: none; color: var(--brand); }
input, select { font: inherit; padding: 5px 8px; border: 1px solid #ccc; border-radius: 4px; }

.card { background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 16px; }
.login { max-width: 340px; margin: 48px auto; display: grid; gap: 12px; }
.login label { display: grid; gap: 4px; }
.login label.inline { display: flex; gap: 6px; align-items: center; }
/* 首頁專案列表:每個專案一張卡片,列出啟用中的字 */
.project-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr)); gap: 16px; align-items: start; }
/* 首頁分區標題:未達標品牌紅、已達標綠 */
.home-group { font-size: 17px; margin: 24px 0 12px; padding-bottom: 6px; border-bottom: 1px solid var(--line); color: var(--brand); }
.home-group.g-met { color: var(--good); }
.project-card { position: relative; }
.project-card h2 { margin: 0; padding-right: 92px; font-size: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
/* 合約達標徽章:固定在卡片右上角,名稱再長也不擠位(h2 右側預留空間) */
.goal-badge { font-size: 14px; font-weight: bold; padding: 2px 10px; border-radius: 4px; white-space: nowrap; }
.project-card .goal-badge { position: absolute; top: 16px; right: 16px; }
.goal-met { background: var(--good); color: #fff; }
.goal-unmet { background: #fdecee; color: var(--brand); border: 1px solid var(--brand); }
.project-card h2 .muted { font-size: 13px; font-weight: normal; }
/* 首頁卡片/表格切換;表格版每列一個專案,手機橫向捲動 */
.view-switch { display: flex; gap: 6px; margin-left: auto; }
/* 固定欄寬(兩區對齊)、統一 padding 12px;窄螢幕維持最小寬度橫向捲動 */
table.home-table { width: 100%; min-width: 960px; table-layout: fixed; white-space: normal; }
.home-table col.c-owner { width: 7em; }
.home-table col.c-contract { width: 13em; }
.home-table col.c-progress { width: 12em; }
.home-table col.c-synced { width: 11em; }
.home-table td.synced { white-space: nowrap; }
.home-table col.c-goal { width: 7.5em; }
.home-table > thead > tr > th, .home-table > tbody > tr > td { padding: 10px 12px; vertical-align: middle; }
.home-table .muted { font-size: 12px; }
/* 專案名稱大字粗體、網址小字灰色,明確區隔 */
.home-table .p-name { overflow-wrap: anywhere; }
.home-table .p-name > a { font-size: 19px; font-weight: 700; line-height: 1.3; }
.home-table .p-url { display: inline-block; margin-top: 2px; }
.home-table .p-url a { color: inherit; }
.home-table .goal-col { text-align: right; }
.home-table tr.p-row:hover td { background: #fffdf0; }
/* 表格版:專案列 + 下方關鍵字列成一組,每組上方同一條 2px 分隔線(第一組沿用表頭底線) */
.home-table tr.p-row td { border-bottom: 0; }
.home-table tr.p-row:not(:first-child) td { border-top: 2px solid var(--line); }
.home-table > tbody > tr.kw-row > td { padding: 0 12px 12px; border-bottom: 0; }
.home-table tr.kw-row p.muted { margin: 0; }
/* 關鍵字小表折疊:摘要列小字,展開後與小表留 4px */
.kw-fold summary { cursor: pointer; width: fit-content; font-size: 13px; color: var(--muted); }
.kw-fold summary:hover { color: var(--brand); }
.kw-fold[open] summary { margin-bottom: 4px; }
/* 小表:表頭與內容同 padding、四欄固定寬,各專案的排名/變化/狀態欄上下對齊;第一欄貼齊專案名稱 */
.home-table table.mini { table-layout: fixed; }
.home-table table.mini th, .home-table table.mini td { padding: 4px 8px; }
.home-table table.mini th { background: none; font-weight: normal; }
.home-table table.mini th:first-child, .home-table table.mini td:first-child { padding-left: 0; }
.home-table table.mini th:nth-child(2) { width: 64px; }
.home-table table.mini th:nth-child(3) { width: 80px; }
.home-table table.mini th:nth-child(4) { width: 112px; }
table.admin td > b:first-child { font-size: 17px; }
.project-card > p { margin: 2px 0 8px; font-size: 12px; }
table.mini { width: 100%; white-space: normal; }
table.mini th { position: static; background: none; font-size: 12px; color: var(--muted); font-weight: normal; }
table.mini td { padding: 3px 6px; }
table.mini .kw-cell { word-break: break-all; }
table.mini td.rank { width: 52px; }
table.mini tr:last-child td { border-bottom: 0; }

/* 專案頁 */
.toolbar { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-bottom: 16px; }
.range { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.quick { display: flex; flex-wrap: wrap; gap: 6px; }
.quick a, .filters a { border: 1px solid #ccc; border-radius: 14px; text-decoration: none; background: #fff; }
.quick a { padding: 2px 10px; font-size: 13px; }
.filters a { padding: 3px 10px; }
.quick a.on, .filters a.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.summary { display: flex; flex-wrap: wrap; gap: 12px; margin: 12px 0; }
.stat, .movers { background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 10px 16px; }
.stat b { display: block; font-size: 22px; }
.movers { min-width: 200px; }
.movers h2 { margin: 0 0 4px; font-size: 13px; color: #555; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 16px 0 0; }

/* 表格:捲動容器內表頭與關鍵字欄固定 */
.scroll { overflow: auto; max-width: 100%; max-height: 75vh; background: #fff; border: 1px solid var(--line); border-radius: 6px; }
table { border-collapse: separate; border-spacing: 0; white-space: nowrap; }
th, td { padding: 4px 8px; border-bottom: 1px solid #eee; text-align: left; }
thead th { position: sticky; top: 0; z-index: 2; background: var(--head); font-weight: 600; }
.kw { position: sticky; left: 0; z-index: 1; background: #fff; font-weight: normal; border-right: 1px solid var(--line); }
thead .kw { z-index: 3; background: var(--head); }
.num { text-align: right; }
.urls { white-space: normal; min-width: 280px; max-width: 480px; word-break: break-all; font-size: 12px; }
.matrix th.day { text-align: center; font-size: 12px; }
.matrix td.rank { min-width: 44px; }

/* 排名四色 */
.rank { text-align: center; font-variant-numeric: tabular-nums; }
.t-top3 { background: #c6efce; color: #0b5d1e; font-weight: 600; }
.t-top10 { background: var(--good-bg); color: var(--good-text); }
.t-top20 { background: var(--near-bg); color: var(--near); }
.t-out { background: #f4f4f5; color: var(--muted); }
.legend .rank { display: inline-block; padding: 1px 8px; border-radius: 3px; }
/* 點每日排名格顯示的說明浮動框(手機沒有滑鼠提示) */
.cell-info { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 10; margin: 0; padding: 10px 14px; border-radius: 6px; background: var(--text); color: #fff; white-space: pre-line; word-break: break-all; cursor: pointer; }
.cell-info:empty { display: none; }
.matrix td.rank { cursor: pointer; }
.ico { font-style: normal; font-size: 9px; margin-left: 2px; padding: 0 2px; border-radius: 2px; background: var(--text); color: #fff; vertical-align: super; }
.carried { font-style: normal; font-size: 10px; margin-left: 1px; color: var(--muted, #888); vertical-align: super; }

/* 狀態:進步/達標綠、接近黃、退步/落後/錯頁棕(避開品牌紅) */
.chg.up { color: var(--good); }
.chg.down { color: var(--bad); }
.status { font-size: 12px; padding: 1px 6px; border-radius: 3px; }
.s-achieved { background: var(--good); color: #fff; }
.s-building { background: var(--good-bg); color: var(--good-text); }
.s-near { background: var(--near-bg); color: var(--near); }
.s-behind { background: var(--bad-bg); color: var(--bad); }
.s-no_data { background: #eceef1; color: var(--muted); }
.s-private { background: var(--text); color: #fff; }
.tag { display: inline-block; font-size: 11px; line-height: 1.5; padding: 0 5px; border: 1px solid #c9ccd1; border-radius: 3px; background: #f4f5f7; color: var(--text); font-weight: normal; white-space: nowrap; }
.filters.tags { margin-top: 8px; }
.contract-mark { display: inline-block; font-size: 11px; line-height: 1.5; padding: 0 5px; border-radius: 3px; background: var(--text); color: #fff; font-weight: normal; }

/* 合約達標卡片 */
.card.contract { margin: 12px 0; }
.card.contract h2 { margin: 0 0 4px; }
.card.contract p { margin: 4px 0; }
.contract-line { font-size: 15px; }
.project-card .contract-line { font-size: 13px; }
table.contract-keywords { width: auto; min-width: 360px; }
.expiring { color: var(--near); }
.expired { color: var(--bad); }
.contract-form { display: grid; gap: 12px; max-width: 900px; margin-top: 16px; }
.contract-form fieldset { border: 1px solid var(--line); border-radius: 6px; display: grid; gap: 6px; }
.contract-form label.inline { display: flex; gap: 6px; align-items: center; }
.tag-options { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 4px 0 0 22px; }
.wrong { font-size: 11px; padding: 0 5px; border-radius: 3px; background: var(--bad); color: #fff; }

/* 匯出、月報 */
.exports { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-left: auto; }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 16px; }
.cols section, .x-scroll { min-width: 0; max-width: 100%; overflow-x: auto; }
table.plain { background: #fff; border: 1px solid var(--line); border-radius: 6px; }
table.plain th { background: var(--head); font-weight: 600; }
table.plain tfoot th { text-align: left; }
.snapshots td.rank { min-width: 52px; }

/* 後台 */
/* 後台換頁選單用底線分頁,和膠囊篩選鈕區分 */
.tabs { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.tabs a { padding: 6px 2px; margin-bottom: -1px; border-bottom: 3px solid transparent; color: var(--text); text-decoration: none; }
.tabs a:hover { color: var(--brand); }
.tabs a.on { border-bottom-color: var(--brand); color: var(--brand); font-weight: 600; }
.notice { padding: 8px 12px; border-radius: 4px; background: var(--good-bg); color: var(--good-text); }
button.small { padding: 2px 10px; font-size: 12px; }
button.ghost { background: #fff; color: var(--brand); }
button.ghost:hover { background: #fff5f6; }
.actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; }
table.admin { width: 100%; white-space: normal; }
table.admin td { vertical-align: top; }
tr.off td { color: var(--muted); background: #fafafa; }
.link-cell input, input.wide { width: 100%; min-width: 260px; font-size: 12px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; align-items: end; max-width: 900px; }
.form-grid label { display: grid; gap: 4px; }
.form-grid label.inline { display: flex; gap: 6px; align-items: center; }
.notice-card { display: grid; gap: 8px; margin-bottom: 16px; border-color: var(--good); }
.pager { display: flex; gap: 16px; }
details.reset summary, details.client-link summary { cursor: pointer; color: var(--brand); font-size: 12px; }
details.client-link[open] { display: grid; gap: 6px; margin-top: 4px; }
details.reset input { width: 160px; font-size: 12px; }

/* 手機:表格不設固定高度,手指滑動直接捲整頁;固定的關鍵字欄限寬、過長換行 */
@media (max-width: 640px) {
    .scroll { max-height: none; }
    .kw { max-width: 8em; white-space: normal; word-break: break-all; }
}

/* 列印:只留報表本身;寬的每日矩陣改橫向 */
@media print {
    @page { size: A4; margin: 10mm; }
    @page wide { size: A4 landscape; }
    body { background: #fff; font-size: 11px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    main { padding: 0; }
    .site-header { padding: 0 0 8px; border-width: 0 0 2px; box-shadow: none; }
    .nav, .toolbar, .filters, .tabs, .no-print, form, script { display: none !important; }
    .scroll { overflow: visible; max-height: none; border: 0; }
    .cols section, .x-scroll { overflow: visible; }
    .matrix { page: wide; }
    /* 30 天以上的矩陣在 A4 橫向也放不下,縮小格子;Chrome 列印會裁掉超出的欄(最新日期在最右) */
    .matrix table { font-size: 8px; }
    .matrix td.rank { min-width: 0; padding: 1px 2px; }
    .matrix .ico { display: none; }
    thead th, .kw { position: static; }
    th, td { padding: 2px 4px; }
    .urls { min-width: 0; }
    .summary, .stat, .movers, tr, .cols section { break-inside: avoid; }
    h2 { break-after: avoid; }
    a { color: inherit; text-decoration: none; }
}

/* 專案新增 / 編輯表單:可摺疊分區(Task 27 A6;第二階段的外連 / GEO / 稽核 / 競品 / Google 區沿用 .form-section) */
.project-form { display: grid; gap: 12px; max-width: 900px; margin-top: 16px; }
.form-section { display: grid; gap: 10px; }
.form-section > summary { cursor: pointer; font-weight: bold; font-size: 16px; }
.form-section label.inline { display: flex; gap: 6px; align-items: center; }
.form-section .cost { margin: 4px 0 0; padding: 8px 10px; background: #f6f7f9; border-radius: 4px; }
.form-section code { font-size: 12px; }
.import-form textarea { width: 100%; min-height: 120px; font-family: inherit; }

/* 專案子導覽(排名 ｜ 競品 ｜ 流量 ｜ 稽核 ｜ 外連 ｜ AI 能見度;第一階段只有「排名」) */
.subnav { display: flex; gap: 4px 16px; margin: 8px 0 12px; font-size: 14px; }
.subnav a { color: var(--muted); text-decoration: none; padding-bottom: 2px; border-bottom: 2px solid transparent; }
.subnav a.on { color: var(--text); border-bottom-color: var(--brand); }

/* 用量頁 */
.usage-stats { display: flex; flex-wrap: wrap; gap: 12px; margin: 12px 0; }
.usage-stats .card { min-width: 180px; }
.usage-stats .big { font-size: 22px; font-weight: bold; }
.usage-stats .low { color: #c0392b; }
.meter { height: 8px; background: #eceef1; border-radius: 4px; overflow: hidden; margin-top: 6px; }
.meter > span { display: block; height: 100%; background: var(--brand); }
.usage-chart { max-width: 900px; }
.usage-chart rect { fill: var(--brand); }
a.button { display: inline-block; font-size: 13px; font-weight: normal; padding: 4px 12px; border-radius: 4px; background: var(--brand); color: #fff; text-decoration: none; vertical-align: middle; }
a.button:hover { background: var(--brand-dark); }

/* 員工預查 */
.preview-form { display: grid; gap: 12px; max-width: 900px; }
.preview-form > label { display: grid; gap: 4px; }
.preview-form label.inline { display: flex; gap: 6px; align-items: center; }
.preview-form fieldset { border: 1px solid var(--line); border-radius: 6px; display: flex; flex-wrap: wrap; gap: 6px 12px; }
.preview-form fieldset.keywords input { flex: 1 1 200px; }
.preview-form .competitor { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin-top: 6px; }
.preview-form .competitor input[type="text"] { flex: 1 1 300px; }
.preview-form .cost { padding: 8px 10px; background: #f6f7f9; border-radius: 4px; margin: 0; }
.serp-top ol { margin: 4px 0; padding-left: 18px; font-size: 12px; }