/* ── 全域 ── */
:root {
    --header-height: 56px;
    --footer-height: 32px;
    --nav-width: 272px;
    /* 配色參考 yenprotek.com：主色綠 #44AD42、深灰 #212529、內文灰 #777 */
    --accent: #44AD42;
    --accent-dark: #3a9538;
    --accent-soft: rgba(68, 173, 66, 0.12);
    --accent-soft-strong: rgba(68, 173, 66, 0.22);
    --header-bg: #ffffff;
    --header-fg: #212529;
    --nav-bg: #f7f7f7;
    --nav-fg: #444444;
    --border: #e6e5e5;
    --text: #212529;
    --muted: #777777;
    --danger: #dc3545;
    --logo-path: url('../images/logo-small.svg');

    /* ── 設計變數（2026-10-27，規則見 docs/UI設計指南.md；新畫面不要再寫死色碼） ── */
    /* 介面底色與表面 */
    --page-bg: #f4f6f4;
    --surface: #ffffff;
    --surface-2: #f7f8f7;
    --text-2: #4b5563;
    /* 狀態色（燈號、提示）：前景＋淡底，固定這四種＋未知 */
    --good: #2e7d32;     --good-bg: #e8f5e9;
    --watch: #a15c00;    --watch-bg: #fff4e0;
    --act: #c62828;      --act-bg: #fdecea;
    --info: #1565c0;     --info-bg: #e8f1fb;
    --unknown: #6b7280;  --unknown-bg: #f1f3f5;
    /* 指數固定顏色：全站圖表、圖例、標籤一致 */
    --idx-ndvi: #2e7d32; --idx-ndmi: #1565c0; --idx-ndre: #6a1b9a; --idx-bsi: #8d6e63; --idx-ndci: #00897b; --idx-ndwi: #0277bd;
    /* 字級：頁標、卡片標、內文、輔助 */
    --fs-xl: 22px; --fs-lg: 16px; --fs-md: 14px; --fs-sm: 12px;
    /* 間距（4 的倍數）、圓角、陰影 */
    --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
    --radius: 10px; --radius-sm: 6px; --radius-pill: 999px;
    --shadow: 0 1px 2px rgba(16, 40, 16, .05), 0 1px 4px rgba(16, 40, 16, .06);
    --shadow-hover: 0 2px 8px rgba(16, 40, 16, .12);
    /* 其他介面色 */
    --accent-darker: #327f30;        /* 主要按鈕按下 */
    --on-color: #ffffff;             /* 色塊上的文字 */
    --act-border: #ebccd1;
    --good-border: #dcedc8;
    --orange: #e65100;  --orange-bg: #fff3e0;   /* 天氣示警「嚴重」、植被移除 */
    --yellow: #f9a825;  --yellow-bg: #fffde7;   /* 天氣示警「中度」、等級 C、中風險 */
    --map-bg: #eef1f3;
    --overlay-dark: rgba(33, 37, 41, .8);       /* 地圖上的提示 */
    --select-bg: rgba(0, 229, 255, .15);        /* 表格裡跟地圖連動選到的列 */
    --badge-ai: rgba(106, 27, 154, .88);        /* AI 增強影像標籤 */
    --badge-est: rgba(230, 81, 0, .9);          /* 推估影像標籤 */

    /* ── 圖表與地圖（JavaScript 用 YPT.color("名稱") 讀，不含 --） ── */
    /* 多條線的順序色：多區比較、逐年比較 */
    --series-1: #2e7d32; --series-2: #1565c0; --series-3: #e65100; --series-4: #6a1b9a; --series-5: #c62828;
    --series-6: #00838f; --series-7: #827717; --series-8: #4e342e; --series-9: #ad1457; --series-10: #37474f;
    /* 指數曲線 */
    --chart-main: #2e7d32;           /* 平滑線（主角） */
    --chart-point: #212529;          /* 原始點、推估點外框 */
    --chart-outlier: #d32f2f;        /* 離群值、參考線 */
    --chart-cursor: #1565c0;         /* 選到的那一天 */
    --chart-landsat: #8d6e63;
    --chart-flag: #ef6c00;           /* 跟測站不一致待確認 */
    --chart-normal: #90a4ae;         /* 往年同期（虛線） */
    --chart-score: #455a64;
    /* 雷達 */
    --radar-vh-asc: #6a1b9a; --radar-vh-desc: #00838f; --radar-vv-asc: #ba68c8; --radar-vv-desc: #4db6ac;
    /* 氣象、土壤 */
    --rain: #1e88e5; --temp-max: #e53935; --temp-min: #5e35b1; --soil: #6d4c41; --heat: #fb8c00;
    --irrigation: #26a69a;           /* 灌溉（跟雨量的藍分開） */
    /* 評分等級 */
    --grade-a: #2e7d32; --grade-b: #7cb342; --grade-c: #f9a825; --grade-d: #d32f2f;
    /* 地圖 */
    --map-outline: #ffeb3b;          /* 監測區、派工範圍的外框（亮黃，空照圖上看得清楚） */
    --map-line-dark: #212529;
    --map-nodata: #bdbdbd;
    --map-task: #e53935;
    --map-select: #00e5ff;
    --map-cut: #ff1744;
    --map-good: #43a047; --map-watch: #e09100; --map-act: #c62828; --map-unknown: #9e9e9e;   /* 燈號上色（比文字色亮） */
    --zone-0: #9e9e9e; --zone-1: #d32f2f; --zone-2: #fbc02d; --zone-3: #388e3c;              /* 差異區塊：非農地、偏低、普通、較好 */
    --land-loss: #e65100; --land-bare: #8d2b0b; --land-gain: #2e7d32;                         /* 土地變遷 */
    --dmg-damaged: #f9a825; --dmg-severe: #c62828; --dmg-flooded: #1565c0; --dmg-cleared: #8d6e63;   /* 災後受損 */
}

html, body {
    height: 100%;
    margin: 0;
    background: var(--surface);
    color: var(--text);
    font-family: Poppins, "Noto Sans TC", "Noto Sans Thai", "Microsoft JhengHei", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-dark); text-decoration: underline; }

/* ── DevExtreme 主題色覆寫（把預設藍色換成品牌綠） ── */
.dx-widget {
    font-family: inherit;
    color: var(--text);
}

.dx-button-mode-contained.dx-button-default {
    background-color: var(--accent);
    border-color: var(--accent);
}
.dx-button-mode-contained.dx-button-default.dx-state-hover,
.dx-button-mode-contained.dx-button-default.dx-state-focused {
    background-color: var(--accent-dark);
    border-color: var(--accent-dark);
}
.dx-button-mode-contained.dx-button-default.dx-state-active {
    background-color: var(--accent-darker);
}

.dx-button-mode-outlined.dx-state-hover {
    border-color: var(--accent);
    background-color: var(--accent-soft);
}
.dx-button-mode-outlined.dx-state-hover .dx-icon,
.dx-button-mode-outlined.dx-state-hover .dx-button-text {
    color: var(--accent-dark);
}

.dx-checkbox-checked .dx-checkbox-icon,
.dx-checkbox-indeterminate .dx-checkbox-icon {
    color: var(--accent);
}
.dx-checkbox.dx-state-focused .dx-checkbox-icon,
.dx-checkbox.dx-state-hover .dx-checkbox-icon {
    border-color: var(--accent);
}

.dx-texteditor.dx-editor-outlined.dx-state-focused,
.dx-texteditor.dx-editor-outlined.dx-state-active {
    border-color: var(--accent);
}

.dx-datagrid-rowsview .dx-row-focused.dx-data-row > td,
.dx-datagrid-rowsview .dx-row-focused.dx-data-row > tr > td,
.dx-datagrid-rowsview .dx-row-focused.dx-data-row.dx-row-lines > td,
.dx-datagrid-rowsview .dx-row-focused.dx-data-row.dx-row-lines > tr > td,
.dx-datagrid-rowsview .dx-row-focused.dx-data-row:not(.dx-row-lines) > td,
.dx-datagrid-rowsview .dx-row-focused.dx-data-row:not(.dx-row-lines) > tr > td {
    background-color: var(--accent-soft-strong);
    color: var(--text);
    border-bottom-color: var(--accent);
    border-top-color: var(--accent);
}
.dx-datagrid-rowsview .dx-row-focused.dx-data-row .dx-command-select .dx-checkbox-icon,
.dx-datagrid-rowsview .dx-row-focused.dx-data-row .dx-checkbox-checked .dx-checkbox-icon {
    color: var(--accent);
    border-color: var(--accent);
}
.dx-datagrid-rowsview .dx-row-focused.dx-data-row .dx-checkbox-icon {
    background-color: var(--surface);
}
.dx-datagrid .dx-row-focused > td.dx-focused,
.dx-datagrid-focus-overlay {
    border-color: var(--accent);
}
.dx-datagrid-rowsview .dx-selection.dx-row:not(.dx-row-focused) > td,
.dx-datagrid-rowsview .dx-selection.dx-row:not(.dx-row-focused):hover > td {
    background-color: var(--accent-soft);
    color: var(--text);
}
.dx-datagrid-headers {
    color: var(--muted);
    font-weight: 600;
}
.dx-datagrid-headers .dx-header-filter:not(.dx-header-filter-empty),
.dx-datagrid .dx-sort {
    color: var(--accent);
}
.dx-datagrid-rowsview .dx-row-alt > td {
    background-color: var(--surface-2);
}

