/*
 * NFPOS 後台品牌主題(overlay)— 疊喺 Filament 編譯好嘅 theme bundle 之上。
 *
 * 點解係一個獨立嘅純 CSS 檔,而唔係改 resources/css/filament/admin/theme.css:
 * 253 部署 = 淨 scp,從來唔會 `npm run build`(見 #217→#218 塌版教訓)。呢個檔唔經 Vite/Tailwind,
 * scp 上去即生效;AdminPanelProvider 用 STYLES_AFTER render hook 帶 ?v=<mtime> 載入(改檔自動破快取)。
 *
 * 規矩:
 *  - 只可以用 Filament 嘅 `fi-*` hook class 同原生 CSS;唔好喺度寫 Tailwind utility / @apply。
 *  - 顏色一律行下面嘅 token;主色/灰階本身由 AdminPanelProvider::colors() 出 CSS 變數(--primary-* / --gray-*)。
 *  - 選擇器前面加父層 hook(例 `.fi-sidebar .fi-…`)嚟壓過 utility,唔好用 !important。
 */

/* ── 字體:自架(variable woff2,latin 子集)— 唔再靠外國字體 CDN,斷外網都照出 ───────── */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/inter-latin-var.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
        U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 500 800;
    font-display: swap;
    src: url('../fonts/manrope-latin-var.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
        U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Token ─────────────────────────────────────────────────────────────────────────── */
:root {
    /* 公司 logo 實色(由 nf-logo.png 取樣):靛藍 + 天藍 */
    --nf-indigo: 44 48 140;
    --nf-sky: 56 172 222;
    --nf-ink: 17 22 51;
    --nf-paper: #f2f4f9;
    --nf-rule: #e1e5ef;
    --nf-rule-strong: #cfd5e3;
    --nf-side-a: #131943;
    --nf-side-b: #222979;
    --nf-side-c: #161c52;
    --nf-radius: 10px;
    --nf-shadow-card: 0 1px 2px rgb(17 22 51 / 0.05);
    --nf-shadow-pop: 0 12px 32px -8px rgb(17 22 51 / 0.22), 0 2px 6px rgb(17 22 51 / 0.08);
    /* 英數 Inter;中文跟系統繁體字(JhengHei UI 行距比 JhengHei 緊,排表格好睇啲) */
    --font-family: 'Inter', 'PingFang HK', 'Microsoft JhengHei UI', 'Microsoft JhengHei', 'Noto Sans HK', 'Noto Sans TC';
    --nf-display: 'Manrope', 'Inter', 'PingFang HK', 'Microsoft JhengHei UI', 'Microsoft JhengHei', 'Noto Sans HK',
        'Noto Sans TC', system-ui, sans-serif;
}

/* ── 底層 ──────────────────────────────────────────────────────────────────────────── */
body.fi-body {
    background: var(--nf-paper);
    color: rgb(var(--nf-ink));
    text-rendering: optimizeLegibility;
}
::selection {
    background: rgb(var(--nf-sky) / 0.28);
}
/* 內容區嘅橫向 scrollbar(闊表)整幼啲,唔好搶戲 */
.fi-ta-content,
.fi-main {
    scrollbar-width: thin;
    scrollbar-color: #c3c9d9 transparent;
}

/* Filament 喺 Alpine 起好之前將主內容區 opacity:0(等側欄開/收狀態定咗先出,免跳版),之後用 150ms 淡入。
   每次換頁都食呢 150ms → 收到 60ms:仍然順,但每頁快少少見到內容。 */
.fi-body .fi-main-ctn {
    transition-duration: 60ms;
}

/* ── 側邊欄:深色品牌面 ─────────────────────────────────────────────────────────────── */
.fi-body .fi-sidebar.fi-main-sidebar {
    background: linear-gradient(168deg, var(--nf-side-a) 0%, var(--nf-side-b) 58%, var(--nf-side-c) 100%);
    box-shadow: none;
}
.fi-sidebar .fi-sidebar-header {
    height: 3.5rem;
    padding-inline: 14px;
    background: transparent;
    box-shadow: none;
    border-bottom: 1px solid rgb(255 255 255 / 0.08);
    justify-content: space-between;
}
.fi-sidebar .fi-sidebar-header .fi-icon-btn {
    color: rgb(255 255 255 / 0.55);
}
.fi-sidebar .fi-sidebar-header .fi-icon-btn:hover {
    color: #fff;
    background: rgb(255 255 255 / 0.08);
}

/* 品牌 lockup(partials/brand.blade.php)— 側邊欄深底反白;登入卡淺底用墨色 */
.nf-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 100%;
    line-height: 1;
}
.nf-brand-chip {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 9px;
    background: #fff;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.18);
}
.nf-brand-chip img {
    width: 24px;
    height: 24px;
    display: block;
}
.nf-brand-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.nf-brand-name {
    font-family: var(--nf-display);
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #fff;
}
.nf-brand-sub {
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: rgb(255 255 255 / 0.55);
    white-space: nowrap;
}
.fi-simple-main .nf-brand-name {
    color: rgb(var(--nf-indigo));
    font-size: 20px;
}
.fi-simple-main .nf-brand-sub {
    color: #64708c;
}
.fi-simple-main .nf-brand-chip {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    box-shadow: 0 0 0 1px var(--nf-rule), 0 2px 6px rgb(17 22 51 / 0.08);
}
.fi-simple-main .nf-brand-chip img {
    width: 30px;
    height: 30px;
}

