:root {
  --sage: #7c9473;
  --sage-dark: #5f7556;
  --cream: #faf8f3;
  --card: #ffffff;
  --text: #2c2c2c;
  --text-soft: #6b6b6b;
  --border: #e6e2d8;
  --loss-bg: #fdecea;
  --loss-text: #b3261e;
  --profit-bg: #eef5ec;
  --profit-text: #386641;
  --warn-bg: #fdf3dc;
  --warn-text: #b7791f;
  --suspect: #a8a8a8;
  --radius: 10px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --sage: #8fac84;
    --sage-dark: #6d8863;
    --cream: #1c1f1a;
    --card: #262a23;
    --text: #ece9e2;
    --text-soft: #a9a69c;
    --border: #3a3d35;
    --loss-bg: #3a2323;
    --loss-text: #ff8a80;
    --profit-bg: #23342a;
    --profit-text: #9fd8ab;
    --warn-bg: #3a3120;
    --warn-text: #e8b85a;
    --suspect: #6f6f6f;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--text);
  font-family: -apple-system, "PingFang TC", "Noto Sans TC", sans-serif;
}
#app { min-height: 100vh; }
.topbar {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  padding: 10px 16px; background: var(--sage); color: white; row-gap: 8px;
}
.topbar h1 {
  font-size: 15px; margin: 0; font-weight: 600; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; flex-shrink: 3; min-width: 0;
}
.topbar .user { font-size: 13px; display: flex; align-items: center; gap: 10px; white-space: nowrap; flex-shrink: 0; }
.topbar button { background: rgba(255,255,255,0.15); border: none; color: white; padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 12px; flex-shrink: 0; }
.topbar button:hover { background: rgba(255,255,255,0.3); }

.search-wrap { position: relative; flex: 1 1 160px; min-width: 120px; max-width: 420px; margin: 0 12px; order: 3; }
@media (min-width: 640px) { .search-wrap { order: 0; } }
@media (max-width: 639px) { .search-wrap { flex-basis: 100%; margin: 0; max-width: none; } }
.search-input {
  width: 100%; padding: 7px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.15); color: white; font-size: 13px;
}
.search-input::placeholder { color: rgba(255,255,255,0.75); }
.search-input:focus { outline: none; background: rgba(255,255,255,0.25); }
.search-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; max-height: 400px; overflow-y: auto;
  background: var(--card); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  z-index: 50; text-align: left; color: var(--text);
}
.search-group-title { padding: 8px 14px 4px; font-size: 11px; color: var(--text-soft); font-weight: 600; }
.search-item { padding: 8px 14px; font-size: 13px; cursor: pointer; }
.search-item:hover { background: var(--profit-bg); }
.search-item .search-meta { color: var(--text-soft); font-size: 11px; }
.search-empty { padding: 14px; font-size: 12px; color: var(--text-soft); text-align: center; }

.audit-meta { margin-top: 10px; font-size: 11px; color: var(--text-soft); }

.layout { display: flex; min-height: calc(100vh - 52px); }
.sidebar { width: 260px; border-right: 1px solid var(--border); padding: 16px; }
.main { flex: 1; min-width: 0; padding: 20px 28px; }

.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 16px; }
.card h2 { margin-top: 0; font-size: 15px; }
.card h3 { font-size: 13px; color: var(--text-soft); margin: 0 0 10px; }

.product-list-item { padding: 10px 12px; border-radius: 8px; cursor: pointer; font-size: 14px; margin-bottom: 4px; }
.product-list-item:hover { background: var(--profit-bg); }
.product-list-item.active { background: var(--sage); color: white; }
/* 側欄路線分組（2026-09-30） */
.route-group { margin-bottom: 6px; }
.route-group-head { display: flex; align-items: center; gap: 6px; width: 100%; background: transparent; border: none; padding: 6px 4px; font: inherit; font-size: 12px; font-weight: 600; color: var(--text-soft); cursor: pointer; text-align: left; }
.route-group-head span { margin-left: auto; font-weight: 400; opacity: .7; }
.route-group-head:hover { color: var(--text); }
/* 側欄功能分類（2026-10-02）：標題沿用路線分組的樣式，可收合 */
.nav-group { margin-top: 12px; }
.nav-group-head { display: flex; align-items: center; gap: 6px; width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--border, rgba(0,0,0,.08)); padding: 6px 4px; font: inherit; font-size: 12px; font-weight: 600; color: var(--text-soft); cursor: pointer; text-align: left; }
.nav-group-head:hover { color: var(--text); }
.nav-group-head .nav-group-badge { margin-left: auto; }
.nav-group-body > button { width: 100%; margin-top: 8px; }
/* 批次代碼：產品代碼（固定）＋自訂名稱 */
.batch-code-input { display: flex; align-items: stretch; margin-top: 4px; }
.batch-code-prefix { display: flex; align-items: center; padding: 0 10px; border: 1px solid var(--border); border-right: none; border-radius: 6px 0 0 6px; background: var(--profit-bg); font-weight: 600; white-space: nowrap; }
.batch-code-input input { border-radius: 0 6px 6px 0; margin-top: 0; flex: 1; min-width: 0; }
.dep-card-copy { align-self: flex-end; margin-top: -4px; }
/* 級距標籤與人數不一致（2026-09-30） */
.tier-mismatch input { border-color: var(--loss-text); }
.tier-mismatch-hint { font-size: 11px; color: var(--loss-text); margin-top: 2px; white-space: nowrap; }
/* 操作失敗提示（全域） */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); max-width: min(560px, calc(100vw - 32px)); padding: 12px 16px; border-radius: 8px; background: var(--loss-text); color: #fff; font-size: 14px; box-shadow: 0 6px 20px rgba(0,0,0,.25); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 1000; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.toast-ok { background: #2f6b4a; padding: 8px 18px; font-size: 13.5px; bottom: 64px; }

button.primary { background: var(--sage); color: white; border: none; padding: 8px 14px; border-radius: 6px; cursor: pointer; font-size: 13px; }
button.primary:hover { background: var(--sage-dark); }
button.ghost { background: transparent; border: 1px solid var(--border); padding: 6px 10px; border-radius: 6px; cursor: pointer; font-size: 12px; color: var(--text); }

.table-scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
.table-scroll table { width: max-content; min-width: 100%; }
th, td { border: 1px solid var(--border); padding: 6px 10px; text-align: right; white-space: nowrap; }
/* 表格太寬要橫向捲動時，第一欄（品項/級距名稱）固定在左邊不跟著捲走，
   不然捲去看右邊的欄位/備註時會搞不清楚現在看的是哪一列、哪個級距 */
.table-scroll th:first-child, .table-scroll td:first-child {
  position: sticky; left: 0; z-index: 2; background: var(--card);
}
th:first-child, td:first-child { text-align: left; }
th { background: rgba(124,148,115,0.12); font-weight: 600; }

.tier-loss { background: var(--loss-bg) !important; color: var(--loss-text); font-weight: 600; }
.tier-profit-cell { color: var(--profit-text); }

/* 品項相關的說明/輔助文字統一用這幾個class，取代原本到處散落、字級顏色各自為政的inline style */
.hint-list { list-style: none; padding: 0; margin: 8px 0 0; font-size: 11px; color: var(--text-soft); line-height: 1.7; }
.hint-list li { padding-left: 14px; position: relative; }
.hint-list li::before { content: "·"; position: absolute; left: 2px; }
.hint-list li + li { margin-top: 4px; }
.hint-list b { color: var(--text); font-weight: 600; }

.mode-badge {
  display: inline-block; font-size: 10px; font-weight: 600; padding: 1px 7px;
  border-radius: 20px; background: rgba(124,148,115,0.15); color: var(--sage-dark); white-space: nowrap;
}
.field-row { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-soft); margin-top: 4px; white-space: nowrap; }
.field-row input[type="number"] { width: 84px; }
.field-row input[type="checkbox"] { margin: 0; }
.field-row input, .field-row select { font-size: 11px; padding: 3px 6px; }

.allocated-hint { font-size: 10px; color: var(--text-soft); white-space: nowrap; }

.alert-banner {
  padding: 10px 14px; border-radius: 8px; font-size: 13px; margin-bottom: 14px;
  background: var(--loss-bg); color: var(--loss-text); border: 1px solid var(--loss-text);
}
.alert-banner.ok { background: var(--profit-bg); color: var(--profit-text); border-color: var(--profit-text); }

input, select { border: 1px solid var(--border); border-radius: 6px; padding: 5px 8px; font-size: 13px; background: var(--card); color: var(--text); }
input[type="number"] { width: 90px; text-align: right; }

.login-wrap {
  display: flex; align-items: center; justify-content: center; min-height: 100vh;
  background-image: linear-gradient(rgba(250,248,243,0.35), rgba(250,248,243,0.55)), url('../images/login-bg.jpg');
  background-size: cover;
  background-position: center;
}
@media (prefers-color-scheme: dark) {
  .login-wrap {
    background-image: linear-gradient(rgba(20,22,18,0.55), rgba(20,22,18,0.7)), url('../images/login-bg.jpg');
  }
}
.login-card {
  background: rgba(255,255,255,0.88);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 32px;
  width: 340px;
  text-align: center;
  box-shadow: 0 12px 32px rgba(0,0,0,0.12);
}
@media (prefers-color-scheme: dark) {
  .login-card { background: rgba(38,42,35,0.88); }
}
.login-card h1 { font-size: 17px; }
.login-card p { font-size: 12px; color: var(--text-soft); }