.dx-pager .dx-pages .dx-page.dx-selection,
.dx-pager .dx-page-sizes .dx-page-size.dx-selection {
    background-color: var(--accent);
    color: var(--on-color);
}
.dx-pager .dx-pages .dx-page:not(.dx-selection):hover,
.dx-pager .dx-page-sizes .dx-page-size:not(.dx-selection):hover {
    background-color: var(--accent-soft);
}

.dx-treeview-node.dx-state-selected > .dx-treeview-item,
.dx-treeview-item.dx-state-selected {
    background-color: var(--accent-soft);
    color: var(--accent-dark);
    font-weight: 600;
}
.dx-treeview-item.dx-state-hover {
    background-color: var(--accent-soft);
}
.dx-treeview-toggle-item-visibility {
    color: var(--muted);
}

.dx-popup-title {
    border-bottom: 2px solid var(--accent);
}

/* DataGrid 彈出編輯表單的「儲存」按鈕改為主色 */
.dx-datagrid-edit-popup .dx-popup-bottom .dx-toolbar-after .dx-toolbar-item:first-child .dx-button {
    background-color: var(--accent);
    border-color: var(--accent);
}
.dx-datagrid-edit-popup .dx-popup-bottom .dx-toolbar-after .dx-toolbar-item:first-child .dx-button .dx-button-text {
    color: var(--on-color);
}
.dx-datagrid-edit-popup .dx-popup-bottom .dx-toolbar-after .dx-toolbar-item:first-child .dx-button.dx-state-hover {
    background-color: var(--accent-dark);
    border-color: var(--accent-dark);
}

.dx-tag-content {
    background-color: var(--accent-soft-strong);
    color: var(--accent-dark);
}

.dx-list-item.dx-state-focused,
.dx-list-item.dx-state-active,
.dx-list-item.dx-list-item-selected {
    background-color: var(--accent-soft);
    color: var(--text);
}
.dx-dropdownbutton-popup-wrapper .dx-list-item.dx-state-hover {
    background-color: var(--accent-soft);
}

.dx-invalid.dx-texteditor.dx-editor-outlined {
    border-color: var(--danger);
}

.hidden-form { display: none; }

/* ── 版面 ── */
.app {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.app-header {
    height: var(--header-height);
    background: var(--header-bg);
    color: var(--header-fg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    border-bottom: 3px solid var(--accent);
    box-shadow: var(--shadow);
    z-index: 10;
    flex: none;
}

.header-left, .header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 通知鈴鐺：未讀數用紅色小圓 */
.header-bell { position: relative; display: inline-flex; align-items: center; padding: 6px; color: var(--header-fg); text-decoration: none; }
.header-bell .dx-icon { font-size: 20px; color: var(--header-fg); }
.header-bell-count { position: absolute; top: 0; right: -2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
    background: var(--act); color: var(--on-color); font-size: 11px; line-height: 16px; text-align: center; }

.app-header .dx-button.dx-button-mode-text .dx-icon,
.app-header .dx-button.dx-button-mode-text .dx-button-text {
    color: var(--header-fg);
}

.app-header .dx-button.dx-button-mode-text.dx-state-hover,
.app-header .dx-button.dx-button-mode-text.dx-state-focused {
    background: var(--accent-soft-strong);
}

.app-nav .dx-treeview-item {
    color: var(--nav-fg);
}

.app-footer a {
    color: var(--accent);
}

.header-logo {
    display: inline-block;
    width: 30px;
    height: 32px;
    margin: 0 4px;
    background: var(--logo-path) no-repeat center / contain;
}

.header-title {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 1px;
}

.app-body {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}

.app-nav {
    width: var(--nav-width);
    background: var(--nav-bg);
    border-inline-end: 1px solid var(--border);
    overflow-y: auto;
    flex: none;
    transition: margin-inline-start 0.2s ease;
}

.app-nav.collapsed {
    margin-inline-start: calc(-1 * var(--nav-width));
}

.app-nav .dx-treeview-item {
    padding: 10px 12px;
}

.app-nav .dx-treeview-node[aria-level="1"] > .dx-treeview-item {
    font-weight: 600;
}

.app-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.app-main.anonymous {
    height: 100%;
}

.page-toolbar-wrapper {
    flex: none;
    padding: 8px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

.page-title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--text);
}

.page-content {
    flex: 1 1 auto;
    min-height: 0;
    padding: 16px;
    background: var(--page-bg);
    overflow: auto;
    display: flex;
    flex-direction: column;
}

.grid-container {
    flex: 1 1 auto;
    min-height: 0;
}

.app-footer {
    height: var(--footer-height);
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--muted);
    border-top: 1px solid var(--border);
    background: var(--surface-2);
}

/* 選單抽屜的標題列、工具列、遮罩：只有窄螢幕用 */
.nav-drawer-head, .nav-tools, .nav-backdrop { display: none; }
.header-tools { display: flex; align-items: center; gap: 8px; }
.header-tools .nav-tools-label { display: none; }

/* 平板與手機：選單改成抽屜（蓋在畫面上、整個高度、後面半透明遮罩），預設收起；
   按左上角選單按鈕打開，點遮罩、右上角 ×、Esc 收起（YPT.toggleNav） */
@media (max-width: 960px) {
    .app-nav {
        --drawer-w: min(85vw, 300px);
        position: fixed;
        top: 0;
        bottom: 0;
        inset-inline-start: 0;
        width: var(--drawer-w);
        z-index: 1700;
        border-inline-end: 0;
        box-shadow: var(--shadow-hover);
        margin-inline-start: calc(-1 * var(--drawer-w) - 24px);
        visibility: hidden;
        transition: margin-inline-start 0.2s ease, visibility 0s linear 0.2s;
        padding-bottom: env(safe-area-inset-bottom);
    }
    .app-nav.open { margin-inline-start: 0; visibility: visible; transition: margin-inline-start 0.2s ease; }
    .nav-backdrop { position: fixed; inset: 0; z-index: 1650; background: rgba(0, 0, 0, 0.4); }
    body.nav-open .nav-backdrop { display: block; }
    .nav-drawer-head { display: flex; align-items: center; gap: 8px; height: var(--header-height); padding: 0 8px 0 12px;
        background: var(--header-bg); color: var(--header-fg); border-bottom: 3px solid var(--accent); position: sticky; top: 0; z-index: 1; }
    .nav-drawer-title { flex: 1; min-width: 0; font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .nav-drawer-close { border: 0; background: transparent; color: var(--header-fg); width: 44px; height: 44px; border-radius: 50%; cursor: pointer; }
    .nav-drawer-close .dx-icon { font-size: 20px; color: var(--header-fg); }
    .app-nav .dx-treeview-item { padding: 12px 16px; font-size: 15px; min-height: 44px; }
    .page-content { padding: var(--sp-3); }
}
/* 手機：頁首只留選單、標誌、通知、帳號；場景切換、簡易／進階、回報移到抽屜最上面 */
@media (max-width: 700px) {
    .header-tools { display: none; }
    .nav-tools { display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-2); padding: var(--sp-3); border-bottom: 1px solid var(--border); }
    .nav-tools .ui-mode-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin: 0; border-radius: 12px; }
    .nav-tools .ui-mode-switch button { padding: 8px 10px; font-size: 14px; border-radius: 10px; }
    .nav-tools .header-help { gap: var(--sp-2); padding: 8px 4px; border: 0; background: transparent; cursor: pointer; font: inherit; font-size: 15px; color: var(--nav-fg); }
    .nav-tools .header-help .dx-icon { color: var(--nav-fg); }
}
@media (max-width: 600px) {
    .header-title { display: none; }
    #userMenu .dx-button-text { display: none; }
    .app-footer { height: auto; min-height: var(--footer-height); flex-wrap: wrap; gap: 0 8px; padding: 4px 8px; font-size: 11px; }
    .page-toolbar-wrapper { padding: 8px 12px; }
}