/* 導航:收緊間距(十個分組,少啲碌) */
.fi-sidebar .fi-sidebar-nav {
    padding: 14px 12px 28px;
    gap: 16px;
    scrollbar-width: thin;
    scrollbar-color: rgb(255 255 255 / 0.22) transparent;
}
.fi-sidebar .fi-sidebar-nav-groups {
    margin-inline: 0;
    gap: 14px;
}
.fi-sidebar .fi-sidebar-group {
    gap: 2px;
}
.fi-sidebar .fi-sidebar-group-items {
    gap: 1px;
}
.fi-sidebar .fi-sidebar-group-button {
    padding: 4px 10px;
}
.fi-sidebar .fi-sidebar-group-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: rgb(255 255 255 / 0.42);
}
.fi-sidebar .fi-sidebar-group-button .fi-icon-btn {
    color: rgb(255 255 255 / 0.3);
}
.fi-sidebar .fi-sidebar-group-button:hover .fi-sidebar-group-label,
.fi-sidebar .fi-sidebar-group-button:hover .fi-icon-btn {
    color: rgb(255 255 255 / 0.75);
}
.fi-sidebar .fi-sidebar-item-button {
    padding: 7px 10px;
    gap: 10px;
    border-radius: 8px;
}
.fi-sidebar .fi-sidebar-item-button:hover,
.fi-sidebar .fi-sidebar-item-button:focus-visible {
    background: rgb(255 255 255 / 0.07);
}
.fi-sidebar .fi-sidebar-item-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: rgb(176 186 240 / 0.72);
}
.fi-sidebar .fi-sidebar-item-label {
    font-size: 13.5px;
    color: rgb(228 232 252 / 0.86);
}
.fi-sidebar .fi-sidebar-item-button:hover .fi-sidebar-item-label,
.fi-sidebar .fi-sidebar-item-button:hover .fi-sidebar-item-icon {
    color: #fff;
}
/* 現用頁:白字 + 天藍斜撇(取 logo 嗰條 60° 斜邊)*/
.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-button {
    background: rgb(255 255 255 / 0.13);
}
.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-button::before {
    content: '';
    position: absolute;
    inset-inline-start: -5px;
    top: 50%;
    width: 4px;
    height: 18px;
    margin-top: -9px;
    background: rgb(var(--nf-sky));
    transform: skewY(-30deg);
    border-radius: 1px;
}
.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-button .fi-sidebar-item-label {
    color: #fff;
    font-weight: 600;
}
.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-button .fi-sidebar-item-icon {
    color: rgb(var(--nf-sky));
}
/* 導航 badge:深底上用半透明色塊,保留語意色(--c-400 由 Filament inline 出) */
.fi-sidebar .fi-sidebar-item .fi-badge {
    padding: 1px 7px;
    min-width: 0;
    background: rgba(var(--c-400), 0.2);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(var(--c-400), 0.5);
    font-variant-numeric: tabular-nums;
}

