.comparison-note{display:flex;flex-wrap:wrap;gap:10px 24px;padding:13px 16px;border:1px solid var(--line);border-top:0;background:var(--surface-2);font-size:12px;color:var(--muted)}
.comparison-note strong{color:var(--text)}
.cards{grid-template-columns:repeat(3,minmax(160px,1fr))}
@media(max-width:760px){.cards{grid-template-columns:repeat(2,minmax(130px,1fr))}}

.primary{border:0;background:var(--brand);color:#fff;padding:11px 15px;border-radius:3px;font-weight:800;cursor:pointer}.secondary{border:1px solid var(--line);background:var(--surface);color:var(--text);padding:10px 14px;border-radius:3px;font-weight:800;cursor:pointer}
.brand-mark{display:grid;place-items:center;background:transparent;border:1px solid var(--line);overflow:hidden}.brand-mark img{width:48px;height:48px;object-fit:contain}.side-brand>.side-brand-icon{width:48px;height:48px;padding:1px;background:transparent}.side-brand-icon img{display:block;width:100%;height:100%;object-fit:contain}.back{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:8px 12px!important;border:1px solid color-mix(in srgb,var(--brand-readable),var(--line) 55%)!important;background:var(--surface-2)!important;color:var(--brand-readable)!important;border-radius:3px;font-weight:800;line-height:1;box-shadow:0 1px 0 rgba(0,0,0,.05)}.back:hover{background:color-mix(in srgb,var(--brand),var(--surface) 92%)!important;border-color:var(--brand-readable)!important}.back svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}.back span{white-space:nowrap}
.panel-actions{display:flex;align-items:center;gap:12px}.panel-actions input{min-width:280px}
.store-top{display:flex;justify-content:space-between;gap:18px;padding:18px;border-bottom:1px solid var(--line)}
.store-top h3{margin:0}.store-top p{margin:6px 0 2px;font-size:13px}.store-top p strong{color:var(--brand-readable)}.store-top>div>span{font-size:11px;color:var(--muted)}
.staffing-badge{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:var(--surface-3);font-size:11px;font-weight:800;flex:0 0 auto;text-align:center}
.store-metrics{display:grid;grid-template-columns:repeat(4,1fr);background:var(--line);gap:1px;border-bottom:1px solid var(--line)}
.store-metrics>div{background:var(--surface-2);padding:12px}.store-metrics b{display:block;font-size:17px}.store-metrics small{color:var(--muted);font-size:10px}
.people-groups{padding:14px 18px;display:grid;gap:8px}.people-line{display:grid;grid-template-columns:70px 1fr;gap:10px;font-size:11px}.people-line>b{color:var(--muted);font-weight:500}.people-line>div{display:flex;flex-wrap:wrap;gap:5px}.people-line span{font-weight:700}.people-line small{color:var(--muted)}
.pilot-entry{display:block;padding:10px 18px;background:color-mix(in srgb,var(--brand),transparent 90%);color:var(--brand-readable);font-size:12px;font-weight:800;border-top:1px solid var(--line)}