/* ── 首頁 ── */
.home-container {
    padding: 24px;
}

/* ── 登入 / 密碼變更表單 ── */
.formLayout-verticalAlign {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
}

.formLayout-container {
    width: 100%;
    max-width: 400px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-hover);
    overflow: hidden;
}

.formLayout-header {
    padding: 14px 16px;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    border-bottom: 2px solid var(--accent);
}

.formLayout-form {
    padding: 16px;
}

.formLayout-item {
    margin-bottom: 14px;
}

.formLayout-caption {
    display: block;
    margin-bottom: 4px;
    font-size: 13px;
    color: var(--muted);
}

.formLayout-fieldError {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--act);
}

.formLayout-fieldError:empty {
    display: none;
}

.formLayout-generalErrorText {
    margin: 4px 0 12px;
    padding: 8px 10px;
    font-size: 13px;
    color: var(--act);
    background: var(--act-bg);
    border: 1px solid var(--act-border);
    border-radius: 4px;
}

.formLayout-buttons {
    padding-top: 12px;
    border-top: 1px solid var(--border);
    text-align: center;
}

/* ── 彈窗 ── */
.popup-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.popup-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 4px;
}

/* ── Grid 內的圖片 ── */
.grid-avatar {
    max-width: 120px;
    max-height: 60px;
    display: block;
    margin: 0 auto;
}

/* ── 衛星遙測畫面 ── */
.sat-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sat-map { width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--map-bg); }
.sat-map-list { height: 360px; margin-bottom: 16px; }
.sat-map-edit { height: calc(100vh - var(--header-height) - var(--footer-height) - 120px); min-height: 420px; }
.sat-map-detail { height: 420px; }
.sat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-4); margin-bottom: var(--sp-4); box-shadow: var(--shadow); }

/* 指數一句話用途 */
.sat-index-intro { background: var(--info-bg); border-inline-start: 3px solid var(--info); padding: 6px 12px; margin: 0 0 12px; border-radius: 3px; color: var(--text); }
.sat-index-intro:empty { display: none; }
.sat-index-intro a { margin-inline-start: 6px; white-space: nowrap; }
.sat-index-purpose { font-weight: 600; color: var(--info); }

/* 田區詳情上方：這塊田的通知 */
.sat-field-notices { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px; margin-bottom: var(--sp-4); box-shadow: var(--shadow); }
.sat-field-notices-head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.sat-field-notices-title { font-weight: 600; }
.sat-field-notices-count { background: var(--act); color: var(--on-color); border-radius: 10px; padding: 0 8px; font-size: 12px; }
.sat-field-notices-all { margin-inline-start: auto; font-size: 13px; }
.sat-field-notices-all + .sat-field-notices-all { margin-inline-start: 0; }
.sat-field-notice { display: flex; gap: 12px; align-items: baseline; padding: 5px 8px; border-inline-start: 3px solid transparent; cursor: pointer; border-radius: 3px; }
.sat-field-notice:hover { background: var(--surface-2); }
.sat-field-notice.unread { background: var(--accent-soft); border-inline-start-color: var(--accent); }
.sat-field-notice.unread.warning { background: var(--watch-bg); border-inline-start-color: var(--orange); }
.sat-field-notice-title { font-weight: 600; white-space: nowrap; }
.sat-field-notice-body { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.sat-field-notice-time { color: var(--muted); font-size: 12px; white-space: nowrap; }
@media (max-width: 700px) { .sat-field-notice { flex-wrap: wrap; gap: 2px 12px; } .sat-field-notice-body { white-space: normal; flex-basis: 100%; order: 3; } }

/* 推估影像的標籤：疊在 AI 增強標籤上面，橘色 */
.sat-map-badge.sat-map-badge-est { background: var(--badge-est); bottom: 62px; }

/* 表土濕度 */
.sat-soil-latest { font-weight: 600; margin: 4px 0 8px; }

/* 採收期預測 */
.sat-harvest-date { font-size: 22px; font-weight: 700; color: var(--good); margin: 4px 0; }

/* 田內差異區塊 */
.sat-zone-status { color: var(--text-2); margin: 8px 0; }
.sat-zone-table { width: 100%; border-collapse: collapse; margin: 8px 0; }
.sat-zone-table th { text-align: start; font-weight: 600; padding: 4px 6px; border-bottom: 1px solid var(--border); font-size: 13px; }
.sat-zone-table td { padding: 4px 6px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.sat-zone-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 3px; }
.sat-zone-scroll { max-height: 420px; overflow-y: auto; }
.sat-zone-table tr.sat-zone-selected td { background: var(--select-bg); }
.sat-mk-pick { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.sat-parcel-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0; }
.sat-parcel-tools .sat-note { flex-basis: 100%; margin: 0; }
.sat-zone-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 8px 0; }
.sat-zone-export a { margin-inline-start: 8px; }
.sat-drone { border-top: 1px solid var(--border); margin-top: 8px; padding-top: 8px; }
.sat-drone-title { font-weight: 600; margin-bottom: 6px; }
.sat-drone-params { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }

/* LINE 綁定 */
.sat-line-code { font-size: 32px; font-weight: 700; letter-spacing: 6px; text-align: center; padding: 12px; background: var(--accent-soft); border-radius: var(--radius-sm); margin: 8px 0; }

/* 工作清單 */
.sat-tasks-layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(320px, 2fr); gap: 16px; align-items: start; }
@media (max-width: 1100px) { .sat-tasks-layout { grid-template-columns: 1fr; } }
.sat-map-task { height: 260px; margin: 8px 0; }
.sat-task-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; color: var(--text-2); }
.sat-task-description { white-space: pre-wrap; }
.sat-task-result { background: var(--accent-soft); padding: 8px; border-radius: 4px; white-space: pre-wrap; margin-bottom: 8px; }
.sat-late { color: var(--act); font-weight: 600; }

/* 警示設定 */
.sat-alerts { max-width: 900px; }
.sat-alerts-scope { display: flex; align-items: center; gap: 12px; margin: 12px 0; flex-wrap: wrap; }
.sat-alerts-table { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
.sat-alerts-table th { text-align: start; font-weight: 600; padding: 8px; border-bottom: 2px solid var(--border); }
.sat-alerts-table td { padding: 10px 8px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.sat-alert-name { font-weight: 600; }
.sat-alert-help { color: var(--muted); font-size: 12px; margin-top: 2px; }

/* 通知中心 */
.sat-notifications { max-width: 900px; padding: 0; }
.sat-notification { padding: 12px 16px; border-bottom: 1px solid var(--border); cursor: pointer; border-inline-start: 4px solid transparent; }
.sat-notification:hover { background: var(--surface-2); }
.sat-notification.unread { background: var(--accent-soft); border-inline-start-color: var(--accent); }
.sat-notification.unread.warning { background: var(--watch-bg); border-inline-start-color: var(--orange); }
.sat-notification.unread .sat-notification-title { font-weight: 600; }
.sat-notification-body { color: var(--text-2); margin-top: 4px; }
.sat-notification-time { color: var(--muted); font-size: 12px; margin-top: 4px; }
.sat-notification-photo { display: inline-block; margin-top: 6px; }
.sat-notification-photo img { width: 120px; height: 90px; object-fit: cover; border-radius: 4px; display: block; }
.sat-notifications .sat-empty { padding: 24px 16px; color: var(--muted); }
.sat-more { text-align: center; padding: 8px; }
.sat-card-title { margin: 0 0 12px; font-size: 16px; font-weight: 600; }
.sat-note { color: var(--muted); font-size: 13px; margin: 8px 0 0; }
/* 授權要求的出處：最小字，不加說明（UI 指南 §3.2、§7） */
.sat-credit, .sat-note.sat-credit { font-size: 11px; color: var(--muted); opacity: .8; margin-top: 6px; }
.sat-warning { color: var(--watch); background: var(--watch-bg); border-radius: 4px; padding: 6px 10px; margin-top: 8px; font-size: 13px; }
.sat-banner { background: var(--good-bg); color: var(--good); border-radius: 6px; padding: 10px 14px; margin-bottom: 12px; }
.sat-banner-error { background: var(--act-bg); color: var(--act); }
.sat-field-meta { margin-bottom: 12px; color: var(--muted); }

.sat-status { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; }
.sat-status-active { background: var(--accent-soft); color: var(--accent-dark); }
.sat-status-backfilling { background: var(--info-bg); color: var(--info); }
.sat-status-error { background: var(--act-bg); color: var(--act); }
.sat-change-up { color: var(--good); }
.sat-change-down { color: var(--act); }
.sat-change-flat { color: var(--muted); }

/* MapLibre 的 .maplibregl-ctrl-group button（padding: 0）比 site.css 晚載入，要多一層選擇器才蓋得過；沒內距時字貼著圓角邊，看起來像被切掉（2026-11-04） */
.maplibregl-ctrl-group.sat-base-switch button { width: 100% !important; padding: 0 10px; font-size: 12px; white-space: nowrap; }
.sat-base-switch button.active { background: var(--accent-soft-strong); font-weight: 600; }

.sat-edit-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; }
.sat-edit-map-wrap { position: relative; }
.sat-edit-hint { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); background: var(--overlay-dark); color: var(--on-color);
    padding: 6px 12px; border-radius: 16px; font-size: 13px; pointer-events: none; white-space: nowrap; max-width: calc(100% - 24px); }