/* ── 頂欄 ──────────────────────────────────────────────────────────────────────────── */
.fi-topbar > nav {
    height: 3.5rem;
    box-shadow: none;
    border-bottom: 1px solid var(--nf-rule);
}
.fi-topbar .fi-global-search-field .fi-input-wrp {
    background: var(--nf-paper);
    box-shadow: inset 0 0 0 1px var(--nf-rule);
}
.fi-topbar .fi-global-search-field .fi-input-wrp:focus-within {
    background: #fff;
    box-shadow: inset 0 0 0 1px rgb(var(--nf-indigo)), 0 0 0 3px rgb(var(--nf-sky) / 0.25);
}

/* ── 頁面骨架:收緊垂直留白,標題用 display 字 ─────────────────────────────────────── */
.fi-main .fi-page > section {
    gap: 1.25rem;
    padding-block: 1.25rem 2rem;
}
.fi-header .fi-header-heading {
    font-family: var(--nf-display);
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: rgb(var(--nf-ink));
}
.fi-header .fi-breadcrumbs {
    margin-bottom: 2px;
}
.fi-breadcrumbs .fi-breadcrumbs-item-label {
    font-size: 12.5px;
}

/* ── 按鈕 ──────────────────────────────────────────────────────────────────────────── */
.fi-btn {
    border-radius: 8px;
    transition: background-color 0.12s ease, box-shadow 0.12s ease, transform 0.06s ease;
}
.fi-btn:active:not(:disabled) {
    transform: translateY(1px);
}
.fi-btn.fi-color-primary:not(.fi-btn-outlined) {
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.14), 0 1px 2px rgb(var(--nf-indigo) / 0.35);
}
.fi-btn.fi-color-gray:not(.fi-btn-outlined) {
    box-shadow: inset 0 0 0 1px var(--nf-rule-strong), 0 1px 1px rgb(17 22 51 / 0.04);
}
.fi-btn.fi-color-gray:not(.fi-btn-outlined):hover {
    background: #f6f8fc;
}
/* 鍵盤焦點:Filament 嘅 focus ring 係用 box-shadow 砌(Tailwind ring-*)。上面幫 .fi-btn 重設咗
   box-shadow,嗰個 ring 會被蓋走 → 一律改用 outline 畫焦點框(outline 唔受 box-shadow 影響)。
   連埋原本淨係變底色、焦點唔明顯嘅側欄項目 / 分頁籤。 */
.fi-btn:focus-visible,
.fi-sidebar-item-button:focus-visible,
.fi-tabs-item:focus-visible {
    outline: 2px solid rgb(var(--nf-sky));
    outline-offset: 2px;
}

/* ── 卡片 / 區塊 ───────────────────────────────────────────────────────────────────── */
/* aside 版 section 個外層只係 grid(冇卡底),卡喺入面嘅 content-ctn → 分開揀,唔好幫外層畫框 */
.fi-section:not(.fi-aside),
.fi-section.fi-aside > .fi-section-content-ctn,
.fi-ta-ctn,
.fi-wi-stats-overview-stat {
    border-radius: var(--nf-radius);
    box-shadow: 0 0 0 1px var(--nf-rule), var(--nf-shadow-card);
}
/* 只收緊標準版嘅留白(.py-4 / .p-6);compact 版(.py-2.5 / .p-4)本身已經細,唔好反而放大 */
.fi-section .fi-section-header.py-4 {
    padding-block: 0.8rem;
}
.fi-section .fi-section-header-heading {
    font-size: 0.95rem;
    font-weight: 700;
    color: rgb(var(--nf-ink));
}
.fi-section .fi-section-content.p-6 {
    padding: 1.1rem 1.5rem;
}