/* 登入頁：歐洲古典華麗風（2026-10-01）——深祖母綠絨面、金色雙框、四角卷草紋、桂冠徽章。淺色／深色模式都用同一套（卡片本身是深色） */
.login-card.ornate {
  --gold: #d4b36a; --gold-soft: #b8964e; --gold-pale: #f0e2b8; --ivory: #f4ecd8;
  position: relative; width: min(400px, calc(100vw - 32px)); padding: 44px 40px 30px; border-radius: 6px;
  color: var(--ivory); font-family: "Noto Serif TC", "Songti TC", "Source Han Serif TC", "PMingLiU", Georgia, serif;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(212,179,106,0.16), transparent 60%),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.018) 0 2px, transparent 2px 6px),
    linear-gradient(160deg, #24453a 0%, #17322a 55%, #0f241e 100%);
  border: 1px solid var(--gold-soft);
  box-shadow: 0 0 0 4px #132a23, 0 0 0 5px var(--gold-soft), 0 24px 60px rgba(0,0,0,0.5), inset 0 0 40px rgba(0,0,0,0.35);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
/* 內層細金框 */
.login-card.ornate::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(212,179,106,0.45); border-radius: 3px; pointer-events: none; }
.login-corner { position: absolute; width: 58px; height: 58px; pointer-events: none; }
.login-corner svg { width: 100%; height: 100%; fill: none; stroke: var(--gold); stroke-width: 1.3; stroke-linecap: round; }
.login-corner svg .dot { fill: var(--gold); stroke: none; }
.login-corner.tl { top: 4px; left: 4px; }
.login-corner.tr { top: 4px; right: 4px; transform: scaleX(-1); }
.login-corner.bl { bottom: 4px; left: 4px; transform: scaleY(-1); }
.login-corner.br { bottom: 4px; right: 4px; transform: scale(-1); }
.login-crest { width: 220px; height: auto; display: block; margin: -6px auto 10px; filter: drop-shadow(0 6px 14px rgba(0,0,0,0.45)); }
.login-wrap:has(.ornate) { padding: 28px 16px; box-sizing: border-box; }
.login-eyebrow { font-family: "Cormorant Garamond", "Didot", "Bodoni 72", Georgia, serif; font-size: 11px; letter-spacing: .42em; color: var(--gold); margin: 2px 0 10px; padding-left: .42em; }
.login-card.ornate h1 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: .14em; line-height: 1.5; color: var(--ivory); text-shadow: 0 1px 0 rgba(0,0,0,0.4); }
.login-card.ornate h1 span { font-size: 15px; font-weight: 400; letter-spacing: .32em; color: var(--gold-pale); padding-left: .32em; }
.login-rule { display: flex; align-items: center; gap: 10px; margin: 14px 0; color: var(--gold); }
.login-rule i { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-soft)); }
.login-rule i:last-child { background: linear-gradient(270deg, transparent, var(--gold-soft)); }
.login-rule b { font-weight: 400; font-size: 16px; line-height: 1; }
.login-rule.small b { font-size: 11px; letter-spacing: .2em; color: var(--gold-soft); }
.login-card.ornate p { font-size: 12px; color: rgba(244,236,216,0.72); line-height: 1.7; margin: 0 0 14px; }
.login-card.ornate a { text-decoration: none; }
.login-card.ornate button { width: 100%; font-family: inherit; font-size: 14px; letter-spacing: .12em; padding: 11px 14px; border-radius: 3px; cursor: pointer; transition: filter .15s, background .15s; }
.login-gold { border: 1px solid #8a6d2f; color: #2a2110; font-weight: 600;
  background: linear-gradient(180deg, #f1dc9c 0%, #d4b36a 48%, #b08a3f 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), 0 2px 8px rgba(0,0,0,0.35); }
.login-gold:hover { filter: brightness(1.07); }
.login-line { background: transparent; border: 1px solid var(--gold-soft); color: var(--gold-pale); }
.login-line:hover { background: rgba(212,179,106,0.12); }
.login-card.ornate button:focus-visible, .login-card.ornate input:focus-visible { outline: 2px solid var(--gold-pale); outline-offset: 2px; }
.login-card.ornate input { width: 100%; margin-bottom: 10px; padding: 10px 12px; font-family: inherit; font-size: 14px; color: var(--ivory);
  background: rgba(8,20,16,0.45); border: 1px solid rgba(212,179,106,0.4); border-radius: 3px; }
.login-card.ornate input::placeholder { color: rgba(244,236,216,0.5); letter-spacing: .1em; }
.login-card.ornate input:focus { border-color: var(--gold); outline: none; box-shadow: 0 0 0 2px rgba(212,179,106,0.25); }
.login-card.ornate input:-webkit-autofill { -webkit-text-fill-color: var(--ivory); box-shadow: 0 0 0 40px #14302a inset; caret-color: var(--ivory); }
.login-card.ornate .login-note { margin: 10px 0 0; font-size: 11px; }
/* 登入錯誤提示（2026-10-04）：紅底＋左側粗紅條＋警告圖示，輸入框同時標紅，出現時輕微抖動一下 */
.login-card.ornate .login-alert { margin: 12px 0 14px; padding: 11px 14px 11px 40px; position: relative; text-align: left; border-radius: 4px;
  background: rgba(176,42,30,0.38); border: 1px solid #ff8f80; border-left: 5px solid #ff6b5a; color: #fff; font-size: 14.5px; line-height: 1.6; animation: login-shake .4s; }
.login-card.ornate .login-alert[hidden] { display: none; }
.login-card.ornate .login-alert::before { content: '!'; position: absolute; left: 11px; top: 12px; width: 20px; height: 20px; border-radius: 50%;
  background: #ff6b5a; color: #fff; font-weight: 700; font-size: 14px; line-height: 20px; text-align: center; }
.login-card.ornate .login-alert b { display: block; font-size: 15.5px; letter-spacing: .05em; }
.login-card.ornate .login-alert small { display: block; margin-top: 2px; font-size: 12.5px; color: #ffd9d3; }
.login-card.ornate input.input-error { border-color: #ff6b5a; box-shadow: 0 0 0 2px rgba(255,107,90,0.35); }
@keyframes login-shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .login-card.ornate .login-alert { animation: none; } }
.login-card.ornate .login-links { margin: 14px 0 0; font-size: 11px; letter-spacing: .1em; }
.login-card.ornate .login-links a { color: var(--gold); }
.login-card.ornate .login-links a:hover { color: var(--gold-pale); text-decoration: underline; }
.login-card.ornate .login-links span { margin: 0 12px; font-size: 7px; color: var(--gold-soft); vertical-align: middle; }
@media (max-width: 420px) {
  .login-card.ornate { padding: 38px 26px 26px; }
  .login-card.ornate h1 { font-size: 19px; }
  .login-card.ornate h1 span { font-size: 13px; letter-spacing: .22em; }
  .login-corner { width: 46px; height: 46px; }
  .login-crest { width: 180px; }
}

.status-badge { padding: 2px 8px; border-radius: 20px; font-size: 11px; }
.status-draft { background: #eee; color: #555; }
.status-submitted { background: #fff3cd; color: #8a6d00; }
.status-approved { background: var(--profit-bg); color: var(--profit-text); }

.tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.tabs button { background: transparent; border: 1px solid var(--border); border-radius: 6px; padding: 6px 12px; font-size: 12px; cursor: pointer; color: var(--text); }
.tabs button.active { background: var(--sage); color: white; border-color: var(--sage); }

/* 報價備註（取代原飯店議價追蹤區塊） */
.notes-area { width: 100%; font: inherit; font-size: 13px; line-height: 1.6; resize: vertical; }
.notes-status { font-size: 11px; font-weight: 400; color: var(--text-soft); margin-left: 8px; }

/* 供應商資料庫 */
.gmap-search { display: flex; gap: 8px; margin: 8px 0; }
.gmap-search input { flex: 1; min-width: 0; }
.gmap-results { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 10px; }
.gmap-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--border); font-size: 13px; }
.gmap-item:last-child { border-bottom: none; }
.supplier-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 10px; margin-top: 8px; font-size: 13px; }
.supplier-form label { display: flex; flex-direction: column; gap: 3px; }
.supplier-form .span2 { grid-column: 1 / -1; }
.supplier-form textarea { font: inherit; width: 100%; }
.note-cell { white-space: pre-wrap; max-width: 260px; font-size: 12px; color: var(--text-soft); }
@media (max-width: 640px) { .gmap-search { flex-direction: column; } }
.supplier-form input, .supplier-form select, .supplier-form textarea, .gmap-search input { width: 100%; min-width: 0; box-sizing: border-box; }
.gmap-search button { flex-shrink: 0; white-space: nowrap; }

/* 報價服務模式（主供應商／本行程自訂服務）與品項供應商 */
.service-mode { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin-top: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius); font-size: 13px; }
.service-mode label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.service-mode select { max-width: 260px; }
.hint-inline { font-size: 11px; color: var(--text-soft); }
.sp { min-width: 150px; }
.sp-input { width: 100%; min-width: 0; box-sizing: border-box; font-size: 12px; }
#sm_supplier { width: 260px; max-width: 100%; }
.service-mode label { flex-wrap: wrap; }
.service-mode label b { white-space: nowrap; }

/* 供應商可搜尋選擇器（清單掛在body，position:fixed避免被表格捲動容器裁掉） */
.sp-list { position: fixed; z-index: 1000; overflow-y: auto; background: var(--card); color: var(--text); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.15); font-size: 13px; padding: 4px 0; }
.sp-group { padding: 6px 10px 2px; font-size: 11px; font-weight: 700; color: var(--sage-dark); }
.sp-opt { padding: 5px 10px 5px 16px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-opt:first-child { padding-left: 10px; color: var(--text-soft); }
.sp-opt.active { background: var(--profit-bg); }
.sp-opt.selected { font-weight: 700; }
.sp-empty { padding: 6px 10px; font-size: 12px; color: var(--text-soft); }

/* 供應商分類管理 */
#catPanel summary { cursor: pointer; }
.cat-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 6px 14px; margin-top: 10px; }
.cat-row { display: flex; align-items: center; gap: 6px; }
.cat-row input { flex: 1; min-width: 0; }

/* 報表分析 */
.suggestions { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 6px; }
.suggestions li { font-size: 13px; line-height: 1.6; padding: 6px 10px; border-radius: 6px; border-left: 3px solid var(--border); background: var(--cream); }
.suggestions .sg-ok { border-left-color: var(--profit-text); background: var(--profit-bg); }
.suggestions .sg-warn { border-left-color: var(--warn-text); background: var(--warn-bg); }
.suggestions .sg-danger { border-left-color: var(--loss-text); background: var(--loss-bg); }
.report-export { display: inline-flex; gap: 8px; margin: 0 0 10px; }
.report-export a { text-decoration: none; }
.report-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; }
.report-panel { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; min-width: 0; }
.report-panel.wide { grid-column: 1 / -1; }
.report-panel-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; font-size: 13px; }
.report-panel-head .tabs { margin: 0; }
.report-panel-head .tabs button { padding: 4px 8px; font-size: 11px; white-space: nowrap; }
.chart-box { position: relative; height: 240px; }
.chart-box.tall { height: 300px; }
.chart-note { font-size: 11px; color: var(--text-soft); margin: 6px 0 0; }
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin-bottom: 12px; }
.kpi { border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 12px; }
.kpi span { display: block; font-size: 11px; color: var(--text-soft); }
.kpi b { font-size: 20px; font-weight: 600; }
.heat-title { font-size: 13px; margin: 14px 0 6px; }
table.heat td { text-align: right; white-space: nowrap; font-size: 12px; }
table.heat td:first-child { text-align: left; }
table.heat td small { display: block; font-size: 10px; opacity: .8; }
table.heat td.heat-ok { background: var(--profit-bg); color: var(--profit-text); }
table.heat td.heat-miss { background: var(--warn-bg); color: var(--warn-text); }
table.heat td.heat-neg { background: var(--loss-bg); color: var(--loss-text); }
table.heat td.heat-suspect { color: var(--text-soft); background: repeating-linear-gradient(45deg, transparent 0 6px, var(--border) 6px 7px); }
table.heat td.heat-na { color: var(--text-soft); text-align: center; }

/* 頭像與個人資料 */
.avatar { border-radius: 50%; object-fit: cover; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
.avatar-initial { color: #fff; font-weight: 600; line-height: 1; }
.topbar .top-user { display: flex; align-items: center; gap: 8px; background: transparent; padding: 2px 8px 2px 2px; border-radius: 20px; }
.topbar .top-user:hover { background: rgba(255,255,255,0.15); }
.topbar .top-user .avatar { box-shadow: 0 0 0 2px rgba(255,255,255,0.7); }
.user-cell { display: flex; align-items: center; gap: 8px; }
.profile-grid { display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-start; }
.profile-avatar { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 140px; }
.profile-fields { flex: 1; min-width: 240px; max-width: 460px; display: flex; flex-direction: column; gap: 8px; }
.profile-fields label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.profile-fields textarea { font: inherit; resize: vertical; }
.ghost-btn { border: 1px solid var(--border); padding: 6px 10px; border-radius: 6px; cursor: pointer; font-size: 12px; color: var(--text); background: transparent; }
.ghost-btn:hover { background: rgba(0,0,0,0.04); }

/* 系統首頁 */
.home-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; align-items: start; }
@media (max-width: 1000px) { .home-grid { grid-template-columns: minmax(0, 1fr); } }
.home-grid .card { margin: 0; }
.home-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.home-head h2 { margin: 0; }
.news-list, .change-list { list-style: none; padding: 0; margin: 8px 0 0; }
.news-list li, .change-list li { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); align-items: flex-start; }
.news-list li:last-child, .change-list li:last-child { border-bottom: none; }
.news-tag { flex-shrink: 0; font-size: 11px; padding: 2px 8px; border-radius: 10px; background: rgba(47,133,90,0.12); color: #2f855a; margin-top: 2px; white-space: nowrap; }
.news-body, .change-body { min-width: 0; flex: 1; font-size: 14px; line-height: 1.5; }
.news-body a { color: var(--text); text-decoration: none; font-weight: 500; overflow-wrap: anywhere; }
.news-body a:hover, .change-body a:hover { text-decoration: underline; }
.change-body a { color: var(--primary, #2b6cb0); text-decoration: none; overflow-wrap: anywhere; }
.news-list .meta, .change-list .meta { font-size: 12px; color: var(--text-soft); margin-top: 2px; }
.kw-editor { margin: 8px 0 12px; padding: 10px; border: 1px dashed var(--border); border-radius: 8px; overflow-x: auto; }
.kw-editor input { width: 100%; box-sizing: border-box; }

/* ─── 手機版（2026-09-27）：主要用途是看報價／毛利、偶爾核准 ─── */
.menu-btn { display: none; }
.mobile-only { display: none; }
.nav-backdrop { display: none; }
.tier-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 12px; }
.tier-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; background: var(--profit-bg); }
.tier-card.loss { background: var(--loss-bg); border-color: var(--loss-text); }
.tier-card-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; }
.tier-card-head span { font-size: 12px; color: var(--text-soft); }
.tier-card-profit { font-size: 20px; font-weight: 700; margin-top: 6px; color: var(--profit-text); }
.tier-card.loss .tier-card-profit, .tier-card.loss .tier-card-pct { color: var(--loss-text); }
.tier-card-pct { font-size: 14px; font-weight: 600; color: var(--profit-text); margin-bottom: 6px; }
.tier-card-row { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-soft); padding-top: 2px; }
.dep-cards { display: none; flex-direction: column; gap: 8px; }
.dep-card { display: flex; flex-direction: column; gap: 4px; text-align: left; width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); color: var(--text); font: inherit; cursor: pointer; }
.dep-card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 15px; }
.dep-card-meta { font-size: 13px; color: var(--text-soft); }

