:root {
  color-scheme: light;
  --ink: #162733;
  --muted: #6d7b83;
  --navy: #172a3a;
  --navy-2: #203b4e;
  --cream: #f5f2e9;
  --paper: #fffefb;
  --orange: #e86f3a;
  --orange-soft: #fff0e8;
  --green: #368469;
  --deep-red: #a3342a;
  --line: #dfe3df;
  --shadow: 0 18px 55px rgba(25, 46, 58, .11);
  font-family: Inter, "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
}
* { box-sizing: border-box; }
/* 螢幕閱讀器專用的隱藏文字。left/top 必須釘死在 0：position:absolute 若不給座標，會落在「靜態位置」，
   而祖先若都沒有定位（例如獎金制度那些橫向捲動的寬表格），它的基準就變成整份文件，
   等於逃出捲動框、把文件撐到表格那麼寬；手機瀏覽器接著會整頁縮小以求塞下，該頁就比其他頁小一號。
   釘在 0 之後它仍是 1px 且被 clip 裁光，看不見也不影響版面。 */
.sr-only { position: absolute; left: 0; top: 0; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
body { margin: 0; min-width: 320px; background: var(--cream); color: var(--ink); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
/* 作者樣式若指定了 display（例如 .bio-login 的 flex），會蓋掉瀏覽器對 hidden 屬性的
   預設規則，導致「設了 hidden 卻還是看得見」。這裡明確擋回來。 */
[hidden] { display: none !important; }
.update-banner { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 100; display: flex; align-items: center; gap: 12px; max-width: calc(100% - 24px); padding: 12px 16px; border-radius: 12px; background: var(--navy); color: #fff; box-shadow: 0 14px 44px rgba(25, 46, 58, .34); font-size: 13px; font-weight: 650; }
.update-banner button { flex: none; border: 0; border-radius: 8px; padding: 8px 15px; background: var(--orange); color: #fff; font: 800 13px inherit; cursor: pointer; white-space: nowrap; }

/* 老闆公告 */
.announcement-card{background:var(--panel);border:1px solid var(--line);border-radius: 14px;box-shadow:var(--shadow);padding:24px}.announcement-title-label{display:grid;gap:7px;font-weight:800;color:var(--ink)}.announcement-title-label input{width:100%;font:inherit;font-size:20px;padding:12px 14px;border:1px solid var(--line);border-radius: 10px}.rich-toolbar{display:flex;gap:7px;flex-wrap:wrap;padding:14px 0 10px}.rich-toolbar button,.rich-toolbar select,.rich-image-button{min-height:34px;border:1px solid var(--line);border-radius: 8px;background:#fff;padding:6px 10px;color:var(--ink);font:600 13px inherit;cursor:pointer}.rich-toolbar button:hover,.rich-image-button:hover{background:#f3f5f5}.rich-image-button{display:inline-flex;align-items:center}.rich-editor{min-height:300px;padding:18px;border:1px solid var(--line);border-radius: 10px;background:#fff;line-height:1.75;outline:none}.rich-editor:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(232,111,58,.12)}.rich-editor:empty::before{content:attr(data-placeholder);color:var(--muted);pointer-events:none}.rich-editor img,.announcement-body img{display:block;max-width:100%;height:auto;margin:14px 0;border-radius: 10px}.announcement-editor-actions,.announcement-acknowledge-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px}.announcement-read-stats{margin-bottom:18px;padding:13px 15px;border-radius: 10px;background:#f3f6f4;color:var(--ink);font-size:13px}.announcement-read-stats div{display:grid;gap:5px;margin-top:8px;color:var(--muted)}.announcement-read-stats .known{color:var(--ok)}.announcement-history{margin-top:28px;margin-bottom:0;background:#fafbf9}.announcement-viewer h2{font-size:28px;margin:0 0 16px}.announcement-body{line-height:1.8;word-break:break-word}.announcement-body h2{font-size:24px;margin:22px 0 8px}.announcement-body h3{font-size:19px;margin:18px 0 6px}.announcement-body ul{padding-left:24px}.announcement-acknowledge-row{padding-top:18px;border-top:1px solid var(--line)}
.announcement-card{background:var(--panel);border:1px solid var(--line);border-radius: 14px;box-shadow:var(--shadow);padding:24px}.announcement-audience{margin:0 0 18px;padding:12px 14px;border:1px solid var(--line);border-radius: 10px}.announcement-audience legend{font-weight:800}.audience-options{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 10px}.audience-tag{border:1px solid var(--line);background:#fff;border-radius: 999px;padding:7px 12px;color:var(--muted);font:700 13px inherit;cursor:pointer}.audience-tag.is-selected{background:var(--navy);border-color:var(--navy);color:#fff}.audience-tag small{opacity:.8}.announcement-audience p{margin:0;color:var(--muted);font-size:12px}.announcement-title-label{display:grid;gap:7px;font-weight:800;color:var(--ink)}.announcement-title-label input{width:100%;font:inherit;font-size:20px;padding:12px 14px;border:1px solid var(--line);border-radius: 10px}.rich-toolbar{display:flex;gap:7px;flex-wrap:wrap;padding:14px 0 10px}.rich-toolbar button,.rich-toolbar select,.rich-image-button{min-height:34px;border:1px solid var(--line);border-radius: 8px;background:#fff;padding:6px 10px;color:var(--ink);font:600 13px inherit;cursor:pointer}.rich-toolbar button:hover,.rich-image-button:hover{background:#f3f5f5}.rich-image-button{display:inline-flex;align-items:center}.rich-editor{min-height:300px;padding:18px;border:1px solid var(--line);border-radius: 10px;background:#fff;line-height:1.75;outline:none}.rich-editor:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(232,111,58,.12)}.rich-editor:empty::before{content:attr(data-placeholder);color:var(--muted);pointer-events:none}.rich-editor img,.announcement-body img{display:block;max-width:100%;height:auto;margin:14px 0;border-radius: 10px}.announcement-editor-actions,.announcement-acknowledge-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px}.announcement-read-stats{margin-bottom:18px;padding:13px 15px;border-radius: 10px;background:#f3f6f4;color:var(--ink);font-size:13px}.announcement-read-stats div{display:grid;gap:5px;margin-top:8px;color:var(--muted)}.announcement-read-stats .known{color:var(--ok)}.announcement-history{margin-top:28px;margin-bottom:0;background:#fafbf9}.announcement-viewer h2{font-size:28px;margin:0 0 16px}.announcement-body{line-height:1.8;word-break:break-word}.announcement-body h2{font-size:24px;margin:22px 0 8px}.announcement-body h3{font-size:19px;margin:18px 0 6px}.announcement-body ul{padding-left:24px}.announcement-acknowledge-row{padding-top:18px;border-top:1px solid var(--line)}
.shell { min-height: 100vh; }
.login-layout { min-height: 100vh; display: grid; grid-template-columns: 1.15fr .85fr; background: var(--navy); }
.login-intro { padding: clamp(42px, 8vw, 120px); display: flex; flex-direction: column; justify-content: center; color: white; background: radial-gradient(circle at 20% 15%, rgba(232,111,58,.24), transparent 27%), linear-gradient(135deg, var(--navy), #0d202d); }
.brand-mark { width: 58px; height: 58px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.35); border-radius: 14px; margin-bottom: 55px; font-weight: 850; letter-spacing: -.08em; }
.eyebrow { margin: 0 0 13px; letter-spacing: .16em; font-size: 12px; font-weight: 800; color: #f4a47d; }
.eyebrow.dark { color: var(--orange); }
.login-intro h1 { font-size: clamp(42px, 5vw, 70px); line-height: 1.13; letter-spacing: -.045em; margin: 0; }
.intro-copy { color: #b7c3ca; font-size: 17px; margin: 28px 0 0; }
.login-card { background: var(--paper); padding: clamp(38px, 7vw, 100px); display: flex; flex-direction: column; justify-content: center; gap: 22px; }
.login-card h2 { font-size: 34px; margin: 0 0 8px; }
.muted { color: var(--muted); margin: 0; }
label { display: grid; gap: 8px; font-size: 13px; font-weight: 750; }
input { min-width: 0; border: 1px solid var(--line); background: white; border-radius: 10px; padding: 13px 14px; color: var(--ink); outline: none; transition: .18s ease; }
input:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(232,111,58,.13); }
select { min-width: 0; border: 1px solid var(--line); background: white; border-radius: 10px; padding: 13px 14px; color: var(--ink); }
textarea { min-width: 0; resize: vertical; border: 1px solid var(--line); background: white; border-radius: 10px; padding: 11px 12px; color: var(--ink); outline: none; }
textarea:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(232,111,58,.13); }
/* 密碼欄的「眼睛」：輸到一半可以直接檢查，不必清空重打。
   Edge 內建的顯示鈕會跟自訂鈕重疊，關掉它只留一個。 */
.password-field { position: relative; display: block; }
.password-field input { width: 100%; padding-right: 48px; }
.password-field input::-ms-reveal, .password-field input::-ms-clear { display: none; }
.password-toggle { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; }
.password-toggle:hover { color: var(--navy); background: #f2f4f2; }
.password-toggle.is-showing { color: var(--orange); }
.password-toggle svg { width: 20px; height: 20px; }
.password-toggle .pw-eye-off, .password-toggle.is-showing .pw-eye { display: none; }
.password-toggle.is-showing .pw-eye-off { display: block; }
/* 鎖定規則要先講，不要等使用者被鎖了才知道 */
.login-lock-hint { margin: -14px 0 0; color: var(--muted); font-size: 12px; font-weight: 400; line-height: 1.65; }
.login-lock-hint b { color: var(--deep-red); font-weight: 800; }
.primary { border: 0; border-radius: 10px; background: var(--orange); color: white; padding: 14px 22px; font-weight: 800; box-shadow: 0 8px 22px rgba(232,111,58,.22); }
.primary:hover { background: #d95f2d; transform: translateY(-1px); }
.primary:disabled { opacity: .55; cursor: wait; transform: none; }
.error { color: #b94335; min-height: 20px; margin: -5px 0; font-size: 13px; }
.app-view { min-height: 100vh; display: flex; flex-direction: column; }
.topbar { height: 70px; background: var(--navy); color: white; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(20px, 5vw, 76px); }
.brand-inline { display: flex; align-items: center; gap: 12px; }
.brand-inline span { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #60717c; border-radius: 10px; font-weight: 850; font-size: 12px; }
.user-area { display: flex; align-items: center; gap: 16px; text-align: right; }
.user-area div { display: grid; gap: 2px; }
.user-area small { color: #aebbc2; }
/* 頂列的「檢視角色／門市／人員」（admin 專用）：預設 select 的 13px 內距在 70px 的列高裡太肥、
   白底也跟深藍頂列打架。改成與旁邊 text-button 同一套深色細框、同高度；展開的選項維持白底才看得清楚。 */
.user-area label { display: flex; align-items: center; gap: 7px; color: #aebbc2; font-size: 11px; font-weight: 750; white-space: nowrap; }
.user-area select { height: 34px; padding: 0 9px; border: 1px solid #52636e; border-radius: 8px; background: transparent; color: #fff; font-size: 12.5px; font-weight: 700; }
.user-area select option { background: #fff; color: var(--ink); }
.text-button { border: 1px solid #52636e; border-radius: 8px; padding: 8px 12px; color: white; background: transparent; }
.text-button.light { color: var(--navy); border-color: var(--line); background: var(--paper); }
.content { width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 34px 0 44px; flex: 1 0 auto; }
/* 全域頁尾：登入紀錄與版本資訊，所有分頁共用；一般人只看得到版本，登入紀錄只給助理／管理員 */
.app-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 18px 0 34px; border-top: 1px solid var(--line); }
.footer-log-btn { padding: 6px 12px; font-size: 12px; }
/* 版本紀錄：每一版一列，編號與日期在上、摘要在下 */
.version-log-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.version-log-row { padding: 11px 14px; border-bottom: 1px solid var(--line); }
.version-log-row:last-child { border-bottom: 0; }
.version-log-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.version-log-no { color: var(--navy); font-size: 13px; font-weight: 850; font-variant-numeric: tabular-nums; }
.version-log-meta code { padding: 1px 6px; border: 1px solid var(--line); border-radius: 5px; background: #f7f9f6; color: var(--navy); font: 800 11px/1.7 ui-monospace, SFMono-Regular, Menlo, monospace; }
.version-log-meta time { color: var(--muted); font-size: 11px; font-weight: 700; }
.version-log-current { padding: 1px 8px; border-radius: 999px; background: #e6f2ec; color: var(--green); font-size: 10.5px; font-weight: 800; }
.version-log-row p { margin: 6px 0 0; color: var(--ink); font-size: 13px; line-height: 1.6; }
@media (max-width: 640px) { .content, .app-footer { width: min(100% - 24px, 1180px); } }
.section-tabs { display: inline-flex; gap: 5px; padding: 5px; margin-bottom: 28px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.55); }
.section-tab { border: 0; border-radius: 8px; padding: 10px 18px; background: transparent; color: var(--muted); font-weight: 800; }
.section-tab.active { background: var(--navy); color: white; box-shadow: 0 5px 16px rgba(23,42,58,.18); }
.breadcrumb { color: var(--muted); font-size: 13px; margin-bottom: 28px; }
.breadcrumb span { padding: 0 8px; color: #a7afaa; }
.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.page-heading h1 { font-size: clamp(30px, 4vw, 46px); letter-spacing: -.04em; margin: 0 0 8px; }
.date-picker { min-width: 190px; }
.summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 20px; }
.summary-grid.single { grid-template-columns: minmax(280px, 440px); }
.summary-card { min-height: 145px; padding: 22px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); display: grid; align-content: space-between; }
.summary-card small { color: var(--muted); font-weight: 750; }
.summary-card strong { font-size: 34px; letter-spacing: -.04em; }
.summary-card strong em { font-size: 16px; color: var(--muted); font-style: normal; }
.summary-card span { color: var(--muted); font-size: 12px; }
.summary-card.accent { color: white; border-color: var(--navy-2); background: linear-gradient(135deg, var(--navy), var(--navy-2)); }
.summary-card.accent small, .summary-card.accent span { color: #bdc8ce; }
.summary-card.pending strong { color: var(--orange); }
.summary-card.profit-focus { min-height: 128px; color: white; border: 0; background: radial-gradient(circle at 90% 0, rgba(255,255,255,.2), transparent 38%), linear-gradient(135deg, #dd6633, var(--orange)); box-shadow: 0 16px 38px rgba(232,111,58,.22); }
.summary-card.profit-focus small, .summary-card.profit-focus span { color: rgba(255,255,255,.78); }
.form-card { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; }
.reconcile-frame-card { background: var(--cream); }.reconcile-frame-card iframe { width: 100%; height: 620px; border: 0; display: block; background: var(--cream); }
.form-card-head { padding: 22px 26px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.form-card-head h2 { margin: 0 0 4px; font-size: 20px; }
.form-card-head p { margin: 0; font-size: 13px; color: var(--muted); }
.target-matrix-actions { display: flex; align-items: center; gap: 10px; }.matrix-shortcuts { display: flex; gap: 7px; }.matrix-shortcuts .text-button { display: inline-flex; align-items: center; gap: 5px; padding: 10px 12px; font-size: 12px; font-weight: 800; white-space: nowrap; }.matrix-shortcuts .text-button span { color: var(--orange); font-size: 16px; line-height: 1; }.shortcut-highlight { animation: shortcut-highlight 1.1s ease; }@keyframes shortcut-highlight { 0%,100% { box-shadow: var(--shadow); } 35% { border-color: var(--orange); box-shadow: 0 0 0 4px rgba(232,111,58,.16), var(--shadow); } }
.new-hire-multipliers { display:flex; align-items:center; gap:8px; flex-wrap:nowrap; }.new-hire-multipliers label { display:grid; gap:4px; min-width:82px; color:var(--muted); font-size:10px; font-weight:800; text-align:center; }.new-hire-multipliers label > b { display:flex; align-items:center; gap:3px; }.new-hire-multipliers input { width:58px; padding:7px 5px; text-align:right; font-weight:800; }.new-hire-multipliers em { color:var(--muted); font-size:11px; font-style:normal; }.new-hire-multipliers .save-state { margin-left:6px; white-space:nowrap; }
.save-state { font-size: 12px; color: var(--muted); border: 1px solid var(--line); padding: 7px 10px; border-radius: 999px; }
.save-state.saved { color: var(--green); background: #edf7f3; border-color: #c7e5d9; }
.metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.metric { padding: 21px 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.metric:nth-child(3n) { border-right: 0; }
.metric label { display: block; color: var(--ink); font-size: 24px; font-weight: 800; line-height: 1.2; margin-bottom: 10px; }
.metric .stepper { display: grid; grid-template-columns: 50px minmax(0, 1fr) 50px; gap: 9px; align-items: stretch; }
.metric .input-wrap { position: relative; min-width: 0; }
.metric input { width: 100%; height: 50px; padding-right: 42px; text-align: center; font-size: 20px; font-weight: 750; appearance: textfield; }
.metric input::-webkit-inner-spin-button, .metric input::-webkit-outer-spin-button { appearance: none; margin: 0; }
.metric .unit { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 12px; }
.step-button { width: 50px; min-height: 50px; border: 1px solid #ccd3cf; border-radius: 10px; background: #f3f5f2; color: var(--navy); font-size: 27px; font-weight: 650; line-height: 1; touch-action: manipulation; user-select: none; }
.step-button:active { transform: scale(.94); background: #e8ece8; }
.step-button.plus { border-color: var(--navy); background: var(--navy); color: white; }
.step-button.plus:active { background: var(--navy-2); }
.gross-profit-metric { background: var(--orange-soft); }
.gross-profit-metric label { color: #b44e24; }
.gross-profit-metric input { border-color: #e7bea8; }
.form-actions { padding: 20px 26px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.form-actions p { margin: 0; color: var(--muted); font-size: 12px; }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--green); margin-right: 6px; }
.toast { position: fixed; left: 50%; bottom: 30px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; background: var(--navy); color: white; padding: 12px 18px; border-radius: 10px; box-shadow: var(--shadow); transition: .25s ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.month-chip { border: 1px solid var(--line); background: var(--paper); padding: 10px 14px; border-radius: 999px; color: var(--muted); font-size: 13px; font-weight: 750; }
.battle-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.battle-grid.two { grid-template-columns: 1.15fr 1fr; }
.battle-card { min-height: 180px; border: 1px solid var(--line); border-radius: 14px; padding: 24px; background: var(--paper); display: flex; flex-direction: column; justify-content: space-between; }
.battle-card small { color: var(--muted); font-weight: 800; }
.battle-card strong { font-size: clamp(30px, 4vw, 44px); letter-spacing: -.045em; }
.battle-card p { margin: 0; color: var(--muted); font-size: 12px; }
.battle-card.hero { color: white; border-color: var(--navy); background: radial-gradient(circle at 80% 10%, rgba(232,111,58,.35), transparent 35%), var(--navy); }
.battle-card.hero small, .battle-card.hero p { color: #bcc7ce; }
.battle-card.bonus strong { color: var(--orange); }
.tier-card { margin-bottom: 20px; padding: 24px 26px; border: 1px solid #ecd8c9; border-radius: 14px; background: linear-gradient(110deg, #fffaf5, var(--orange-soft)); }
.tier-copy { display: flex; align-items: center; gap: 14px; }
.tier-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 10px; background: var(--orange); color: white; font-size: 22px; }
.tier-copy small { color: var(--muted); font-weight: 750; }
.tier-copy h2 { margin: 3px 0 0; font-size: 20px; }
.progress-track { height: 9px; margin: 20px 0 10px; border-radius: 99px; overflow: hidden; background: #eadfd6; }
.progress-track i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--orange), #f5a36f); }
.tier-card > p { margin: 0; color: var(--muted); font-size: 12px; }
.monthly-metrics { display: grid; grid-template-columns: repeat(4, 1fr); }
.monthly-metric { min-height: 108px; padding: 20px 22px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; align-content: space-between; }
.monthly-metric:nth-child(4n) { border-right: 0; }
.monthly-metric small { color: var(--muted); font-weight: 700; }
.monthly-metric strong { font-size: 25px; }
.monthly-metric strong em { font-size: 12px; color: var(--muted); font-style: normal; }
.overview-tabs { margin: 0 0 24px; }
.quickview { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 30; }
.quickview-tab { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 13px 7px; background: var(--navy); color: #fff; border: 0; border-radius: 11px 0 0 11px; font: 800 12px inherit; letter-spacing: .12em; writing-mode: vertical-rl; cursor: pointer; box-shadow: -5px 0 16px rgba(25,46,58,.2); }
.quickview-panel { width: 224px; border: 1px solid var(--line); border-radius: 14px 0 0 14px; background: var(--paper); box-shadow: -8px 0 40px rgba(25,46,58,.2); overflow: hidden; }
.quickview.is-collapsed .quickview-panel { display: none; }
.quickview:not(.is-collapsed) .quickview-tab { display: none; }
.quickview-head { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.quickview-head strong { font-size: 12.5px; color: var(--navy); }
.quickview-head button { border: 0; background: transparent; color: var(--muted); font-size: 15px; line-height: 1; cursor: pointer; padding: 2px 4px; }
.quickview-body { padding: 9px 11px; display: grid; gap: 9px; max-height: 84vh; overflow-y: auto; }
.qv-seg-row { display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 8px; }
.qv-seg-row > span { font-size: 11px; font-weight: 700; color: var(--muted); }
.qv-seg { display: inline-flex; background: var(--cream); border: 1px solid var(--line); border-radius: 9px; padding: 2px; gap: 2px; }
.qv-seg button { flex: 1; border: 0; background: transparent; border-radius: 7px; padding: 5px 8px; font: 800 11px inherit; color: var(--muted); cursor: pointer; }
.qv-seg button.active { background: var(--orange); color: #fff; }
.qv-time button.active { background: var(--navy); color: #fff; }
.qv-block { display: grid; gap: 7px; border-top: 1px solid var(--line); padding-top: 9px; }
.qv-block-head { display: flex; align-items: center; justify-content: space-between; }
.qv-block-head > span:first-child { font-size: 10.5px; font-weight: 800; color: var(--muted); letter-spacing: .04em; }
.qv-block-head .qv-count { font-size: 10.5px; color: var(--muted); }
.qv-lock { display: none; font-size: 10.5px; color: var(--muted); }
.qv-block.qv-locked { opacity: .45; pointer-events: none; filter: grayscale(.35); }
.qv-block.qv-locked .qv-lock { display: inline; }
.qv-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.qv-chips button { border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 5px 9px; font: 800 11px inherit; color: var(--navy); cursor: pointer; }
.qv-chips button.active { background: var(--orange-soft); border-color: var(--orange); color: #b44e24; }
.qv-search { display: flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 9px; padding: 6px 9px; background: #fff; }
.qv-search svg { flex: none; color: var(--muted); }
.qv-search input { border: 0; outline: 0; font: inherit; font-size: 12px; width: 100%; background: transparent; color: var(--ink); }
.qv-people { display: grid; gap: 2px; max-height: 336px; overflow-y: auto; margin: 0 -4px; padding: 0 4px; }
.qv-people button { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border: 0; background: transparent; border-radius: 8px; cursor: pointer; text-align: left; width: 100%; }
.qv-people button:hover { background: var(--cream); }
.qv-people button.active { background: var(--orange-soft); }
.qv-avatar { width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 10.5px; }
.qv-people button.active .qv-avatar { background: var(--orange); }
.qv-name { flex: 1; min-width: 0; font-weight: 700; font-size: 12px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qv-store-tag { font-size: 10.5px; color: var(--muted); flex: none; }
.qv-empty { margin: 10px 0; color: var(--muted); font-size: 11.5px; text-align: center; }
@media (max-width: 900px) { .quickview { display: none; } }
.time-tabs { display: inline-flex; align-items: center; gap: 4px; margin: -10px 0 24px; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }
.time-tabs > span { padding: 0 8px; color: var(--muted); font-size: 11px; font-weight: 750; }
.time-tabs button { border: 0; border-radius: 8px; padding: 8px 13px; background: transparent; color: var(--muted); font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.time-tabs button.active { color: white; background: var(--navy); }
.owner-kpis { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; margin-bottom: 30px; }
.owner-kpi { min-height: 155px; padding: 22px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); display: flex; flex-direction: column; justify-content: space-between; }
.owner-kpi small, .owner-kpi span { color: var(--muted); font-size: 12px; }
.owner-kpi small { font-weight: 800; }
.owner-kpi strong { font-size: clamp(28px, 4vw, 42px); letter-spacing: -.045em; }
.owner-kpi.hero { color: white; border-color: var(--navy); background: radial-gradient(circle at 90% 0, rgba(232,111,58,.4), transparent 38%), var(--navy); }
.owner-kpi.hero small, .owner-kpi.hero span { color: #bdc8ce; }
.owner-section-head { display: flex; align-items: end; justify-content: space-between; margin: 0 0 14px; }
.owner-section-head h2 { margin: 0 0 4px; }
.owner-section-head p { margin: 0; color: var(--muted); font-size: 13px; }
.store-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; }
.store-status-card { border: 1px solid var(--line); border-radius: 14px; padding: 18px; background: var(--paper); color: var(--ink); text-align: left; transition: .18s ease; }
.store-status-card:hover, .store-status-card.active { border-color: var(--orange); box-shadow: 0 8px 24px rgba(25,46,58,.1); transform: translateY(-2px); }
.store-status-card.active { box-shadow: 0 0 0 2px rgba(232,111,58,.16); }
.store-card-top { display: flex; align-items: center; justify-content: space-between; }
.store-card-top span { color: var(--muted); font-size: 11px; }
.store-card-top strong { font-size: 19px; }
.store-profit { display: grid; gap: 5px; margin: 25px 0; }
.store-profit small { color: var(--muted); }
.store-profit b { font-size: 24px; letter-spacing: -.03em; }
.store-card-bottom { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 10px; }
.people-card { box-shadow: none; }
/* 區塊間距統一：兩個總覽面板的直接子區塊都留一致的呼吸距離（各卡臨時 margin 先歸零），小標與其下的內容維持貼近 */
#companyOverviewPanel > *, #singleStorePanel > * { margin-bottom: 0; }
#companyOverviewPanel > * + *, #singleStorePanel > * + * { margin-top: 26px; }
#companyOverviewPanel > .owner-section-head + .store-cards { margin-top: 14px; }
.weekly-report-panel { margin: 0 auto 30px; width: min(1180px, calc(100% - 40px)); }.weekly-report-input { padding: 20px 26px; color: var(--ink); }.weekly-report-input textarea { min-height: 260px; line-height: 1.65; }.weekly-report-archive { margin-top: 20px; box-shadow: none; }.report-archive-actions { display: flex; align-items: end; gap: 10px; }.report-archive-actions input { padding: 9px 10px; font-size: 13px; }.weekly-reports-archive { display: grid; gap: 10px; padding: 16px; }.weekly-report-row { padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: #fafbf8; }.weekly-report-row header { display: flex; justify-content: space-between; gap: 12px; color: var(--navy); font-size: 12px; }.weekly-report-row p { margin: 10px 0 0; white-space: pre-wrap; color: #4d5d66; font-size: 12px; line-height: 1.6; }.weekly-report-row small { color: var(--muted); }
.bulletin-board { margin: 0 0 22px; border: 1px solid #d8c5a0; border-radius: 14px; overflow: hidden; background: linear-gradient(135deg, #314957, #1d3442); color: #fff9e9; box-shadow: 0 15px 35px rgba(25,46,58,.16); }.bulletin-board header { display: flex; align-items: start; justify-content: space-between; gap: 14px; padding: 18px 22px; border-bottom: 1px solid rgba(255,255,255,.16); }.bulletin-board .eyebrow { margin-bottom: 5px; color: #f6bd82; font-size: 10px; }.bulletin-board h2 { margin: 0; font-size: 20px; }.bulletin-board .save-state { color: #dce7e8; border-color: rgba(255,255,255,.25); background: rgba(0,0,0,.12); white-space: nowrap; }.bulletin-note-list { display: grid; gap: 10px; padding: 16px 22px 20px; }.bulletin-note { padding: 14px 16px; border-radius: 10px; background: rgba(255,253,242,.1); border: 1px solid rgba(255,255,255,.12); }.bulletin-note strong { color: #ffd3a8; font-size: 12px; }.bulletin-note p { margin: 7px 0 0; white-space: pre-wrap; color: #fff9e9; font-size: 14px; line-height: 1.65; }.bulletin-note small { display: block; margin-top: 9px; color: #bdcbd0; font-size: 11px; }.bulletin-board.is-empty { opacity: .75; }.store-weekly-board { margin-bottom: 28px; }
.coaching-person-tags { display: flex; flex-wrap: wrap; gap: 8px; padding: 18px 22px 8px; }.coaching-person-tag { display: grid; gap: 2px; min-width: 88px; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: #f8f9f6; color: var(--navy); font-size: 12px; font-weight: 800; text-align: left; }.coaching-person-tag small { color: var(--muted); font-size: 9px; font-weight: 650; }.coaching-person-tag.active { border-color: var(--orange); background: var(--orange-soft); color: #b44e24; box-shadow: 0 0 0 3px rgba(232,111,58,.12); }.coaching-input { padding: 12px 22px 22px; color: var(--ink); }.coaching-input textarea { min-height: 150px; line-height: 1.65; }
.single-store-person-tags { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 22px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fafbf8; }.person-selector-tag { display: grid; gap: 2px; min-width: 82px; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: #fff; color: var(--navy); font-size: 12px; font-weight: 800; text-align: left; cursor: pointer; }.person-selector-tag small { color: var(--muted); font-size: 9px; font-weight: 650; }.person-selector-tag.active { border-color: var(--orange); background: var(--orange-soft); color: #b44e24; box-shadow: 0 0 0 3px rgba(232,111,58,.12); }.person-coaching-note { margin: 0 0 15px; padding: 13px 15px; border: 1px solid #efd8bc; border-radius: 10px; background: #fff8ed; color: var(--ink); }.person-coaching-note header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }.person-coaching-note strong { color: #ad5229; font-size: 12px; }.person-coaching-note span { color: var(--muted); font-size: 10px; }.person-coaching-note p { margin: 8px 0 0; white-space: pre-wrap; font-size: 13px; line-height: 1.6; }.person-coaching-note.is-empty { border-style: dashed; background: #fafbf8; }.person-coaching-note.is-empty strong { color: var(--muted); }
.performance-heatmap-card { margin-top: 20px; box-shadow: none; }.heatmap-tools { display: flex; align-items: flex-end; gap: 10px; }.heatmap-legend { display: flex; align-items: center; justify-content: flex-end; gap: 5px; padding: 10px 18px; color: var(--muted); font-size: 10px; }.heatmap-legend i { width: 20px; height: 12px; border-radius: 3px; background: #fff; border: 1px solid #f0dfd7; }.heatmap-legend i:nth-of-type(2) { background: #ffd9d0; }.heatmap-legend i:nth-of-type(3) { background: #f58b72; }.heatmap-legend i:nth-of-type(4) { background: #e83a19; }.heatmap-wrap { overflow: auto; }.performance-heatmap { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 11px; }.performance-heatmap th { position: sticky; top: 0; z-index: 2; padding: 9px 3px; background: var(--navy); color: white; text-align: center; white-space: nowrap; overflow: hidden; font-size: 10.5px; }.performance-heatmap th:first-child { position: sticky; left: 0; z-index: 3; width: 82px; text-align: left; }.performance-heatmap td { padding: 8px 3px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: center; white-space: nowrap; overflow: hidden; font-variant-numeric: tabular-nums; }.performance-heatmap td:first-child { position: sticky; left: 0; z-index: 1; width: 82px; background: var(--paper); text-align: left; }.performance-heatmap td:first-child strong { display: block; overflow: hidden; text-overflow: ellipsis; }.performance-heatmap td small { display: block; margin-top: 2px; color: #6c4134; font-size: 9px; }.performance-heatmap .heat-empty { padding: 26px; color: var(--muted); background: var(--paper); text-align: center; }.performance-heatmap-card:fullscreen { background: var(--cream); padding: 22px; overflow: auto; }.performance-heatmap-card:fullscreen .performance-heatmap { font-size: 13px; }.performance-heatmap-card:fullscreen .performance-heatmap th { font-size: 12px; padding: 11px 4px; }.performance-heatmap-card:fullscreen .performance-heatmap td { padding: 11px 4px; }
.company-metrics-card { margin-bottom: 20px; box-shadow: none; }
.people-toolbar { display: flex; align-items: end; gap: 12px; }
.compact-select, .store-select { display: grid; gap: 5px; color: var(--muted); font-size: 11px; font-weight: 700; }
.compact-select select, .store-select select { min-width: 150px; padding: 9px 30px 9px 10px; font-size: 13px; }
.sort-controls { display: flex; align-items: end; gap: 7px; }
.sort-arrows { display: flex; flex-direction: column; align-self: end; width: 30px; height: 36px; overflow: hidden; padding: 2px 0; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); }
.sort-arrows button { position: relative; flex: 1 1 50%; width: 100%; border: 0; padding: 0; background: transparent; font-size: 0; }
.sort-arrows button::before { content: ""; position: absolute; left: 50%; transform: translateX(-50%); border-left: 5px solid transparent; border-right: 5px solid transparent; }
.sort-arrows button[data-direction="asc"]::before { top: 4px; border-bottom: 6px solid #9ba6a5; }
.sort-arrows button[data-direction="desc"]::before { bottom: 4px; border-top: 6px solid #9ba6a5; }
.sort-arrows button.active::before { border-bottom-color: var(--navy); border-top-color: var(--navy); }
.single-store-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 22px; }
.single-store-heading h2 { margin: 0 0 5px; font-size: 28px; }
.single-store-heading p { margin: 0; }
.company-metrics { display: grid; grid-template-columns: repeat(4, 1fr); }
.company-metric { min-height: 104px; padding: 15px 18px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; justify-content: space-between; }
.company-metric:nth-child(4n) { border-right: 0; }
.company-metric small, .company-metric span { color: var(--muted); font-size: 11px; }
.company-metric small { font-weight: 750; }
.company-metric strong { font-size: 24px; }
.company-metric strong em { color: var(--muted); font-size: 11px; font-style: normal; }
/* 業績項目熱力圖：底色深到一定程度就把字翻白，維持可讀 */
.company-metric.on-heat, .company-metric.on-heat strong, .company-metric.on-heat b.achievement { color: #fff; }
.company-metric.on-heat small, .company-metric.on-heat span, .company-metric.on-heat strong em { color: rgba(255, 255, 255, .85); }
.cm-bar { display: flex; height: 7px; margin-top: 10px; border-radius: 999px; overflow: hidden; background: rgba(23, 42, 58, .1); }
.cm-bar i { display: block; height: 100%; flex: none; }
.cm-prev { background: var(--navy); }
.cm-today { background: var(--orange); }
.company-metric.on-heat .cm-bar { background: rgba(255, 255, 255, .24); }
.company-metric.on-heat .cm-prev, .pm-cell.on-heat .cm-prev { background: rgba(255, 255, 255, .85); }
.company-metric.on-heat .cm-today, .pm-cell.on-heat .cm-today { background: #ff9f5a; }
.metric-heat-legend { border-bottom: 1px solid var(--line); }
.metric-heat-legend i { border-color: rgba(23, 42, 58, .16); }
.metric-heat-color { display: flex; align-items: center; gap: 6px; margin-left: 12px; color: var(--muted); font-size: 10px; }
.metric-heat-color input { width: 30px; height: 20px; padding: 0; border: 1px solid var(--line); border-radius: 4px; background: none; cursor: pointer; }
.people-table-wrap { overflow-x: auto; }
.people-table { width: 100%; border-collapse: collapse; min-width: 680px; }
.people-table th { padding: 12px 20px; color: var(--muted); background: #f5f6f3; font-size: 11px; text-align: left; }
.people-table td { padding: 15px 20px; border-top: 1px solid var(--line); font-size: 13px; }
.people-table td:first-child { display: grid; gap: 3px; }
.people-table td:first-child small { color: var(--muted); }
.people-table .number { text-align: right; font-variant-numeric: tabular-nums; }
.report-badge { display: inline-flex; padding: 5px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; }
.report-badge.done { color: #257358; background: #e9f5f0; }
.report-badge.waiting { color: #9a5b1d; background: #fff3df; }
.insight-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 28px; }
.chart-card { padding: 22px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); box-shadow: 0 12px 34px rgba(25,46,58,.07); }
.personal-chart-card { margin-bottom: 20px; }
.chart-head { min-height: 52px; display: flex; align-items: start; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.chart-head .eyebrow { margin-bottom: 5px; font-size: 9px; }
.chart-head h2 { margin: 0; font-size: 19px; letter-spacing: -.02em; }
.chart-head > span { color: var(--muted); font-size: 10px; white-space: nowrap; }
.bar-chart { display: grid; gap: 13px; }
.bar-row { display: grid; grid-template-columns: 20px minmax(58px, .75fr) minmax(80px, 1.5fr) 82px; gap: 8px; align-items: center; min-height: 25px; }
.bar-rank { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 8px; color: var(--muted); background: #f0f2ef; font-size: 9px; font-weight: 800; }
.bar-label { overflow: hidden; color: #45545d; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { height: 9px; overflow: hidden; border-radius: 99px; background: #edf0ed; }
.bar-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--orange), #f0a06d); }
.bar-track i.negative { background: linear-gradient(90deg, #b65050, #df8585); }
.bar-row strong { color: var(--navy); font-size: 10px; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; overflow: hidden; text-overflow: ellipsis; }
.chart-empty { display: grid; place-items: center; min-height: 170px; color: var(--muted); font-size: 12px; border: 1px dashed var(--line); border-radius: 10px; }
.account-create-card { margin-bottom: 28px; }
.account-form-grid { display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: 14px; align-items: end; padding: 22px 26px; }
.account-form-grid input, .account-form-grid select { height: 48px; padding: 12px 14px; }
.role-management-section { margin: 30px 0; }.role-board, .staff-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }.staff-board { margin-bottom: 22px; }
.role-column { min-height: 178px; max-height: 258px; display: grid; grid-template-rows: auto minmax(0, 1fr); border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.52); transition: .18s ease; overflow: hidden; }.staff-column { min-height: 220px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.52); transition: .18s ease; overflow: hidden; }
.role-column.drag-over, .staff-column.drag-over { border-color: var(--orange); background: var(--orange-soft); box-shadow: 0 0 0 3px rgba(232,111,58,.12); }
.staff-column-head { display: flex; align-items: center; justify-content: space-between; padding: 16px; border-bottom: 1px solid var(--line); background: var(--paper); }
.staff-column-head h3 { margin: 0; font-size: 17px; }.staff-column-head span { color: var(--muted); font-size: 11px; }
.staff-dropzone, .account-card-list { display: grid; gap: 9px; padding: 10px; }.role-dropzone { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); align-content: start; gap: 7px; overflow-y: auto; padding: 9px; }
.person-account-card { display: grid; grid-template-columns: 38px minmax(0,1fr); gap: 10px; align-items: center; padding: 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); box-shadow: 0 4px 14px rgba(25,46,58,.04); }
.person-account-card[draggable="true"] { cursor: grab; }.person-account-card.dragging { opacity: .45; }
.compact-role-card { grid-template-columns: 38px minmax(0,1fr) auto; }.compact-role-card .save-state { white-space: nowrap; }
.role-drag-chip { min-width: 0; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 7px; align-items: center; padding: 7px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); cursor: grab; box-shadow: 0 3px 10px rgba(25,46,58,.04); }.role-drag-chip.dragging { opacity: .45; }.role-drag-chip:hover { border-color: var(--orange); background: var(--orange-soft); }.role-chip-avatar { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: var(--navy); color: white; font-size: 10px; font-weight: 850; }.role-drag-chip span:last-child { min-width: 0; display: grid; gap: 1px; }.role-drag-chip strong, .role-drag-chip small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.role-drag-chip strong { font-size: 11px; }.role-drag-chip small { color: var(--muted); font-size: 9px; }
.person-avatar { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: var(--navy); color: white; font-weight: 800; }
.person-copy { display: grid; gap: 2px; min-width: 0; }.person-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }.person-copy small { color: var(--muted); font-size: 10px; }
.person-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; padding-top: 3px; }
.mini-button { border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; background: #f6f7f4; color: var(--navy); font-size: 10px; font-weight: 750; }.mini-button.danger { color: #a6473b; }
.account-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }.account-lists .form-card { box-shadow: none; }
#globalAccounts { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 7px; }.global-person-card { grid-template-columns: 28px minmax(0,1fr) auto; gap: 7px; padding: 7px 8px; box-shadow: none; }.global-person-card .person-avatar { width: 28px; height: 28px; border-radius: 8px; font-size: 10px; }.global-person-card .person-copy strong { font-size: 11px; }.global-person-card .person-actions { grid-column: auto; padding: 0; justify-content: flex-end; align-items: center; }.global-person-card .person-actions .mini-button { padding: 5px 6px; font-size: 9px; }.global-person-card .save-state { padding: 4px 6px; font-size: 9px; }
.empty-note { margin: 20px 8px; color: var(--muted); text-align: center; font-size: 11px; }.empty-note.padded { padding: 20px; }
.modal { width: min(460px, calc(100% - 28px)); border: 0; border-radius: 14px; padding: 0; color: var(--ink); box-shadow: 0 28px 90px rgba(12,30,42,.3); }.modal::backdrop { background: rgba(10,25,35,.58); backdrop-filter: blur(3px); }
.modal form, .credential-result { display: grid; gap: 18px; padding: 26px; }.modal-head { display: flex; align-items: start; justify-content: space-between; }.modal-head h2, .credential-result h2 { margin: 0; }.icon-button { border: 0; background: transparent; font-size: 28px; color: var(--muted); }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }.credential-result > strong { display: block; padding: 18px; border-radius: 10px; background: var(--navy); color: white; text-align: center; font-size: 32px; letter-spacing: .14em; }
.metric-settings-grid { display: grid; grid-template-columns: repeat(2, 1fr); }
.metric-setting-row { display: grid; grid-template-columns: .35fr 1.3fr .6fr .7fr auto auto; align-items: end; gap: 10px; padding: 16px 18px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.metric-setting-row:nth-child(2n) { border-right: 0; }.metric-setting-row > strong { padding-bottom: 13px; font-size: 12px; color: var(--navy); }
.metric-setting-row label { font-size: 10px; }.metric-setting-row input { padding: 9px; border-radius: 8px; font-size: 13px; }
.metric-newhire-toggle { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: var(--navy); white-space: nowrap; padding-bottom: 9px; cursor: pointer; }
.metric-newhire-toggle input { width: 16px; height: 16px; margin: 0; padding: 0; flex: none; cursor: pointer; }
.form-head-actions { display: flex; align-items: center; gap: 10px; }.add-icon-button, .delete-icon-button { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; background: #f4f6f3; color: var(--navy); font-size: 22px; font-weight: 700; line-height: 1; }.add-icon-button { background: var(--navy); border-color: var(--navy); color: white; }.delete-icon-button { color: #b4473c; }.delete-icon-button:hover { border-color: #d69289; background: #fff1ef; }
.target-settings-section { margin-top: 38px; }.target-heading { margin-bottom: 18px; }.target-heading h2 { margin: 0 0 5px; font-size: 28px; }
/* 區塊與區塊之間拉開：卡片後面若接著下一個標題（如 職等設計表 → 全員月目標總表），標題上方留 38px */
.target-settings-section .form-card + .target-heading { margin-top: 38px; }.target-selectors { display: flex; gap: 12px; }.target-selectors label { min-width: 155px; }.target-selectors input, .target-selectors select { padding: 10px; }
.target-settings-grid { display: grid; grid-template-columns: repeat(4, 1fr); }.target-setting { padding: 17px 19px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }.target-setting:nth-child(4n) { border-right: 0; }.target-setting span { color: var(--ink); font-size: 12px; }.target-setting em { color: var(--muted); font-size: 10px; font-style: normal; }.target-setting input { padding: 10px; text-align: right; font-weight: 750; }
.csv-target-card { margin-top: 18px; }.csv-import-row { display: flex; align-items: end; gap: 16px; padding: 20px 26px; }.csv-import-row label { flex: 1; }.csv-import-row .primary { white-space: nowrap; }.achievement { color: var(--deep-red); font-size: 11px; }.monthly-metric { gap: 4px; }.monthly-metric span { color: var(--muted); font-size: 11px; }.progress-metric strong { font-size: 27px; }.detail-person-select { min-width: 190px; }
.metric-detail-card .monthly-metrics { display: block; padding: 0 26px; }
.person-progress-row { padding: 12px 0; border-bottom: 1px solid var(--line); }
.person-progress-row:last-child { border-bottom: 0; }
.person-progress-head { display: grid; grid-template-columns: minmax(92px, 1fr) auto auto; align-items: baseline; gap: 10px; margin-bottom: 7px; }
.person-progress-head small { color: var(--ink); font-weight: 750; }.person-progress-head small em { color: var(--muted); font-size: 10px; font-style: normal; }
.person-progress-head strong { font-size: 14px; }.person-progress-head strong span { color: var(--muted); font-size: 11px; font-weight: 600; }.person-progress-track { height: 8px; overflow: hidden; border-radius: 999px; background: #edf0ed; }.person-progress-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--orange), #f1a06b); }
.target-month-picker { min-width: 170px; }.target-matrix-wrap { overflow: auto; max-height: 68vh; }.target-matrix { width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; }.target-matrix th { position: sticky; top: 0; z-index: 2; min-width: 112px; padding: 13px 10px; background: var(--navy); color: white; border-right: 1px solid #405665; text-align: center; white-space: nowrap; }.target-matrix th small { display: block; margin-top: 3px; color: #b8c5cc; font-weight: 500; }.target-matrix th:nth-child(-n+3), .target-matrix td:nth-child(-n+3) { position: sticky; z-index: 1; }.target-matrix th:nth-child(1), .target-matrix td:nth-child(1) { left: 0; min-width: 64px; }.target-matrix th:nth-child(2), .target-matrix td:nth-child(2) { left: 64px; min-width: 86px; }.target-matrix th:nth-child(3), .target-matrix td:nth-child(3) { left: 150px; min-width: 90px; }.target-matrix th:nth-child(-n+3) { z-index: 3; }.target-matrix td { padding: 7px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--paper); text-align: center; white-space: nowrap; }.target-matrix tr:nth-child(even) td { background: #fafbf8; }.target-matrix td input { width: 88px; padding: 8px; border-radius: 8px; text-align: right; font-size: 12px; }.target-matrix td:nth-child(2) { font-variant-numeric: tabular-nums; color: var(--muted); }.target-matrix td:nth-child(3) { text-align: left; }
.store-management-section { margin: 30px 0; }.store-management-create { margin-top: 0; }.create-store-card { margin-bottom: 14px; box-shadow: none; }.store-management-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }.store-manage-card { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }.store-manage-card div { display: grid; gap: 3px; }.store-manage-card small { color: var(--muted); font-size: 11px; }
.bonus-policy-heading { align-items: start; }
.bonus-policy-toolbar { display: grid; grid-template-columns: 150px minmax(220px, 1fr); gap: 12px; min-width: min(100%, 430px); }
.bonus-policy-toolbar input { padding: 10px 12px; }
.bonus-field-guide { position: fixed; z-index: 20; width: min(330px, calc(100vw - 30px)); padding: 12px 14px; border: 1px solid #d7a283; border-radius: 10px; background: #243947; color: white; box-shadow: 0 14px 32px rgba(13,35,48,.24); font-size: 12px; line-height: 1.6; pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .12s ease, transform .12s ease; }.bonus-field-guide.show { opacity: 1; transform: translateY(0); }.bonus-field-guide strong { display: block; margin-bottom: 3px; color: #ffd0b8; font-size: 12px; }.bonus-policy-panel :is(input, select, textarea).is-guide-related, #bonusPolicyPanel :is(input, select, textarea).is-guide-related { border-color: var(--orange); background: #fff7f1; box-shadow: 0 0 0 3px rgba(232,111,58,.16); }
.bonus-guide-dialog { width: min(900px, calc(100% - 28px)); max-height: min(850px, calc(100vh - 28px)); }
.bonus-guide-content { display: grid; gap: 16px; padding: 26px; }
.bonus-guide-content .modal-head { gap: 18px; }.bonus-guide-content .modal-head > div { max-width: 720px; }.bonus-guide-content .modal-head h2 { margin: 0 0 7px; }.bonus-guide-content .modal-head p { margin: 0; }
.bonus-guide-nav { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.bonus-guide-nav a { padding: 6px 9px; border-radius: 999px; background: #f2f5f2; color: var(--navy); font-size: 11px; font-weight: 800; text-decoration: none; }
.bonus-guide-body { max-height: min(540px, calc(100vh - 280px)); overflow: auto; padding-right: 10px; color: var(--ink); line-height: 1.7; }.bonus-guide-body section { scroll-margin-top: 12px; padding: 4px 0 20px; border-bottom: 1px solid var(--line); }.bonus-guide-body section:last-child { border-bottom: 0; }.bonus-guide-body h3 { margin: 0 0 8px; color: var(--navy); font-size: 18px; }.bonus-guide-body p { margin: 0 0 13px; font-size: 13px; }.bonus-guide-body dl { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 0 18px; margin: 0; }.bonus-guide-body dt, .bonus-guide-body dd { margin: 0; padding: 10px 0; border-top: 1px solid #e8ece8; font-size: 12px; }.bonus-guide-body dt { color: var(--navy); font-weight: 850; }.bonus-guide-body dd { color: #475965; }.bonus-guide-callout { padding: 13px 15px; border: 1px solid #f0cdbb; border-radius: 10px; background: var(--orange-soft); color: #78452e; }
.policy-guide { display: grid; grid-template-columns: auto 1fr; gap: 14px; margin-bottom: 18px; padding: 15px 18px; border: 1px solid #f0cdbb; border-radius: 10px; background: var(--orange-soft); color: #78452e; font-size: 12px; line-height: 1.6; }
.policy-guide strong { color: var(--orange); white-space: nowrap; }
.bonus-policy-sections { display: grid; gap: 18px; }
.bonus-section { box-shadow: 0 9px 30px rgba(25,46,58,.06); }
.bonus-section-head { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 14px; align-items: end; padding: 18px 20px; border-bottom: 1px solid var(--line); background: #f8f8f4; }
.bonus-section-index { align-self: center; color: #aeb7b6; font-size: 24px; font-weight: 850; letter-spacing: -.05em; }
.bonus-section-copy { display: grid; grid-template-columns: minmax(180px, .65fr) minmax(280px, 1.35fr); gap: 12px; }
.bonus-section-copy label, .bonus-rule-main label { gap: 5px; color: var(--muted); font-size: 10px; }
.bonus-section-copy input, .bonus-rule-main input, .bonus-rule-main select { padding: 9px 10px; border-radius: 8px; font-size: 12px; }
.bonus-section-copy [data-section-field="title"] { color: var(--navy); font-weight: 800; }
.bonus-section-buttons { display: flex; gap: 8px; align-items: center; }
.bonus-section-buttons .text-button { padding: 8px 10px; font-size: 11px; font-weight: 800; white-space: nowrap; }
.collapse-button { height: 34px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 8px; padding: 0 10px; background: white; color: var(--muted); font-size: 10px; font-weight: 800; }
.collapse-button i { width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .18s ease; }
.bonus-section.is-collapsed .collapse-button i { transform: rotate(-45deg) translate(-1px, 1px); }
.bonus-section.is-collapsed .bonus-rules { display: none; }
.bonus-section.is-collapsed .bonus-section-head { border-bottom: 0; }
.bonus-rule { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr) 34px; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.bonus-rule:last-child { border-bottom: 0; }
.bonus-rule-number { width: 26px; height: 26px; display: grid; place-items: center; margin-top: 19px; border-radius: 8px; background: var(--navy); color: white; font-size: 10px; font-weight: 850; }
.bonus-rule-main { display: grid; grid-template-columns: repeat(5, minmax(110px, 1fr)); gap: 10px; align-items: end; }
.number-unit-input { display: grid; grid-template-columns: minmax(0, 1fr) 58px; gap: 5px; }
.number-unit-input input:last-child { text-align: center; font-weight: 800; background: #f7f8f5; }
.bonus-rule-name { grid-column: span 2; }
.bonus-rule-name input { font-weight: 800; }
.bonus-rule-notes { grid-column: span 4; }
.bonus-rule-notes textarea { min-height: 58px; font-size: 12px; line-height: 1.45; }
.bonus-check { display: flex !important; flex-direction: row; align-items: center; align-self: center; gap: 7px !important; padding-top: 15px; color: var(--ink) !important; }
.bonus-check input { width: 17px; height: 17px; padding: 0; accent-color: var(--orange); }
.bonus-delete { margin-top: 19px; }
.policy-empty { padding: 44px; color: var(--muted); text-align: center; box-shadow: none; }
.bonus-policy-actions { position: sticky; bottom: 14px; z-index: 4; display: flex; justify-content: space-between; gap: 12px; margin-top: 20px; padding: 13px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,254,251,.94); box-shadow: 0 12px 35px rgba(25,46,58,.14); backdrop-filter: blur(8px); }
.game-rules-area { margin-top: 42px; }
.game-rule-card { margin-bottom: 18px; box-shadow: 0 9px 30px rgba(25,46,58,.06); }
.game-rule-card > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; background: #f8f8f4; cursor: pointer; list-style: none; }
.game-rule-card > summary::-webkit-details-marker { display: none; }
.game-rule-card > summary h3 { margin: 0 0 4px; font-size: 20px; }.game-rule-card > summary p { margin: 0; color: var(--muted); font-size: 12px; }.game-rule-card > summary > span { color: var(--orange); font-size: 11px; font-weight: 800; }
.game-table-wrap { overflow-x: auto; border-top: 1px solid var(--line); }
.game-rule-table { width: max-content; min-width: 100%; border-collapse: collapse; font-size: 11px; }
.game-rule-table th { min-width: 92px; padding: 11px 8px; background: var(--navy); color: white; text-align: center; white-space: nowrap; }.game-rule-table th small { color: #b8c5cc; font-weight: 500; }
.game-rule-table td { padding: 7px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--paper); text-align: center; }.game-rule-table tr:nth-child(even) td { background: #fafbf8; }
.game-rule-table input, .game-rule-table select { width: 88px; padding: 8px; border-radius: 8px; text-align: right; font-size: 11px; }.game-rule-table td:first-child input { width: 105px; text-align: left; font-weight: 800; }.game-rule-table .game-note-input { width: 230px; text-align: left; }
.game-card-actions { display: flex; justify-content: flex-end; padding: 12px 16px; }.game-card-actions button { color: var(--navy); font-size: 11px; font-weight: 800; }
.manager-store-list { display: grid; gap: 14px; padding: 16px; border-top: 1px solid var(--line); }
.manager-store-card { overflow: hidden; border: 1px solid var(--line); border-radius: 10px; }
.manager-store-head { display: flex; align-items: end; gap: 12px; padding: 14px; background: #fafbf8; }.manager-store-fields { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }.manager-store-fields label { color: var(--muted); font-size: 10px; }.manager-store-fields input { padding: 9px; border-radius: 8px; font-size: 12px; }
.game-rules-notes { margin-top: 16px; }.game-rules-notes textarea { min-height: 90px; line-height: 1.55; }
.rn-engine-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 18px; padding: 14px 18px; border-top: 1px solid var(--line); background: #fffefb; }.rn-engine-toolbar label { min-width: 250px; color: var(--muted); font-size: 10px; }.rn-engine-toolbar select { padding: 9px 10px; border-radius: 8px; font-size: 12px; }.rn-engine-toolbar p { max-width: 560px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.rn-rule-table th:first-child { min-width: 42px; }.rn-rule-table td:first-child { color: var(--muted); font-weight: 800; }.rn-rule-table input, .rn-rule-table select { width: 105px; text-align: left; }.rn-rule-table .rn-date-input { width: 88px; }.rn-rule-table .rn-code-input { width: 150px; }.rn-rule-table .game-note-input { width: 190px; }.rn-rule-number { width: 42px; }.rn-empty { padding: 26px !important; color: var(--muted); text-align: center !important; }
.rn-engine-footer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: end; padding: 14px 18px; }.rn-engine-footer label { color: var(--muted); font-size: 10px; }.rn-engine-footer textarea { min-height: 58px; font-size: 12px; line-height: 1.45; }.rn-engine-footer button { margin-bottom: 2px; white-space: nowrap; }
@media (max-width: 820px) {
  .target-matrix-head { align-items: stretch; flex-direction: column; }.target-matrix-actions { justify-content: space-between; flex-wrap: wrap; }
  .rn-engine-toolbar { align-items: stretch; flex-direction: column; }.rn-engine-toolbar label { min-width: 0; }.rn-engine-footer { grid-template-columns: 1fr; }.rn-engine-footer button { justify-self: start; }
  .login-layout { grid-template-columns: 1fr; }
  .login-intro { min-height: 38vh; padding: 38px 28px; }
  .brand-mark { margin-bottom: 32px; }
  .login-card { padding: 42px 28px; }
  .summary-grid { grid-template-columns: 1fr; }
  .battle-grid { grid-template-columns: 1fr; }
  .insight-grid { grid-template-columns: 1fr; }
  .owner-kpis { grid-template-columns: 1fr; }
  .store-cards { grid-template-columns: repeat(2, 1fr); }
  .overview-quick-menu { right: 10px; top: auto; bottom: 14px; width: min(270px, calc(100vw - 28px)); max-height: 170px; transform: none; }.quick-menu-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .role-board, .staff-board { grid-template-columns: repeat(2, 1fr); }.account-form-grid { grid-template-columns: repeat(2, 1fr); }.account-form-grid .primary { grid-column: 1 / -1; }
  .metric-settings-grid { grid-template-columns: 1fr; }.metric-setting-row, .metric-setting-row:nth-child(2n) { border-right: 0; }.target-settings-grid { grid-template-columns: repeat(2, 1fr); }.target-setting:nth-child(4n) { border-right: 1px solid var(--line); }.target-setting:nth-child(2n) { border-right: 0; }
  .store-management-list { grid-template-columns: repeat(2, 1fr); }
  .bonus-policy-heading { align-items: stretch; flex-direction: column; }.bonus-policy-toolbar { min-width: 0; }.bonus-section-copy { grid-template-columns: 1fr; }.bonus-rule-main { grid-template-columns: repeat(3, minmax(105px, 1fr)); }.bonus-rule-name { grid-column: span 2; }.bonus-rule-notes { grid-column: span 2; }
  .manager-store-fields { grid-template-columns: repeat(2, 1fr); }
  .company-metrics { grid-template-columns: repeat(2, 1fr); }
  .company-metric:nth-child(4n) { border-right: 1px solid var(--line); }
  .company-metric:nth-child(2n) { border-right: 0; }
  .monthly-metrics { grid-template-columns: repeat(2, 1fr); }
  .monthly-metric:nth-child(4n) { border-right: 1px solid var(--line); }
  .monthly-metric:nth-child(2n) { border-right: 0; }
  .metrics-grid { grid-template-columns: repeat(2, 1fr); }
  .metric:nth-child(3n) { border-right: 1px solid var(--line); }
  .metric:nth-child(2n) { border-right: 0; }
}
@media (max-width: 540px) {
  .content { width: min(100% - 24px, 1180px); padding-top: 22px; }
  .page-heading { align-items: stretch; flex-direction: column; }
  .metrics-grid { grid-template-columns: 1fr; }
  .metric, .metric:nth-child(3n) { border-right: 0; }
  .metric { padding: 18px 16px; }
  .metric .stepper { grid-template-columns: 58px minmax(0, 1fr) 58px; gap: 10px; }
  .step-button { width: 58px; min-height: 56px; font-size: 31px; }
  .metric input { height: 56px; font-size: 22px; }
  .form-actions { align-items: stretch; flex-direction: column; }
  .monthly-metrics { grid-template-columns: 1fr; }
  .monthly-metric, .monthly-metric:nth-child(4n) { border-right: 0; }
  .topbar { padding: 0 14px; }
  .brand-inline strong { display: none; }
  .store-cards { grid-template-columns: 1fr; }
  .role-board, .staff-board, .account-form-grid, .account-lists { grid-template-columns: 1fr; }.account-form-grid .primary { grid-column: auto; }
  .target-heading { align-items: stretch; }.target-selectors { display: grid; grid-template-columns: 1fr 1fr; }.target-selectors label { min-width: 0; }.target-settings-grid { grid-template-columns: 1fr; }.target-setting, .target-setting:nth-child(4n) { border-right: 0; }.metric-setting-row { grid-template-columns: 1fr 1fr; }.metric-setting-row > strong { grid-column: 1 / -1; padding-bottom: 0; }.metric-setting-row .mini-button { grid-column: 1 / -1; }.csv-import-row { align-items: stretch; flex-direction: column; }.detail-person-select { min-width: 0; }
  .store-management-list { grid-template-columns: 1fr; }.single-store-heading { align-items: stretch; flex-direction: column; }.store-select select { width: 100%; }.people-toolbar { align-items: stretch; flex-direction: column; }.sort-controls { align-items: end; }
  .company-metrics { grid-template-columns: repeat(2, 1fr); }
  .company-metric, .company-metric:nth-child(4n) { border-right: 0; }
  .company-metric:nth-child(odd) { border-right: 1px solid var(--line); }.company-metric { min-height: 96px; padding: 13px 12px; }
  .person-progress-head { grid-template-columns: minmax(78px, 1fr) auto; gap: 6px; }.person-progress-head .achievement { grid-column: 2; }.metric-detail-card .monthly-metrics { padding: 0 16px; }
  .owner-section-head { align-items: start; }
  .bar-row { grid-template-columns: 18px 72px minmax(60px, 1fr) 68px; }
  #managementNavigation { display: flex; max-width: 100%; overflow-x: auto; }.section-tab { white-space: nowrap; }.bonus-policy-toolbar { grid-template-columns: 1fr; }.bonus-guide-content { padding: 20px; }.bonus-guide-body { max-height: calc(100vh - 250px); }.bonus-guide-body dl { grid-template-columns: 1fr; }.bonus-guide-body dt { padding-bottom: 2px; border-bottom: 0; }.bonus-guide-body dd { padding-top: 2px; }.policy-guide { grid-template-columns: 1fr; }.bonus-section-head { grid-template-columns: 32px 1fr; align-items: start; }.bonus-section-buttons { grid-column: 2; flex-wrap: wrap; }.bonus-rule { grid-template-columns: 26px minmax(0, 1fr) 30px; gap: 7px; padding: 14px 12px; }.bonus-rule-main { grid-template-columns: repeat(2, minmax(0, 1fr)); }.bonus-rule-name, .bonus-rule-notes { grid-column: 1 / -1; }.bonus-check { grid-column: 1 / -1; }.bonus-policy-actions { align-items: stretch; flex-direction: column; }.bonus-policy-actions .primary { order: -1; }.game-rule-card > summary { align-items: start; flex-direction: column; }.manager-store-fields { grid-template-columns: 1fr; }.manager-store-head { align-items: start; }
}

/* ===== 總部公告：筆記工具列（沿用「持倉戰報」筆記格式，配色改用 EASON 主題） ===== */
.note-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 14px 0 12px; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.note-toolbar button, .note-image-button { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; min-width: 34px; padding: 0 11px; font: 600 13px inherit; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; transition: .12s ease; }
.note-toolbar button:hover, .note-image-button:hover { border-color: var(--orange); color: var(--orange); }
.note-toolbar button:active { background: var(--orange-soft); }
.note-tb-sep { width: 1px; height: 22px; background: var(--line); margin: 0 3px; }
.note-image-button { gap: 5px; }
/* 編輯器與檢視共用的排版：標題、清單、重點框、連結、螢光標示 */
.rich-editor h2, .announcement-body h2 { font-size: 24px; margin: 22px 0 8px; }
.rich-editor h3, .announcement-body h3 { font-size: 19px; margin: 18px 0 6px; }
.rich-editor ul, .announcement-body ul { padding-left: 24px; }
.rich-editor ol, .announcement-body ol { padding-left: 24px; }
.rich-editor a, .announcement-body a { color: var(--orange); text-decoration: underline; }
.rich-editor blockquote, .announcement-body blockquote { margin: 14px 0; padding: 12px 16px; border: 1px solid var(--orange); border-left: 4px solid var(--orange); border-radius: 8px; background: var(--orange-soft); color: var(--ink); }
/* 圖片自由等比縮放：編輯時可點選、拖曳右下角控點 */
.rich-editor img { cursor: pointer; }
.rich-editor img.img-selected { outline: 2px solid var(--orange); outline-offset: 2px; }
.img-resize-handle { position: fixed; width: 16px; height: 16px; background: var(--orange); border: 2px solid #fff; border-radius: 50%; box-shadow: 0 1px 5px rgba(0,0,0,.35); cursor: nwse-resize; z-index: 60; touch-action: none; display: none; }

/* ===== 人員卡片：角色標籤改為清爽徽章，並讓職等下拉與按鈕同高對齊 ===== */
.person-actions .role-tag { display: inline-flex; align-items: center; border: 1px solid var(--navy); border-radius: 8px; padding: 6px 10px; background: var(--navy); color: #fff; font-size: 11px; font-weight: 750; white-space: nowrap; }
.person-actions select[data-job-level] { padding: 7px 9px; border-radius: 8px; font-size: 11px; }
.global-person-card .person-actions .role-tag { padding: 4px 7px; font-size: 9px; }
.global-person-card .person-actions select[data-job-level] { padding: 5px 7px; font-size: 9px; }

/* ===== 總部公告：次分頁、清單、編輯器 ===== */
.ann-subtabs { display: inline-flex; gap: 4px; margin: -4px 0 18px; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }
.ann-subtab { border: 0; background: transparent; padding: 9px 20px; border-radius: 8px; font: 700 14px inherit; color: var(--muted); cursor: pointer; transition: .12s ease; }
.ann-subtab:hover { color: var(--navy); }
.ann-subtab.active { background: var(--navy); color: #fff; }
.ann-list-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.ann-list-head h2 { margin: 0; font-size: 18px; }
.ann-list { display: grid; gap: 12px; }
.ann-card { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); box-shadow: 0 4px 14px rgba(25,46,58,.04); }
.ann-card-full { display: block; }
.ann-card-main { display: grid; gap: 4px; min-width: 0; }
.ann-card-main strong { font-size: 15px; }
.ann-card-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ann-meta { color: var(--muted); font-size: 12px; }
.ann-notion-link { display: block; font-size: 12px; color: var(--orange); text-decoration: none; word-break: break-all; }
.ann-notion-link:hover { text-decoration: underline; }
/* 封存清單：日期欄夠用就好，主旨吃掉剩餘寬度，網址過長就截斷（點了照樣開新分頁） */
.ann-archive-table { table-layout: fixed; min-width: 620px; }
.ann-archive-table td:first-child { display: table-cell; }
.ann-archive-table th:nth-child(1), .ann-archive-table td:nth-child(1),
.ann-archive-table th:nth-child(2), .ann-archive-table td:nth-child(2) { width: 112px; white-space: nowrap; }
.ann-archive-table th:nth-child(4), .ann-archive-table td:nth-child(4) { width: 168px; }
.ann-archive-table th:nth-child(5), .ann-archive-table td:nth-child(5) { width: 124px; }
.ann-archive-table td:nth-child(3) { font-weight: 600; }
.ann-archive-table td .ann-notion-link { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ann-archive-table .ann-empty { color: var(--muted); text-align: center; padding: 28px 20px; font-weight: 400; }
.ann-archive-actions { display: flex; gap: 8px; justify-content: flex-end; white-space: nowrap; }
.ann-card-actions { display: flex; gap: 8px; flex: none; }
.ann-card-head { display: flex; align-items: start; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.ann-card-head strong { display: block; font-size: 17px; margin-bottom: 8px; }
.ann-card-full .announcement-body { border-top: 1px solid var(--line); padding-top: 14px; }
.ann-card-full .announcement-read-stats { margin-top: 14px; margin-bottom: 0; }
.ann-card-full .announcement-acknowledge-row { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.ann-editor { margin-top: 16px; }
.ann-editor-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.ann-editor-head strong { font-size: 16px; }
.ann-editor-buttons { display: flex; gap: 10px; align-items: center; }
.ann-date-row { display: flex; gap: 14px; flex-wrap: wrap; margin: 14px 0; }
.ann-date-row label { display: grid; gap: 5px; font-weight: 700; font-size: 13px; color: var(--ink); }
.ann-date-row label small { color: var(--muted); font-weight: 400; font-size: 11px; }
.text-button.danger { color: #a6473b; border-color: #e6ccc7; background: var(--paper); }
.text-button.danger:hover { background: #fbeeec; }
.bonus-section-add { margin: 2px 0 26px; }

/* ===== 各頁浮動快速工具（回頂部 + 跳到各大區塊） ===== */
.page-quicknav { position: fixed; right: max(6px, calc((100vw - 1180px) / 2 - 166px)); top: 50%; transform: translateY(-50%); z-index: 40; width: 142px; display: flex; flex-direction: column; gap: 5px; max-height: 80vh; padding: 7px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,254,251,.94); box-shadow: 0 10px 30px rgba(25,46,58,.14); backdrop-filter: blur(4px); overflow: hidden; }
.page-quicknav.hidden { display: none; }
.page-quicknav-top { border: 1px solid var(--line); border-radius: 8px; background: var(--navy); color: #fff; font: 700 11.5px inherit; padding: 7px 9px; cursor: pointer; flex: none; }
.page-quicknav-links { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; padding-right: 1px; }
.page-quicknav-links button { border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); font: 650 11.5px inherit; padding: 6px 8px; cursor: pointer; text-align: center; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: .12s ease; }
.page-quicknav-links button:hover { border-color: var(--orange); color: var(--orange); }
@media (max-width: 820px) { .page-quicknav { right: 10px; padding: 6px; } .page-quicknav-links { display: none; } .page-quicknav-top { font-size: 11px; padding: 7px 9px; } }

/* 公告對象標籤：更緊湊，不要肥膠囊 */
.announcement-audience .audience-tag { padding: 5px 12px; border-radius: 8px; font-size: 12px; font-weight: 700; }

/* 營運總覽快速查看：回到最上面按鈕 */
.quick-menu-head #quickMenuTop { width: 26px; height: 24px; padding: 0; font-size: 14px; line-height: 1; border-radius: 8px; flex: none; }
.overview-quick-menu.is-collapsed #quickMenuTop { display: none; }

/* 業務目標矩陣：姓名與職等之間加「／」分隔 */
.target-matrix td:nth-child(3) small { color: var(--muted); }
.target-matrix td:nth-child(3) small::before { content: "／"; margin: 0 4px; color: var(--muted); }

/* 公告確認狀態：已知悉(綠)／未知悉(紅) + 標籤化人名 */
/* 知悉狀況預設收折：負責人要看再打開，不然整頁被人名塞滿 */
.ann-ack-stats { margin-top: 14px; border: 1px solid var(--line); border-radius: 10px; background: #fafbf8; overflow: hidden; }
.ann-ack-stats > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; cursor: pointer; color: var(--muted); font-size: 12px; font-weight: 800; list-style: none; }
.ann-ack-stats > summary::-webkit-details-marker { display: none; }
.ann-ack-stats > summary::after { content: "展開"; color: var(--orange); font-size: 11px; }
.ann-ack-stats[open] > summary::after { content: "收合"; }
.ann-ack-stats[open] { padding-bottom: 12px; }
.ann-ack-stats > .ann-ack { margin: 0 12px 10px; }
.ann-ack { border-radius: 10px; padding: 11px 13px; }
.ann-ack.known { background: #edf7f3; border: 1px solid #c7e5d9; }
.ann-ack.pending { background: #fbeeec; border: 1px solid #f0d3ce; }
.ann-ack-title { display: block; font-size: 12px; font-weight: 800; margin-bottom: 8px; }
.ann-ack.known .ann-ack-title { color: #2f7d63; }
.ann-ack.pending .ann-ack-title { color: #b0473a; }
.ann-ack-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ann-tag { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 6px; font-size: 12px; font-weight: 700; background: #fff; }
.ann-ack.known .ann-tag { color: #2f7d63; border: 1px solid #c7e5d9; }
.ann-ack.pending .ann-tag { color: #b0473a; border: 1px solid #f0d3ce; }
.ann-ack-none { font-size: 12px; color: var(--muted); }

/* ===== 零用金 ===== */
.pc-level-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; margin-top: 18px; }
.pc-level-card { display: grid; justify-items: center; gap: 4px; padding: 20px 16px 22px; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); box-shadow: var(--shadow); cursor: pointer; text-align: center; font: inherit; }
.pc-level-card:hover { border-color: var(--navy); }
.pc-level-name { font-size: 15px; font-weight: 800; color: var(--navy); }
.pc-gauge { width: 172px; height: 172px; margin: 6px 0 10px; }
.pc-gauge-text { font-size: 42px; font-weight: 800; fill: var(--navy); paint-order: stroke; stroke: rgba(255, 255, 255, .75); stroke-width: 5px; }
@keyframes pc-wave-move { from { transform: translateX(0); } to { transform: translateX(100px); } }
.pc-wave { animation: pc-wave-move 3.2s linear infinite; }
.pc-level-balance { font-size: 21px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.pc-level-balance em { color: var(--muted); font-size: 12px; font-style: normal; font-weight: 600; }
.pc-level-meta { color: var(--muted); font-size: 11.5px; }
.pc-level-forecast { margin-top: 5px; padding: 3px 10px; border-radius: 999px; background: #eef2f5; color: var(--muted); font-size: 11.5px; font-weight: 700; }
.pc-level-forecast.is-over { background: #ffe4dd; color: #b02c10; }
.pc-detail-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 18px 0 12px; }
.pc-detail-head strong { font-size: 16px; color: var(--navy); }
.pc-entry-list { display: grid; gap: 8px; }
.pc-entry { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.pc-entry.is-voided { opacity: .5; }
.pc-entry.is-voided .pc-entry-main strong { text-decoration: line-through; }
.pc-entry-main { display: grid; gap: 3px; min-width: 0; }
.pc-entry-main strong { font-size: 14px; }
.pc-entry-main small { color: var(--muted); font-size: 11px; }
.pc-entry-memo { word-break: break-all; }
.pc-entry-side { display: flex; align-items: center; gap: 10px; flex: none; }
.pc-entry-side b { font-size: 17px; font-variant-numeric: tabular-nums; }
.pc-out { color: #b02c10; }
.pc-in { color: var(--green); }
.pc-void-tag { color: var(--muted); font-size: 11px; }
/* 記帳表單：門市多半是拿手機在忙碌空檔輸入，所以欄位與按鈕都放大 */
.pc-entry-card { margin-bottom: 18px; }
.pc-balance-strip { display: grid; gap: 3px; padding: 18px 22px; border-bottom: 1px solid var(--line); background: var(--navy); color: #fff; border-radius: 18px 18px 0 0; }
.pc-balance-strip small { color: rgba(255, 255, 255, .72); font-size: 11px; }
.pc-balance-strip strong { font-size: 30px; font-variant-numeric: tabular-nums; }
.pc-balance-strip span { color: rgba(255, 255, 255, .72); font-size: 11.5px; }
.pc-form { display: grid; gap: 14px; padding: 20px 22px 24px; }
.pc-field { display: grid; gap: 6px; }
.pc-field label { color: var(--muted); font-size: 12px; font-weight: 750; }
.pc-field input { min-height: 50px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font-size: 16px; }
.pc-static { min-height: 50px; display: flex; align-items: center; padding: 0 14px; border-radius: 12px; background: #f2f4f2; color: var(--ink); font-size: 15px; }
.pc-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pc-toggle button { min-height: 50px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--muted); font: 800 15px inherit; cursor: pointer; }
.pc-toggle button.active { background: var(--navy); border-color: var(--navy); color: #fff; }
.pc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pc-chip { min-height: 46px; padding: 0 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); font: 700 15px inherit; cursor: pointer; }
.pc-chip.active { background: var(--orange); border-color: var(--orange); color: #fff; }
.pc-extra summary { padding: 10px 0; color: var(--orange); font-size: 13px; font-weight: 700; cursor: pointer; }
.pc-submit { min-height: 56px; font-size: 17px; }
.pc-settings-list { display: grid; gap: 12px; padding: 18px 22px 22px; }
.pc-setting-row { display: grid; grid-template-columns: 130px minmax(0, 200px) 1fr; align-items: end; gap: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.pc-setting-row strong { padding-bottom: 10px; }
.pc-setting-row label { display: grid; gap: 5px; color: var(--muted); font-size: 11.5px; font-weight: 750; }
.pc-setting-row input, .pc-setting-row select { min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-size: 14px; }
.pc-why { margin: 0 22px 16px; padding: 16px 18px; border-radius: 12px; background: var(--orange-soft); }
.pc-why strong { display: block; margin-bottom: 8px; color: var(--navy); font-size: 13.5px; }
.pc-why p { margin: 0 0 7px; color: var(--ink); font-size: 12.5px; line-height: 1.75; }
.pc-why-tip { color: #8a4a26 !important; }
.pc-category-list { display: grid; gap: 10px; padding: 0 22px 20px; }
.pc-category-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px; }
.pc-category-row input[type="text"], .pc-category-row input:not([type]) { min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-size: 14px; }
.pc-category-active { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; white-space: nowrap; }
@media (max-width: 720px) {
  .pc-level-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
  .pc-gauge { width: 128px; height: 128px; }
  .pc-setting-row { grid-template-columns: 1fr 1fr; }
  .pc-setting-row strong { grid-column: 1 / -1; padding-bottom: 0; }
  .pc-entry { flex-wrap: wrap; }
}

/* 零用金報表 */
.pc-report-bar { display: flex; align-items: end; flex-wrap: wrap; gap: 12px; margin: 18px 0 14px; }
.pc-report-mode { grid-template-columns: auto auto; }
.pc-report-mode button { min-height: 42px; padding: 0 20px; }
.pc-report-bar input[type="month"] { min-height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-size: 14px; }
.pc-report-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 16px; }
.pc-summary-card { display: grid; gap: 5px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
.pc-summary-card small { color: var(--muted); font-size: 11px; font-weight: 750; }
.pc-summary-card strong { font-size: 19px; font-variant-numeric: tabular-nums; }
.pc-report-card { margin-bottom: 16px; box-shadow: none; }
.pc-report-body { padding: 16px 22px 22px; }
.pc-bars { display: grid; gap: 10px; }
.pc-bar-row { display: grid; grid-template-columns: 96px 1fr auto; align-items: center; gap: 12px; }
.pc-bar-label { color: var(--ink); font-size: 12.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-bar-track { height: 16px; border-radius: 999px; background: #eef2f5; overflow: hidden; }
.pc-bar-track i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #f0916c, #e83a19); }
.pc-bar-row b { font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pc-bar-row b em { margin-left: 7px; color: var(--muted); font-size: 11px; font-style: normal; font-weight: 600; }
.pc-day-bars { display: flex; align-items: end; gap: 3px; height: 140px; padding-top: 8px; overflow-x: auto; }
.pc-day-bar { display: flex; flex-direction: column; justify-content: end; align-items: center; gap: 4px; flex: 1 0 16px; height: 100%; }
.pc-day-bar i { display: block; width: 100%; min-height: 0; border-radius: 3px 3px 0 0; background: #e86f3a; }
.pc-day-bar small { color: var(--muted); font-size: 9px; }
@media (max-width: 720px) {
  .pc-bar-row { grid-template-columns: 74px 1fr auto; gap: 8px; }
  .pc-report-summary { grid-template-columns: repeat(2, 1fr); }
}

/* 零用金單據 */
.pc-receipt-pick, .pc-receipt-add { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.pc-receipt-pick { min-height: 50px; padding: 0 18px; border: 1px dashed var(--line); border-radius: 12px; background: #fff; color: var(--orange); font-size: 15px; font-weight: 700; }
.pc-receipt-name { color: var(--muted); font-size: 11.5px; }
.pc-receipt-layer { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 28px; background: rgba(12, 22, 30, .82); }
.pc-receipt-layer img { max-width: 100%; max-height: 100%; border-radius: 12px; background: #fff; }
.pc-receipt-close { position: absolute; top: 18px; right: 20px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--navy); font-size: 17px; cursor: pointer; }
.pc-setting-range { color: var(--muted); font-size: 11px; padding-bottom: 12px; }
.pc-setting-row label small { color: var(--muted); font-size: 10px; font-weight: 600; }
#adminStorePreviewWrap select { max-width: 130px; }
.pc-head-side { display: flex; align-items: center; gap: 12px; }
.pc-preview-tag { padding: 1px 7px; border-radius: 999px; background: #ffe4dd; color: #b02c10; font-size: 10px; font-weight: 800; vertical-align: middle; }
.pc-level-preview { padding: 2px 9px; border-radius: 999px; background: #ffe4dd; color: #b02c10; font-size: 10.5px; font-weight: 700; }
.pc-level-grid.is-single { grid-template-columns: minmax(0, 300px); }
.pc-globals { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; padding: 18px 22px 6px; }
.pc-globals label { display: grid; gap: 5px; color: var(--muted); font-size: 11.5px; font-weight: 750; }
.pc-globals input, .pc-globals select { min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-size: 14px; }
.pc-globals input:disabled { background: #f2f4f2; color: var(--muted); }
.pc-globals small { color: var(--muted); font-size: 10.5px; font-weight: 600; }
.pc-cycle-hint { margin: 0 22px 4px; padding: 10px 14px; border-radius: 10px; background: var(--orange-soft); color: #8a4a26; font-size: 12px; }
.pc-quota-head { margin-top: 8px; border-top: 1px solid var(--line); }
@media (max-width: 720px) { .pc-setting-row { grid-template-columns: 1fr 1fr; } .pc-setting-row strong { grid-column: 1 / -1; padding-bottom: 0; } }

/* 人員項目進度：毛利進度條 + 店長註記 + 項目緊湊格線 */
.pm-profit { padding: 18px 26px 0; }
.pm-profit-card { padding: 16px 18px 14px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(180deg, #fff, #fafbf8); }
.pm-profit-card.is-hit { border-color: rgba(232, 111, 58, .45); }
.pm-profit-card.lv100 { border-color: rgba(54, 132, 105, .5); background: linear-gradient(180deg, #f4fbf7, #fff); }
.pm-profit-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.pm-profit-top small { display: block; color: var(--muted); font-size: 11px; font-weight: 750; }
.pm-profit-top strong { font-size: 27px; font-variant-numeric: tabular-nums; }
.pm-profit-top strong span { color: var(--muted); font-size: 12px; font-weight: 600; }
.pm-today { display: inline-block; margin-top: 4px; padding: 1px 8px; border-radius: 999px; background: var(--orange-soft); color: #b44e24; font-size: 11px; font-style: normal; font-weight: 700; }
.pm-profit-rate { flex: none; font-size: 24px; font-weight: 800; color: var(--orange); font-variant-numeric: tabular-nums; }
.pm-profit-card.lv100 .pm-profit-rate { color: var(--green); }
.pm-profit-track { position: relative; cursor: help; height: 14px; border-radius: 999px; background: #edf0ed; overflow: hidden; }
.pm-profit-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #f1a06b, var(--orange)); transition: width .5s ease; }
.pm-profit-card.lv100 .pm-profit-track i { background: linear-gradient(90deg, #6bbd9a, var(--green)); }
.pm-tick { position: absolute; top: 0; width: 2px; height: 100%; background: rgba(255, 255, 255, .85); }
.pm-tick.is-passed { background: rgba(255, 255, 255, .55); }
.pm-profit-scale { display: flex; margin: 6px 44px 0 44px; color: var(--muted); font-size: 10px; font-weight: 700; }
.pm-step { flex: 1; text-align: right; }
.pm-step.is-hit { color: var(--orange); }
/* 行動區：一句話一個主詞，數字都在句子裡講明白是誰的 */
.pm-action { margin-top: 15px; padding-top: 13px; border-top: 1px dashed var(--line); }
.pm-lead { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin: 0; color: #5a3b26; font-size: 14px; font-weight: 700; }
.pm-lead-label { font-size: 14px; }
.pm-lead b { color: #c9541f; font-size: 44px; font-weight: 900; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pm-lead em { color: #c9541f; font-size: 15px; font-style: normal; font-weight: 800; }
.pm-lead.is-done { color: #24694f; }
.pm-lead.is-done b, .pm-lead.is-done em { color: var(--green); }
.pm-sub { margin: 7px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.7; }
.pm-note-block { padding: 16px 26px 0; }
.pm-note { margin: 0; }
.pm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 16px 26px 24px; }
.pm-cell { display: grid; gap: 2px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 11px; }
.pm-cell small { color: var(--muted); font-size: 11px; font-weight: 750; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-cell strong { font-size: 19px; font-variant-numeric: tabular-nums; }
.pm-cell strong em { margin-left: 3px; color: var(--muted); font-size: 10px; font-style: normal; }
.pm-cell span { color: var(--muted); font-size: 10.5px; }
.pm-cell b { color: var(--deep-red); font-size: 11.5px; }
.pm-cell.on-heat, .pm-cell.on-heat strong, .pm-cell.on-heat b { color: #fff; }
.pm-cell.on-heat small, .pm-cell.on-heat span, .pm-cell.on-heat strong em { color: rgba(255, 255, 255, .85); }
@media (max-width: 720px) {
  .pm-profit, .pm-note-block, .pm-heat-bar { padding-left: 16px; padding-right: 16px; }
  .pm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 14px 16px 20px; }
  .pm-profit-top strong { font-size: 23px; }
}
/* 店長本週註記：跟店長週報同一種份量，換暖褐色系做區隔 */
.pm-note-board { margin: 0; border-color: #c9a06a; background: linear-gradient(135deg, #5a3b26, #33200f); }
.pm-note-board .eyebrow { color: #ffc78a; }
.pm-note-board.is-empty { opacity: .68; }
.pm-legend { padding-top: 4px; padding-bottom: 0; }
.pm-cell-foot { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; margin-top: 6px; }
.pm-cell-track { display: flex; height: 6px; border-radius: 999px; background: rgba(23, 42, 58, .12); overflow: hidden; }
.pm-cell-track i { flex: none; height: 100%; transition: width .4s ease; }
.pm-cell.on-heat .pm-cell-track { background: rgba(255, 255, 255, .32); }
@media (max-width: 720px) { .pm-lead b { font-size: 36px; } }
/* 當日卡片同時列出日增與總達成率，讓兩者可以互相對照 */
.company-metric .achievement em { margin-left: 8px; color: var(--muted); font-size: 10.5px; font-style: normal; font-weight: 600; }
.company-metric.on-heat .achievement em { color: rgba(255, 255, 255, .82); }
.pc-receipt-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pc-entry-side .pc-receipt-add { padding: 0 10px; }
.my-scope-toggle { grid-template-columns: auto auto; flex: none; }
.my-scope-toggle button { min-height: 40px; padding: 0 20px; font-size: 14px; }
.pm-head-controls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
/* 熱力圖開關緊黏在矩陣正上方，跟圖例同一排；關閉時圖例收起、只留開關 */
/* 熱力圖開關列：左右內距要跟上下的 pm-profit／pm-grid 一樣是 26px，不能貼齊卡片邊緣；
   上下也各留出呼吸空間（上 18px，下方由 pm-grid 的 16px padding 接手）。 */
.pm-heat-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 18px; padding: 0 26px; }
.pm-heat-bar .heatmap-legend { padding: 6px 0; }
#myHeatToggle { min-height: 40px; }
#myHeatToggle.is-on, .heat-toggle-btn.is-on { background: var(--navy); border-color: var(--navy); color: #fff; }
#adminPersonPreviewWrap select { max-width: 120px; }
.pm-profit-rates { flex: none; display: grid; justify-items: end; gap: 2px; }
.pm-profit-rates span { color: var(--muted); font-size: 11px; font-weight: 700; }
/* 進度條上的「今天照進度應該在哪」基準線：少了它，60% 在月初與月底看起來一樣 */
.pm-pace { position: absolute; top: -3px; bottom: -3px; width: 3px; border-radius: 2px; background: var(--navy); box-shadow: 0 0 0 2px rgba(255, 255, 255, .9); }
.pm-cell-track { position: relative; }
/* 店內相對位置（目前僅店長可見） */
.pm-compare { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.pm-compare-label { display: inline-block; margin-bottom: 9px; color: var(--muted); font-size: 10.5px; font-weight: 800; letter-spacing: .06em; cursor: help; text-decoration: underline dotted rgba(109, 123, 131, .55); text-underline-offset: 3px; }
.pm-compare-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pm-compare-cards article { display: grid; gap: 6px; padding: 13px 15px; border-radius: 12px; background: var(--navy); color: #fff; }
.pm-compare-cards small { color: rgba(255, 255, 255, .72); font-size: 10.5px; font-weight: 750; }
.pm-compare-cards strong { color: #fff; font-size: 26px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.pm-compare-cards strong em { margin-left: 4px; color: rgba(255, 255, 255, .7); font-size: 11px; font-style: normal; font-weight: 600; }
.pm-compare-cards .is-above { background: var(--green); }
.pm-compare-cards .is-below { background: var(--orange); }
.pm-compare-cards .pm-compare-avg { background: #e6ebe8; color: var(--navy); }
.pm-compare-cards .pm-compare-avg small { color: var(--muted); }
.pm-compare-cards .pm-compare-avg strong { color: var(--navy); }
.pm-compare-note { margin: 11px 0 0; color: var(--muted); font-size: 11.5px; line-height: 1.65; }
.pm-compare-cards .pm-compare-avg strong em { color: var(--muted); }
/* 兩條進度條：本月＝位置，今天＝當天做完就滿，每天重來 */
.pm-bar-row { display: grid; grid-template-columns: 34px 1fr 42px; align-items: center; gap: 10px; }
.pm-bar-label { color: var(--muted); font-size: 11px; font-weight: 800; }
.pm-bar-rate { color: var(--navy); font-size: 12px; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.pm-bar-today { margin-top: 8px; }
.pm-day-track { height: 10px; border-radius: 999px; background: #edf0ed; overflow: hidden; }
.pm-day-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8fc9b1, var(--green)); transition: width .4s ease; }
/* 主訴求：一個今天做得到的數字，而不是一個月的赤字 */
@media (max-width: 720px) { .pm-compare-cards { grid-template-columns: 1fr; } }
/* 快捷鍵提示 */
.app-tip { width: auto; max-width: min(290px, calc(100vw - 30px)); }
/* 快捷鍵提示放在抽屜內，外面的標籤維持一欄寬 */
.qv-hotkey-hint { margin: 0 0 4px; padding: 8px 12px; border-bottom: 1px solid var(--line); background: #f7f9f6; color: var(--muted); font-size: 11px; font-weight: 700; }
.qv-hotkey-hint kbd { padding: 1px 6px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; background: #fff; color: var(--navy); font: 800 10.5px/1.7 inherit; }
/* 手機下分頁自動換行（改成滿寬 flex），不再撐寬整頁；同時讓管理列也換行而非橫向捲動 */
@media (max-width: 640px) {
  .section-tabs { display: flex; flex-wrap: wrap; width: 100%; gap: 4px; }
  #managementNavigation { overflow: visible; max-width: 100%; }
  .section-tab { flex: 1 1 auto; text-align: center; white-space: nowrap; }
}
.settings-version { margin: 14px 0 0; color: var(--muted); font-size: 11.5px; text-align: center; }
/* 登入紀錄視窗：dialog 內容非 form，需自帶內距，否則橘色標題會貼齊圓角被切掉。
   加了裝置欄之後需要更多橫向空間，故放寬到 760px。 */
.login-log-modal { width: min(760px, calc(100% - 28px)); max-width: 760px; padding: 26px; }
.login-log-hint { margin: 4px 0 10px; font-size: 12px; line-height: 1.6; }
.login-log-wrap { max-height: 60vh; overflow: auto; border: 1px solid var(--line); border-radius: 10px; }
.login-log-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.login-log-table th { position: sticky; top: 0; background: var(--navy); color: #fff; text-align: left; padding: 9px 12px; font-size: 11.5px; }
.login-log-table td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.login-log-table tr:last-child td { border-bottom: 0; }
.login-log-table td small { display: block; color: var(--muted); font-size: 11px; }
.login-log-table .empty-note { text-align: center; color: var(--muted); padding: 24px; }
/* 達成率一律深紅（當日的「日增」與當月的「達成」同一套），不再用綠色。
   深底熱力格上轉白字保持對比，由 .company-metric.on-heat / .pm-cell.on-heat 的規則處理。 */
/* 登入紀錄狀態徽章 */
.ll-status { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; white-space: nowrap; }
.ll-status.ok { background: #e6f2ec; color: var(--green); }
.ll-status.fail { background: #fbe9e6; color: var(--deep-red); }
.ll-status.blocked { background: #fdeede; color: #c0632a; }
.login-log-table tr.ll-row-fail td { background: #fffaf9; }
/* 裝置欄：型號當主行、作業系統與瀏覽器當註腳；沒有紀錄的舊登入顯示灰色破折號 */
.ll-none { color: var(--muted); }
.login-log-table td strong { display: block; }
/* 每日進度算法設定（固定／動態）：現為獨立區塊，標題在卡片外，間距由 target-settings-section 統一 */
.daily-pace-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 20px 26px; }
.daily-pace-option { display: flex; gap: 10px; align-items: start; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; transition: .15s ease; }
.daily-pace-option:has(input:checked) { border-color: var(--navy); background: #f6f8f5; box-shadow: 0 4px 14px rgba(23,42,58,.08); }
.daily-pace-option input { margin-top: 3px; accent-color: var(--navy); }
.daily-pace-text { display: grid; gap: 3px; }
.daily-pace-text strong { font-size: 14px; color: var(--ink); }
.daily-pace-text small { color: var(--muted); font-size: 12px; line-height: 1.5; }
@media (max-width: 640px) { .daily-pace-options { grid-template-columns: 1fr; } }
/* 品牌 Logo：套用後填滿原本的 LG 徽章，也當 favicon；有圖時去掉外框 */
.brand-mark img, .brand-inline span img, .brand-logo-preview img { display: block; width: 100%; height: 100%; object-fit: contain; }
.brand-mark:has(img), .brand-inline span:has(img) { border: 0; }
.login-version { margin-top: 20px; color: rgba(255,255,255,.6); font-size: 11.5px; }
/* 品牌設定卡 */
.brand-settings-card { margin-bottom: 22px; }
.brand-settings-body { display: grid; gap: 18px; padding: 20px 26px; }
.brand-title-field { display: grid; gap: 6px; max-width: 360px; font-size: 13px; font-weight: 750; color: var(--muted); }
.brand-logo-field { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.brand-logo-preview { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 12px; background: var(--navy); color: #fff; font: 800 16px inherit; letter-spacing: .08em; overflow: hidden; flex: none; }
.brand-logo-preview:has(img) { background: #fff; border: 1px solid var(--line); }
.brand-logo-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.brand-upload-btn { cursor: pointer; }
.brand-logo-hint { flex-basis: 100%; margin: 0; font-size: 11.5px; }

/* =========================================================================
   手機專用版型（html.device-phone，由 /device.js 依 User-Agent 判斷後掛上）
   原則：只有「真的手機」才套用；平板與電腦一律維持上面的 PC 版型。
   舊的 @media 寬度規則保留（縮窄視窗仍可用），這裡負責把手機做得更緊湊，
   並強制關鍵版型（單欄、兩欄）不受橫拿手機寬度超過斷點的影響。
   ========================================================================= */
/* 手機以外一律看不到的元素 */
.phone-swipe-hint { display: none; }

/* 1) 浮動快速工具全部收掉：右側置頂工具列與總覽「快速查看」抽屜都不出現 */
html.device-phone .page-quicknav { display: none !important; }
html.device-phone .quickview { display: none !important; }

/* 2) 整體緊湊化：頂列、分頁籤、標題、內距、間距全面縮一輪 */
html.device-phone .topbar { height: 54px; padding: 0 12px; }
html.device-phone .brand-inline { gap: 8px; }
html.device-phone .brand-inline span { width: 28px; height: 28px; font-size: 10px; }
html.device-phone .user-area { gap: 8px; }
html.device-phone .user-area small { font-size: 10px; }
html.device-phone .text-button { padding: 6px 10px; font-size: 12px; }
html.device-phone .content { width: min(100% - 20px, 1180px); padding: 14px 0 26px; }
html.device-phone .app-footer { width: min(100% - 20px, 1180px); padding: 12px 0 22px; }
html.device-phone .section-tabs { display: flex; flex-wrap: wrap; width: 100%; gap: 3px; padding: 3px; margin-bottom: 12px; }
html.device-phone #managementNavigation { overflow: visible; max-width: 100%; }
html.device-phone .section-tab { flex: 1 1 auto; padding: 8px 8px; font-size: 12.5px; text-align: center; white-space: nowrap; }
html.device-phone .breadcrumb { margin-bottom: 10px; font-size: 11px; }
html.device-phone .page-heading { flex-direction: column; align-items: stretch; gap: 10px; margin-bottom: 14px; }
html.device-phone .page-heading h1 { font-size: 23px; margin-bottom: 4px; }
html.device-phone .page-heading .muted { font-size: 12px; }
html.device-phone .eyebrow { margin-bottom: 5px; font-size: 10px; }
html.device-phone .overview-tabs { margin-bottom: 10px; }
html.device-phone .time-tabs { margin: 0 0 12px; padding: 3px; }
html.device-phone .time-tabs button { padding: 6px 11px; font-size: 11.5px; }
/* 一般輸入欄位縮小內距；:where() 零特異度，讓刻意放大的零用金／業績輸入欄維持原尺寸。 */
html.device-phone :where(input, select, textarea) { padding: 10px 12px; border-radius: 8px; }
/* 手機不可有小於 16px 的表單欄位：iOS 一旦點進小字級欄位就會自動放大整頁，而且不會自己縮回來，
   使用者就被留在一個放大、可左右拖動的畫面裡。全站統一拉到 16px 從源頭消滅這個行為。
   用 !important 是因為這是裝置層級的保護，不能被個別頁面那些 11～14px 的設定蓋掉；
   密集表格（目標矩陣、遊戲規則）變寬後由各自既有的橫向捲動框吸收，不會撐開頁面。 */
html.device-phone input, html.device-phone select, html.device-phone textarea { font-size: 16px !important; }
/* 手機解除 320px 下限：折疊機內摺約 280px，Android 把系統「顯示大小」調大時也會讓可用寬度掉到 320 以下。
   留著下限會讓瀏覽器改用整頁縮小來塞，正是我們要消滅的行為；版面本來就是單欄，直接跟著實際寬度走。 */
html.device-phone body { min-width: 0; }
/* 新人折數那排原本固定不換行，三欄加上儲存標籤要 319px，窄螢幕會撐破整頁。允許換行。 */
html.device-phone .new-hire-multipliers { flex-wrap: wrap; gap: 6px; }
html.device-phone .new-hire-multipliers label { min-width: 68px; }
html.device-phone .user-area select { padding: 0 9px; }
html.device-phone .page-heading .month-chip { align-self: flex-start; }
html.device-phone label { gap: 6px; }
html.device-phone .primary { padding: 12px 18px; }
html.device-phone .modal form, html.device-phone .credential-result { padding: 18px; gap: 13px; }
html.device-phone .login-log-modal { padding: 18px; }
/* 手機的密碼欄留高一點：眼睛鈕才不會卡滿上下邊框，手指也好按 */
html.device-phone .password-field input { min-height: 48px; }
/* 登入紀錄是坐在電腦前看的分析工具，手機上不顯示入口（欄位多、螢幕塞不下） */
html.device-phone #loginLogButton { display: none; }

/* 登入頁 */
html.device-phone .login-layout { grid-template-columns: 1fr; }
html.device-phone .login-intro { min-height: 0; padding: 26px 22px; }
html.device-phone .brand-mark { width: 44px; height: 44px; margin-bottom: 18px; }
html.device-phone .login-intro h1 { font-size: 30px; }
html.device-phone .intro-copy { font-size: 13px; margin-top: 12px; }
html.device-phone .login-card { padding: 26px 22px; gap: 14px; }
html.device-phone .login-card h2 { font-size: 24px; }

/* 卡片全面瘦身：PC 上的小卡片不要在手機變成大卡片 */
html.device-phone .summary-grid { grid-template-columns: 1fr; gap: 8px; margin-bottom: 12px; }
html.device-phone .summary-grid.single { grid-template-columns: 1fr; }
html.device-phone .summary-card { min-height: 0; padding: 14px 16px; gap: 4px; }
html.device-phone .summary-card strong { font-size: 25px; }
html.device-phone .battle-grid, html.device-phone .battle-grid.two { grid-template-columns: 1fr; gap: 8px; margin-bottom: 10px; }
html.device-phone .battle-card { min-height: 0; padding: 14px 16px; gap: 5px; }
html.device-phone .battle-card strong { font-size: 25px; }
html.device-phone .owner-kpis { grid-template-columns: 1fr; gap: 8px; margin-bottom: 12px; }
html.device-phone .owner-kpi { min-height: 0; padding: 14px 16px; gap: 4px; }
html.device-phone .owner-kpi strong { font-size: 25px; }
html.device-phone .insight-grid { grid-template-columns: 1fr; gap: 8px; margin-bottom: 12px; }
html.device-phone .chart-card { padding: 14px; }
html.device-phone .chart-head { min-height: 0; margin-bottom: 12px; }
html.device-phone .monthly-metrics { grid-template-columns: repeat(2, 1fr); }
html.device-phone .monthly-metric { min-height: 0; padding: 12px 13px; border-right: 0; }
html.device-phone .monthly-metric:nth-child(odd) { border-right: 1px solid var(--line); }
html.device-phone .monthly-metric strong { font-size: 19px; }
html.device-phone .tier-card { padding: 15px 16px; margin-bottom: 12px; }
html.device-phone .form-actions { padding: 12px 14px; gap: 10px; }
html.device-phone #companyOverviewPanel > * + *, html.device-phone #singleStorePanel > * + * { margin-top: 14px; }
html.device-phone #companyOverviewPanel > .owner-section-head + .store-cards { margin-top: 10px; }
html.device-phone .owner-section-head h2 { font-size: 18px; }
html.device-phone .owner-section-head p { font-size: 11.5px; }
html.device-phone .single-store-heading { flex-direction: column; align-items: stretch; gap: 10px; margin-bottom: 12px; }
html.device-phone .single-store-heading h2 { font-size: 20px; }
html.device-phone .store-select select { width: 100%; }
html.device-phone .weekly-report-panel { width: 100%; }

/* 門市狀態卡：改兩欄小卡 */
html.device-phone .store-cards { grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 12px; }
html.device-phone .store-status-card { padding: 12px; }
html.device-phone .store-card-top strong { font-size: 15px; }
html.device-phone .store-profit { margin: 12px 0; gap: 2px; }
html.device-phone .store-profit b { font-size: 18px; }

/* 佈告欄（店長週報／店長註記） */
html.device-phone .bulletin-board header { padding: 12px 14px; }
html.device-phone .bulletin-note-list { padding: 10px 14px 14px; gap: 8px; }
html.device-phone .bulletin-note { padding: 10px 12px; }

/* 業績輸入頁：維持好按的大按鈕，但不要 PC 撐出來的大留白 */
html.device-phone .metrics-grid { grid-template-columns: 1fr; }
html.device-phone .metric, html.device-phone .metric:nth-child(3n) { border-right: 0; }
html.device-phone .metric { padding: 13px 14px; }
html.device-phone .metric label { font-size: 16px; margin-bottom: 8px; }
html.device-phone .metric .stepper { grid-template-columns: 48px minmax(0, 1fr) 48px; gap: 8px; }
html.device-phone .step-button { width: 48px; min-height: 46px; font-size: 24px; }
html.device-phone .metric input { height: 46px; font-size: 18px; padding-right: 34px; }

/* 3) 卡片工具列：標題一行、工具一行，按鈕與下拉全部縮小，不再擠成一團 */
html.device-phone .form-card-head { padding: 12px 14px; flex-wrap: wrap; gap: 8px 10px; }
html.device-phone .form-card-head h2 { font-size: 16px; }
html.device-phone .form-card-head p { font-size: 11.5px; }
html.device-phone .form-card-head .heatmap-tools,
html.device-phone .form-card-head .sort-controls,
html.device-phone .form-card-head .people-toolbar,
html.device-phone .form-card-head .pm-head-controls,
html.device-phone .form-card-head .target-matrix-actions { flex: 1 0 100%; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: end; gap: 6px; }
html.device-phone .heat-toggle-btn, html.device-phone #myHeatToggle, html.device-phone #storePersonHeatToggle { min-height: 34px; padding: 6px 9px; font-size: 11px; }
html.device-phone .compact-select, html.device-phone .store-select { font-size: 10px; gap: 3px; }
html.device-phone .compact-select select, html.device-phone .store-select select { min-width: 0; padding: 7px 24px 7px 9px; font-size: 13px; }
html.device-phone .sort-arrows { width: 26px; height: 32px; }
html.device-phone .save-state { padding: 5px 8px; font-size: 11px; }
html.device-phone .heatmap-legend { padding: 6px 14px; font-size: 9.5px; }
html.device-phone .my-scope-toggle button { min-height: 34px; padding: 0 14px; font-size: 13px; }

/* 業績項目卡（全店／單店）：兩欄緊湊格 */
html.device-phone .company-metrics { grid-template-columns: repeat(2, 1fr); }
html.device-phone .company-metric { min-height: 0; padding: 10px 11px; border-right: 0; }
html.device-phone .company-metric:nth-child(odd) { border-right: 1px solid var(--line); }
html.device-phone .company-metric strong { font-size: 18px; }
html.device-phone .cm-bar { margin-top: 6px; }

/* 4) 人員績效總表：手機專屬版——姓名欄固定在左，其餘欄位手指左右滑動查看，
      每欄保有最小寬度，不再被壓縮到看不見；手機用不到全螢幕放大，藏掉。 */
html.device-phone .phone-swipe-hint { display: block; margin: 0; padding: 6px 14px 8px; color: var(--muted); font-size: 10.5px; }
html.device-phone .heatmap-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
html.device-phone .performance-heatmap { table-layout: auto; width: max-content; min-width: 100%; }
html.device-phone .performance-heatmap th, html.device-phone .performance-heatmap td { min-width: 66px; padding: 7px 6px; }
html.device-phone .performance-heatmap th:first-child, html.device-phone .performance-heatmap td:first-child { width: auto; min-width: 76px; max-width: 96px; box-shadow: 3px 0 8px rgba(25, 46, 58, .1); }
html.device-phone #heatmapFullscreen { display: none; }

/* 人員狀態表：維持橫向滑動，內距縮小 */
html.device-phone .people-table { min-width: 560px; }
html.device-phone .people-table th { padding: 8px 10px; font-size: 10px; }
html.device-phone .people-table td { padding: 9px 10px; font-size: 12px; }

/* 人員項目進度（單店「外」與我的戰況「裡」同步緊湊；CSS 差異維持原設計） */
html.device-phone .pm-profit, html.device-phone .pm-note-block, html.device-phone .pm-heat-bar { padding-left: 12px; padding-right: 12px; }
html.device-phone .pm-profit { padding-top: 12px; }
html.device-phone .pm-profit-card { padding: 12px 13px 11px; }
html.device-phone .pm-profit-top strong { font-size: 20px; }
html.device-phone .pm-profit-rate { font-size: 19px; }
html.device-phone .pm-lead b { font-size: 30px; }
html.device-phone .pm-heat-bar { margin-top: 12px; }
html.device-phone .pm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; padding: 10px 12px 14px; }
html.device-phone .pm-cell { padding: 9px 10px; }
html.device-phone .pm-cell strong { font-size: 16px; }
html.device-phone .pm-compare-cards { grid-template-columns: 1fr; }
html.device-phone .single-store-person-tags { padding: 10px 12px; gap: 6px; }
html.device-phone .person-selector-tag { min-width: 0; padding: 6px 9px; font-size: 11px; }
html.device-phone .coaching-person-tags { padding: 12px 14px 4px; gap: 6px; }
html.device-phone .coaching-person-tag { min-width: 0; padding: 6px 9px; font-size: 11px; }

/* ===== 個人設定：生物辨識與安裝教學 ===== */
.settings-extra { display: grid; gap: 12px; padding: 0 26px 26px; }
.settings-block { border: 1px solid var(--line); border-radius: 12px; background: #fafbf8; }
.settings-block-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; flex-wrap: wrap; }
.settings-block-head strong { display: block; font-size: 14px; }
.settings-block-head small { display: block; margin-top: 3px; color: var(--muted); font-size: 11.5px; line-height: 1.6; max-width: 40ch; }
.settings-block-head .text-button { white-space: nowrap; text-decoration: none; }
.bio-list { display: grid; gap: 0; }
.bio-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 16px; border-top: 1px solid var(--line); }
.bio-row strong { font-size: 13px; }
.bio-row small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
/* 登入頁的生物辨識按鈕：跟主要按鈕同寬，但用外框樣式避免搶走「登入系統」的主要位置 */
.bio-login { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; padding: 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--navy); font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; transition: .15s ease; }
.bio-login:hover:not(:disabled) { border-color: var(--navy); }
.bio-login:disabled { opacity: .5; cursor: not-allowed; }
.bio-login svg { width: 20px; height: 20px; flex: none; color: var(--orange); }

/* ===== 公告：置頂與編輯紀錄 ===== */
.ann-card.is-pinned { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(232,111,58,.10), var(--shadow); }
.ann-pin-badge { display: inline-block; margin-right: 8px; padding: 2px 9px; border-radius: 999px; background: var(--orange-soft); color: #b44e24; font-size: 10.5px; font-weight: 800; vertical-align: middle; }
.ann-edited { display: block; margin-top: 4px; color: var(--deep-red); font-weight: 750; }
.ann-revisions { margin: 0 22px 14px; border: 1px solid var(--line); border-radius: 10px; background: #fafbf8; }
.ann-revisions summary { padding: 10px 14px; cursor: pointer; color: var(--muted); font-size: 12px; font-weight: 800; }
.ann-revisions ul { margin: 0; padding: 0 14px 12px 30px; display: grid; gap: 7px; }
.ann-revisions li { font-size: 12.5px; color: var(--ink); }
.ann-revisions li small { display: block; color: var(--muted); font-size: 11px; }

/* 原地編輯：編輯器直接搬進那張卡片，同時收起唯讀的內容與操作鈕，避免同一篇出現兩份 */
.ann-card.is-editing > .announcement-body,
.ann-card.is-editing > .ann-revisions,
.ann-card.is-editing > .ann-ack-stats,
.ann-card.is-editing .ann-card-actions { display: none; }
.ann-card.is-editing { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(232,111,58,.12), var(--shadow); }
.ann-card.is-editing .ann-editor { margin: 4px 0 0; }

/* 已綁定生物辨識的指紋標記：綠色小圖示，代表這個帳號不需要重設密碼 */
.bio-mark { width: 15px; height: 15px; margin-left: 5px; color: var(--green); vertical-align: -2px; flex: none; }

/* 生物辨識登入放在帳密欄位之前：對已綁定的人這是最快的路徑，不該讓他們捲到最底下找 */
.bio-divider { display: flex; align-items: center; gap: 12px; margin: 0; color: var(--muted); font-size: 11.5px; }
.bio-divider::before, .bio-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }