/* ==========================================================
   管理後台(桌機為主,≤ 960 側欄收起)。色票見 app.css。
   後台不掛進場動效(js.md):進來就看得到資料。
   ========================================================== */
.l-admin { font-size: 14px; }
.adm { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
.side { position: sticky; top: 0; height: 100vh; overflow: hidden; background: var(--invert-bg); color: var(--invert-sub); display: flex; flex-direction: column; }
.side .logo { display: flex; align-items: center; gap: 10px; padding: 18px 18px 20px; border-bottom: 1px solid rgba(242, 237, 228, .1); }
.side .logo b { display: block; color: var(--invert-ink); font: 600 16px/1.2 var(--f-serif); letter-spacing: .06em; }
.side .logo small { font: 500 10px var(--f-num); letter-spacing: .16em; }
/* 只有選單區捲動(logo / 我的帳號固定);細捲軸、平常幾乎看不到,滑過側欄才浮出 */
.side nav { padding: 12px 6px 12px 10px; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: transparent transparent; scrollbar-gutter: stable; }
.side:hover nav { scrollbar-color: rgba(242, 237, 228, .22) transparent; }
.side nav::-webkit-scrollbar { width: 6px; }
.side nav::-webkit-scrollbar-track { background: transparent; }
.side nav::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; }
.side:hover nav::-webkit-scrollbar-thumb { background: rgba(242, 237, 228, .22); }
.side nav::-webkit-scrollbar-thumb:hover { background: rgba(242, 237, 228, .4); }
.side .logo, .side .me { flex: none; }
.side .grp { font-size: 11px; letter-spacing: .14em; padding: 14px 10px 6px; color: #8E8378; }
.side a { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 10px; border-radius: var(--radius); font-size: 14px; color: var(--invert-sub); }
.side a .ic { width: 18px; height: 18px; }
.side a:hover { background: rgba(242, 237, 228, .06); color: var(--invert-ink); }
.side a.is-active { background: var(--primary); color: #F6F1E7; }
.side a .soon { margin-left: auto; font-size: 10px; padding: 1px 6px; border: 1px solid rgba(242, 237, 228, .2); border-radius: var(--radius); color: #8E8378; }
.side a .cnt { margin-left: auto; font: 600 11px var(--f-num); padding: 1px 7px; border-radius: 9px; background: #C0705C; color: #fff; }
.side .me { padding: 14px 18px; border-top: 1px solid rgba(242, 237, 228, .1); font-size: 13px; display: flex; align-items: center; gap: 10px; }
.side .me .av { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background: rgba(242, 237, 228, .12); color: var(--invert-ink); font-family: var(--f-serif); }
.main { min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 16px; height: 60px; padding: 0 28px; background: var(--bg); border-bottom: 1px solid var(--line); }
.topbar h1 { font-size: 19px; }
.topbar .crumbs { font-size: 12px; color: var(--mute); }
.topbar .acts { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.content { padding: 24px 28px 48px; }
.side-toggle { display: none; }

/* KPI */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.stat { background: var(--surface); border: 1px solid var(--line); padding: 16px 18px; border-radius: var(--radius); display: block; }
a.stat:hover { border-color: var(--line-2); }
.stat .k { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--sub); }
.stat .k .ic { width: 16px; height: 16px; color: var(--primary); }
.stat .v { font: 700 26px/1.2 var(--f-num); margin-top: 8px; }
.stat .d { font-size: 12px; color: var(--mute); margin-top: 4px; }
.stat.is-warn { border-left: 3px solid var(--warn); }
.stat.is-alert { border-left: 3px solid var(--danger); }

/* 面板 */
.panels { display: grid; grid-template-columns: 1.6fr 1fr; gap: 18px; margin-top: 18px; align-items: start; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.panel-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.panel-h h2 { font-size: 16px; display: flex; align-items: center; gap: 8px; }
.panel-h a { font-size: 13px; color: var(--primary); display: inline-flex; align-items: center; gap: 2px; }
.panel-b { padding: 14px 18px; }
.mini-list > * { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.mini-list > *:last-child { border-bottom: 0; }
.mini-list img { width: 34px; height: 40px; object-fit: contain; mix-blend-mode: multiply; }

/* 表格 */
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.toolbar .search-box { width: 280px; }
.toolbar .select { width: auto; }
.toolbar .sp { flex: 1; }
.tbl-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow-x: auto; }
.tbl { min-width: 860px; }
.tbl th { text-align: left; font-weight: 500; font-size: 12px; color: var(--sub); background: var(--surface-2); padding: 10px 12px; white-space: nowrap; border-bottom: 1px solid var(--line); }
.tbl td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr { cursor: pointer; }
.tbl tbody tr:hover td { background: #F7F2E9; }
.tbl tr.is-sel td { background: var(--primary-soft); }
.tbl input[type=checkbox] { accent-color: var(--primary); width: 16px; height: 16px; cursor: pointer; }
.tbl .r { text-align: right; }
.tbl .c { text-align: center; }
.tbl .pimg { width: 40px; height: 48px; object-fit: contain; mix-blend-mode: multiply; }
.tbl .pn { font-weight: 500; line-height: 1.4; }
.tbl .ps { font: 12px var(--f-num); color: var(--mute); }
.code-chip { display: inline-flex; align-items: center; height: 22px; padding: 0 7px; background: var(--surface-2); font: 12px var(--f-num); border-radius: var(--radius); }
/* 分頁列(一行):左 共幾筆;右 每頁 | 上一頁 頁碼 下一頁 | 跳至,控制項同高 32px、以分隔線分組 */
.tbl-foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px 16px; padding: 14px 2px; font-size: 13px; color: var(--sub); }
.pg-info b { color: var(--ink); font-size: 14px; }
.pager { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 0; }
.pager > * + * { margin-left: 14px; padding-left: 14px; border-left: 1px solid var(--line); }
.pg-per, .pg-go { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; height: 32px; }
/* 每頁筆數:關掉原生外觀自繪箭頭(原生箭頭寬度因瀏覽器 / 縮放而異,會吃掉數字),寬度依內容 */
.pg-per .select { -webkit-appearance: none; appearance: none; width: auto; min-width: 64px; height: 32px; min-height: 32px; padding: 0 28px 0 10px; line-height: 30px; font-family: var(--f-num); font-size: 13px; cursor: pointer;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E645D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center / 14px 14px; }
.pg-go label { display: inline-flex; align-items: center; gap: 6px; }
.pg-go .btn { height: 32px; min-height: 32px; padding: 0 12px; }
.pg-go .input { width: 52px; height: 32px; min-height: 32px; padding: 0 6px; text-align: center; -moz-appearance: textfield; }
.pg-go .input::-webkit-inner-spin-button, .pg-go .input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.pg-nav { display: flex; align-items: center; gap: 4px; }
.pg-nav a, .pg-nav span { min-width: 32px; height: 32px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; gap: 2px; border: 1px solid var(--line-2); background: var(--surface); border-radius: var(--radius); font-family: var(--f-num); color: var(--ink); }
.pg-nav a:hover { border-color: var(--primary); color: var(--primary); }
.pg-nav a.is-active { background: var(--primary); border-color: var(--primary); color: #fff; }
.pg-nav .pg-step { font-family: var(--f-sans); }
.pg-nav .is-off { color: var(--line-2); background: transparent; }
.pg-nav .pg-gap { border: 0; background: transparent; min-width: 18px; padding: 0; color: var(--mute); }
@media (max-width: 720px) {
  .tbl-foot, .pager { justify-content: center; }
  .pager > * + * { margin-left: 10px; padding-left: 10px; }
  .pg-per { display: none; }
  .pg-nav a:not(.is-active):not(.pg-step) { display: none; }   /* 手機只留上一頁 / 目前頁 / 下一頁 */
  .pg-nav .pg-gap { display: none; }
}
.batch-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; margin-bottom: 12px; background: var(--invert-bg); color: var(--invert-ink); border-radius: var(--radius); }
.batch-bar .btn { min-height: 32px; }

/* 右側抽屜 */
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 80; width: min(560px, 100%); background: var(--bg); box-shadow: -10px 0 40px rgba(43, 38, 34, .15); transform: translateX(100%); transition: transform .25s var(--ease); display: flex; flex-direction: column; }
.drawer.is-open { transform: none; }
.drawer-h { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); background: var(--surface); }
.drawer-h h2 { font-size: 18px; flex: 1; }
.drawer-b { flex: 1; overflow-y: auto; padding: 20px; }
.drawer-f { display: flex; gap: 8px; justify-content: flex-end; padding: 14px 20px; border-top: 1px solid var(--line); background: var(--surface); }
.drawer-mask { position: fixed; inset: 0; z-index: 75; background: rgba(43, 38, 34, .35); opacity: 0; pointer-events: none; transition: opacity .25s; }
.drawer-mask.is-open { opacity: 1; pointer-events: auto; }
.fs { border: 1px solid var(--line); background: var(--surface); padding: 16px; border-radius: var(--radius); }
.fs + .fs { margin-top: 14px; }
.fs h3 { font-size: 15px; margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; }
.fs h3 small { font: 400 12px var(--f-sans); color: var(--mute); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.codes { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.codes .code-chip { gap: 6px; height: 28px; background: var(--bg); border: 1px solid var(--line-2); }
.codes .code-chip button { color: var(--mute); display: inline-flex; }
.codes .code-chip button .ic { width: 14px; height: 14px; }
.scan-input { position: relative; }
.scan-input .input { padding-left: 38px; font-family: var(--f-num); }
.scan-input > .ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--primary); width: 18px; height: 18px; }
.tier-tbl td, .tier-tbl th { padding: 8px 6px; border-bottom: 1px solid var(--line); font-size: 13px; text-align: left; }
.tier-tbl th { color: var(--sub); font-weight: 500; }
.tier-tbl .select, .tier-tbl .input { min-height: 34px; padding: 4px 8px; font-size: 13px; }
.tier-tbl .out { font: 600 14px var(--f-num); color: var(--primary); text-align: right; white-space: nowrap; }

/* 純檢視的列(紀錄 / 報表)不是可點的 */
.tbl tbody tr:not([data-detail]):not([data-edit]):not([data-order-row]) { cursor: default; }
/* 達成率 / 占比細條 */
.meter { display: inline-block; vertical-align: middle; width: calc(100% - 44px); height: 6px; margin-right: 6px; background: var(--surface-2); border-radius: 3px; overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--primary); border-radius: 3px; }
/* 抽屜 / 面板內的紀錄列 */
.d-row { display: grid; grid-template-columns: 120px 1fr auto; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.d-row:last-child { border-bottom: 0; }
.d-row .when { color: var(--mute); font-size: 12px; }
.d-row .why { color: var(--sub); font-size: 12px; text-align: right; }
/* 列印(揀貨單 / 出貨單):螢幕上像紙張,列印時只留紙張 */
.is-print { background: var(--surface-2); }
.print-bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 8px; padding: 10px 24px; background: var(--invert-bg); color: var(--invert-ink); }
.print-bar span { flex: 1; }
.print-bar .btn:not(.btn-primary) { background: transparent; color: var(--invert-ink); border-color: rgba(242, 237, 228, .35); }
.sheet { width: 210mm; max-width: calc(100% - 32px); margin: 20px auto; padding: 14mm 14mm 12mm; background: #fff; color: #111; box-shadow: var(--shadow); }
.sheet-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-bottom: 10px; border-bottom: 2px solid #111; }
.sheet-h b { font-size: 20px; }
.sheet-h .r { text-align: right; }
.sheet-kv { display: grid; grid-template-columns: 80px 1fr; gap: 4px 12px; margin: 12px 0; font-size: 13px; }
.sheet-kv dt { color: #555; }
.sheet-tbl { width: 100%; margin-top: 10px; font-size: 13px; border-collapse: collapse; }
.sheet-tbl th, .sheet-tbl td { padding: 6px 8px; border: 1px solid #bbb; text-align: left; vertical-align: top; }
.sheet-tbl th { background: #f2f2f2; font-weight: 600; white-space: nowrap; }
.sheet-tbl .r { text-align: right; }
.sheet-tbl tfoot td { border: 0; padding: 3px 8px; }
.tick { display: inline-block; width: 14px; height: 14px; border: 1.5px solid #111; }
.sign { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 28px; font-size: 13px; }
.sign span { padding-top: 34px; border-bottom: 1px solid #111; }
@media print {
  @page { size: A4; margin: 0; }
  .is-print { background: #fff; }
  .print-bar { display: none; }
  .sheet { margin: 0; box-shadow: none; max-width: none; page-break-after: always; }
  .sheet:last-child { page-break-after: auto; }
}
/* 登入頁 */
.login-wrap { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px 16px; background: var(--invert-bg); }
.login-card { width: 100%; max-width: 380px; background: var(--surface); border-radius: var(--radius); padding: 28px 24px; box-shadow: var(--shadow); }
.login-card .logo { display: flex; align-items: center; gap: 10px; }
.login-card .logo b { display: block; font: 600 18px/1.2 var(--f-serif); letter-spacing: .06em; }
.login-card .logo small { font: 500 10px var(--f-num); letter-spacing: .16em; color: var(--mute); }
.login-card .nf-title { font: 600 22px/1.3 var(--f-serif); margin-top: 6px; }
.login-demo { width: 100%; max-width: 380px; padding: 14px 16px; border: 1px dashed rgba(242, 237, 228, .3); border-radius: var(--radius); color: var(--invert-sub); }
.login-demo code { color: var(--invert-ink); }
.login-demo .chip { margin: 0 6px 6px 0; height: 28px; background: transparent; color: var(--invert-ink); border-color: rgba(242, 237, 228, .3); cursor: pointer; }
/* 三端登入頁(partials/auth-open.php):左品牌面板 + 右表單;窄螢幕品牌面板縮成頂部橫幅 */
.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); background: var(--bg); }
.auth-brand { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 40px 48px 28px; color: var(--invert-ink);
  background: radial-gradient(120% 80% at 50% 105%, rgba(107, 30, 43, .55), transparent 60%), radial-gradient(90% 60% at 0% 0%, rgba(107, 30, 43, .25), transparent 55%), var(--invert-bg); }
.auth-brand::after { content: ''; position: absolute; inset: 20px; border: 1px solid rgba(242, 237, 228, .1); pointer-events: none; }
.auth-brand .logo { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; }
.auth-brand .logo b { display: block; font: 600 18px/1.2 var(--f-serif); letter-spacing: .08em; }
.auth-brand .logo small { font: 500 10px var(--f-num); letter-spacing: .2em; color: var(--invert-sub); }
.auth-copy { position: relative; z-index: 1; margin-top: clamp(40px, 9vh, 96px); }
.auth-copy .eyebrow { color: #C9A27A; }
.auth-copy h1 { margin-top: 14px; font-size: clamp(34px, 3.6vw, 48px); letter-spacing: .1em; line-height: 1.2; }
.auth-copy .lead { margin-top: 16px; color: var(--invert-sub); font-size: 15px; line-height: 1.9; }
.auth-bottles { position: relative; z-index: 1; flex: 1; min-height: 200px; margin-top: 24px; display: flex; align-items: flex-end; justify-content: center; }
.auth-bottles img { height: min(46vh, 400px); width: auto; max-width: 36%; object-fit: contain; object-position: bottom; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .45)); }
.auth-bottles img:nth-child(1), .auth-bottles img:nth-child(3) { height: min(36vh, 310px); }
.auth-bottles img:nth-child(1) { margin-right: -4%; }
.auth-bottles img:nth-child(3) { margin-left: -4%; }
.auth-foot { position: relative; z-index: 1; margin-top: 20px; font-size: 12px; letter-spacing: .08em; color: rgba(242, 237, 228, .45); }
.auth-main { display: flex; align-items: center; justify-content: center; padding: 48px 24px; }
.auth-panel { width: 100%; max-width: 380px; }
.auth-title { font-size: 28px; letter-spacing: .08em; }
.auth-sub { margin-top: 6px; color: var(--sub); font-size: 14px; }
.auth-panel .input { height: 46px; background: var(--surface); }
.auth-or { display: flex; align-items: center; gap: 12px; margin: 20px 0 16px; color: var(--mute); font-size: 12px; }
.auth-or::before, .auth-or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.auth-note { margin-top: 14px; font-size: 12px; color: var(--mute); text-align: center; line-height: 1.7; }
.auth-demo { margin-top: 28px; padding: 14px 16px; border: 1px dashed var(--line-2); border-radius: var(--radius); color: var(--sub); }
.auth-demo code { color: var(--primary); }
.auth-demo .chips { margin-top: 10px; flex-wrap: wrap; gap: 6px; max-height: 172px; overflow: hidden auto; }
.auth-demo .chip { height: 28px; font-size: 13px; cursor: pointer; }
@media (max-width: 880px) {
  .auth { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .auth-brand { padding: 22px 24px 26px; }
  .auth-brand::after, .auth-bottles, .auth-foot { display: none; }
  .auth-copy { margin-top: 22px; }
  .auth-copy h1 { font-size: 28px; margin-top: 10px; }
  .auth-copy .lead { margin-top: 8px; font-size: 13px; line-height: 1.7; }
  .auth-copy .lead br { display: none; }
  .auth-main { align-items: flex-start; padding: 28px 16px 40px; }
}
/* 網頁安裝(admin/install.php) */
.install-checks { display: grid; gap: 6px; }
.install-checks li { display: grid; grid-template-columns: 18px 1fr; column-gap: 8px; font-size: 13px; line-height: 1.5; }
.install-checks li::before { content: ''; width: 8px; height: 8px; margin: 6px 0 0 4px; border-radius: 50%; background: var(--ok); }
.install-checks li.is-err::before { background: var(--danger); }
.install-checks li.is-warn::before { background: var(--warn); }
.install-checks li b { font-weight: 600; }
.install-checks li span { grid-column: 2; color: var(--sub); word-break: break-all; }
.install-checks li.is-err span { color: var(--danger); }
.install-demo { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.install-demo input { margin-top: 4px; }
.install-demo small { display: block; color: var(--sub); font-size: 12px; line-height: 1.6; }
.install-bar { height: 6px; background: var(--surface-2); border-radius: 3px; overflow: hidden; }
.install-bar i { display: block; height: 100%; width: 0; background: var(--primary); transition: width .2s var(--ease); }
.install-bar i.is-busy { animation: install-pulse 1.2s ease-in-out infinite; }
@keyframes install-pulse { 50% { opacity: .4; } }
.install-log { max-height: 220px; overflow: auto; padding: 10px 12px; background: var(--surface-2); font-size: 12px; line-height: 1.6; white-space: pre-wrap; }
/* 側欄「我的帳號」 */
.side .me .me-link { flex: 1; min-width: 0; height: auto; padding: 0; gap: 10px; }
.side .me .me-link:hover .tiny { color: var(--invert-ink); }
/* 唯讀角色:收掉寫入動作,欄位不可改 */
.adm.is-readonly .drawer-f .btn-primary, .adm.is-readonly .drawer-f .btn-danger, .adm.is-readonly [data-drawer-new],
.adm.is-readonly [data-batch], .adm.is-readonly [data-check], .adm.is-readonly [data-check-all], .adm.is-readonly .row-act,
.adm.is-readonly .drawer-b [data-confirm] { display: none !important; }
.adm.is-readonly .drawer-b :is(input, select, textarea) { pointer-events: none; background: var(--surface-2); }
/* 新增商品:商品圖 */
.new-img { display: flex; align-items: center; gap: 14px; }
.img-drop { flex: none; width: 88px; height: 108px; display: flex; align-items: center; justify-content: center; border: 1px dashed var(--line-2); border-radius: var(--radius); background: var(--bg); cursor: pointer; overflow: hidden; }
.img-drop:hover { border-color: var(--primary); }
.img-drop img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.img-drop span { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; color: var(--sub); }
.img-drop .ic { width: 20px; height: 20px; color: var(--primary); }
/* 等級計價試算 */
.tc-preview { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; background: var(--bg); border: 1px dashed var(--line-2); border-radius: var(--radius); }
.tc-preview b { font-size: 20px; color: var(--primary); }
.tc-preview b.is-low { color: var(--danger); }
/* 系統參數 */
/* 分頁:營運規則 / 帳號與邀請 / 修改紀錄;每頁一張面板,群組 = 左說明 + 右欄位 */
.set-wrap { max-width: 980px; }
.set-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.set-tabs { border-bottom: 0; gap: 28px; }
.set-tabs > * { padding: 12px 0; font-size: 15px; display: inline-flex; align-items: center; gap: 6px; }
.set-tabs .cnt { min-width: 20px; padding: 0 6px; line-height: 18px; text-align: center; border-radius: 9px; background: var(--surface-2); color: var(--sub); }
.set-tabs .dirty-cnt { background: var(--primary); color: #fff; }
.set-note { display: flex; align-items: center; gap: 6px; padding-bottom: 12px; font-size: 12px; color: var(--mute); }
.set-note .ic { flex: none; color: var(--primary); }
.set-group { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px; padding: 20px 22px; border-bottom: 1px solid var(--line); }
.set-group:last-child { border-bottom: 0; }
.set-h { display: flex; align-items: flex-start; gap: 12px; }
.set-h h2 { font-size: 16px; }
.set-h p { margin-top: 2px; font-size: 12px; line-height: 1.6; color: var(--mute); }
.set-ic { flex: none; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: var(--primary-soft); color: var(--primary); border-radius: var(--radius); }
.set-ic .ic { width: 18px; height: 18px; }
.param-row { display: grid; grid-template-columns: 1fr 200px; gap: 16px; align-items: center; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.param-row:first-child { padding-top: 2px; }
.param-row:last-child { border-bottom: 0; }
.param-row .pl b { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.param-row .pl small { display: block; margin-top: 2px; font-size: 12px; color: var(--mute); }
/* 數字欄:單位放框內右側 */
.input-unit { position: relative; display: block; }
.input-unit i { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 13px; color: var(--mute); pointer-events: none; }
.input-unit .input.num { padding-right: 48px; text-align: right; -moz-appearance: textfield; }
.input-unit .input::-webkit-inner-spin-button, .input-unit .input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
/* 唯讀參數(系統只支援一種,不開放改) */
.param-static { display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; font-size: 14px; color: var(--sub); background: var(--surface-2); border-radius: var(--radius); }
.param-static .ic { color: var(--mute); }
/* 改過還沒存的欄位 */
.dirty-tag { display: none; font: 500 11px var(--f-sans); font-style: normal; padding: 0 6px; line-height: 18px; border-radius: var(--radius); background: var(--primary-soft); color: var(--primary); }
.param-row.is-dirty .dirty-tag { display: inline-block; }
.param-row.is-dirty :is(.input, .select) { border-color: var(--primary); }
.set-panel > .panel-b { padding: 20px 22px; }
.set-empty { font-size: 13px; color: var(--mute); text-align: center; padding: 12px 0; }
/* 修改紀錄:時間軸 */
.set-log { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 1px solid var(--line-2); }
.set-log li { position: relative; padding: 0 0 16px 4px; }
.set-log li:last-child { padding-bottom: 2px; }
.set-log li::before { content: ''; position: absolute; left: -19px; top: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--surface); border: 2px solid var(--primary); }
.set-log b { display: block; font-weight: 500; font-size: 13px; }
.set-log .chg { display: inline-block; margin-top: 4px; padding: 1px 8px; font-size: 13px; font-weight: 600; background: var(--surface-2); border-radius: var(--radius); }
.set-log small { display: block; margin-top: 4px; font-size: 12px; color: var(--mute); }
@media (max-width: 720px) {
  .set-group { grid-template-columns: 1fr; gap: 10px; padding: 16px; }
  .param-row { grid-template-columns: 1fr; gap: 8px; }
}

@media (max-width: 960px) {
  .adm { grid-template-columns: 1fr; }
  .side { position: fixed; left: 0; z-index: 70; width: 240px; transform: translateX(-100%); transition: transform .25s var(--ease); }
  .side-on .side { transform: none; }
  .side-toggle { display: inline-flex; }
  .panels { grid-template-columns: 1fr; }
  .content { padding: 16px; }
  .topbar { padding: 0 16px; }
  .toolbar .search-box { width: 100%; }
}