@media (max-width: 760px) {
  .desktop-only { display: none !important; }
  .mobile-only { display: inline; }
  div.mobile-only { display: block; }
  .dep-cards.mobile-only { display: flex; }
  /* 加入主畫面後內容會延伸到瀏海／狀態列下，留出安全區 */
  .topbar { padding: calc(8px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) 8px calc(12px + env(safe-area-inset-left)); position: sticky; top: 0; z-index: 60; }
  .topbar h1 { flex: 1; font-size: 16px; }
  .menu-btn { display: inline-flex; align-items: center; justify-content: center; font-size: 20px !important; padding: 4px 10px !important; margin-right: 8px; }
  .top-user .top-user-name { display: none; }
  .topbar .top-user { padding: 2px; }
  .layout { display: block; min-height: auto; }
  .sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; width: min(300px, 84vw); z-index: 100;
    background: var(--cream); overflow-y: auto; border-right: 1px solid var(--border);
    padding: calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));
    transform: translateX(-105%); transition: transform 0.22s ease; box-shadow: 4px 0 20px rgba(0,0,0,0.15);
  }
  body.nav-open .sidebar { transform: none; }
  body.nav-open .nav-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 90; }
  body.nav-open { overflow: hidden; }
  .main { padding: 12px calc(12px + env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left)); }
  .card { padding: 14px 12px; }
  .product-list-item { padding: 12px; font-size: 15px; }
  /* iOS輸入框字小於16px時一點就自動放大畫面，統一16px */
  input, select, textarea { font-size: 16px !important; }
  button.primary, button.ghost { padding: 9px 14px; font-size: 14px; }
  table { font-size: 12px; }
  th, td { padding: 6px 8px; }
  /* 報價頁：手機上以查看／核准為主，編輯區塊與長說明收起來（電腦版照常） */
  .main[data-view="departure"] .card[data-edit-only],
  .main[data-view="departure"] .hint-list { display: none !important; }
  .home-head { flex-wrap: wrap; }
  .profile-avatar { width: 100%; }
}