@media (max-width: 600px) { .sat-edit-hint { white-space: normal; text-align: center; width: max-content; } }
.sat-edit-side { display: flex; flex-direction: column; gap: 12px; }
.sat-edit-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.sat-area-box { background: var(--surface-2); border-radius: 6px; padding: 10px 12px; }
.sat-area-label { color: var(--muted); font-size: 12px; }
.sat-area-value { font-size: 18px; font-weight: 600; }
.sat-vertex { width: 14px; height: 14px; border-radius: 50%; background: var(--map-outline); border: 2px solid var(--map-line-dark); cursor: move; }

.sat-detail-layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 16px; }
.sat-detail-layout .sat-card { margin-bottom: 16px; }
.sat-detail-side { min-width: 0; }   /* 右欄：指數曲線卡片＋雷達卡片上下疊 */
.sat-chart.sat-chart-radar { min-height: 300px; }   /* 比 .sat-chart 的 380 矮；寫兩個 class 才蓋得過後面的 .sat-chart */
.sat-date-row { display: flex; align-items: center; gap: 4px; margin-top: 12px; padding-bottom: 28px; }
.sat-date-slider { flex: 1; }
.sat-date-info { font-size: 13px; color: var(--text); min-height: 20px; }
.sat-chart { min-height: 380px; }   /* 高度由各頁 dxChart 的 size.height 決定，外框跟著長高，下方說明才不會疊到刻度 */
.sat-chart-tools { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; min-height: 36px; }
.sat-chart-period { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sat-chart-title { font-weight: 600; }

.sat-legend { margin-top: 10px; max-width: 360px; }
.sat-legend-title { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.sat-legend-bar { height: 10px; border-radius: 3px; }
.sat-legend-ticks { position: relative; height: 16px; font-size: 11px; color: var(--muted); }
.sat-legend-ticks span { position: absolute; transform: translateX(-50%); top: 2px; }
.sat-legend-static { margin: 12px 0; }

.sat-compare-tools { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.sat-compare-picker { flex: 1; min-width: 260px; }

.sat-indices { max-width: 880px; }
.sat-formula { font-family: Consolas, monospace; color: var(--muted); }
.sat-indices h4 { margin: 16px 0 6px; font-size: 14px; }

.sat-attribution { margin-inline-start: 16px; color: var(--muted); }
.formLayout-links { display: flex; justify-content: space-between; margin-top: 16px; font-size: 13px; }

@media (max-width: 960px) {
    .sat-edit-layout, .sat-detail-layout { grid-template-columns: 1fr; }
    .sat-map-edit { height: 60vh; }
    .sat-attribution { display: block; margin-inline-start: 0; }
}

/* 管理頁 */
.sat-kpis { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.sat-kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px; min-width: 180px; box-shadow: var(--shadow); }
.sat-kpi-label { color: var(--muted); font-size: 12px; }
.sat-kpi-value { font-size: 20px; font-weight: 600; margin-top: 4px; }
.sat-errors { white-space: pre-wrap; font-size: 12px; margin: 0; }

/* AI 增強顯示 */
.sat-map-wrap { position: relative; }
.sat-map-badge { position: absolute; left: 8px; bottom: 36px; max-width: calc(100% - 16px); overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; background: var(--badge-ai); color: var(--on-color); font-size: 12px; padding: 3px 10px; border-radius: 12px; pointer-events: none; }
.sat-map-tools { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.sat-map-tools .sat-legend { flex: 1; min-width: 220px; }
.sat-enhance { margin-top: 12px; max-width: 220px; }
.sat-enhance .sat-note { margin-top: 4px; font-size: 12px; }

/* 指數圖層開關與透明度 */
.sat-layer-row { display: flex; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.sat-layer-label { color: var(--muted); font-size: 13px; }
.sat-layer-hint { margin: 0; font-size: 12px; }
.sat-opacity-slider { flex: 1; min-width: 140px; max-width: 260px; }

/* 天氣卡片：示警依嚴重度上色（原文照登） */
.sat-wx-alert { border-inline-start: 4px solid var(--unknown); background: var(--surface-2); border-radius: 4px; padding: 8px 10px; margin: 6px 0; }
.sat-wx-alert-head { margin-bottom: 2px; }
.sat-wx-alert details summary { cursor: pointer; color: var(--text-2); font-size: 13px; }
.sat-wx-text { white-space: pre-line; margin: 6px 0; font-size: 13px; }
.sat-wx-sev-Extreme { border-inline-start-color: var(--act); background: var(--act-bg); }
.sat-wx-sev-Severe { border-inline-start-color: var(--orange); background: var(--orange-bg); }
.sat-wx-sev-Moderate { border-inline-start-color: var(--yellow); background: var(--yellow-bg); }
.sat-wx-banner a { margin-inline-start: 6px; }

/* 去雲交叉判斷（影像清單的「測站比對」） */
.sat-check-bad { color: var(--orange); font-weight: 600; cursor: help; }
.sat-check-ok { color: var(--good); cursor: help; }

/* 差異區塊卡片：用途說明在前，算法細節收起來 */
.sat-zone-intro, .sat-card-intro { font-size: 14px; color: var(--text); margin: 4px 0 8px; }
.sat-zone-intro p, .sat-card-intro p { margin: 4px 0; }
.sat-zone-intro ul, .sat-card-intro ul { margin: 4px 0 6px; padding-inline-start: 20px; }
.sat-zone-intro li, .sat-card-intro li { margin: 2px 0; }
.sat-zone-more { margin-top: 8px; }
.sat-zone-more summary { cursor: pointer; color: var(--text-2); font-size: 13px; }

/* 田區詳情上方的分析摘要（點了到田區分析頁） */
.sat-analysis-strip { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--good-bg); border: 1px solid var(--good-border);
    border-radius: 6px; padding: 8px 12px; margin-bottom: 12px; font-size: 14px; }
.sat-analysis-label { font-weight: 600; color: var(--good); }
.sat-analysis-strip a { margin-inline-start: auto; white-space: nowrap; }

/* 採收期卡片的作物紀錄（種植日、收割日） */
.sat-season { border-top: 1px solid var(--border); margin-top: 12px; padding-top: 10px; }
.sat-season-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sat-season-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin: 8px 0; }

/* 田間事件：作物生長中積水標紅 */
.sat-event-warn td { color: var(--act); font-weight: 600; }

/* 田區評分、棲地分數 */
.sat-score-now { display: flex; align-items: baseline; gap: 10px; margin: 6px 0; }
.sat-score-value { font-size: 32px; font-weight: 700; }
.sat-score-grade { color: var(--on-color); font-weight: 700; padding: 2px 10px; border-radius: 4px; }
.sat-grade-badge { color: var(--on-color); font-weight: 700; padding: 0 6px; border-radius: 3px; margin-inline-start: 4px; }
.sat-key { background: var(--surface-2); padding: 10px; border-radius: 4px; word-break: break-all; white-space: pre-wrap; font-size: 14px; }

/* 分析卡片裡的小色塊（土地變遷的類別） */
.sat-legend-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 2px; vertical-align: middle; margin: 0 4px 0 0; }
#landuseNow .sat-legend-swatch:not(:first-child) { margin-inline-start: 12px; }


/* ══ 設計系統元件（2026-10-27，規則見 docs/UI設計指南.md） ══ */

/* hidden 屬性一定要藏住（元件有設 display 時也一樣） */
[hidden] { display: none !important; }

/* 簡易／進階：body 有 mode-simple 或 mode-advanced；只在進階顯示的加 adv-only，只在簡易顯示的加 simple-only */
.mode-simple .adv-only { display: none !important; }
.mode-advanced .simple-only { display: none !important; }

/* 右上角模式開關 */
.ui-mode-switch { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 2px; }
.ui-mode-switch button { border: 0; background: transparent; color: var(--text-2); font: inherit; font-size: 13px; padding: 4px 12px; border-radius: var(--radius-pill); cursor: pointer; white-space: nowrap; }
.ui-mode-switch button[aria-pressed="true"] { background: var(--accent); color: var(--on-color); font-weight: 600; }
.ui-mode-switch button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (max-width: 600px) { .ui-mode-switch button { padding: 4px 8px; } }

/* 頁首說明：一行告訴使用者這頁做什麼 */
.ui-lead { color: var(--text-2); font-size: var(--fs-md); margin: 0 0 var(--sp-4); line-height: 1.6; }

/* 燈號標籤 */
.ui-pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 600; white-space: nowrap; line-height: 1.6; }
.ui-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.ui-pill-good { color: var(--good); background: var(--good-bg); }
.ui-pill-watch { color: var(--watch); background: var(--watch-bg); }
.ui-pill-act { color: var(--act); background: var(--act-bg); }
/* 天氣卡的未來 10 天（sat-card-weather.js） */
.ui-fc-days { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--sp-2); margin: var(--sp-2) 0; }
.ui-fc-day { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px 8px; font-size: 13px; line-height: 1.5; }
.ui-fc-day.risk { border-color: var(--act); }
.ui-fc-date { font-weight: 600; }
.ui-fc-temp { font-family: Poppins, sans-serif; }
.ui-fc-rain { color: var(--rain); }
.ui-fc-spray { color: var(--good); }
.ui-fc-spray.no { color: var(--muted); }
.ui-fc-risk { display: inline-block; margin: 2px 2px 0 0; padding: 0 6px; border-radius: var(--radius-pill); font-size: 12px; color: var(--act); background: var(--act-bg); }
.ui-fc-alert { margin: 4px 0; }
/* 未來 90 分鐘降雨（2026-11-01）：10 格（現在＋每 10 分鐘），顏色深淺＝雨勢 */
.ui-nc-steps { display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; margin: var(--sp-2) 0; }
.ui-nc-step { text-align: center; font-size: 11px; line-height: 1.3; padding: 4px 0; border-radius: var(--radius-sm); border: 1px solid var(--border); }
.ui-nc-step b { display: block; font-family: Poppins, sans-serif; font-size: 12px; }
.ui-nc-step.r1 { background: color-mix(in srgb, var(--rain) 15%, transparent); }
.ui-nc-step.r2 { background: color-mix(in srgb, var(--rain) 35%, transparent); }
.ui-nc-step.r3 { background: color-mix(in srgb, var(--rain) 60%, transparent); color: #fff; }
.ui-nc-step.r4 { background: var(--rain); color: #fff; }
/* 未來 3 個月展望 */
.ui-ol-month { display: flex; flex-wrap: wrap; gap: 4px var(--sp-2); padding: 4px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.ui-ol-month:last-child { border-bottom: 0; }
/* 氣象署鄉鎮一週預報（2026-11-01） */
.ui-off-table { font-size: 13px; }
.ui-off-table td { vertical-align: top; }
.ui-off-table td:first-child { white-space: nowrap; }
.ui-ol-name { font-weight: 600; min-width: 4em; }
.ui-ol-tag { padding: 0 6px; border-radius: var(--radius-pill); background: var(--act-bg); }
.ui-ol-tag.none { background: transparent; color: var(--muted); }
.ui-ol-adv { flex-basis: 100%; }
.sat-chart-sub { font-weight: 600; font-size: var(--fs-md); }
.ui-pest-row { margin: 4px 0; line-height: 1.7; }
.ui-pill-unknown { color: var(--unknown); background: var(--unknown-bg); }
.ui-pill-info { color: var(--info); background: var(--info-bg); }

/* 燈號摘要（列表上方：要處理 2｜留意 3｜良好 8，點了篩選） */
.ui-summary { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.ui-summary button { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius);
    padding: 8px 14px; font: inherit; cursor: pointer; box-shadow: var(--shadow); color: var(--text); }
.ui-summary button b { font-size: 20px; font-family: Poppins, sans-serif; font-weight: 600; }
.ui-summary button[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft-strong); }
.ui-summary .n-act b { color: var(--act); }
.ui-summary .n-watch b { color: var(--watch); }
.ui-summary .n-good b { color: var(--good); }
.ui-summary .n-unknown b { color: var(--unknown); }

/* 監測區卡片（簡易模式的列表） */
.ui-site-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-4); }
.ui-site-card { position: relative; display: flex; flex-direction: column; gap: var(--sp-2); background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: var(--sp-4) var(--sp-4) var(--sp-3) calc(var(--sp-4) + 4px); box-shadow: var(--shadow);
    color: var(--text); text-decoration: none; transition: box-shadow .15s; overflow: hidden; }