/* ── 表格:加密度 + 清晰 hover(斑馬紋同 hover 原本同色,行追蹤唔到) ─────────────────── */
.fi-ta-table {
    font-variant-numeric: tabular-nums;
}
.fi-ta-table > thead > tr {
    background: #f5f7fb;
}
.fi-ta-table .fi-ta-header-cell {
    padding-block: 9px;
}
.fi-ta-table .fi-ta-header-cell-label {
    font-size: 12.5px;
    font-weight: 600;
    color: #4b5675;
    letter-spacing: 0.01em;
}
/* 每格由 py-4(16px)收到 9px → 行高約 58px→42px,同一屏多睇三成行 */
.fi-ta-table td .py-4,
.fi-ta-table th .py-4 {
    padding-block: 9px;
}
/* 可換行欄(->wrap())喺 table-auto 之下會被旁邊嘅長欄擠到得幾十 px,中文變成逐字斷行,
   成行高度爆兩三倍(例:庫存流水「項目」欄得 51px,每行 91px)。
   改為:短文字唔斷行;長文字先喺 ~18 個中文字位換行。 */
.fi-ta-table .fi-ta-text-item-label.whitespace-normal {
    width: max-content;
    max-width: 18em;
}
.fi-ta-table .fi-ta-row {
    transition: background-color 0.08s ease;
}
.fi-ta-table > tbody > .fi-ta-row:hover {
    background: rgb(var(--nf-sky) / 0.09);
}
.fi-ta-header-toolbar {
    padding-block: 10px;
}
.fi-ta .fi-ta-empty-state {
    padding-block: 2.5rem;
}
/* Livewire 回應中(排序/篩選/換頁):表身淡出,等用家知「撳到、計緊」;class 由 nf-admin.js 加 */
.nf-busy .fi-ta-content {
    opacity: 0.55;
    transition: opacity 0.15s ease;
}

/* ── 表單 ──────────────────────────────────────────────────────────────────────────── */
/* ⚠️ 一定要 :not(.fi-invalid):Filament 用 ring(= box-shadow)畫驗證錯誤嘅紅框,
   呢度重設 box-shadow 如果唔避開 invalid 狀態,填錯欄位就冇紅框提示。 */
.fi-input-wrp:not(.fi-invalid) {
    box-shadow: inset 0 0 0 1px var(--nf-rule-strong), 0 1px 1px rgb(17 22 51 / 0.03);
}
.fi-input-wrp:not(.fi-invalid):focus-within:not(:has(.fi-ac-action:focus)) {
    box-shadow: inset 0 0 0 1px rgb(var(--nf-indigo)), 0 0 0 3px rgb(var(--nf-sky) / 0.25);
}
.fi-input-wrp.fi-invalid {
    /* Filament 色階變數係「逗號分隔」(R, G, B)→ 要用 rgba(var(--x), a);rgb(var(--x) / a) 係無效值 */
    box-shadow: inset 0 0 0 1px rgba(var(--danger-600), 1), 0 0 0 3px rgba(var(--danger-600), 0.14);
}
.fi-input-wrp.fi-disabled {
    background: #f4f6fa;
}
.fi-fo-field-wrp-label > span {
    color: #333c5a;
}
/* 黐底儲存列(BasePage::stickyFormActions):長表單唔使碌到底先㩒到儲存 */
.fi-form-actions.fi-sticky {
    border-radius: var(--nf-radius);
    box-shadow: 0 0 0 1px var(--nf-rule), 0 -6px 24px -10px rgb(17 22 51 / 0.2);
    backdrop-filter: saturate(1.2) blur(6px);
    background: rgb(255 255 255 / 0.92);
}