/* 講座報名與出席（public/js/lectures.js） */
.lec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.lec-card { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); color: var(--text); font: inherit; cursor: pointer; }
.lec-card:hover, .lec-row:hover { border-color: var(--sage); background: var(--profit-bg); }
.lec-card-date { font-size: 13px; font-weight: 600; color: var(--sage-dark); }
.lec-card-topic { font-size: 15px; font-weight: 600; }
.lec-card-sheet { font-size: 11px; color: var(--text-soft); }
.lec-card-nums { display: flex; gap: 12px; margin-top: 6px; font-size: 12px; color: var(--text-soft); }
.lec-card-nums b { font-size: 18px; color: var(--text); margin-right: 2px; }
.lec-card-nums small, .lec-summary span { display: block; font-size: 11px; }
.lec-row { cursor: pointer; }
.table-scroll table.lec-table { width: 100%; }
.lec-table td, .lec-table th { text-align: left; white-space: normal; }
.lec-table td.num, .lec-table th.num { text-align: right; white-space: nowrap; }
.lec-table td:first-child { white-space: nowrap; }
.lec-error { color: var(--loss-text); background: var(--loss-bg); padding: 6px 10px; border-radius: 6px; font-size: 12px; margin-top: 6px; }
.lec-sheet { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.lec-sheet-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lec-sheet-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ghost-link { font-size: 12px; color: var(--sage-dark); }
button.danger, .chip.danger { color: var(--loss-text); }
.lec-add { margin-top: 14px; }
.lec-sa { word-break: break-all; user-select: all; }
.lec-add-form { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.lec-add-form input { flex: 1 1 200px; min-width: 0; padding: 7px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--card); color: var(--text); }
.lec-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.lec-summary div { background: var(--cream); border-radius: 8px; padding: 8px 10px; }
.lec-summary b { font-size: 20px; }
.lec-toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.lec-toolbar input { flex: 1 1 200px; min-width: 0; padding: 7px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--card); color: var(--text); }
.lec-filters, .lec-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.chip { border: 1px solid var(--border); background: var(--card); color: var(--text); border-radius: 16px; padding: 4px 12px; font-size: 12px; cursor: pointer; }
.chip.active { background: var(--sage); border-color: var(--sage); color: #fff; }
.lec-list { display: flex; flex-direction: column; gap: 8px; }
.lec-reg { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.lec-reg.removed { opacity: .55; }
.lec-reg-head { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.lec-party { font-size: 12px; color: var(--text-soft); }
.lec-tag { font-size: 11px; background: var(--warn-bg); color: var(--warn-text); border-radius: 10px; padding: 1px 7px; margin-left: 4px; }
.lec-reg-meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--text-soft); }
.lec-reg-meta a { color: var(--sage-dark); }
.lec-count { font-size: 12px; display: inline-flex; align-items: center; gap: 4px; }
.lec-count input { width: 56px; padding: 3px 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--card); color: var(--text); }
.lec-note { width: 100%; box-sizing: border-box; padding: 6px 10px; border: 1px dashed var(--border); border-radius: 6px; background: transparent; color: var(--text); font-size: 12px; }
.lec-note.saved { border-style: solid; border-color: var(--sage); }
.lec-st-registered { background: var(--warn-bg); color: var(--warn-text); }
.lec-st-confirmed { background: #e3ecfb; color: #2f5fb3; }
.lec-st-attended { background: var(--profit-bg); color: var(--profit-text); }
.lec-st-noshow { background: var(--loss-bg); color: var(--loss-text); }
.lec-st-cancelled { background: var(--border); color: var(--text-soft); }
@media (prefers-color-scheme: dark) { .lec-st-confirmed { background: #22314a; color: #9dbcf2; } }
@media (max-width: 760px) {
  .lec-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chip { padding: 7px 12px; font-size: 13px; }
}
.lec-picker-box { width: 100%; margin-top: 10px; padding: 10px 12px; background: var(--cream); border-radius: 8px; }
.lec-picker-tools { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.lec-picker { display: flex; flex-direction: column; gap: 2px; max-height: 360px; overflow-y: auto; margin-bottom: 8px; }
.lec-pick { display: grid; grid-template-columns: auto auto 1fr auto; gap: 8px; align-items: center; padding: 6px 4px; border-bottom: 1px solid var(--border); font-size: 13px; cursor: pointer; }
.lec-pick.past .lec-pick-date, .lec-pick.past .lec-pick-topic { color: var(--text-soft); }
.lec-pick-date { white-space: nowrap; font-weight: 600; }
@media (max-width: 760px) { .lec-pick { grid-template-columns: auto 1fr; } .lec-pick .hint-inline { grid-column: 2; } .lec-pick-topic { grid-column: 2; } }

/* 角色權限／個人權限（帳號權限管理頁，public/js/permissions.js） */
.ua-tabs { flex-wrap: wrap; }
.ua-tabs button { font-size: 13px; padding: 7px 14px; }
.perm-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.perm-head h2 { margin-bottom: 4px; }
.perm-view { margin: 4px 0 0; }
.dept-group { margin: 10px 0 2px; }
.dept-title { font-size: 13px; font-weight: 700; color: var(--sage, #6b7f5e); letter-spacing: .5px; }
.dept-group .role-pills { margin: 6px 0 4px; }
.role-pills { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 10px; }
.role-pill { border: 1px solid var(--border); background: var(--card); color: var(--text); border-radius: 20px; padding: 7px 16px; font-size: 14px; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.role-pill.active { background: var(--sage); border-color: var(--sage); color: #fff; }
.role-pill.active .perm-changed { background: rgba(255,255,255,.85); }
.role-summary { background: var(--profit-bg); border-radius: var(--radius); padding: 10px 14px; font-size: 13px; line-height: 1.6; margin-bottom: 6px; }
.perm-section { margin-top: 14px; }
.perm-section h4 { margin: 0 0 4px; font-size: 13px; color: var(--sage-dark); border-bottom: 1px solid var(--border); padding-bottom: 4px; }
.perm-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 4px; border-bottom: 1px dashed var(--border); }
.perm-row.child { padding-left: 22px; }
.perm-row.na { opacity: .55; }
.perm-row.overridden { background: var(--warn-bg); border-radius: 6px; }
.perm-label { font-size: 14px; }
.perm-state { font-size: 12px; color: var(--text-soft); white-space: nowrap; }
.perm-on { color: var(--profit-text); }
.perm-off { color: var(--text-soft); }
.perm-changed { font-size: 10px; color: var(--warn-text); background: var(--warn-bg); border-radius: 8px; padding: 1px 6px; font-weight: normal; margin-left: 4px; }
.perm-warn { color: var(--warn-text); }
.perm-footer { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 14px; }
.perm-locked { margin-top: 18px; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius); font-size: 12px; color: var(--text-soft); line-height: 1.8; }
.perm-locked h4 { margin: 0 0 4px; font-size: 12px; color: var(--text); }
.perm-error { color: var(--loss-text); font-size: 12px; }
.perm-saved { position: fixed; right: 20px; bottom: 20px; background: var(--sage-dark); color: #fff; padding: 8px 16px; border-radius: 20px; font-size: 13px; opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 50; }
.perm-saved.show { opacity: 1; }
.perm-table { min-width: 560px; }
.perm-table th { font-size: 12px; white-space: nowrap; }
.perm-table .perm-group td { background: var(--cream); font-weight: 600; font-size: 12px; color: var(--sage-dark); }
.perm-table td.perm-child { padding-left: 22px; }
.perm-cell { text-align: center; white-space: nowrap; }
.perm-na { color: var(--suspect); font-size: 12px; }
.perm-user { border: 2px solid var(--sage); margin-top: 16px; }
/* 開關按鈕 */
.switch { position: relative; display: inline-block; width: 42px; height: 24px; flex: none; cursor: pointer; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch span { position: absolute; inset: 0; background: var(--suspect); border-radius: 12px; transition: background .15s; }
.switch span::before { content: ''; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .15s; }
.switch input:checked + span { background: var(--sage); }
.switch input:checked + span::before { transform: translateX(18px); }
.switch input:focus-visible + span { outline: 2px solid var(--sage-dark); outline-offset: 2px; }
.switch.disabled { opacity: .5; cursor: not-allowed; }
/* 三段選擇（跟角色／開／關） */
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; flex: none; }
.seg button { background: var(--card); border: none; border-left: 1px solid var(--border); padding: 6px 10px; font-size: 12px; cursor: pointer; color: var(--text); white-space: nowrap; }
.seg button:first-child { border-left: none; }
.seg button.active { background: var(--sage); color: #fff; }
@media (max-width: 760px) {
  .perm-row { flex-wrap: wrap; }
  .perm-user .perm-row .seg { width: 100%; }
  .perm-user .perm-row .seg button { flex: 1; padding: 8px 6px; font-size: 13px; }
}
/* FB/IG訊息收件匣 */
.inb-head { display: flex; flex-direction: column; gap: 10px; }
.inb-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.inb-err { color: var(--loss-text); }
.inb-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.inb-filters input { flex: 1; min-width: 160px; }
.inb-layout { display: grid; grid-template-columns: minmax(260px, 360px) minmax(0, 1fr); gap: 12px; align-items: start; }
.inb-list { padding: 6px; max-height: calc(100vh - 220px); overflow-y: auto; }
.inb-count { padding: 6px 8px; }
.inb-row { display: block; width: 100%; text-align: left; padding: 10px; border: 1px solid transparent; border-radius: 8px; background: none; color: var(--text); font: inherit; cursor: pointer; }
.inb-row:hover { background: var(--profit-bg); }
.inb-row.active { border-color: var(--sage); background: var(--profit-bg); }
.inb-row.unread .inb-name { font-weight: 700; }
.inb-row-top { display: flex; align-items: center; gap: 6px; }
.inb-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inb-time { font-size: 11px; color: var(--text-soft); flex: none; }
.inb-snippet { font-size: 12px; color: var(--text-soft); margin: 3px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inb-row-meta { display: flex; gap: 8px; align-items: center; font-size: 11px; }
.inb-pf { display: inline-block; font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 4px; color: #fff; flex: none; }
.inb-pf-messenger { background: #1877f2; }
.inb-pf-instagram { background: #c13584; }
.inb-st { padding: 1px 6px; border-radius: 4px; }
.inb-st-new { background: var(--warn-bg); color: var(--warn-text); font-weight: 600; }
.inb-st-progress { background: #e3ecfb; color: #2f5fb3; }
.inb-st-done { background: var(--profit-bg); color: var(--profit-text); }
@media (prefers-color-scheme: dark) { .inb-st-progress { background: #22314a; color: #9dbcf2; } }
.inb-badge { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--loss-text); color: #fff; font-size: 11px; line-height: 18px; text-align: center; margin-left: 4px; }
.inb-detail { display: flex; flex-direction: column; gap: 10px; min-height: 300px; }
.inb-d-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.inb-back { display: none; }
.inb-assign { font-size: 12px; display: flex; align-items: center; gap: 4px; margin-left: auto; }
.inb-note { width: 100%; }
/* 第二版：廣告來源、FB/IG同一位客人連結 */
.inb-archive { margin-top: 6px; }
.inb-reply-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.inb-reply-tools select { flex: 1; min-width: 160px; }
.inb-suggest { display: flex; flex-direction: column; gap: 8px; margin: 6px 0; }
.inb-sg { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; background: var(--card); }
.inb-sg-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; font-size: 13px; }
.inb-sg-text { font-size: 13px; line-height: 1.6; white-space: normal; }
.inb-archive:empty { display: none; }
.inb-await { color: var(--warn-text); font-weight: 600; }
.inb-ad { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-soft); }
.inb-source, .inb-linked { font-size: 12px; padding: 6px 8px; border: 1px dashed var(--border); border-radius: 6px; margin: 6px 0; display: flex; flex-direction: column; gap: 4px; }
.inb-linked-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.inb-linked button.small, .inb-linked-row button.small { padding: 2px 8px; font-size: 12px; }
.inb-link-pick { display: flex; flex-direction: column; gap: 6px; }
.inb-link-pick > div { max-height: 260px; overflow-y: auto; }
.inb-msgs { display: flex; flex-direction: column; gap: 8px; max-height: calc(100vh - 420px); min-height: 200px; overflow-y: auto; padding: 8px; background: var(--cream); border-radius: 8px; }
.inb-msg { display: flex; flex-direction: column; max-width: 78%; }
.inb-msg.in { align-self: flex-start; }
.inb-msg.out { align-self: flex-end; align-items: flex-end; }
.inb-bubble { padding: 8px 12px; border-radius: 14px; background: var(--card); border: 1px solid var(--border); font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.inb-msg.out .inb-bubble { background: var(--sage); border-color: var(--sage); color: #fff; }
.inb-msg.out .inb-bubble a { color: #fff; }
.inb-msg-meta { font-size: 10px; color: var(--text-soft); margin-top: 2px; }
.inb-img { max-width: 220px; max-height: 220px; border-radius: 8px; display: block; margin-top: 4px; }
.inb-reply { display: flex; flex-direction: column; gap: 6px; }
.inb-reply textarea { width: 100%; resize: vertical; font: inherit; }
.inb-reply-bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.inb-window { font-size: 12px; padding: 4px 8px; border-radius: 6px; }
.inb-window.ok { background: var(--profit-bg); color: var(--profit-text); }
.inb-window.urgent { background: var(--warn-bg); color: var(--warn-text); font-weight: 600; }
.inb-window.closed { background: var(--loss-bg); color: var(--loss-text); }
.inb-tpl { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid var(--border); border-radius: 8px; }
.inb-tpl textarea { width: 100%; resize: vertical; font: inherit; }
@media (max-width: 900px) {
  .inb-layout { grid-template-columns: minmax(0, 1fr); }
  .inb-layout.inb-show-detail .inb-list { display: none; }
  .inb-layout:not(.inb-show-detail) .inb-detail { display: none; }
  .inb-back { display: inline-block; }
  .inb-list { max-height: none; }
  .inb-msgs { max-height: 60vh; }
  .inb-msg { max-width: 90%; }
  .inb-assign { margin-left: 0; }
}
.inb-msg.out.auto .inb-bubble { background: var(--cream); border: 1px dashed var(--border); color: var(--text-soft); }
.inb-msg.out.auto .inb-bubble a { color: var(--sage-dark); }

/* 個人權限「只閱讀」（2026-09-30） */
.perm-section-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.perm-ro-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 400; color: var(--text-soft); }
.perm-readonly { background: var(--profit-bg); border-radius: var(--radius); padding: 4px 8px; }
.perm-ro-note { margin: 0 0 6px; }
.perm-changed.perm-ro { background: var(--sage); color: #fff; }

/* LINE訊息收件匣（2026-10-01，沿用inb-*版面） */
.inb-pf-line { background: #06c755; color: #fff; }
.linb-event { text-align: center; margin: 6px 0; }

/* LINE好友經營（2026-10-01） */
.linb-tags { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin: 6px 0; }
.lcrm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px 20px; }
.lcrm-filter { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; margin: 6px 0; font-size: 13px; }
.lcrm-filter b { min-width: 64px; }
.lcrm-result { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0 4px; }
.lcrm-pub { margin: 8px 0 12px; font-size: 13px; }
.lcrm-menu-wrap { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(280px, 1.3fr); gap: 16px; }
.lcrm-menu-wrap label { display: block; margin-bottom: 8px; font-size: 13px; }
.lcrm-preview { display: grid; width: 100%; background: #e9ece6 center / cover no-repeat; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; margin-top: 6px; }
.lcrm-preview div { border: 1px dashed rgba(0, 0, 0, .35); display: flex; align-items: flex-end; justify-content: center; padding: 4px; }
.lcrm-preview span { background: rgba(255, 255, 255, .85); color: #333; font-size: 11px; padding: 1px 6px; border-radius: 10px; }
.lcrm-btn { display: grid; gap: 4px; border: 1px solid var(--border); border-radius: 6px; padding: 8px; margin-bottom: 8px; }
.lcrm-btn input, .lcrm-btn select, .lcrm-btn textarea, .lcrm-field textarea { width: 100%; box-sizing: border-box; }
.lcrm-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.lcrm-field { display: block; margin: 10px 0; }
.lcrm-field .hint-inline { margin-left: 8px; }
.lcrm-switch { display: block; margin: 10px 0; }
.lcrm-newlink { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 10px 0; }
.lcrm-newlink span { display: contents; }
.lcrm-archived { opacity: .5; }
@media (max-width: 720px) { .lcrm-menu-wrap { grid-template-columns: 1fr; } }

/* ─── 行事曆與白板（2026-10-01） ─── */
:root {
  --cal-departure: #7c9473; --cal-lecture: #c08a3e; --cal-task: #5b7fa6;
  --cal-leave: #b0707a; --cal-meeting: #8a6fae; --cal-card: #4f9a94;
}
@media (prefers-color-scheme: dark) {
  :root { --cal-departure: #8fac84; --cal-lecture: #d9a65a; --cal-task: #7fa1c8; --cal-leave: #cf8f99; --cal-meeting: #a98ccb; --cal-card: #6fbab3; }
}
.cal-t-departure { --c: var(--cal-departure); } .cal-t-lecture { --c: var(--cal-lecture); } .cal-t-task { --c: var(--cal-task); }
.cal-t-leave, .cal-t-hrLeave { --c: var(--cal-leave); } .cal-t-meeting { --c: var(--cal-meeting); } .cal-t-card { --c: var(--cal-card); }
.home-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cal-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--c); flex-shrink: 0; }
.cal-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 3px 10px; border-radius: 12px; border: 1px solid var(--c);
  background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--text); cursor: pointer; font-family: inherit; }
.cal-chip.off { background: transparent; opacity: .45; text-decoration: line-through; }
/* 首頁今日事件小卡 */
.calw-agenda-head { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 600; color: var(--text-soft); margin: 12px 0 4px; }
.calw-agenda-date { font-size: 12px; color: var(--text-soft); margin: 8px 0 2px; }
.ghost-link { background: none; border: none; cursor: pointer; padding: 2px 4px; font-family: inherit; }
.cal-row { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: transparent; border: none; border-radius: 6px; padding: 6px 6px; cursor: pointer; font: inherit; font-size: 13px; color: var(--text); }
.cal-row:hover { background: var(--profit-bg); }
.cal-row-time { font-size: 11px; color: var(--text-soft); min-width: 64px; flex-shrink: 0; }
.cal-row-title { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.cal-row-title.done, .cal-bar.done { text-decoration: line-through; opacity: .6; }
.cal-sync-err { color: var(--warn-text); }
/* 完整行事曆 */
.cal-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.cal-toolbar h2 { margin: 0 8px 0 0; }
.cal-nav { display: flex; align-items: center; gap: 6px; }
.cal-title { margin-left: 6px; font-size: 15px; }
.cal-modes { display: flex; gap: 0; }
.cal-modes button { border-radius: 0; }
.cal-modes button:first-child { border-radius: 6px 0 0 6px; }
.cal-modes button:last-child { border-radius: 0 6px 6px 0; border-left: none; }
.cal-modes button.active, button.ghost.active { background: var(--sage); color: #fff; border-color: var(--sage); }
.cal-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.calm-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--border); border-left: 1px solid var(--border); }
.calm-wd { font-size: 12px; color: var(--text-soft); text-align: center; padding: 4px 0; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); background: rgba(124,148,115,0.08); }
.calm-day { min-height: 96px; padding: 4px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); cursor: pointer; min-width: 0; }
.calm-day:hover { background: rgba(124,148,115,0.06); }
.calm-day.other { background: rgba(0,0,0,0.025); }
.calm-day.other .calm-num { opacity: .5; }
.calm-day.sel { box-shadow: inset 0 0 0 2px var(--sage); }
.calm-num { font-size: 12px; margin-bottom: 2px; }
.calm-day.today .calm-num { display: inline-block; background: var(--sage); color: #fff; border-radius: 10px; padding: 0 7px; }
.calm-items { display: flex; flex-direction: column; gap: 2px; }
.cal-bar { display: block; width: 100%; text-align: left; border: none; border-left: 3px solid var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--text);
  font: inherit; font-size: 11px; padding: 2px 4px; border-radius: 3px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-bar small { color: var(--text-soft); }
.calm-more { font-size: 11px; color: var(--text-soft); padding-left: 4px; }
.calm-dots { display: none; gap: 2px; justify-content: center; flex-wrap: wrap; }
.cal-dayview { margin-top: 14px; }
.cal-dayview-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.calwk { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.calwk-day { border: 1px solid var(--border); border-radius: 8px; padding: 6px; min-width: 0; min-height: 140px; }
.calwk-day.today { border-color: var(--sage); box-shadow: inset 0 0 0 1px var(--sage); }
.calwk-head { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 600; margin-bottom: 4px; }
.calwk .cal-row { display: block; padding: 4px; border-left: 3px solid var(--c); border-radius: 3px; margin-bottom: 4px; background: color-mix(in srgb, var(--c) 10%, transparent); }
.calwk .cal-row .cal-dot { display: none; }
.calwk .cal-row-time { display: block; min-width: 0; }
.calwk .cal-row-title { display: block; margin-top: 1px; }
/* 彈出視窗（行事曆、白板共用） */
.hy-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.35); display: flex; align-items: center; justify-content: center; z-index: 900; padding: 16px; }
.hy-modal { background: var(--card); border-radius: 12px; border: 1px solid var(--border); width: min(460px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; padding: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.hy-modal.wide { width: min(640px, 100%); }
.hy-modal-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.hy-modal-title { font-size: 16px; margin: 10px 0; color: var(--text); overflow-wrap: anywhere; }
.hy-modal-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
button.ghost.danger { color: var(--loss-text); border-color: var(--loss-text); }
.cal-detail { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 13px; margin: 0; }
.cal-detail dt { color: var(--text-soft); }
.cal-detail dd { margin: 0; overflow-wrap: anywhere; }
.cal-form { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.cal-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.cal-form label[hidden], .cal-form [hidden] { display: none; }
.cal-form textarea { font: inherit; border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; background: var(--card); color: var(--text); resize: vertical; }
.cal-form-row { display: flex; gap: 10px; flex-wrap: wrap; }
.cal-form-row > label { flex: 1; min-width: 120px; }
.cal-kinds { display: flex; gap: 6px; flex-wrap: wrap; }
.cal-form .cal-kind { flex-direction: row; align-items: center; gap: 4px; border: 1px solid var(--border); border-radius: 16px; padding: 4px 10px; cursor: pointer; }
.cal-form .cal-kind:has(input:checked) { border-color: var(--sage); background: var(--profit-bg); }
.cal-form .cal-check { flex-direction: row; align-items: center; gap: 6px; }
.cal-form-err { color: var(--loss-text); font-size: 13px; margin: 0; min-height: 1em; }
/* 白板 */
.brd-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 8px; }
.brd-col { background: rgba(124,148,115,0.07); border-radius: 10px; padding: 8px; min-width: 0; }
.brd-col-head { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; padding: 2px 4px 8px; }
.brd-col-head span { color: var(--text-soft); font-weight: 400; }
.brd-list { display: flex; flex-direction: column; gap: 8px; min-height: 60px; border-radius: 8px; transition: background .15s; }
.brd-list.over { background: rgba(124,148,115,0.15); }
.brd-card { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; cursor: pointer; font-size: 13px; }
.brd-card:hover { border-color: var(--sage); }
.brd-card[draggable="true"] { cursor: grab; }
.brd-card.dragging { opacity: .4; }
.brd-card.done .brd-card-title { text-decoration: line-through; color: var(--text-soft); }
.brd-card-title { font-weight: 500; overflow-wrap: anywhere; }
.brd-labels { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.brd-label { font-size: 11px; padding: 1px 8px; border-radius: 10px; background: color-mix(in srgb, var(--cal-card) 16%, transparent); color: var(--text); }
.brd-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 6px; font-size: 11px; color: var(--text-soft); }
.brd-meta span { overflow-wrap: anywhere; }
.brd-due.soon { color: var(--warn-text); font-weight: 600; }
.brd-due.overdue { color: var(--loss-text); font-weight: 600; }
.brd-move { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; margin-top: 12px; }
.home-mine .brd-due { font-size: 11px; white-space: nowrap; }
@media (max-width: 760px) {
  .calm-day { min-height: 46px; padding: 2px; }
  .calm-items { display: none; }
  .calm-dots { display: flex; }
  .calm-num { text-align: center; }
  .calm-day.today .calm-num { display: block; width: fit-content; margin: 0 auto 2px; }
  .calwk { grid-template-columns: minmax(0, 1fr); }
  .calwk-day { min-height: 0; }
  .brd-cols { grid-template-columns: minmax(0, 1fr); }
  .cal-title { flex-basis: 100%; margin: 4px 0 0; }
  .cal-nav { flex-wrap: wrap; }
}

/* 競品價格追蹤（2026-10-01） */
.cmp-inline { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-soft); }
.cmp-warn { color: var(--warn-text); }
.cmp-company-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.cmp-company-head h2 { margin: 0; }
.cmp-tier, .cmp-tag { font-size: 11px; padding: 1px 8px; border-radius: 10px; border: 1px solid var(--border); color: var(--text-soft); white-space: nowrap; }
.cmp-tier-direct { border-color: var(--sage); color: var(--sage-dark); background: var(--profit-bg); }
.cmp-notes { font-size: 12px; color: var(--text-soft); margin: 4px 0 8px; white-space: pre-wrap; overflow-wrap: anywhere; }
.cmp-prod { border-top: 1px solid var(--border); padding: 12px 0 4px; }
.cmp-prod.inactive { opacity: .6; }
.cmp-prod-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.cmp-checked { margin-left: auto; font-size: 11px; color: var(--text-soft); white-space: nowrap; }
/* 競品追蹤第一階段（2026-10-14）：待更新清單、價格口徑、請複核 */
/* 路線比較（第三階段） */
.cmpcmp-hys { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin: 8px 0; padding: 8px 10px; background: var(--surface-2, rgba(124,148,115,0.10)); border-radius: 8px; }
.cmpcmp-hy { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.cmpcmp-table td { vertical-align: top; }
.cmp-ref-tier { opacity: 0.8; }
.cmpcmp-ai h4 { margin: 12px 0 4px; }
.cmpcmp-ai ul { margin: 4px 0 8px; padding-left: 18px; }
/* 競品廣告（第二階段） */
.cmp-mode { display: inline-flex; gap: 4px; margin-left: 8px; }
.cmpad { border-top: 1px solid var(--border); padding: 10px 0; }
.cmpad.ended { opacity: 0.7; }
.cmpad-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cmpad-run { margin-left: auto; font-size: 12px; color: var(--text-soft); white-space: nowrap; }
.cmpad-title { font-weight: 600; margin: 4px 0; }
.cmpad-body summary { cursor: pointer; font-size: 13px; color: var(--text); }
.cmpad-body p { margin: 6px 0; font-size: 13px; white-space: normal; }
.cmpad-foot { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; font-size: 12px; }
.cmp-todo h3 { display: flex; align-items: center; gap: 8px; margin-top: 0; }
.cmp-todo-n { background: var(--warn-text); color: #fff; border-radius: 999px; font-size: 12px; padding: 0 8px; }
.cmp-todo-list { list-style: none; margin: 0; padding: 0; }
.cmp-todo-list li { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 6px 0; border-top: 1px solid var(--border); }
.cmp-todo-list .cmp-checked { margin-left: 0; }
.cmp-todo-links { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }
.cmp-basis { font-size: 12px; color: var(--text-soft); margin: 4px 0 8px; }
.cmp-basis.unknown { color: var(--warn-text); }
.cmp-verify { font-size: 11px; color: var(--loss-text); font-weight: 600; white-space: nowrap; }
.cmp-checked.stale { color: var(--warn-text); font-weight: 600; }
.cmp-ref { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; font-size: 13px; margin: 6px 0 8px; }
.cmp-diff { font-weight: 600; }
.cmp-diff.cheaper { color: var(--loss-text); }
.cmp-diff.pricier { color: var(--profit-text); }
.table-scroll table.cmp-table { width: 100%; }
.cmp-table { border-collapse: collapse; font-size: 13px; }
.cmp-table th, .cmp-table td { padding: 5px 10px; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; }
.cmp-table th { font-size: 11px; color: var(--text-soft); font-weight: 600; }
.cmp-table .cmp-num { text-align: right; font-variant-numeric: tabular-nums; }
.cmp-table tr.cmp-removed td { color: var(--text-soft); text-decoration: line-through; }
.cmp-table tr.cmp-removed td:nth-child(n+3) { text-decoration: none; }
.cmp-chg { color: var(--warn-text); font-weight: 600; font-size: 12px; }
.cmp-st-open, .cmp-st-confirmed { background: var(--profit-bg); color: var(--profit-text); }
.cmp-st-full, .cmp-st-waitlist { background: var(--loss-bg); color: var(--loss-text); }
.cmp-st-closed, .cmp-st-removed, .cmp-st-unknown { border: 1px solid var(--border); color: var(--text-soft); }
.cmp-prod-actions { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 6px; }
.cmp-changes { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.cmp-changes li { display: flex; flex-wrap: wrap; gap: 2px 12px; padding: 5px 0; border-bottom: 1px solid var(--border); }
.cmp-changes li:last-child { border-bottom: none; }
.cmp-chg-date { color: var(--text-soft); font-size: 12px; min-width: 38px; display: inline-block; margin-right: 6px; }
.cmp-chg-text { font-weight: 600; }
.cmp-company-list { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.cmp-company-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.cmp-fieldset { border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px 12px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cmp-fieldset legend { font-size: 12px; color: var(--text-soft); padding: 0 6px; }
.cmp-json { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; width: 100%; box-sizing: border-box; border: 1px solid var(--border); border-radius: 6px; padding: 8px; background: var(--card); color: var(--text); resize: vertical; }
.cmp-format { font-size: 12px; margin: 8px 0; }
.cmp-format summary { cursor: pointer; color: var(--sage-dark); }
.cmp-format pre { overflow-x: auto; background: var(--profit-bg); padding: 8px; border-radius: 6px; font-size: 11px; }
.cmp-format ul, .cmp-preview-item ul, .cmp-hist ul { margin: 4px 0; padding-left: 18px; }
.cmp-preview-sum { font-size: 13px; margin: 10px 0 6px; }
.cmp-preview-item { font-size: 13px; border-top: 1px solid var(--border); padding: 8px 0; }
.cmp-preview-item li, .cmp-hist li { font-size: 12px; margin: 2px 0; }
.cmp-k-skipped { color: var(--text-soft); }
.cmp-hist { border-top: 1px solid var(--border); padding: 8px 0; font-size: 13px; }
.cmp-hist.past { opacity: .65; }
.cmp-hist-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cmp-quote .home-head { margin-bottom: 8px; }
@media (max-width: 760px) {
  .cmp-checked { margin-left: 0; width: 100%; }
  .cmp-table th, .cmp-table td { padding: 5px 6px; }
}

/* 競品：路線分頁、對手屬性篩選與分區（2026-10-02） */
.cmp-tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--border); margin: 4px 0 10px; }
.cmp-tab { background: transparent; border: none; border-bottom: 3px solid transparent; padding: 8px 12px; font: inherit; font-size: 14px; color: var(--text-soft); cursor: pointer; margin-bottom: -1px; }
.cmp-tab span { margin-left: 6px; font-size: 11px; padding: 0 6px; border-radius: 9px; background: var(--border); color: var(--text-soft); }
.cmp-tab:hover { color: var(--text); }
.cmp-tab.active { color: var(--sage-dark); border-bottom-color: var(--sage); font-weight: 600; }
.cmp-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.cmp-chip { background: transparent; border: 1px solid var(--border); border-radius: 16px; padding: 3px 12px; font: inherit; font-size: 12px; color: var(--text); cursor: pointer; }
.cmp-chip.active { border-color: var(--sage); background: var(--profit-bg); color: var(--sage-dark); font-weight: 600; }
.cmp-chip:disabled { opacity: .45; cursor: default; }
.cmp-route-title { font-size: 17px; margin: 22px 0 8px; display: flex; align-items: baseline; gap: 10px; }
.cmp-route-title span { font-size: 12px; font-weight: 400; color: var(--text-soft); }
.cmp-tier-sec { margin-bottom: 8px; }
.cmp-tier-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; font-weight: 600; margin: 12px 0 8px; padding-left: 8px; border-left: 3px solid var(--sage); }
.cmp-tier-head .cmp-tier { font-size: 12px; padding: 2px 10px; }
.cmp-empty-cos { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; margin: 0; }
.cmp-drop { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; border: 2px dashed var(--border); border-radius: 10px; padding: 14px; margin: 10px 0; }
.cmp-drop.over { border-color: var(--sage); background: var(--profit-bg); }

/* ===== 團務核訂（2026-10-02，public/js/tours.js） ===== */
.tops-filters { display: flex; gap: 8px 14px; flex-wrap: wrap; align-items: center; margin: 8px 0 12px; }
.table-scroll table.tops-table { width: 100%; }
.tops-table { border-collapse: collapse; font-size: 13px; }
.tops-table th, .tops-table td { padding: 6px 10px; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; vertical-align: top; }
.tops-table th { font-size: 11px; color: var(--text-soft); font-weight: 600; }
.tops-table tbody tr[data-open-tour] { cursor: pointer; }
.tops-table tbody tr[data-open-tour]:hover td { background: var(--profit-bg); }
.tops-table .tops-num { text-align: right; font-variant-numeric: tabular-nums; }
.tops-table td.tops-wrap { white-space: normal; min-width: 140px; max-width: 280px; overflow-wrap: anywhere; }
.tops-table td.tops-actions { text-align: right; }
.tops-table td.tops-actions button { margin-left: 4px; padding: 4px 8px; font-size: 12px; }
.tops-table tr.tops-cancelled td, .tops-table tr.tops-bk-rejected td, .tops-table tr.tops-bk-declined td { color: var(--text-soft); }
.tops-table tr.tops-bk-confirmed td:first-child { box-shadow: inset 3px 0 0 var(--sage); }
.tops-all-ok { color: var(--profit-text); font-weight: 600; }
.tops-over-text { color: var(--loss-text); }
.tops-next.overdue { color: var(--loss-text); font-weight: 600; }
.tops-next.soon { color: var(--warn-text); font-weight: 600; }
/* 狀態標籤：團／項目／報價 */
.tops-ts-preparing, .tops-is-pending, .tops-bs-inquiring, .tops-ts-departed, .tops-ts-cancelled, .tops-is-cancelled, .tops-bs-rejected, .tops-bs-declined { border: 1px solid var(--border); color: var(--text-soft); }
.tops-ts-booking, .tops-is-requested, .tops-bs-quoted { background: var(--warn-bg); color: var(--warn-text); }
.tops-ts-booked, .tops-is-confirmed, .tops-bs-confirmed { background: var(--profit-bg); color: var(--profit-text); }
/* 期限提醒列 */
.tops-due { list-style: none; margin: 6px 0 0; padding: 0; }
.tops-due li { display: flex; align-items: flex-start; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--border); }
.tops-due li:last-child { border-bottom: none; }
.tops-due li > input { margin-top: 7px; flex-shrink: 0; }
.tops-due-main { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; flex: 1; min-width: 0; text-align: left; background: transparent; border: none; padding: 4px 6px; border-radius: 6px; cursor: pointer; font: inherit; font-size: 13px; color: var(--text); }
.tops-due-main:hover { background: var(--profit-bg); }
.tops-due-date { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tops-due-left { font-size: 11px; padding: 1px 8px; border-radius: 10px; white-space: nowrap; background: var(--warn-bg); color: var(--warn-text); }
.tops-due li.overdue .tops-due-left { background: var(--loss-bg); color: var(--loss-text); font-weight: 600; }
.tops-due-what { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
/* 單一團 */
.tops-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tops-head h2 { margin: 0; font-size: 18px; overflow-wrap: anywhere; }
.tops-head-actions { margin-left: auto; display: flex; gap: 6px; }
.tops-meta { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 13px; margin: 10px 0 6px; }
.tops-progress { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; margin: 8px 0; }
.tops-field-label { font-size: 13px; margin-bottom: 4px; }
.tops-dls { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0; }
.tops-dls .tops-field-label { margin: 0 4px 0 0; color: var(--text-soft); font-size: 12px; }
.tops-dl { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 3px 8px; border: 1px solid var(--border); border-radius: 8px; max-width: 100%; overflow-wrap: anywhere; }
.tops-dl-left { color: var(--text-soft); margin-left: 4px; white-space: nowrap; }
.tops-dl.soon { border-color: var(--warn-text); background: var(--warn-bg); }
.tops-dl.soon .tops-dl-left { color: var(--warn-text); font-weight: 600; }
.tops-dl.overdue { border-color: var(--loss-text); background: var(--loss-bg); }
.tops-dl.overdue .tops-dl-left { color: var(--loss-text); font-weight: 600; }
.tops-dl.done, .tops-dl.idle { opacity: .6; }
.tops-dl.done b { text-decoration: line-through; }
.tops-item { border-top: 1px solid var(--border); padding: 12px 0 6px; }
.tops-item.cancelled { opacity: .55; }
.tops-item-head { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; font-size: 14px; margin-bottom: 6px; }
.tops-cat, .tops-mode { font-size: 11px; padding: 1px 8px; border-radius: 10px; border: 1px solid var(--border); color: var(--text-soft); white-space: nowrap; }
.tops-mode-self { border-color: var(--sage); color: var(--sage-dark); }
.tops-when { font-variant-numeric: tabular-nums; color: var(--text-soft); font-size: 13px; }
.tops-what { overflow-wrap: anywhere; }
.tops-item-actions { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 4px; }
.tops-link { align-self: flex-start; color: var(--sage-dark); font-size: 12px; text-decoration: underline; margin-top: -4px; }
/* 一家供應商一個區塊：名稱／狀態／合計／操作，底下是價格明細 */
.tops-bk { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; margin: 6px 0; }
.tops-bk-confirmed { border-left: 3px solid var(--sage); }
.tops-bk-rejected, .tops-bk-declined { opacity: .6; }
.tops-bk-head { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; font-size: 13px; }
.tops-bk-total { font-weight: 600; font-variant-numeric: tabular-nums; }
.tops-bk-actions { margin-left: auto; display: flex; gap: 4px; }
.tops-bk-actions button { padding: 4px 8px; font-size: 12px; }
.tops-bk-info { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 12px; color: var(--text-soft); margin-top: 4px; overflow-wrap: anywhere; }
.tops-prices { margin-top: 6px; }
.tops-price th, .tops-price td { padding: 3px 6px; border-bottom: none; }
.tops-price input, .tops-price select { font-size: 13px; padding: 4px 6px; }
.tops-price input[data-pf="label"] { width: 150px; text-align: left; }
.tops-price input[data-pf="unit_price"] { width: 100px; }
.tops-price input[data-pf="qty"], .tops-price input[data-pf="times"] { width: 64px; }
.tops-price td[data-sub] { min-width: 96px; font-weight: 600; }
/* 每個項目的備註欄：平常像一行字，點了才像輸入框 */
.tops-note { display: block; width: 100%; box-sizing: border-box; margin: 6px 0 0; padding: 5px 8px; font: inherit; font-size: 13px; line-height: 1.5; color: var(--text);
  background: transparent; border: 1px dashed var(--border); border-radius: 6px; resize: none; overflow: hidden; min-height: 32px; }
.tops-note:focus { border-style: solid; border-color: var(--sage); background: var(--card); outline: none; }
.tops-note.saved { border-color: var(--sage); border-style: solid; }
/* 文件 */
.tops-file { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--sage-dark); text-decoration: none; overflow-wrap: anywhere; }
.tops-file:hover { text-decoration: underline; }
.tops-files-inline { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 6px 0 0; }
.tops-files input[data-file-note] { width: 180px; text-align: left; }
.tops-files select { max-width: 220px; }
.tops-files td.tops-actions a { text-decoration: none; color: var(--text); margin-right: 6px; }
/* 項目上直接選供應商、依日期分段 */
/* 供應商選單與操作按鈕排同一列（寬度不夠自動換行），每個項目少一行 */
.tops-bar { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 6px 0 2px; }
.tops-bar .tops-item-actions { margin: 0; }
.tops-pick { display: flex; gap: 6px; align-items: center; flex: 1 1 300px; min-width: 0; max-width: 520px; }
.tops-pick .sp { flex: 1 1 160px; min-width: 0; }
.tops-day { margin: 16px 0 0; padding: 4px 10px; font-size: 12px; font-weight: 600; color: var(--sage-dark); background: var(--profit-bg); border-radius: 6px; }
.tops-day + .tops-item { border-top: none; }
@media (max-width: 760px) {
  .tops-head-actions { margin-left: 0; width: 100%; }
  .tops-item-actions button, .tops-head-actions button { flex: 1; }
  .tops-table td.tops-wrap { min-width: 120px; }
  .tops-bk-actions { margin-left: 0; }
  .tops-price input[data-pf="label"] { width: 120px; }
}
/* 估價單負責人（2026-10-02） */
.owner-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 12px 0 0; font-size: 13px; }

/* 人資管理（2026-10-03）：員工名冊、我的員工資料、線上打卡 */
.hr-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.hr-head h2 { margin: 0; margin-right: auto; }
.hr-scroll { overflow-x: auto; }
.hr-table th, .hr-table td { text-align: left; }
.hr-table tr[data-emp], .hr-table tr[data-site] { cursor: pointer; }
.hr-table tr[data-emp]:hover, .hr-table tr[data-site]:hover { background: rgba(124,148,115,0.08); }
.hr-table td.hr-note { white-space: normal; min-width: 160px; }
.hr-voided td { color: var(--text-soft); text-decoration: line-through; }
.hr-voided td.hr-note, .hr-voided td:last-child { text-decoration: none; }
.hr-status { font-size: 11px; padding: 2px 8px; border-radius: 10px; border: 1px solid var(--border); }
.hr-status.active { background: rgba(124,148,115,0.15); border-color: transparent; }
.hr-status.resigned { color: var(--text-soft); }
.hr-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px 14px; margin: 10px 0 14px; }
.hr-form[hidden] { display: none; }
.hr-form h3, .hr-form .wide, .hr-form .hr-actions { grid-column: 1 / -1; }
.hr-form h3 { margin: 6px 0 0; }
.hr-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-soft); min-width: 0; }
.hr-field input, .hr-field select, .hr-field textarea { width: 100%; box-sizing: border-box; }
.hr-field textarea { border: 1px solid var(--border); border-radius: 6px; padding: 5px 8px; font: inherit; font-size: 13px; background: var(--card); color: var(--text); resize: vertical; }
.hr-field button { align-self: flex-start; }
.hr-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hr-ro-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 14px; margin-bottom: 10px; }
.hr-ro { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--text-soft); }
.hr-ro b { font-size: 14px; color: var(--text); font-weight: 600; }
.hr-punch-btns { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.hr-punch-btns button.primary { padding: 12px 22px; font-size: 15px; }
.hr-today { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.hr-punch { display: inline-flex; align-items: baseline; gap: 6px; border: 1px solid var(--border); border-radius: 8px; padding: 3px 9px; font-size: 13px; margin: 2px 4px 2px 0; }
.hr-punch small { font-size: 11px; color: var(--text-soft); }
.hr-punch.voided { text-decoration: line-through; color: var(--text-soft); }
/* 請假（2026-10-03） */
.hr-tabs { flex-wrap: wrap; }
.lv-status { font-size: 11px; padding: 2px 8px; border-radius: 10px; border: 1px solid var(--border); white-space: nowrap; }
.lv-status.pending { background: rgba(214,158,46,0.18); border-color: transparent; }
.lv-status.approved { background: rgba(124,148,115,0.18); border-color: transparent; }
.lv-status.rejected { color: var(--loss-text); }
.lv-dim td { color: var(--text-soft); }
.lv-days { display: flex; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--text); }
.lv-days label { display: inline-flex; align-items: center; gap: 4px; }
.lv-days input, .lv-custom input { width: auto; }
.hr-form .hr-form.wide { margin: 0; }
.hr-form p.wide { grid-column: 1 / -1; margin: 0; }
.home-leave[hidden] { display: none; }
.home-alert { background: var(--loss-bg); border: 1px solid var(--loss-text); }
.home-alert[hidden] { display: none; }
.home-alert h2 { color: var(--loss-text); margin-top: 0; }
.home-alert p, .home-alert ul { margin: 6px 0; font-size: 13px; }
.lv-total td { border-top: 2px solid var(--border); }
.lv-current td { background: rgba(124,148,115,0.12); }
/* 本人補打卡、請假概況（2026-10-03） */
.hr-selfpunch { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border); }
.hr-selfpunch .hr-form { flex-basis: 100%; }
.lv-overview { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.lv-overview > div { display: flex; flex-direction: column; gap: 2px; }
.lv-overview span { font-size: 12px; color: var(--text-soft); }
.lv-overview b { font-size: 22px; }
.lv-overview small { font-size: 11px; color: var(--text-soft); }

/* 人資第二輪第一批（2026-10-03）：請假通知、異動歷程 */
.lv-new { display: inline-block; padding: 0 6px; border-radius: 999px; background: var(--loss-text); color: #fff; font-size: 12px; line-height: 18px; }
.lv-notice p, .home-leave p { margin: 6px 0; }
.hr-history { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line, rgba(0,0,0,0.1)); }
.hr-head h3 { margin: 0; margin-right: auto; }

/* 人資第二輪第二批：出勤月報 */
.hr-att-tag { display: inline-block; padding: 0 8px; border-radius: 999px; border: 1px solid var(--line, rgba(0,0,0,0.15)); font-size: 12.5px; line-height: 20px; white-space: nowrap; }
.hr-att-tag.bad { color: var(--loss-text); border-color: currentColor; }
.hr-att-tag.warn { background: rgba(214,158,46,0.18); border-color: transparent; }
tr[data-att-emp] { cursor: pointer; }

/* 樂趣功能（2026-10-02）：右上角每日一句＋塔羅問事（public/js/fun.js）。牌面自繪：象牙底金框，牌背深祖母綠 */
.topbar .top-tarot { flex-shrink: 0; margin-left: 10px; padding: 5px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.55); background: rgba(255,255,255,0.12); font-size: 12.5px; white-space: nowrap; }
.topbar .top-tarot:hover { background: rgba(255,255,255,0.28); }
@media (max-width: 760px) {
  .topbar .top-tarot { padding: 4px 9px; margin-left: 0; margin-right: 8px; }
  .topbar .top-tarot-label { display: none; }
}

.tarot-wrap { --gold: #d4b36a; --gold-soft: #b8964e; --ivory: #f4ecd8; --emerald: #17362c; }
.tarot-intro { font-size: 13px; color: var(--text-soft); line-height: 1.7; margin: 0 0 14px; }
.tarot-quota { font-size: 13px; margin: 0 0 10px; }
.tarot-notice { font-size: 13px; color: var(--loss-text); margin: 8px 0; }
.tarot-label { display: block; font-size: 13px; margin-bottom: 6px; }
.tarot-wrap textarea { width: 100%; box-sizing: border-box; padding: 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--text); font: inherit; font-size: 14px; resize: vertical; }
.tarot-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.tarot-actions button:disabled { opacity: 0.55; cursor: default; }
.tarot-mini { font-size: 12px; padding: 2px 8px; }
.tarot-question { font-family: "Noto Serif TC", "Songti TC", Georgia, serif; font-size: 16px; line-height: 1.6; margin: 0 0 10px; }
.tarot-guide { font-size: 13px; color: var(--text-soft); line-height: 1.7; margin: 0 0 12px; }

.tarot-table { display: flex; flex-wrap: wrap; justify-content: center; padding: 16px 8px 6px 30px; border-radius: 12px;
  background: radial-gradient(ellipse at 50% 0%, #24503f, #122a22 75%); box-shadow: inset 0 0 0 1px rgba(212,179,106,0.35); }
.tarot-back { position: relative; width: 46px; height: 74px; margin: 0 0 12px -22px; padding: 0; flex: none; border-radius: 5px; cursor: pointer;
  border: 1px solid var(--gold-soft, #b8964e);
  background:
    radial-gradient(circle at 50% 50%, rgba(212,179,106,0.9) 0 3px, transparent 4px),
    repeating-linear-gradient(45deg, rgba(212,179,106,0.22) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(-45deg, rgba(212,179,106,0.22) 0 2px, transparent 2px 7px),
    linear-gradient(160deg, #1f4a3b, #10261f);
  box-shadow: -2px 1px 4px rgba(0,0,0,0.35); transition: transform 0.15s ease, box-shadow 0.15s ease;
  animation: tarotDeal 0.35s ease backwards; animation-delay: calc(var(--i, 0) * 9ms); }
.tarot-still .tarot-back { animation: none; }
.tarot-back:hover, .tarot-back:focus-visible { transform: translateY(-8px); outline: none; box-shadow: 0 6px 10px rgba(0,0,0,0.45); z-index: 2; }
.tarot-back.sel { transform: translateY(-14px); border-color: #ffe9a8; box-shadow: 0 0 0 2px #ffe9a8, 0 8px 12px rgba(0,0,0,0.5); z-index: 3; }
.tarot-back.static { width: 100%; height: 100%; margin: 0; animation: none; cursor: default; box-shadow: none; transform: none; }
.tarot-badge { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); background: #ffe9a8; color: #3a2c08; font-size: 10.5px; line-height: 16px; padding: 0 5px; border-radius: 8px; white-space: nowrap; font-weight: 600; }
@keyframes tarotDeal { from { opacity: 0; transform: translateY(-18px) rotate(-6deg); } to { opacity: 1; transform: none; } }

.tarot-spread { display: flex; justify-content: center; gap: clamp(10px, 4vw, 34px); margin: 6px 0 16px; padding: 18px 8px; border-radius: 12px;
  background: radial-gradient(ellipse at 50% 0%, #24503f, #122a22 75%); box-shadow: inset 0 0 0 1px rgba(212,179,106,0.35); }
.tarot-slot { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.tarot-pos { color: #f0e2b8; font-size: 13px; letter-spacing: 0.3em; text-indent: 0.3em; }
.tarot-name { color: #f4ecd8; font-size: 13px; text-align: center; }
.tarot-flip { width: clamp(86px, 24vw, 132px); aspect-ratio: 264 / 443; perspective: 900px; }
.tarot-flip-in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.8s cubic-bezier(.3,.7,.3,1); transition-delay: var(--d, 0s); }
.tarot-flip.flipped .tarot-flip-in { transform: rotateY(180deg); }
.tarot-flip-in > .tarot-back, .tarot-flip-in > .tarot-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 8px; }
.tarot-flip-in > .tarot-face { transform: rotateY(180deg); }

.tarot-face { box-sizing: border-box; padding: 5px; background: #f4ecd8; border: 1px solid #b8964e; box-shadow: 0 6px 14px rgba(0,0,0,0.45); color: #3b2f1a;
  font-family: "Noto Serif TC", "Songti TC", "Source Han Serif TC", Georgia, serif; }
.tarot-face-in { box-sizing: border-box; width: 100%; height: 100%; border: 1px solid #b8964e; outline: 1px solid rgba(184,150,78,0.45); outline-offset: -4px; border-radius: 5px;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 8px 4px 7px; text-align: center;
  background: radial-gradient(circle at 50% 42%, #fffaf0, #f1e6c9 75%); }
.tarot-face.rev .tarot-face-in { transform: rotate(180deg); }
.tarot-face { position: relative; overflow: hidden; }
.tarot-flip-in > .tarot-face { position: absolute; }
.tf-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.tarot-face.rev .tf-img { transform: rotate(180deg); }
.tarot-face.major .tarot-face-in { background: radial-gradient(circle at 50% 42%, #fff6dc, #ecd9a6 80%); }
.tarot-face.suit-wands .tf-mark { color: #a8431f; } .tarot-face.suit-cups .tf-mark { color: #1f5f8a; }
.tarot-face.suit-swords .tf-mark { color: #4a5560; } .tarot-face.suit-pentacles .tf-mark { color: #8a6a12; }
.tf-mark { font-size: clamp(12px, 3.2vw, 15px); letter-spacing: 0.08em; color: #7a5a1c; }
.tf-sym { font-size: clamp(30px, 9vw, 46px); line-height: 1; filter: drop-shadow(0 2px 2px rgba(0,0,0,0.18)); }
.tf-name { font-size: clamp(13px, 3.6vw, 17px); font-weight: 600; letter-spacing: 0.1em; }
.tf-en { font-size: clamp(7.5px, 2vw, 9.5px); letter-spacing: 0.04em; color: #7a6a48; text-transform: uppercase; line-height: 1.2; }

.tarot-wait { text-align: center; padding: 6px 0; }
.tarot-thinking { color: var(--text-soft); font-size: 14px; animation: tarotPulse 1.6s ease-in-out infinite; }
@keyframes tarotPulse { 50% { opacity: 0.45; } }
.tarot-reading { font-family: "Noto Serif TC", "Songti TC", "Source Han Serif TC", Georgia, serif; line-height: 1.9; font-size: 15px; }
.tarot-overview { font-size: 18px; text-align: center; margin: 4px 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.tarot-sec h4 { margin: 14px 0 2px; font-size: 13.5px; color: var(--gold-soft, #b8964e); letter-spacing: 0.06em; }
.tarot-sec p { margin: 0; }
.tarot-blessing { margin: 18px auto 2px; padding: 12px 16px; max-width: 520px; text-align: center; font-style: italic; border-top: 1px solid var(--gold-soft, #b8964e); border-bottom: 1px solid var(--gold-soft, #b8964e); }
.tarot-hist { border-top: 1px solid var(--border); padding: 8px 0; }
.tarot-hist summary { cursor: pointer; font-size: 14px; }
.tarot-hist-date { display: inline-block; min-width: 92px; color: var(--text-soft); font-size: 12.5px; }
.tarot-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
.tarot-chip { font-size: 12.5px; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--border); }
.tarot-hist .tarot-reading { --gold-soft: #b8964e; font-size: 14px; }
@media (prefers-reduced-motion: reduce) {
  .tarot-back, .tarot-thinking { animation: none; }
  .tarot-flip-in { transition: none; }
}

/* 示範環境（2026-10-03）：頂端固定提示條，跟頂列一起黏在最上面 */
.demo-bar {
  background: #b7791f; color: #fff; font-size: 13px; line-height: 1.4; text-align: center;
  padding: 6px 12px; padding-top: calc(6px + env(safe-area-inset-top)); font-weight: 600;
}
.demo-bar-co { font-weight: 400; opacity: .9; }
.demo-sticky { position: sticky; top: 0; z-index: 70; }
.demo-sticky .topbar { position: static; }
@media (max-width: 639px) {
  .demo-bar { font-size: 12px; padding: 5px 10px; padding-top: calc(5px + env(safe-area-inset-top)); }
  .demo-bar-co { display: none; }
}

/* 示範環境登入窗：莫蘭迪藍（2026-10-03 Kenji指定），金色線框沿用 */
.login-card.ornate.demo {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(232,238,243,0.16), transparent 60%),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.025) 0 2px, transparent 2px 6px),
    linear-gradient(160deg, #7d91a3 0%, #637a8d 55%, #4f6577 100%);
  box-shadow: 0 0 0 4px #4a5f70, 0 0 0 5px var(--gold-soft), 0 24px 60px rgba(0,0,0,0.45), inset 0 0 40px rgba(0,0,0,0.2);
}
.login-card.ornate.demo input { background: rgba(28,42,54,0.45); }
.login-card.ornate.demo input:-webkit-autofill { box-shadow: 0 0 0 40px #4f6577 inset; }
.login-card.ornate.demo p { color: rgba(250,246,236,0.85); }

/* 頂端跑馬燈（2026-10-05）：白板待辦提示＋每日一句，public/js/ticker.js */
.ticker { display: flex; align-items: center; background: var(--cream); border-bottom: 1px solid var(--border); font-size: 13px; }
.ticker[hidden] { display: none; }
.tk-view { flex: 1; min-width: 0; overflow: hidden; padding: 6px 0; }
.tk-track { display: inline-flex; align-items: center; white-space: nowrap; padding-left: 100%; animation: tk-scroll linear infinite; will-change: transform; }
.ticker:hover .tk-track, .ticker:focus-within .tk-track { animation-play-state: paused; }
@keyframes tk-scroll { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.tk-item { background: transparent; border: 0; padding: 2px 6px; font: inherit; color: var(--text); cursor: pointer; border-radius: 4px; }
.tk-item:hover { background: rgba(0,0,0,0.06); text-decoration: underline; }
.tk-overdue { color: var(--loss-text); font-weight: 600; }
.tk-today { font-weight: 600; }
.tk-quote { font-family: "Noto Serif TC", "Songti TC", "Source Han Serif TC", "PMingLiU", Georgia, serif; font-style: italic; color: var(--text-soft); }
.tk-sep { color: var(--border); margin: 0 18px; font-size: 9px; }
.tk-close { flex-shrink: 0; background: transparent; border: 0; color: var(--text-soft); font-size: 18px; line-height: 1; padding: 4px 12px; cursor: pointer; }
.tk-close:hover { color: var(--text); background: transparent; }
@media (prefers-reduced-motion: reduce) { .tk-view { overflow-x: auto; } .tk-track { animation: none; padding-left: 12px; } }
@media (max-width: 760px) { .ticker { font-size: 12px; } }
.tk-popup { position: fixed; top: 74px; left: 50%; z-index: 90; width: min(440px, calc(100vw - 32px)); transform: translate(-50%, -12px); opacity: 0; pointer-events: none;
  background: var(--card); border: 1px solid var(--sage); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.22); padding: 14px 38px 14px 16px; cursor: pointer; transition: opacity .35s, transform .35s; }
.tk-popup.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.tk-popup-label { font-size: 11.5px; color: var(--text-soft); letter-spacing: .08em; margin-bottom: 4px; }
.tk-popup-text { font-family: "Noto Serif TC", "Songti TC", "Source Han Serif TC", "PMingLiU", Georgia, serif; font-size: 15px; line-height: 1.7; color: var(--text); }
.tk-popup-close { position: absolute; top: 6px; right: 8px; background: transparent; border: 0; color: var(--text-soft); font-size: 18px; cursor: pointer; padding: 2px 6px; }
.brd-flash { animation: brd-flash 1s ease-in-out 3; }
@keyframes brd-flash { 0%, 100% { box-shadow: 0 0 0 0 rgba(212,179,106,0); } 50% { box-shadow: 0 0 0 4px rgba(212,179,106,.85); } }
.perm-changed.perm-ext { background: #e8e1f3; color: #5b3f8c; }

/* 團務核訂審核（2026-10-09） */
.tops-rv { border: 1px solid var(--border); }
.tops-rv-pending { background: var(--warn-bg); color: var(--warn-text); border-color: transparent; }
.tops-rv-approved { background: var(--profit-bg); color: var(--profit-text); border-color: transparent; }
.tops-rv-returned { background: var(--loss-bg, #fbe9e7); color: var(--loss-text, #b3261e); border-color: transparent; }
.tops-rv-locked { background: var(--warn-bg); color: var(--warn-text); border-color: transparent; }
.tops-rv-archived { background: var(--card); color: var(--text-soft); }
.tops-rv-text-pending { color: var(--warn-text); }
.tops-rv-text-returned { color: var(--loss-text, #b3261e); }
.tops-rv-btn { padding: 2px 10px; font-size: 13px; }
.tops-rv-note { margin: 4px 0; padding: 6px 10px; border-left: 3px solid var(--loss-text, #b3261e); background: var(--loss-bg, #fbe9e7); font-size: 13px; }
.tops-review { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin: 8px 0; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; }
.tops-review-actions { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.tops-rv-title { margin: 8px 0 4px; font-size: 13px; font-weight: 700; color: var(--text-soft); }
.tops-rv-row { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; padding: 6px 4px; border-bottom: 1px solid var(--border); cursor: pointer; }
.tops-rv-row:hover { background: var(--bg-soft, rgba(0,0,0,.03)); }
.tops-rv-tail { margin-left: auto; font-size: 13px; }

/* 夜宿時間軸（2026-10-09） */
.tops-nights { margin: 8px 0; }
.tops-night-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tops-night { border: 1px solid var(--border); border-radius: 14px; padding: 2px 10px; font-size: 13px; }
.tops-night-plane { background: #eef3f9; }
.tops-night-home { background: #fbf3e6; }
.tops-night-ok { background: var(--profit-bg); color: var(--profit-text); border-color: transparent; }
.tops-night-todo { background: var(--warn-bg); color: var(--warn-text); border-color: transparent; }
.tops-night-missing { background: var(--loss-bg, #fbe9e7); color: var(--loss-text, #b3261e); border-color: transparent; }
.tops-flighthint { margin-top: 8px; padding: 8px 12px; border: 1px solid var(--warn-text, #b26a00); background: var(--warn-bg); color: var(--warn-text); border-radius: 8px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* 懸停「到頁首／到頁尾」按鈕（app.js installScrollButtons） */
.scroll-nav { position: fixed; right: 16px; bottom: 84px; z-index: 60; display: flex; flex-direction: column; gap: 8px; }
.scroll-nav[hidden] { display: none; }
.scroll-nav button { width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 1px solid var(--border); background: var(--card); color: var(--text);
  font-size: 14px; line-height: 1; box-shadow: 0 2px 10px rgba(0,0,0,.18); cursor: pointer; opacity: .92; }
.scroll-nav button:hover:not(:disabled) { background: var(--sage-dark, #46583f); color: #fff; border-color: var(--sage-dark, #46583f); opacity: 1; }
.scroll-nav button:disabled { opacity: .35; cursor: default; box-shadow: none; }
@media print { .scroll-nav { display: none !important; } }
@media (max-width: 720px) { .scroll-nav { right: 10px; bottom: 76px; } .scroll-nav button { width: 44px; height: 44px; } }

/* 班次（鐵道／纜車）：核訂項目卡片與編輯視窗 */
.tops-legs { margin: 6px 0; padding: 6px 10px; border-left: 3px solid var(--sage, #5f7556); background: var(--cream, #faf8f3); border-radius: 0 6px 6px 0; }
.tops-leg { padding: 2px 0; font-size: 13px; line-height: 1.7; }
.tops-leg-t { font-weight: 700; font-variant-numeric: tabular-nums; }
.tops-leg-arrow { margin: 0 4px; color: var(--text-soft); }
.tops-leg-svc { margin-left: 6px; padding: 0 6px; border-radius: 4px; background: var(--sage-soft, #eef2ea); color: var(--sage-dark, #46583f); }
.tops-legrow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 8px; padding: 8px; margin-bottom: 8px; border: 1px solid var(--border); border-radius: 8px; position: relative; }
.tops-legrow .tops-lf span { display: block; font-size: 11px; color: var(--text-soft); }
.tops-legrow input { width: 100%; }
.tops-legrow .tops-lf-note { grid-column: span 2; }
.tops-legrow [data-leg-del] { position: absolute; top: 4px; right: 6px; }
.tops-lf-src { grid-column: 1 / -1; }
.tops-leg-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.tops-conn { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; margin: 8px 0; }
.tops-conn-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; }
.tops-conn-head button { margin-left: auto; }
@media (max-width: 720px) { .tops-legrow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 塔羅：重點總結（白話版，放在解讀最上方） */
.tarot-brief { margin: 0 0 16px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--gold-soft, #b8964e); background: color-mix(in srgb, var(--gold-soft, #b8964e) 9%, transparent);
  font-family: -apple-system, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif; line-height: 1.7; }
.tarot-brief-title { font-weight: 700; font-size: 14.5px; margin-bottom: 6px; }
.tarot-brief-title span { margin-left: 8px; font-weight: 400; font-size: 11.5px; color: var(--text-soft); }
.tarot-brief dl { display: grid; grid-template-columns: 6.5em 1fr; gap: 4px 10px; margin: 0; }
.tarot-brief dt { font-size: 12.5px; color: var(--text-soft); padding-top: 1px; }
.tarot-brief dd { margin: 0; font-size: 14px; }
.tarot-brief dd.tarot-brief-kw { font-weight: 700; letter-spacing: .05em; }
.tarot-brief-note { margin-top: 8px; font-size: 11px; color: var(--text-soft); text-align: right; }

/* 講座總覽：頁首動作列、頁籤、群組卡、「⋯更多」選單 */
.lec-head-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.lec-head-row h2 { margin: 0; }
.lec-head-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.lec-help { margin-top: 8px; }
.lec-help summary, .lec-past summary { cursor: pointer; font-size: 12px; color: var(--text-soft); }
.lec-past summary { color: inherit; }
.lec-new { border: 1px solid var(--sage); }
.lec-new h3 { margin: 0 0 4px; }
.lec-new-choose select { flex: 1 1 260px; min-width: 0; }
.lec-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin: 12px 0; border-bottom: 1px solid var(--border); }
.lec-tab { border: 0; background: transparent; color: var(--text-soft); font: inherit; font-size: 14px; padding: 8px 14px; cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.lec-tab:hover { color: var(--text); }
.lec-tab.active { color: var(--sage-dark); font-weight: 700; border-bottom-color: var(--sage); }
.lec-group { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; margin-bottom: 12px; }
.lec-group-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.lec-url { word-break: break-all; }
.lec-srows { margin-top: 8px; }
.lec-srow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid var(--border); }
.lec-srow-date { width: 110px; flex: none; font-size: 13px; font-weight: 600; color: var(--sage-dark); }
.lec-srow-main { flex: 1 1 200px; }
.lec-more { position: relative; display: inline-block; }
.lec-more > summary { list-style: none; cursor: pointer; display: inline-block; padding: 5px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; background: var(--card); }
.lec-more > summary::-webkit-details-marker { display: none; }
.lec-more-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; display: flex; flex-direction: column; gap: 2px; min-width: 160px; padding: 6px; background: var(--card); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.12); }
.lec-more-menu button { text-align: left; border: 0; width: 100%; }
@media (max-width: 640px) { .lec-srow-date { width: 100%; } }
.lec-month { margin-bottom: 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); }
.lec-month > summary { cursor: pointer; padding: 10px 14px; display: flex; gap: 10px; align-items: baseline; font-size: 15px; }
.lec-month > summary:hover { background: var(--profit-bg); }
.lec-month[open] > summary { border-bottom: 1px solid var(--border); }
.lec-month-body { padding: 12px; }
.lec-month-tools { display: flex; gap: 6px; justify-content: flex-end; margin-bottom: 8px; }
.lec-month-body .lec-group:last-child { margin-bottom: 0; }

/* YouTube 頻道經營：授權結果提示（2026-10-16） */
.yt-flash { padding: 10px 14px; border-radius: 8px; margin: 10px 0; font-size: 14px; }
.yt-flash-good { background: #e6f4ea; color: #1e6b34; }
.yt-flash-warn { background: #fdf3e0; color: #8a5a00; }
.yt-status { display: flex; gap: 24px; flex-wrap: wrap; margin: 8px 0 14px; }
.yt-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; margin-top: 14px; }
.yt-form h3 { width: 100%; margin: 0; }
.yt-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.yt-actions { white-space: nowrap; }
.yt-tabs { display: flex; gap: 8px; margin: 10px 0; }
.yt-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 10px 0 18px; }
.yt-kpi { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.yt-kpi-label { font-size: 12px; opacity: .7; }
.yt-kpi-value { font-size: 24px; font-weight: 600; margin: 2px 0; }
.yt-kpi-sub { font-size: 12px; opacity: .75; }
.yt-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; margin-top: 16px; }
.yt-bar { display: grid; grid-template-columns: 130px 1fr 52px; gap: 8px; align-items: center; margin: 6px 0; font-size: 13px; }
.yt-bar-track { height: 8px; background: rgba(0,0,0,.08); border-radius: 4px; overflow: hidden; }
.yt-bar-fill { height: 100%; background: #c0392b; }

.nav-sub { margin: 2px 0 8px; padding-bottom: 6px; border-bottom: 1px dashed var(--border, #ddd); }
.nav-sub-title { font-size: 12px; font-weight: 700; color: var(--text-soft, #777); margin: 4px 2px 6px; }

/* 講座主講者（2026-10-18） */
.lec-spk-pick { border: 1px dashed var(--border, #ccc); border-radius: 8px; padding: 6px 12px 8px; margin: 4px 0; }
.lec-spk-opt { margin-right: 14px; white-space: nowrap; }
.lec-spk-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.lec-spk-row { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-top: 1px solid var(--border, #e5e5e5); }
/* 主講者相框：圓形，金邊＋米色襯紙；照片本身不做調色（跟報名頁介紹視窗同款） */
.lec-spk-frame { position: relative; display: block; width: 66px; height: 66px; flex: none; padding: 3px; background: linear-gradient(145deg, #f8f1e1, #eadcc0); border: 1px solid #b9a06a; border-radius: 50%; box-shadow: 0 0 0 2px #fffdf8, 0 0 0 3px rgba(185,160,106,.55); }
.lec-spk-frame > span { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 50%; }
.lec-spk-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block; }
.lec-spk-frame > span::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(ellipse at 50% 34%, #2b4668 0%, #1c324c 58%, #14253b 100%); mix-blend-mode: lighten; pointer-events: none; } /* 純黑背景換成墨藍（同報名頁） */
.lec-spk-noimg { display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--text-soft, #888); }
.lec-spk-photo-edit { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; width: 100%; }

/* 講座：群組批次修改場次（2026-10-19） */
.lec-bulk h3 { margin: 0 0 6px; }
.lec-bulk-sessions { display: flex; flex-direction: column; gap: 4px; margin: 8px 0 12px; padding: 8px 12px; border: 1px dashed var(--border, #ccc); border-radius: 8px; }
.lec-bulk-s { font-size: 13px; }
.lec-bulk-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 0; border-top: 1px solid var(--border, #eee); }
.lec-bulk-apply { white-space: nowrap; font-size: 12px; color: var(--text-soft, #777); }
.lec-bulk-label { min-width: 190px; }

/* 官網首頁內容管理（public/js/webhome.js；自成一組樣式，不依賴產品上架的 ctl-*） */
.wh-table { width: 100%; border-collapse: collapse; }
.wh-table td { padding: 8px 6px; border-bottom: 1px solid var(--border); vertical-align: top; text-align: left; font-size: 13px; overflow-wrap: anywhere; white-space: normal; }
.wh-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; font-size: 12px; color: var(--text-soft); }
.wh-field input, .wh-field textarea, .wh-field select { width: 100%; box-sizing: border-box; min-width: 0; font: inherit; font-size: 13px; color: var(--text); }
.wh-field textarea { border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; background: var(--card); resize: vertical; }

/* 官網首頁內容管理：連結色（淺色 #2f5d8a 在白底約 7:1、深色 #9dbcf2 在 #262a23 約 6:1；hover／visited 同樣可讀） */
:root { --wh-link: #2f5d8a; --wh-link-hover: #1d4570; }
@media (prefers-color-scheme: dark) { :root { --wh-link: #9dbcf2; --wh-link-hover: #c4d8fa; } }
.wh-table a, .wh-table a:visited { color: var(--wh-link); text-decoration: underline; text-underline-offset: 2px; }
.wh-table a:hover, .wh-table a:focus-visible { color: var(--wh-link-hover); }
.wh-media-box { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin: 6px 0 10px; background: var(--cream); }
.wh-media-box h4 { margin: 0 0 4px; font-size: 13px; color: var(--text); }
.wh-media-box p { margin: 0 0 8px; font-size: 12px; color: var(--text-soft); line-height: 1.6; }
.wh-poster-prev { display: block; max-width: 220px; max-height: 124px; border-radius: 6px; border: 1px solid var(--border); margin-top: 6px; }

/* 官網上架（public/js/sitepublish.js；沿用上方 wh-* 樣式，只補分頁與狀態徽章） */
.wp-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.wp-tabs button.wp-on { background: var(--cream); border-color: var(--text-soft); font-weight: 600; }
.wp-pick { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.wp-pick select { font: inherit; max-width: 100%; }
.wp-badge { display: inline-block; font-size: 11px; line-height: 1.6; padding: 0 8px; border-radius: 10px; border: 1px solid var(--border); font-weight: 400; vertical-align: middle; }
.wp-on.wp-badge, .wp-badge.wp-on { color: #1d6b3a; border-color: #1d6b3a; }
.wp-badge.wp-wait { color: #8a5a00; border-color: #8a5a00; }
.wp-badge.wp-off { color: var(--text-soft); }
@media (prefers-color-scheme: dark) { .wp-badge.wp-on { color: #7fd69c; border-color: #7fd69c; } .wp-badge.wp-wait { color: #f0c36a; border-color: #f0c36a; } }
.wh-field input[type="datetime-local"] { width: auto; max-width: 100%; }