.ui-site-card:hover { box-shadow: var(--shadow-hover); color: var(--text); }
.ui-site-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--unknown); }
.ui-site-card.lv-good::before { background: var(--good); }
.ui-site-card.lv-watch::before { background: var(--watch); }
.ui-site-card.lv-act::before { background: var(--act); }
.ui-site-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-2); }
.ui-site-card-name { font-size: var(--fs-lg); font-weight: 600; line-height: 1.4; word-break: break-word; }
.ui-site-card-reason { font-size: var(--fs-md); line-height: 1.6; }
.ui-site-card-meta { font-size: var(--fs-sm); color: var(--muted); display: flex; gap: 12px; flex-wrap: wrap; margin-top: auto; padding-top: var(--sp-1); }
.ui-site-card-go { font-size: 13px; color: var(--accent-dark); font-weight: 600; margin-inline-start: auto; }

/* 現在狀況卡（詳情頁最上面）：燈號＋一句話＋下一步 */
.ui-status-card { display: flex; gap: var(--sp-4); align-items: center; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--border);
    border-inline-start: 6px solid var(--unknown); border-radius: var(--radius); padding: var(--sp-4); margin-bottom: var(--sp-4); box-shadow: var(--shadow); }
.ui-status-card.lv-good { border-inline-start-color: var(--good); }
.ui-status-card.lv-watch { border-inline-start-color: var(--watch); }
.ui-status-card.lv-act { border-inline-start-color: var(--act); }
.ui-status-main { flex: 1 1 280px; min-width: 0; }
.ui-status-label { font-size: var(--fs-sm); color: var(--muted); }
.ui-status-reason { font-size: 17px; font-weight: 600; line-height: 1.5; margin-top: 6px; }
.ui-status-sub { font-size: 13px; color: var(--text-2); margin-top: 4px; }
.ui-status-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* 按鈕樣式的連結（下一步） */
.ui-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface);
    color: var(--text); font-size: var(--fs-md); text-decoration: none; cursor: pointer; white-space: nowrap; font-family: inherit; }
.ui-btn:hover { border-color: var(--accent); color: var(--accent-dark); }
.ui-btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-color); font-weight: 600; }
.ui-btn-primary:hover { background: var(--accent-dark); color: var(--on-color); }

/* 空狀態：發生什麼、為什麼、下一步 */
.ui-empty { text-align: center; padding: var(--sp-6) var(--sp-4); color: var(--text-2); background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius); }
.ui-empty-title { font-size: var(--fs-lg); font-weight: 600; color: var(--text); margin-bottom: var(--sp-2); }
.ui-empty .ui-btn { margin-top: var(--sp-3); }

/* 收起來的說明（「怎麼看這張圖」「怎麼算的」） */
.ui-help { margin-top: var(--sp-2); font-size: 13px; color: var(--muted); }
.ui-help > summary { cursor: pointer; color: var(--accent-dark); list-style: none; display: inline-flex; align-items: center; gap: 4px; }
.ui-help > summary::-webkit-details-marker { display: none; }
.ui-help > summary::before { content: "ⓘ"; }
.ui-help .sat-note { margin-top: 4px; }