/* ── 檢視頁(infolist):標籤退後、數值行先 ─────────────────────────────────────────────
   原本標籤同數值一樣深色、標籤仲要粗過數值,掃讀時眼睛先落喺「欄名」而唔係「內容」。 */
.fi-in-entry-wrp .fi-in-entry-wrp-label > span {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.25rem;
    letter-spacing: 0.02em;
    color: #6a7591;
}
.fi-in-entry-wrp .fi-in-text-item {
    color: rgb(var(--nf-ink));
    font-variant-numeric: tabular-nums;
}
.fi-in-entry-wrp > div {
    row-gap: 2px;
}

/* ── 分頁籤 / badge / 彈層 ─────────────────────────────────────────────────────────── */
/* :not(.fi-contained):表單 / infolist 入面嘅 Tabs 係「contained」版(淨係一條底線,冇卡),唔好幫佢畫框 */
.fi-tabs:not(.fi-contained) {
    border-radius: var(--nf-radius);
    box-shadow: 0 0 0 1px var(--nf-rule), var(--nf-shadow-card);
    padding: 5px;
}
.fi-tabs:not(.fi-contained) .fi-tabs-item {
    padding: 6px 12px;
    border-radius: 7px;
}
.fi-tabs .fi-tabs-item.fi-active {
    background: rgb(var(--primary-50));
}
.fi-badge {
    border-radius: 6px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.fi-dropdown-panel {
    border-radius: var(--nf-radius);
    box-shadow: 0 0 0 1px var(--nf-rule), var(--nf-shadow-pop);
}
.fi-modal-window {
    border-radius: 14px;
    box-shadow: var(--nf-shadow-pop);
}
.fi-modal-heading {
    font-family: var(--nf-display);
    font-weight: 700;
}

/* ── 首頁 ──────────────────────────────────────────────────────────────────────────── */
.fi-wi-stats-overview-stat {
    padding: 1.1rem 1.25rem;
    transition: box-shadow 0.12s ease, transform 0.12s ease;
}
a.fi-wi-stats-overview-stat:hover {
    box-shadow: 0 0 0 1px rgb(var(--nf-indigo) / 0.35), 0 6px 18px -8px rgb(var(--nf-indigo) / 0.35);
    transform: translateY(-1px);
}
.fi-wi-stats-overview-stat-label {
    font-size: 12.5px;
    font-weight: 600;
    color: #5a6583;
}
.fi-wi-stats-overview-stat-value {
    font-family: var(--nf-display);
    font-weight: 800;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: rgb(var(--nf-ink));
}

/* 快捷操作(QuickActionsWidget) */
.nf-quick {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 24px;
    padding: 16px 20px;
    border-radius: var(--nf-radius);
    background: #fff;
    box-shadow: 0 0 0 1px var(--nf-rule), var(--nf-shadow-card);
}
.nf-quick-hello {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-inline-end: auto;
    min-width: 11rem;
}
.nf-quick-hello strong {
    font-family: var(--nf-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: rgb(var(--nf-ink));
}
.nf-quick-hello span {
    font-size: 12.5px;
    color: #66718f;
}
.nf-quick-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.nf-quick-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px 8px 10px;
    border-radius: 9px;
    font-size: 13.5px;
    font-weight: 600;
    color: rgb(var(--nf-ink));
    background: #f5f7fb;
    box-shadow: inset 0 0 0 1px var(--nf-rule);
    text-decoration: none;
    transition: background-color 0.12s ease, box-shadow 0.12s ease, color 0.12s ease;
}
.nf-quick-btn svg {
    width: 18px;
    height: 18px;
    color: rgb(var(--nf-indigo));
}
.nf-quick-btn:hover {
    background: #fff;
    color: rgb(var(--nf-indigo));
    box-shadow: inset 0 0 0 1px rgb(var(--nf-indigo) / 0.45), 0 4px 12px -6px rgb(var(--nf-indigo) / 0.4);
}
.nf-quick-btn:focus-visible {
    outline: 2px solid rgb(var(--nf-sky));
    outline-offset: 2px;
}
.nf-quick-btn.is-primary {
    background: rgb(var(--nf-indigo));
    color: #fff;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.14), 0 1px 2px rgb(var(--nf-indigo) / 0.35);
}
.nf-quick-btn.is-primary svg {
    color: rgb(var(--nf-sky));
}
.nf-quick-btn.is-primary:hover {
    background: rgb(var(--primary-500));
    color: #fff;
}

/* ── 登入頁:斜切品牌面(同 logo 同一個 60° 角) ─────────────────────────────────────── */
.fi-simple-layout {
    position: relative;
    isolation: isolate;
    background: var(--nf-paper);
}
.fi-simple-layout::before,
.fi-simple-layout::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}
.fi-simple-layout::before {
    background: linear-gradient(150deg, var(--nf-side-a) 0%, var(--nf-side-b) 60%, var(--nf-side-c) 100%);
    clip-path: polygon(0 0, calc(42% + 29vh) 0, calc(42% - 29vh) 100%, 0 100%);
}
.fi-simple-layout::after {
    background: rgb(var(--nf-sky));
    clip-path: polygon(calc(42% + 29vh) 0, calc(42% + 29vh + 14px) 0, calc(42% - 29vh + 14px) 100%, calc(42% - 29vh) 100%);
}
.fi-simple-layout .fi-simple-main {
    border-radius: 16px;
    box-shadow: 0 0 0 1px rgb(17 22 51 / 0.06), 0 24px 60px -20px rgb(17 22 51 / 0.45);
    max-width: 26rem;
    padding-block: 2.5rem;
}
.fi-simple-layout .fi-simple-header-heading {
    font-family: var(--nf-display);
    font-size: 1.15rem;
    font-weight: 700;
    color: #3b4563;
}
.fi-simple-layout .fi-simple-header .fi-logo {
    margin-bottom: 0.75rem;
}
.nf-login-foot {
    margin-top: 1.25rem;
    text-align: center;
    font-size: 11.5px;
    letter-spacing: 0.04em;
    color: #8a93ab;
}
@media (max-width: 640px) {
    .fi-simple-layout::before {
        clip-path: polygon(0 0, 100% 0, 100% 34%, 0 46%);
    }
    .fi-simple-layout::after {
        display: none;
    }
    .fi-simple-layout .fi-simple-main {
        max-width: none;
        width: calc(100% - 2rem);
        border-radius: 14px;
    }
}