.pilot-panel{display:grid;gap:18px}.pilot-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding-bottom:17px;border-bottom:1px solid var(--line)}
.pilot-label{margin:0 0 5px;color:var(--brand-readable);font-size:12px;font-weight:800}.pilot-head h2{font-size:27px;margin:0}.pilot-head-actions{display:flex;align-items:center;gap:12px}.review-status{padding:6px 10px;background:var(--yellow-bg);color:var(--yellow-text);font-size:12px;font-weight:800;border-radius:2px}
.review-flow{display:grid;grid-template-columns:repeat(5,1fr);border:1px solid var(--line);background:var(--surface)}.review-flow>div{display:flex;align-items:center;gap:9px;padding:13px;border-right:1px solid var(--line);color:var(--muted);font-size:12px}.review-flow>div:last-child{border:0}.review-flow>div>span:first-child{width:25px;height:25px;flex:0 0 25px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;font-weight:800}.review-step-copy{display:grid;gap:2px;min-width:0}.review-step-copy small{font-size:9px;color:var(--muted);font-weight:500}.review-flow .done,.review-flow .current{color:var(--text)}.review-flow .done>span:first-child{background:var(--green-bg);color:var(--green-text);border-color:transparent}.review-flow .current{box-shadow:inset 0 -3px var(--brand);background:color-mix(in srgb,var(--brand),var(--surface) 95%)}.review-flow .current>span:first-child{background:var(--brand);color:#fff;border-color:transparent}.review-action-hint{grid-column:1/-1;max-width:360px;color:var(--muted);font-size:10px;text-align:right;line-height:1.45}
.pilot-layout{display:grid;grid-template-columns:260px minmax(0,1fr);border:1px solid var(--line);min-height:620px;background:var(--surface)}.pilot-roster{border-right:1px solid var(--line);background:var(--surface-2)}.pilot-roster-head{display:flex;justify-content:space-between;padding:15px;border-bottom:1px solid var(--line);font-size:12px}.pilot-roster-head span{color:var(--muted)}
.pilot-person{width:100%;display:grid;grid-template-columns:10px 1fr auto;align-items:center;gap:10px;padding:13px 15px;border:0;border-bottom:1px solid var(--line);background:transparent;text-align:left;cursor:pointer}.pilot-person:hover,.pilot-person.active{background:var(--surface)}.pilot-person.active{box-shadow:inset 3px 0 var(--brand)}.pilot-person span:nth-child(2){display:grid}.pilot-person small{color:var(--muted);font-size:10px}.pilot-person em{font-size:10px;color:var(--muted);font-style:normal}.signal-dot{width:8px;height:8px;border-radius:50%}.signal-dot.red{background:#d82735}.signal-dot.yellow{background:#d4a11d}.signal-dot.green{background:#198f67}.signal-dot.gray{background:#7d858b}
.pilot-detail{min-width:0}.pilot-person-head{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 24px}.pilot-person-head p{margin:0;color:var(--muted);font-size:11px}.pilot-person-head h3{margin:2px 0;font-size:23px}.pilot-person-head>div>span{color:var(--muted);font-size:12px}.pilot-tabs{display:flex;overflow:auto;border-block:1px solid var(--line);padding-inline:18px}.pilot-tabs button{border:0;background:transparent;padding:13px 14px;color:var(--muted);font-weight:700;font-size:12px;cursor:pointer;white-space:nowrap}.pilot-tabs button.active{color:var(--text);box-shadow:inset 0 -3px var(--brand)}.pilot-tab-content{padding:24px}
.tab-intro{display:flex;justify-content:space-between;gap:20px;align-items:start;margin-bottom:18px}.tab-intro h3{margin:0}.tab-intro p{margin:4px 0 0;color:var(--muted);font-size:12px}.tab-intro>span{font-size:12px;font-weight:800;color:var(--muted)}
.profile-grid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);gap:1px;background:var(--line)}.profile-grid>div{background:var(--surface);padding:15px}.profile-grid small{display:block;color:var(--muted);font-size:10px}.profile-grid strong{display:block;margin-top:5px;font-size:13px}.source-block{margin-top:18px;padding:17px;border-left:3px solid var(--brand);background:var(--surface-2)}.source-block p{margin:7px 0 0;white-space:pre-wrap;color:var(--muted)}
.ability-list{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}.ability-row{display:grid;grid-template-columns:minmax(135px,1fr) 150px 110px minmax(150px,1.2fr);gap:10px;align-items:center;padding:11px;background:var(--surface)}.ability-row>div{display:grid}.ability-row small{color:var(--muted);font-size:9px}.ability-row input,.ability-row select{padding:9px;font-size:12px;min-width:0;width:100%}
.training-form,.training-form label{margin:0}.training-form textarea{width:100%;resize:vertical;border:1px solid var(--line);background:var(--surface);color:var(--text);padding:11px;font:inherit;line-height:1.5}.training-form.readonly input,.training-form.readonly textarea{pointer-events:none;opacity:.8}.plan-form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.form-actions{display:flex;align-items:center;gap:12px;margin-top:6px}.form-actions span{font-size:11px;color:var(--muted)}
.review-summary{display:grid;grid-template-columns:1fr 1fr;gap:12px}.review-summary>div{padding:16px;background:var(--surface-2);border-top:2px solid var(--line)}.review-summary small{display:block;color:var(--muted)}.review-summary strong{display:block;margin-top:6px;white-space:pre-wrap}.evidence-box{margin-top:18px;padding:20px;border:1px dashed var(--line);background:var(--surface-2)}.evidence-box span,.evidence-box strong,.evidence-box small{display:block}.evidence-box input{margin:12px 0;width:100%}.evidence-box small{color:var(--muted)}
.l3-review{margin-bottom:18px;border:1px solid var(--line)}.l3-review-head{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:14px;background:var(--surface-2)}.l3-review-head small{display:block;color:var(--muted);margin-top:3px}.l3-review-head b{color:var(--brand-readable)}.l3-review>div:last-child{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}.l3-review article{background:var(--surface);padding:13px;display:grid;gap:2px}.l3-review article>span{justify-self:start;padding:3px 6px;border-radius:2px;font-size:9px;font-weight:800}.l3-review article.submitted>span{background:var(--yellow-bg);color:var(--yellow-text)}.l3-review article.missing>span{background:var(--red-bg);color:var(--red-text)}.l3-review article small{color:var(--muted)}
.audit-list{display:grid}.audit-list>div{display:grid;grid-template-columns:16px 1fr;gap:10px;padding:11px 0;border-bottom:1px solid var(--line)}.audit-list>div>span{width:8px;height:8px;border-radius:50%;background:var(--brand);margin-top:5px}.audit-list p{margin:2px 0;color:var(--muted);font-size:11px}
.toast{position:fixed;right:24px;bottom:24px;z-index:1000;padding:13px 17px;background:#123f2e;color:#c4f7df;box-shadow:var(--shadow);border-left:4px solid #21b77d;font-weight:700;font-size:13px}.toast.error{background:#58141b;color:#ffd2d6;border-color:#e43a47}

@media(max-width:1100px){.pilot-layout{grid-template-columns:220px minmax(0,1fr)}.ability-row{grid-template-columns:1fr 140px}.ability-row input{grid-column:auto}.profile-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.panel-actions,.pilot-head,.pilot-head-actions,.tab-intro{align-items:stretch;display:grid}.panel-actions input{min-width:0}.pilot-panel,.pilot-layout,.pilot-detail{min-width:0;max-width:100%}.review-flow{grid-template-columns:1fr;max-width:100%}.review-flow>div{border-right:0;border-bottom:1px solid var(--line)}.pilot-layout{display:block}.pilot-roster{border-right:0;border-bottom:1px solid var(--line);max-height:250px;overflow:auto}.pilot-person-head{align-items:start;flex-wrap:wrap}.pilot-tabs{max-width:100%}.pilot-tab-content{padding:16px;overflow:hidden}.profile-grid,.review-summary,.plan-form-grid,.l3-review>div:last-child{grid-template-columns:1fr}.ability-row{grid-template-columns:minmax(0,1fr)}.form-actions{align-items:stretch;display:grid}.store-metrics{grid-template-columns:repeat(2,1fr)}}

.import-dialog{width:min(720px,calc(100vw - 32px));border:0;padding:0;background:var(--surface,#fff);color:var(--text,#171717);box-shadow:0 24px 80px #0006}
.import-content{padding:38px}.import-content h2{font-size:30px;margin:4px 0 8px}.import-file{display:grid;gap:9px;padding:20px;margin:24px 0;border:1px dashed var(--border,#bbb);background:var(--surface-soft,#f6f6f4)}
.import-result{margin:20px 0;padding:18px;border-left:4px solid #b20d18;background:var(--surface-soft,#f6f6f4)}.import-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.import-summary span{display:grid;gap:4px}.import-summary b{font-size:24px}.import-errors{color:#b20d18;max-height:220px;overflow:auto}.import-errors p{margin:5px 0}.import-ok{color:#158765;font-weight:700}
@media(max-width:680px){.import-summary{grid-template-columns:1fr 1fr}.import-content{padding:28px 20px}}

/* 返回按鈕：紅底白字明顯化（單店與桃園試行頁共用） */
.back{background:var(--brand)!important;border:1px solid var(--brand)!important;color:#fff!important;padding:10px 16px!important;font-size:14px;box-shadow:var(--shadow)}
.back:hover{background:color-mix(in srgb,var(--brand),#000 18%)!important;border-color:var(--brand)!important}
.back svg{stroke:#fff;width:20px;height:20px}

/* 寬螢幕（1500px 以上）店舖卡片改三欄，縮短總覽長度 */
@media(min-width:1500px){.store-grid{grid-template-columns:repeat(3,minmax(340px,1fr))}}

/* 總覽店卡的人名標籤改為彩色 chip，與單店頁一致 */
.people-line small.identity.mini{padding:2px 6px;font-size:10px;font-weight:700;border-radius:99px}
.people-line small.identity.mini:not(.foreign):not(.trial):not(.intern):not(.special){background:var(--surface-3);color:var(--muted)}

/* 晉升燈號說明列 */
.signal-legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:14px;padding:10px 14px;background:var(--surface-2);border:1px solid var(--line);font-size:12px;color:var(--muted)}
.signal-legend b{color:var(--text);margin-right:4px}
.signal-legend .signal{margin-left:8px}
.pilot-head .signal-legend{margin-top:12px;max-width:640px}

/* 側欄「店舖人員」滑出快速切換選單 */
.nav-flyout-wrap{position:relative}
.nav-flyout-wrap>button{width:100%}
.nav-flyout-wrap>button em{float:right;font-size:11px;color:#777;font-style:normal}
.store-flyout{display:none;position:absolute;left:100%;top:0;min-width:210px;max-height:76vh;overflow:auto;background:var(--sidebar);border:1px solid #ffffff22;box-shadow:0 14px 44px rgba(0,0,0,.5);z-index:200;padding:8px}
.nav-flyout-wrap.open .store-flyout{display:block}
#flyout-search{width:100%;margin:4px 0 8px;padding:8px;background:#ffffff10;border:1px solid #ffffff22;color:#eee;font-size:12px;border-radius:2px}
#flyout-search::placeholder{color:#8b8b8b}
.flyout-empty{margin:8px 10px;color:#8b8b8b;font-size:12px}
.flyout-region{padding:4px 0}
.flyout-region>b{display:block;padding:6px 10px 4px;font-size:10px;letter-spacing:.14em;color:#8b8b8b}
.flyout-region>button{display:block;width:100%;text-align:left;border:0;background:none;color:#d6d6d6;padding:8px 10px;font-size:12px;cursor:pointer;border-radius:2px}
.flyout-region>button:hover{background:#ffffff14;color:#fff;box-shadow:inset 2px 0 var(--brand)}
@media(max-width:760px){.store-flyout{display:none!important}}

/* 試行店切換選單（多店試行時出現在標題列） */
.pilot-label select{margin-left:10px;font-size:12px;padding:4px 8px;border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:3px}

/* 登入：顯示密碼切換＋記住帳號 */
.password-field{position:relative;display:flex;align-items:center}
.password-field input{width:100%;padding-right:44px}
/* 固定尺寸：兩個圖示的字寬不同（🙈 比 👁 寬），不固定的話切換時按鈕會位移 */
.password-reveal{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:32px;height:32px;padding:0;
  display:grid;place-items:center;border:0;background:transparent;cursor:pointer;font-size:17px;line-height:1;border-radius:3px}
.password-reveal:hover{background:var(--surface-2)}
.password-reveal.inline{position:static;transform:none;border:1px solid var(--line);background:var(--surface-2)}
.remember-row{display:flex!important;flex-direction:row!important;align-items:center;gap:8px;font-weight:500;font-size:12px;color:var(--muted)}
.remember-row input[type=checkbox]{width:auto;margin:0}

/* 年資／轉正日說明 */
.field-note{margin:10px 0 0;padding:10px 14px;background:var(--surface-2);border-left:3px solid var(--line);font-size:11px;line-height:1.7;color:var(--muted)}
.field-note b{color:var(--text)}

/* 展示模式橫幅（僅 demo 帳號可見） */
.demo-banner{display:flex;gap:20px;align-items:center;justify-content:space-between;margin:18px 0 0;padding:16px 20px;border:1px solid var(--brand);border-left:5px solid var(--brand);background:color-mix(in srgb,var(--brand),var(--surface) 92%)}
.demo-banner strong{display:block;font-size:15px;color:var(--brand-readable)}
.demo-banner p{margin:6px 0 0;font-size:12px;line-height:1.6;color:var(--text)}
.demo-banner p b{color:var(--brand-readable)}
.demo-banner .demo-tip{color:var(--muted)}
.demo-confidential{flex:0 0 auto;padding:9px 13px;border-radius:2px;background:var(--red-bg);color:var(--red-text);font-size:11px;font-weight:800;text-align:center;line-height:1.5}
@media(max-width:760px){.demo-banner{display:grid;gap:12px}.demo-confidential{justify-self:start}}

/* 單店頁：切換店舖下拉＋上一店／下一店 */
.store-title-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.store-switch{display:flex;gap:6px;align-items:center}
.store-switch.hidden{display:none}
.store-switch select{font-size:12px;padding:6px 8px;border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:3px;max-width:220px}
.store-switch button{padding:6px 10px;font-size:12px;line-height:1}

/* 總覽：全域夥伴搜尋 */
.toolbar-actions{display:flex;align-items:center;gap:10px}
.global-search{position:relative}
#global-search{min-width:240px;padding:9px 11px;border:1px solid var(--line);background:var(--surface);color:var(--text);font:inherit;font-size:12px;border-radius:3px}
#global-search-results{position:absolute;top:100%;left:0;min-width:280px;max-height:320px;overflow:auto;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);z-index:150}
#global-search-results button{display:block;width:100%;text-align:left;border:0;border-bottom:1px solid var(--line);background:none;color:var(--text);padding:9px 12px;font-size:12px;cursor:pointer}
#global-search-results button:hover{background:var(--surface-2);box-shadow:inset 2px 0 var(--brand)}
#global-search-results strong{display:block}
#global-search-results small{color:var(--muted);font-size:10px}
.search-empty{margin:10px 12px;color:var(--muted);font-size:12px}
@media(max-width:760px){.toolbar-actions{display:grid;width:100%}#global-search{min-width:0;width:100%}}

/* 帳號管理 */
#accounts-panel .table-wrap{margin-top:16px}
#accounts-panel td .sub{display:block;color:var(--muted);font-size:10px}
.account-badge{display:inline-block;padding:3px 9px;border-radius:99px;font-size:10px;font-weight:800;white-space:nowrap}
.account-badge.on{background:var(--green-bg);color:var(--green-text)}
.account-badge.off{background:var(--red-bg);color:var(--red-text)}
.account-badge.pending{background:var(--yellow-bg);color:var(--yellow-text)}
.account-disabled td{opacity:.55}
.account-actions{display:flex;gap:8px;flex-wrap:wrap}
.account-actions button{padding:7px 10px;font-size:11px}
.account-actions button.danger{color:var(--red-text);border-color:color-mix(in srgb,var(--red-text),var(--line) 60%)}
.account-actions button.danger:hover{background:var(--red-bg)}
.account-dialog{width:min(560px,calc(100vw - 32px));border:0;padding:0;background:var(--surface,#fff);color:var(--text,#171717);box-shadow:0 24px 80px #0006}
.account-content{padding:34px;display:grid;gap:14px}
.account-content h2{margin:0;font-size:26px}
.account-content form{display:grid;gap:12px}
.account-content label{display:grid;gap:6px;font-size:12px;font-weight:700}
.account-content input,.account-content select{padding:10px;border:1px solid var(--line);background:var(--surface);color:var(--text);font:inherit}
.scope-selector{border:1px solid var(--line);margin:0;padding:12px}.scope-selector legend{font-size:12px;font-weight:700;padding:0 4px}.scope-selector p{color:var(--muted);font-size:11px;line-height:1.5;margin:0 0 10px}.scope-store-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;max-height:228px;overflow:auto;padding-right:4px}.scope-store-list label{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600}.scope-store-list input{width:16px;height:16px;padding:0;accent-color:var(--brand)}
.account-content .hint{color:var(--muted);font-size:11px;line-height:1.5;margin:0}
.account-content .muted{color:var(--muted);font-size:12px;margin:0}
.account-content .error{color:#e43a47;font-size:12px;min-height:1em;margin:0}
.temp-password{display:flex;gap:10px;align-items:center;padding:14px;background:var(--surface-2);border:1px dashed var(--line)}
.temp-password code{flex:1;font-size:20px;font-weight:800;letter-spacing:.06em;user-select:all;word-break:break-all}
@media(max-width:680px){.account-content{padding:26px 18px}}
@media(max-width:520px){.scope-store-list{grid-template-columns:1fr}}

/* 異動總覽頁腳（v19）：筆數說明＋載入更多 */
.audit-overview-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;flex-wrap:wrap}
#audit-store-filter{min-width:180px}

/* 系統更新公告 + 意見反饋（v19） */
.news-list{display:grid;gap:14px}
.news-item{padding:16px 18px;background:var(--surface-2);border:1px solid var(--line);border-radius:10px}
.news-item-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.news-item-head h3{margin:0;font-size:16px}
.news-meta{margin:4px 0 10px;color:var(--muted);font-size:12px}
.news-body{margin:0;line-height:1.7;white-space:normal;word-break:break-word}
.feedback-form{display:grid;gap:14px;max-width:640px;margin-bottom:26px}
.feedback-form label{display:grid;gap:6px;font-weight:600}
.feedback-form textarea,.feedback-form select{font:inherit;padding:10px 12px;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;color:inherit;width:100%}
.feedback-admin-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.feedback-admin-head h3{margin:0}
#feedback-body td{vertical-align:top;line-height:1.6}

/* 批次建帳號（帳號管理頁） */
.bulk-box{margin:0 0 16px;padding:12px 14px;background:var(--surface-2);border:1px solid var(--line);border-radius:8px}
.bulk-box>summary{cursor:pointer;font-weight:600;padding:2px 0}
.bulk-box[open]>summary{margin-bottom:8px}
.bulk-sample{margin:6px 0;padding:8px 10px;background:var(--surface);border:1px solid var(--line);border-radius:6px;font-size:12px;line-height:1.7;overflow-x:auto;white-space:pre}
.bulk-rules{margin:6px 0 10px;padding-left:20px;font-size:12px;line-height:1.8}
#account-bulk-text{width:100%;padding:10px;background:var(--surface);border:1px solid var(--line);border-radius:6px;color:var(--text);font-family:inherit;font-size:13px;line-height:1.7;resize:vertical}
.bulk-actions{display:flex;gap:8px;margin-top:10px}
.bulk-result{margin-top:12px}
.bulk-result:empty{display:none}
.bulk-ok{color:var(--good,#3fae6d)}
.bulk-blocked{margin-top:12px;color:var(--warn,#d98324)}
.bulk-blocked-list{margin:4px 0 0;padding-left:20px;font-size:12px;line-height:1.8;color:var(--warn,#d98324)}

/* 未儲存暫存提示（培育計畫） */
.draft-banner{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 12px;padding:10px 14px;background:color-mix(in srgb, var(--warn,#d98324) 12%, transparent);border:1px solid var(--warn,#d98324);border-radius:8px;font-size:13px}
.draft-banner b{color:var(--warn,#d98324)}
.draft-banner span{flex:1;min-width:220px;color:var(--text)}


/* ===== 組織維護（店舖區域／開新店／閉店／人員挪移）===== */
.org-section{margin-top:22px}
.org-section h3{margin:0 0 4px;font-size:15px}
.org-section>.muted{margin:0 0 10px;font-size:12px;line-height:1.7}
.org-people-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.org-people-toolbar select{padding:8px 10px;background:var(--surface);border:1px solid var(--line);border-radius:6px;color:var(--text);font-size:13px;min-width:220px}
.org-inline-check{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted,var(--text))}
.org-badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;line-height:1.8;white-space:nowrap}
.org-badge.open{background:color-mix(in srgb, var(--good,#3fae6d) 14%, transparent);color:var(--good,#3fae6d);border:1px solid var(--good,#3fae6d)}
.org-badge.closed{background:color-mix(in srgb, var(--warn,#d98324) 14%, transparent);color:var(--warn,#d98324);border:1px solid var(--warn,#d98324)}
tr.org-closed{opacity:.62}
#org-stores select{padding:5px 8px;background:var(--surface);border:1px solid var(--line);border-radius:6px;color:var(--text);font-size:12px}
#org-stores select:disabled{opacity:.5;cursor:not-allowed}
#org-stores td,#org-people td{vertical-align:middle}
#org-stores button,#org-people button{padding:5px 10px;font-size:12px}

/* 匯入預覽的落差提示：跟錯誤訊息分開配色，這不是錯誤、是要人做決定 */
.import-conflicts{border-color:var(--warn,#d98324);color:var(--text)}
.import-conflicts p:first-child{color:var(--warn,#d98324)}

/* ═══════════════════════════════════════════════════════════════
   側欄自動收合 ＋ 滑過彈出（2026-09-11 Steven 指定）
   起因：店舖人員那種寬表格頁，左側 230px 常駐會壓縮閱讀空間。
   規則：內容重的頁面自動收成細軌，滑鼠移過去才彈出來（覆蓋不擠版）。
   品牌總覽維持展開——那一頁本來就是要靠側欄切換的。
   彈出用 overlay 不用 push：hover 會頻繁進出，push 會讓主文一直跳。
   ═══════════════════════════════════════════════════════════════ */
.app-shell.rail{grid-template-columns:var(--rail-w,16px) 1fr}
.app-shell.rail>aside{
  position:fixed;left:0;top:0;width:230px;height:100vh;z-index:60;
  transform:translateX(calc(-230px + var(--rail-w,16px)));
  transition:transform .18s ease,box-shadow .18s ease;
  will-change:transform;
}
/* 細軌上的視覺提示：一條主色細線，讓人知道那裡有東西可以拉出來 */
.app-shell.rail>aside::after{
  content:"";position:absolute;right:0;top:0;width:3px;height:100%;
  background:linear-gradient(180deg,var(--brand) 0 22%,#ffffff26 22% 100%);
}
.app-shell.rail>aside:hover,
.app-shell.rail>aside:focus-within{
  transform:translateX(0);
  box-shadow:18px 0 48px #000a;
}
.app-shell.rail>aside:hover::after,
.app-shell.rail>aside:focus-within::after{opacity:0}
/* ⚠ 這一行不能拿掉：aside 變成 position:fixed 之後就脫離 grid 流，
   main 會遞補成第一個 grid 項目、被塞進那條 16px 的細軌裡，
   整個版面會垮成「文字一個字一行」的直排。2026-09-11 實機重現並修正。 */
.app-shell.rail>main{grid-column:2;padding-left:34px}

/* 釘選：不想讓它自動收的人可以按住。狀態記在 localStorage。 */
.rail-pin{
  position:absolute;right:10px;top:18px;z-index:2;
  border:0;background:#ffffff14;color:#cfcfcf;cursor:pointer;
  width:26px;height:26px;border-radius:6px;font-size:13px;line-height:1;
  opacity:0;transition:opacity .15s;
}
aside:hover .rail-pin,aside:focus-within .rail-pin{opacity:1}
.rail-pin:hover{background:#ffffff28;color:#fff}
.rail-pin.on{opacity:1;background:var(--brand);color:#fff}

@media(max-width:760px){
  /* 手機版本來就把 aside 藏起來，收合邏輯不要插手 */
  .app-shell.rail{grid-template-columns:1fr}
  .app-shell.rail>aside{position:static;transform:none}
  .app-shell.rail>main{padding-left:15px}
}
@media(prefers-reduced-motion:reduce){
  .app-shell.rail>aside{transition:none}
}

/* 分區匯出選單（沿用店舖 flyout 的定位，只補內容樣式）*/
.scope-flyout{min-width:200px}
.scope-flyout button{display:block;width:100%;text-align:left;padding:9px 12px;background:none;border:0;color:inherit;font:inherit;cursor:pointer;border-radius:6px}
.scope-flyout button:hover{background:#ffffff1a}
.scope-note{margin:8px 4px 2px;font-size:11px;line-height:1.5;color:#ffffff77}

/* 範圍選單的「各店」區塊（2026-09-12）。20 家店會比選單高，所以自己捲。 */
/* 2026-09-13：兩個範圍選單掛在側欄最底，往下展開會掉出畫面（Steven 截圖）。
   讓這兩個 wrap 不再當定位基準 → 選單改以 aside（sticky、100vh）為基準，上下貼齊視窗，整條側欄旁的高度都給它。 */
#wrap-report,#wrap-export{position:static}
.scope-flyout{top:24px;bottom:24px;max-height:none;overflow-y:auto;min-width:230px}
.scope-flyout .scope-stores{max-height:none;overflow:visible;border-top:1px solid var(--line,#e3e3e3);margin-top:6px;padding-top:4px}
.scope-flyout .scope-head{margin:2px 8px 4px;font-size:11px;letter-spacing:.08em;opacity:.6}

/* ═══════════════════════════════════════════════════════════════
   側欄太長時可以捲（2026-09-17 Steven 截圖：「帳號管理」以下拉不到）
   起因：多了「人力狀況報告」「匯出 Excel」兩顆之後，畫面矮一點（筆電、放大顯示）
   底下的「組織維護」就掉出視窗；aside 固定 100vh 又沒開捲動，所以完全點不到。

   ⚠ 三件事要一起成立，少一件就壞：
   ① aside 自己 overflow-y:auto
   ② 彈出選單改 position:fixed。① 一開，overflow 會把 left:100%（在 aside 框外）的
      absolute 選單整片裁掉——選單會「點了沒反應」，因為它其實被裁到看不見。
   ③ 細軌收合改用 left 滑動，不用 transform。祖先只要有 transform／will-change:transform，
      fixed 就會退化成以那個祖先為基準，② 等於白做，選單又被裁掉。
   ═══════════════════════════════════════════════════════════════ */
aside{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#ffffff33 transparent}
/* 側欄寬 230px、兩種模式都貼在畫面最左邊，所以選單固定從 x=230 開始 */
.store-flyout{position:fixed;left:230px}
/* 店舖人員選單：頂端對齊按下去的那顆按鈕（--flyout-top 由 app.js 在打開時寫入），不超出畫面底 */
#store-flyout{top:var(--flyout-top,24px);max-height:calc(100vh - var(--flyout-top,24px) - 24px)}
.app-shell.rail>aside{
  transform:none;will-change:auto;
  left:calc(-230px + var(--rail-w,16px));
  transition:left .18s ease,box-shadow .18s ease;
}
.app-shell.rail>aside:hover,
.app-shell.rail>aside:focus-within{transform:none;left:0}
/* 收合時側欄滑走了，選單不能留在半空中 */
.app-shell.rail>aside:not(:hover):not(:focus-within) .store-flyout{display:none!important}
@media(max-width:760px){.app-shell.rail>aside{left:auto}}


/* 首登強制改密碼：畫面被鎖住時唯一的出口（登錯帳號／幫人測試用）。
   隱藏靠 styles.css 的 .hidden{display:none!important}，所以這裡寫 display:flex 不會把它蓋掉。 */
.password-who{margin:0 0 12px;padding:8px 12px;border-left:3px solid var(--warn,#d98324);background:color-mix(in srgb, var(--warn,#d98324) 10%, transparent);border-radius:4px;font-size:13px;line-height:1.7}
.password-forced-actions{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-top:14px;padding-top:12px;border-top:1px dashed var(--line)}
.password-forced-actions small{color:var(--muted,var(--text));font-size:12px;line-height:1.6}