.mode-simple .sat-list-layout { margin-top: var(--sp-5); }
.mode-simple .sat-map-list { height: 300px; }
.ui-card-help { margin: 0 0 var(--sp-2); }
.ui-card-help .sat-card-intro, .ui-card-help .sat-zone-intro { margin-top: 4px; }
.sat-zone-more > summary { cursor: pointer; color: var(--accent-dark); font-size: 13px; }

/* 工作清單卡片（簡易模式）：沿用監測區卡片，整張可點、選到的加框 */
.ui-task-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.ui-task-card { width: 100%; text-align: start; font: inherit; cursor: pointer; }
.ui-task-card.selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft-strong); }

/* 多區比較的最新排名（簡易模式） */
.ui-rank { margin-top: var(--sp-4); border-top: 1px solid var(--border); padding-top: var(--sp-3); }
.ui-rank-title { font-weight: 600; margin-bottom: var(--sp-2); }
.ui-rank-row { display: grid; grid-template-columns: minmax(100px, 220px) 1fr 48px; gap: var(--sp-3); align-items: center; padding: 4px 0; }
.ui-rank-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-rank-bar { height: 12px; background: var(--surface-2); border-radius: var(--radius-pill); overflow: hidden; }
.ui-rank-bar i { display: block; height: 100%; border-radius: var(--radius-pill); }
.ui-rank-tag { font-size: var(--fs-sm); color: var(--muted); }
@media (max-width: 600px) { .ui-rank-row { grid-template-columns: 1fr 40px; } .ui-rank-bar { grid-column: 1 / -1; grid-row: 2; } }

/* ── 地圖工具（GeoLibre 借鏡，2026-10-28）：匯入點位與熱力圖、分級圖例、時間滑桿、列印地圖 ──
   這一區的顏色變數放在這裡的 :root（協作時只能在檔尾加），用法跟開頭的變數一樣：CSS 用 var()、地圖用 YPT.color() */
:root {
    --map-point: #7b1fa2;                       /* 匯入的點位（沒有依數值分級時） */
    --class-1: #ffffb2; --class-2: #fecc5c; --class-3: #fd8d3c; --class-4: #f03b20; --class-5: #bd0026;   /* 點位依數值分 5 級（低→高）；熱力圖由疏到密 */
    --heat-0: rgba(255, 255, 178, 0);           /* 熱力圖最疏處（透明） */
}

/* 監測區列表：地圖上方的匯入點位工具列 */
.sat-map-toolbar { display: flex; align-items: center; gap: var(--sp-2) var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-2); }
.sat-map-toolbar-group { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.sat-map-toolbar .sat-note { margin: 0; font-size: var(--fs-sm); color: var(--muted); }
/* 點位圖例（地圖左下角） */
.sat-pt-legend { background: var(--surface); border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: 6px 10px; font-size: var(--fs-sm);
    max-width: 240px; max-height: 45%; overflow: auto; }
.sat-pt-legend .sat-note { margin: 0; font-size: 11px; color: var(--muted); }
.sat-pt-legend-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sat-pt-legend-field { margin-top: 4px; color: var(--text-2); }
.sat-pt-legend-row { display: flex; align-items: center; gap: 6px; margin-top: 2px; white-space: nowrap; }
.sat-pt-legend-row i { width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--map-line-dark); flex: none; }
.sat-pt-legend-heat { margin-top: 4px; }
.sat-pt-heat-bar { height: 8px; border-radius: 3px; background: linear-gradient(to right, var(--class-1), var(--class-2), var(--class-3), var(--class-4), var(--class-5)); }
.sat-pt-heat-ticks { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); }
/* 點位的欄位內容（點一下的小視窗） */
.sat-pt-table { border-collapse: collapse; font-size: var(--fs-sm); max-height: 260px; display: block; overflow: auto; }
.sat-pt-table th { text-align: start; color: var(--text-2); font-weight: 600; padding: 2px 8px 2px 0; vertical-align: top; white-space: nowrap; }
.sat-pt-table td { padding: 2px 0; word-break: break-word; }

/* 詳情頁時間滑桿下的播放、日期選單 */
.sat-date-tools { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-2); }

/* 列印地圖：螢幕上看不到；列印時只印這一塊（其他全部藏起來） */
.sat-print { display: none; color: var(--text); background: var(--surface); font-size: 12px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
@media print {
    body.sat-printing { height: auto; background: var(--surface); }
    body.sat-printing > *:not(.sat-print) { display: none !important; }
    body.sat-printing > .sat-print { display: block; }
}
.sat-print-title { font-size: 20px; font-weight: 600; }
.sat-print-sub { font-size: 13px; color: var(--text-2); margin: 2px 0 6px; }
.sat-print-map { position: relative; border: 1px solid var(--border); overflow: hidden; }
.sat-print-map img { display: block; width: 100%; height: 100%; }
.sat-print-north { position: absolute; top: 8px; right: 8px; background: var(--surface); border-radius: 4px; padding: 2px 4px; line-height: 0; }
.sat-print-north-arrow { fill: var(--text); }
.sat-print-north-n { font-size: 8px; font-weight: 700; fill: var(--text); }
.sat-print-scale { position: absolute; left: 10px; bottom: 10px; background: var(--surface); box-shadow: 0 0 0 4px var(--surface); font-size: 11px; line-height: 1.2; }
.sat-print-scale i { display: block; height: 6px; border: 2px solid var(--text); border-top: 0; }
.sat-print-foot { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-top: 6px; }
.sat-print-legend { flex: 1; margin-top: 0; padding: 0 14px; }   /* 刻度文字置中在端點上，左右留空間才不會被頁邊切掉（-0.2 印成 .2） */
.sat-print-meta { text-align: end; color: var(--text-2); white-space: nowrap; }
.sat-print-credit { margin-top: 6px; font-size: 9px; color: var(--muted); }

/* 底圖切換裡的「歷年影像」年份選單（sat.js） */
.sat-base-switch .sat-year-select { border: 0; border-top: 1px solid var(--border); font-size: 12px; padding: 4px 2px; background: var(--surface); color: var(--text-2); width: 100%; }

/* 分享連結（sat-share.js 分享頁、sat-share-admin.js 詳情頁的分享視窗） */
.share-page { background: var(--page-bg); margin: 0; }
.share-wrap { max-width: 1100px; margin: 0 auto; padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-4); }
.share-embed .share-wrap { padding: var(--sp-2); gap: var(--sp-2); }
.share-head h1 { font-size: var(--fs-xl); margin: 0 0 4px; }
.share-map { height: 420px; }
.share-embed .share-map { height: 320px; }
.share-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; }
/* 產銷履歷（2026-11-06，sat-card-trace.js 卡片、sat-share.js 分享頁） */
.trace-share { white-space: nowrap; margin-inline-start: var(--sp-2); }
.share-trace-item { border-top: 1px solid var(--border); padding: var(--sp-2) 0; }
.share-trace-item:first-of-type { border-top: 0; }
.share-new { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; margin: var(--sp-2) 0 var(--sp-3); }
.share-item { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-2); }
.share-url { font-family: Poppins, sans-serif; word-break: break-all; }
.share-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
@media (max-width: 600px) { .share-map { height: 300px; } .share-wrap { padding: var(--sp-3) 12px; } }

/* 產業場景（2026-10-30）：分析頁收起來的卡片、頁首場景切換 */
.sat-more-cards { margin-top: var(--sp-4); }
.sat-more-cards > summary { cursor: pointer; color: var(--text-2); font-weight: 600; padding: var(--sp-2) 0; }
.scene-switch { margin-inline-end: var(--sp-2); }
@media (max-width: 700px) { .header-right { flex-wrap: wrap; justify-content: flex-end; } }
/* 首頁置頂的天氣示警（sat-sites.js） */
.ui-alert-list { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.ui-alert-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: baseline; padding: var(--sp-2) var(--sp-3); border-radius: var(--radius); background: var(--act-bg); color: var(--act); text-decoration: none; }
.ui-alert-row span { color: var(--text-2); font-size: 13px; }