/* ── 頂部載入進度條(nf-admin.js 控制)────────────────────────────────────────────────
   換頁 / Livewire 回應慢過 ~0.2s 先出;俾用家即時知道「撳到,嚟緊」。 */
#nf-progress {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
    width: 100%;
    height: 3px;
    pointer-events: none;
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left center;
    background: linear-gradient(90deg, rgb(var(--nf-indigo)) 0%, rgb(var(--nf-sky)) 70%, #9fe3ff 100%);
    box-shadow: 0 0 8px rgb(var(--nf-sky) / 0.6);
    transition: transform 0.2s ease-out, opacity 0.25s ease;
}
#nf-progress.is-on {
    opacity: 1;
}

/* ── 工作台卡(.wb-* 喺 theme bundle)同新主題對齊 ──────────────────────────────────── */
.wb-card {
    border-color: var(--nf-rule);
    box-shadow: var(--nf-shadow-card);
}

@media (prefers-reduced-motion: reduce) {
    .fi-btn,
    .fi-ta-table .fi-ta-row,
    .fi-wi-stats-overview-stat,
    .nf-quick-btn,
    #nf-progress,
    .nf-busy .fi-ta-content {
        transition: none;
    }
    a.fi-wi-stats-overview-stat:hover,
    .fi-btn:active:not(:disabled) {
        transform: none;
    }
}