/* 場域健檢報告（sat-checkup.js）：結論 → 原因 → 該做什麼 → 錢 → 可靠到哪裡；A4 列印只留報告 */
.ck-wait { padding: var(--sp-5) 0; }
.ck-wait-title { font-weight: 600; font-size: var(--fs-md); margin-bottom: var(--sp-2); }
.ck-steps { margin: 0; padding-inline-start: 1.4em; color: var(--text-2); line-height: 1.9; }
.ck-steps li::marker { color: var(--accent); }
.ck-report { max-width: 820px; }
.ck-head { border-radius: var(--radius); padding: var(--sp-4); background: var(--surface-2); border-inline-start: 6px solid var(--border); margin-bottom: var(--sp-4); }
.ck-head.lv-act { border-inline-start-color: var(--act); background: var(--act-bg); }
.ck-head.lv-watch { border-inline-start-color: var(--watch); background: var(--watch-bg); }
.ck-head.lv-good { border-inline-start-color: var(--good); background: var(--good-bg); }
.ck-title { font-size: 18px; font-weight: 700; }
.ck-meta { color: var(--text-2); font-size: 13px; margin: 2px 0 var(--sp-2); }
.ck-headline { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; font-size: var(--fs-md); }
.ck-sec { margin: 0 0 var(--sp-4); }
.ck-sec h2, .ck-basis > summary { font-size: var(--fs-md); font-weight: 700; margin: 0 0 var(--sp-2); }
.ck-basis > summary { cursor: pointer; color: var(--text-2); }
.ck-list { list-style: none; margin: 0; padding: 0; }
.ck-item { display: flex; gap: var(--sp-2); align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--border); line-height: 1.6; }
.ck-item .ui-pill { flex: none; }
.ck-actions { margin: 0; padding-inline-start: 1.4em; }
.ck-actions li { padding: var(--sp-2) 0; border-bottom: 1px solid var(--border); }
.ck-actions li.lv-act::marker { color: var(--act); font-weight: 700; }
.ck-act-text { font-weight: 600; line-height: 1.6; }
.ck-act-when { color: var(--text-2); font-size: 13px; }
.ck-task { margin-top: 4px; font-size: 13px; padding: 2px 10px; }
.ck-sensor { background: var(--surface-2); border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-3); font-size: 13px; color: var(--text-2); }
.ck-share-url { width: 100%; box-sizing: border-box; padding: 6px 8px; margin: var(--sp-2) 0; border: 1px solid var(--border); border-radius: var(--radius-sm); font: inherit; }
.ck-share-btns { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
@media print {
    body.ck-page .app-header, body.ck-page .app-nav, body.ck-page .page-toolbar-wrapper, body.ck-page .app-footer,
    body.ck-page .ck-task, body.ck-page .share-foot a { display: none !important; }
    body.ck-page .app-main, body.ck-page .page-content { padding: 0 !important; margin: 0 !important; }
    body.ck-page .ck-report { max-width: none; font-size: 12px; }
    body.ck-page .ck-head { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    @page { size: A4; margin: 14mm; }
}
/* 全區健檢（sat-checkup-all.js）與授權 */
.ck-all-stats { margin: var(--sp-2) 0 var(--sp-3); color: var(--act); font-weight: 600; }
.ck-all-table td { vertical-align: top; }
.ck-grant-code { margin-top: var(--sp-4); }
.ck-grant-code > summary { cursor: pointer; font-weight: 600; }
.ck-code { font-size: 28px; font-weight: 700; letter-spacing: 4px; font-family: Consolas, monospace; margin: var(--sp-2) 0; }
.ck-grant-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border); }
@media print { body.ck-page .ck-grant-code, body.ck-page .ui-summary button[aria-pressed] { break-inside: avoid; } body.ck-page .ck-grant-code { display: none; } }
/* 第一次登入精靈（sat-welcome.js） */
.wz { max-width: 760px; margin: var(--sp-5) auto; }
.wz-title { font-size: var(--fs-xl); margin: 0 0 var(--sp-5); line-height: 1.4; }
.wz-step h2 { font-size: var(--fs-lg); margin: var(--sp-4) 0 var(--sp-3); }
.wz-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-3); }
.wz-card { text-align: start; padding: var(--sp-4); border: 2px solid var(--border); border-radius: var(--radius); background: var(--surface); cursor: pointer; font: inherit; }
.wz-card[aria-pressed="true"], .wz-chip[aria-pressed="true"] { border-color: var(--accent); background: var(--good-bg); }
.wz-icon { font-size: 32px; }
.wz-name { font-size: var(--fs-lg); font-weight: 700; margin: var(--sp-1) 0; }
.wz-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.wz-chip { padding: 8px 16px; border: 2px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); cursor: pointer; font: inherit; }
.wz-actions { margin-top: var(--sp-5); display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.wz-actions .sat-note { flex-basis: 100%; }
/* 從「更多分析」移上來的紅燈卡片（sat-analysis.js） */
.sat-card-promoted { box-shadow: inset 4px 0 0 var(--act); }
/* 同一塊監測區同一天的通知合併（sat-notifications.js） */
.sat-notification-group { cursor: pointer; }
.sat-notification-items { margin-top: var(--sp-2); border-inline-start: 3px solid var(--border); padding-inline-start: var(--sp-2); }
/* 手機底部頁籤（_Layout，700 以下才出現；設計師建議：今天／健檢／工作／通知） */
.app-tabbar { display: none; }
@media (max-width: 700px) {
    .app-tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1500; background: var(--surface); border-top: 1px solid var(--border); padding-bottom: env(safe-area-inset-bottom); }
    .app-tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; color: var(--text-2); text-decoration: none; font-size: 12px; }
    .app-tabbar a .dx-icon { font-size: 20px; }
    .app-tabbar a[aria-current="page"] { color: var(--accent); font-weight: 600; }
    body.authenticated .app-body { padding-bottom: 60px; }
    body.authenticated .app-footer { padding-bottom: 64px; }
}
@media print { .app-tabbar { display: none !important; } }
/* 免費版健檢次數用完的提示（sat-checkup.js） */
.ck-limited { background: var(--watch-bg); color: var(--watch); border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-3); font-size: 13px; }
/* 使用條款（Home/Terms） */
.terms { max-width: 760px; line-height: 1.8; }
.terms h1 { font-size: var(--fs-xl); }
.terms h2 { font-size: var(--fs-lg); margin-top: var(--sp-4); }

/* 控制盒卡片（_ControlCard.cshtml，2026-10-31） */
.ui-ctl { border-top: 1px solid var(--border); padding: var(--sp-3) 0; }
.ui-ctl-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.ui-ctl-state { font-size: 0.85em; padding: 1px 8px; border-radius: 10px; background: var(--surface-2); }
.ui-ctl-state.on { background: var(--accent); color: var(--on-color); }
.ui-ctl-gear { margin-inline-start: auto; font-size: 0.85em; }
.ui-ctl-sug { margin: 6px 0; }
.ui-ctl-sug.high { font-weight: 600; color: var(--accent-dark); }
.ui-ctl-act { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.ui-ctl-min { width: 70px; }
.ui-ctl-status { margin-top: 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ui-ctl-steps { display: inline-flex; gap: 4px; }
.ui-ctl-steps span { font-size: 0.8em; padding: 1px 8px; border-radius: 10px; border: 1px solid var(--border); color: var(--muted); }
.ui-ctl-steps span.done { border-color: var(--accent); color: var(--accent-dark); }
.ui-ctl-steps span.bad { border-color: var(--danger); color: var(--danger); }
.ui-ctl-form { display: grid; gap: 8px; margin-top: 8px; max-width: 420px; }
.ui-ctl-form label { display: grid; gap: 2px; font-size: 0.9em; }
.ui-ctl-blocked { color: var(--accent-dark); }

/* 現場照片卡片（_PhotoCard，2026-10-31） */
.ui-photo-strip { display: flex; gap: 8px; overflow-x: auto; padding: 6px 0; }
.ui-photo { margin: 0; flex: 0 0 auto; width: 132px; cursor: pointer; }
.ui-photo img { width: 132px; height: 99px; object-fit: cover; border-radius: 4px; display: block; background: var(--surface-2); }
.ui-photo figcaption { font-size: 0.8em; color: var(--muted); display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.ui-photo.bad img { outline: 2px solid var(--danger); }
.ui-photo-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 2px; border: 1px solid var(--border); vertical-align: middle; margin-inline-end: 4px; }
.ui-photo-alert, .ui-photo-ask, .ui-photo-event { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; padding: var(--sp-3) 0; border-top: 1px solid var(--border); }
.ui-photo-alert p { color: var(--danger); margin: 0; flex: 1 1 200px; }
.ui-photo-ask > div { flex: 1 1 220px; }
.ui-photo-ask p { margin: 0 0 6px; }
.ui-photo-event { display: block; }
.ui-photo-pair { display: flex; gap: 12px; margin: 6px 0; }
.ui-photo-pair .ui-photo, .ui-photo-pair .ui-photo img { width: 180px; }
.ui-photo-pair .ui-photo img { height: 135px; }
.ui-photo-btns { display: flex; gap: 8px; }
.ui-photo-more { margin: 4px 0 8px; }
.ui-photo-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.ui-photo-big { width: 100%; max-height: 70vh; object-fit: contain; display: block; background: var(--surface-2); }
@media (max-width: 480px) { .ui-photo-pair .ui-photo, .ui-photo-pair .ui-photo img { width: 46vw; } .ui-photo-pair .ui-photo img { height: 34vw; } }

/* 報告（2026-10-31，地端數據 2-3）：週報、月報、一期作總結、今晚卡、早報、戰情、供貨、事件報告，共用健檢報告的 ck-* 版面（sat-report.js） */
.rp-report { max-width: 960px; }
.rp-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-2); margin: 0 0 var(--sp-4); }
.rp-kpi { background: var(--surface-2); border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-3); border-top: 3px solid var(--border); }
.rp-kpi.lv-act { border-top-color: var(--act); } .rp-kpi.lv-watch { border-top-color: var(--watch); } .rp-kpi.lv-good { border-top-color: var(--good); }
.rp-kpi-label { color: var(--text-2); font-size: 13px; }
.rp-kpi-value { font-size: 20px; font-weight: 700; line-height: 1.3; }
.rp-kpi-note { color: var(--text-2); font-size: 12px; }
.rp-sec .sat-note { margin: 0 0 var(--sp-2); }
.rp-when { flex: none; color: var(--text-2); font-size: 13px; min-width: 6.5em; }
.rp-item-photo { flex: none; margin-inline-start: auto; }
.rp-item-photo img { width: 64px; height: 48px; object-fit: cover; border-radius: var(--radius-sm); display: block; }
.rp-table-wrap { overflow-x: auto; }
.rp-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.rp-table th, .rp-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: start; vertical-align: top; }
.rp-table th { color: var(--text-2); font-weight: 600; white-space: nowrap; background: var(--surface-2); }
.rp-table tr.rp-total td { font-weight: 700; border-top: 2px solid var(--border); }
.rp-table a { color: var(--accent); }
.rp-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-inline-end: 6px; vertical-align: middle; }
.rp-dot-act { background: var(--act); } .rp-dot-watch { background: var(--watch); }
.rp-photos { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.rp-photos a { width: 160px; color: inherit; text-decoration: none; }
.rp-photos img { width: 160px; height: 120px; object-fit: cover; border-radius: var(--radius-sm); display: block; }
.rp-photos span { display: block; font-size: 12px; color: var(--text-2); margin-top: 2px; }
.rp-final { background: var(--surface-2); border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-3); font-size: 13px; }
.rp-hash { font-family: Consolas, monospace; color: var(--text-2); }
.rp-addendum { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 2px dashed var(--border); }
.rp-compact-head { margin: 0 0 var(--sp-2); }
.rp-card-links { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-2); }
.rp-hub { max-width: 1200px; }
.rp-hub-h { font-size: var(--fs-md); font-weight: 700; margin: var(--sp-4) 0 var(--sp-2); }
.rp-hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-3); }
.rp-hub-card { margin: 0; display: flex; flex-direction: column; }
.rp-hub-card .sat-note { flex: 1; }
.rp-hub-links { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-2); }
.rp-form { margin-bottom: var(--sp-3); }
.rp-form-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-3); }
.rp-del { margin-inline-start: auto; flex: none; font-size: 13px; padding: 2px 10px; }
.rp-incident { max-width: 960px; margin-bottom: var(--sp-4); }
.rp-incident .sat-card { margin-bottom: var(--sp-3); }
@media (max-width: 600px) {
    .rp-kpis { grid-template-columns: repeat(2, 1fr); }
    .rp-kpi-value { font-size: 17px; }
    .rp-table { font-size: 13px; }
    .rp-photos a, .rp-photos img { width: 44vw; } .rp-photos img { height: 33vw; }
    .rp-when { min-width: 0; }
}
@media print {
    body.ck-page .rp-incident, body.ck-page .rp-del, body.ck-page .rp-card-links { display: none !important; }
    body.ck-page .rp-report { max-width: none; }
    body.ck-page .rp-kpi, body.ck-page .rp-dot, body.ck-page .rp-table th { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    body.ck-page .rp-sec, body.ck-page .rp-kpis, body.ck-page .rp-table tr { break-inside: avoid; }
    body.ck-page .rp-addendum { break-before: page; }
}

/* 水質異常監測卡片（2026-10-31，地端數據 3-1，sat-card-water.js） */
.ww-devices { margin: var(--sp-2) 0; }
/* 淹水預警卡片（_FloodCard，3-2） */
.fw-advice { margin: 4px 0 0; padding-inline-start: 1.2em; }
.fw-reply { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin-top: 6px; }
.fw-reply input { flex: 1 1 160px; min-width: 0; padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px; font: inherit; }
.fw-levels { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin: var(--sp-2) 0; }
.ww-devices > summary { cursor: pointer; font-weight: 600; }
.ww-device { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: 4px 0; border-bottom: 1px solid var(--border); }
#waterAdvice { margin: var(--sp-2) 0; }

/* ── 登入頁語言選單（官網的 24 個語言·國家，2026-11-01） ── */
.signin-lang { margin-inline-start: auto; padding: 4px 8px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); font: inherit; max-width: 220px; }

/* ── 客戶回報（2026-11-01）：頂欄「？」、回報視窗、清單、明細 ── */
button.header-help { background: none; border: 0; cursor: pointer; }
.support-popup .sat-note { margin-top: 8px; }
.support-attach { margin-top: 12px; }
.support-attach-buttons { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.support-files-pending { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.support-file-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); font-size: 13px; }
.support-file-remove { border: 0; background: none; cursor: pointer; font-size: 16px; line-height: 1; color: var(--muted); padding: 0 4px; }
.support-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.support-badge { display: inline-block; margin-inline-end: 6px; padding: 0 6px; border-radius: 8px; font-size: 12px; background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); }
.support-badge.urgent { background: var(--act-bg); color: var(--act); border-color: var(--act); }
.support-badge.unread { background: var(--info-bg); color: var(--info); border-color: var(--info); }
.support-status { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 13px; background: var(--surface-2); color: var(--text-2); }
.support-status-new, .support-status-in_progress { background: var(--info-bg); color: var(--info); }
.support-status-wait_reporter { background: var(--watch-bg); color: var(--watch); }
.support-status-fixed, .support-status-deployed { background: var(--good-bg); color: var(--good); }
.support-list .dx-data-row { cursor: pointer; }
.support-detail .sat-card { margin-bottom: 12px; }
.support-detail h3 { margin: 0 0 8px; font-size: 16px; }
.support-title { margin: 0 0 6px; font-size: 20px; }
.support-meta { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.support-category { color: var(--text-2); font-size: 13px; }
.support-info-row { display: flex; gap: 8px; padding: 2px 0; font-size: 14px; }
.support-info-label { color: var(--muted); min-width: 120px; }
.support-msg { padding: 10px 12px; margin-bottom: 8px; border-radius: var(--radius); border: 1px solid var(--border); }
.support-msg-reporter { background: var(--surface); }
.support-msg-staff { background: var(--info-bg); }
.support-msg.internal { background: var(--watch-bg); border-style: dashed; }
.support-msg-status { border: 0; padding: 2px 12px; color: var(--muted); font-size: 13px; }
.support-msg-head { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; }
.support-msg-time { color: var(--muted); font-size: 12px; margin-inline-start: auto; }
.support-msg-body { white-space: pre-wrap; word-break: break-word; }
.support-original { color: var(--muted); font-size: 12px; margin-top: 4px; white-space: pre-wrap; word-break: break-word; }
.support-translate-toggle { background: none; border: 0; padding: 0; margin-top: 4px; color: var(--muted); font-size: 12px; text-decoration: underline; cursor: pointer; }
.support-file { display: inline-flex; flex-direction: column; gap: 2px; margin: 6px 8px 0 0; font-size: 13px; max-width: 220px; vertical-align: top; }
.support-file img { max-width: 220px; max-height: 160px; border: 1px solid var(--border); border-radius: 4px; object-fit: contain; background: var(--surface-2); }
.support-close, .support-reopen, .support-assign { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.support-stars button { border: 0; background: none; cursor: pointer; font-size: 22px; color: var(--border); padding: 0 2px; }
.support-stars button.on { color: var(--yellow); }
.support-client pre { max-height: 360px; overflow: auto; background: var(--surface-2); padding: 8px; font-size: 12px; white-space: pre-wrap; word-break: break-all; }