/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* ===== App shell: fixed sidebar + fixed header/footer, scrollable content =====
   Theme follows the invex-ui project:
   accent #008FD3, white header (gray-200 border, shadow-sm),
   dark gray-900 footer with a thin tri-colour status line. */
.page[b-158cku5e34] {
    display: flex;
    height: 100vh;
    overflow: hidden;
    background: #f1f5f9;
}

.main[b-158cku5e34] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    height: 100vh;
}

/* ---- Fixed header ---- */
.topbar[b-158cku5e34] {
    flex-shrink: 0;
    height: 48px;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 0 1rem;
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    z-index: 10;
}

.topbar-brand[b-158cku5e34] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-shrink: 0;
}

.topbar-logo[b-158cku5e34] {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: #008FD3;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.topbar-name[b-158cku5e34] {
    font-size: 0.95rem;
    font-weight: 700;
    color: #111827;
}

/* The nav takes the space left over and scrolls sideways if it still
   doesn't fit, so links never wrap inside the fixed-height bar. */
.topbar-nav[b-158cku5e34] {
    display: flex;
    align-items: center;
    gap: 0.1rem;
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.topbar-nav[b-158cku5e34]::-webkit-scrollbar { display: none; }

/* Hairline divider between groups of related links. */
.topbar-sep[b-158cku5e34] {
    flex: 0 0 auto;
    width: 1px;
    height: 18px;
    margin: 0 0.45rem;
    background: #e5e7eb;
}

/* Settings sits apart, pinned to the right and never scrolled away. */
.topbar-end[b-158cku5e34] {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding-left: 0.75rem;
    border-left: 1px solid #e5e7eb;
}

.topbar-nav[b-158cku5e34]  .topbar-link,
.topbar-end[b-158cku5e34]  .topbar-link {
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.2;
    color: #4b5563;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    padding: 0.36rem 0.6rem;
    border-radius: 7px;
    transition: background 0.15s ease, color 0.15s ease;
}

.topbar-end[b-158cku5e34]  .topbar-link:hover {
    background: #f3f4f6;
    color: #008FD3;
}

.topbar-end[b-158cku5e34]  .topbar-link.active {
    background: #e0f2fe;
    color: #007ab5;
    font-weight: 600;
}

.topbar-nav[b-158cku5e34]  .topbar-link:hover {
    background: #f3f4f6;
    color: #008FD3;
}

.topbar-nav[b-158cku5e34]  .topbar-link.active {
    background: #e0f2fe;
    color: #007ab5;
    font-weight: 600;
}

/* AI Advisor — aqua highlight so it stands out in the menu */
.topbar-nav[b-158cku5e34]  .topbar-link.topbar-ai {
    color: #0b5563;
    font-weight: 700;
    background: #e0f7fa;
    border: 1px solid #c4e8ee;
}
.topbar-nav[b-158cku5e34]  .topbar-link.topbar-ai:hover {
    background: #cdeff4;
    color: #0b5563;
}
.topbar-nav[b-158cku5e34]  .topbar-link.topbar-ai.active {
    background: #0891b2;
    color: #fff;
    border-color: #0891b2;
}

/* ---- Scrollable content ---- */
.content[b-158cku5e34] {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1.25rem;
}

/* ---- Fixed footer ---- */
.footer[b-158cku5e34] {
    flex-shrink: 0;
}

.footer-line[b-158cku5e34] {
    height: 2px;
    background: linear-gradient(to right, #3b82f6, #22c55e, #a855f7);
}

.footer-bar[b-158cku5e34] {
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    background: #111827;
    color: #9ca3af;
    font-size: 0.72rem;
}

.footer-version[b-158cku5e34] {
    font-variant-numeric: tabular-nums;
}

/* ===== Embedded mode (?headerFooter=false): header & footer are simply
   not rendered, so they take zero space; content fills the full height. ===== */

/* ===== Responsive: stack on small screens ===== */
@media (max-width: 767.98px) {
    .page[b-158cku5e34] {
        flex-direction: column;
        height: auto;
        min-height: 100vh;
        overflow: visible;
    }

    .main[b-158cku5e34] {
        height: auto;
    }

    .topbar[b-158cku5e34] {
        position: sticky;
        top: 0;
    }

    .content[b-158cku5e34] {
        overflow: visible;
    }
}

/* ===== Framework error toast ===== */
#blazor-error-ui[b-158cku5e34] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-158cku5e34] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/* ===== Responsive top nav =====
   Narrow screens drop the links onto their own full-width row; the brand and
   the settings link stay together on the first row. Scrolling and nowrap are
   already global, so only the layout changes here. */
@media (max-width: 900px) {
    .topbar[b-158cku5e34] {
        height: auto;
        min-height: 48px;
        flex-wrap: wrap;
        gap: 0.5rem 1rem;
        padding: 0.5rem 0.9rem;
    }

    .topbar-nav[b-158cku5e34] {
        order: 3;
        flex-basis: 100%;
        padding-bottom: 2px;
    }

    .topbar-end[b-158cku5e34] {
        margin-left: auto;
        border-left: 0;
        padding-left: 0;
    }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* ===== Slim sidebar — invex-ui theme (dark gray-900, #008FD3 accent) ===== */
.nav-brand[b-vrer7g71rd] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    height: 44px;
    padding: 0 0.85rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.brand-logo[b-vrer7g71rd] {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    color: #fff;
    background: #008FD3;
}

.brand-name[b-vrer7g71rd] {
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: #f9fafb;
}

/* ===== Nav list ===== */
.nav-heading[b-vrer7g71rd] {
    padding: 0 1rem;
    margin: 0.9rem 0 0.4rem;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: #6b7280;
}

.nav-menu[b-vrer7g71rd] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 0.55rem;
}

.nav-menu[b-vrer7g71rd]  .nav-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    height: 38px;
    padding: 0 0.8rem;
    border-radius: 7px;
    font-size: 0.84rem;
    font-weight: 500;
    color: #d1d5db;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.nav-menu[b-vrer7g71rd]  .nav-link svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    fill: currentColor;
    opacity: 0.8;
}

.nav-menu[b-vrer7g71rd]  .nav-link:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
}

.nav-menu[b-vrer7g71rd]  .nav-link:hover svg {
    opacity: 1;
}

.nav-menu[b-vrer7g71rd]  .nav-link.active {
    background: #008FD3;
    color: #ffffff;
}

.nav-menu[b-vrer7g71rd]  .nav-link.active svg {
    opacity: 1;
}

/* ===== Mobile toggle ===== */
.navbar-toggler[b-vrer7g71rd] {
    appearance: none;
    display: none;
    margin-left: auto;
    width: 38px;
    height: 32px;
    cursor: pointer;
    border-radius: 7px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.7%29' stroke-linecap='round' stroke-width='2' d='M4 8h22M4 15h22M4 22h22'/%3e%3c/svg%3e") no-repeat center / 1.2rem;
}

.nav-scrollable[b-vrer7g71rd] {
    padding-bottom: 1rem;
}

@media (min-width: 768px) {
    .nav-scrollable[b-vrer7g71rd] {
        height: calc(100vh - 44px);
        overflow-y: auto;
    }
}

@media (max-width: 767.98px) {
    .navbar-toggler[b-vrer7g71rd] {
        display: block;
    }

    .nav-scrollable[b-vrer7g71rd] {
        display: none;
    }

    .navbar-toggler:checked ~ .nav-scrollable[b-vrer7g71rd] {
        display: block;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-npf3vpvlye],
.components-reconnect-repeated-attempt-visible[b-npf3vpvlye],
.components-reconnect-failed-visible[b-npf3vpvlye],
.components-pause-visible[b-npf3vpvlye],
.components-resume-failed-visible[b-npf3vpvlye],
.components-rejoining-animation[b-npf3vpvlye] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-npf3vpvlye],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-npf3vpvlye],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-npf3vpvlye],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-npf3vpvlye],
#components-reconnect-modal.components-reconnect-retrying[b-npf3vpvlye],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-npf3vpvlye],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-npf3vpvlye],
#components-reconnect-modal.components-reconnect-failed[b-npf3vpvlye],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-npf3vpvlye] {
    display: block;
}


#components-reconnect-modal[b-npf3vpvlye] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-npf3vpvlye 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-npf3vpvlye 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-npf3vpvlye 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-npf3vpvlye]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-npf3vpvlye 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-npf3vpvlye {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-npf3vpvlye {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-npf3vpvlye {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-npf3vpvlye] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-npf3vpvlye] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-npf3vpvlye] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-npf3vpvlye] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-npf3vpvlye] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-npf3vpvlye] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-npf3vpvlye] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-npf3vpvlye 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-npf3vpvlye] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-npf3vpvlye {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/BankStatementImport.razor.rz.scp.css */
/* ===== Bank statement import — sits on the ii- UI kit, accent #008FD3 ===== */

/* ---- locked file ---- */
.bs-lock[b-ljqlscv8df] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    padding: 2rem 1rem 1.6rem;
}

.bs-lock-ic[b-ljqlscv8df] {
    font-size: 2rem;
    width: 62px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 16px;
    margin-bottom: 0.2rem;
}

.bs-lock-t[b-ljqlscv8df] { font-size: 1.02rem; font-weight: 700; color: #111827; }

.bs-lock-s[b-ljqlscv8df] {
    font-size: 0.83rem;
    color: #6b7280;
    max-width: 32rem;
    line-height: 1.5;
}

.bs-pw[b-ljqlscv8df] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.7rem;
    flex-wrap: wrap;
    justify-content: center;
}

.bs-pw-in[b-ljqlscv8df] {
    width: 260px;
    font-size: 0.87rem;
    font-family: inherit;
    color: #111827;
    padding: 0.55rem 0.7rem;
    background: #fff;
    border: 1px solid #dfe3e8;
    border-radius: 8px;
    outline: none;
    box-shadow: 0 1px 2px rgb(16 24 40 / 0.04);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.bs-pw-in:focus[b-ljqlscv8df] {
    border-color: #008FD3;
    box-shadow: 0 0 0 3px rgb(0 143 211 / 0.13);
}

.bs-pw-in.bad[b-ljqlscv8df] { border-color: #dc2626; }
.bs-pw-in.bad:focus[b-ljqlscv8df] { box-shadow: 0 0 0 3px rgb(220 38 38 / 0.14); }

.bs-eye[b-ljqlscv8df] {
    font-size: 0.9rem;
    line-height: 1;
    background: #fff;
    border: 1px solid #dfe3e8;
    border-radius: 8px;
    padding: 0.5rem 0.55rem;
    cursor: pointer;
}

.bs-eye:hover[b-ljqlscv8df] { background: #f3f4f6; }

.bs-hint[b-ljqlscv8df] {
    max-width: 34rem;
    margin-top: 0.5rem;
    font-size: 0.78rem;
    line-height: 1.55;
    color: #6b7280;
    background: #f9fafb;
    border: 1px solid #eef1f5;
    border-radius: 9px;
    padding: 0.6rem 0.85rem;
}

/* ---- errors ---- */
.bs-error[b-ljqlscv8df] {
    margin-top: 0.8rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #b91c1c;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 0.55rem 0.8rem;
}

/* ---- result header ---- */
.bs-head[b-ljqlscv8df] {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    flex-wrap: wrap;
    padding: 0.85rem 1.1rem;
    background: linear-gradient(180deg, #fcfdfe, #f7f9fb);
    border-bottom: 1px solid #eef1f5;
}

.bs-file[b-ljqlscv8df] { display: flex; align-items: center; gap: 0.7rem; min-width: 0; }

.bs-file-ic[b-ljqlscv8df] {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 9px;
}

.bs-file-n[b-ljqlscv8df] {
    font-size: 0.88rem;
    font-weight: 700;
    color: #111827;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 34rem;
}

.bs-file-m[b-ljqlscv8df] { margin-top: 0.1rem; font-size: 0.76rem; color: #6b7280; }

.bs-tag[b-ljqlscv8df] {
    margin-left: 0.35rem;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #166534;
    background: #dcfce7;
    border: 1px solid #bbf7d0;
    border-radius: 999px;
    padding: 0.05rem 0.4rem;
}

.bs-head-r[b-ljqlscv8df] { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }
.bs-head-r .ii-btn.on[b-ljqlscv8df] { background: #e0f2fe; color: #007ab5; }

/* ---- transactions ---- */
.bs-table[b-ljqlscv8df] { font-variant-numeric: tabular-nums; }
.bs-table tbody tr:nth-child(even)[b-ljqlscv8df] { background: #fafbfd; }
.bs-table tbody tr:hover[b-ljqlscv8df] { background: #eef4fa; }

.bs-n[b-ljqlscv8df] { width: 3rem; color: #9ca3af; text-align: right; }
.bs-p[b-ljqlscv8df] { width: 3.5rem; color: #9ca3af; text-align: right; }
.bs-r[b-ljqlscv8df] { text-align: right; white-space: nowrap; }
.bs-nowrap[b-ljqlscv8df] { white-space: nowrap; }

.bs-desc[b-ljqlscv8df] {
    max-width: 24rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bs-ref[b-ljqlscv8df] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.74rem;
    color: #6b7280;
    white-space: nowrap;
}

.bs-out[b-ljqlscv8df] { color: #b91c1c; }
.bs-in[b-ljqlscv8df]  { color: #166534; }

.ii-stat-val.bs-out[b-ljqlscv8df], .ii-stat-val.bs-in[b-ljqlscv8df] { font-variant-numeric: tabular-nums; }

.bs-foot[b-ljqlscv8df] { font-size: 0.78rem; color: #6b7280; }

/* ---- nothing found ---- */
.bs-empty[b-ljqlscv8df] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.4rem;
    padding: 2.5rem 1rem;
}

.bs-empty-ic[b-ljqlscv8df] { font-size: 1.8rem; opacity: 0.6; }
.bs-empty-t[b-ljqlscv8df] { font-size: 0.95rem; font-weight: 700; color: #374151; }

.bs-empty-s[b-ljqlscv8df] {
    font-size: 0.82rem;
    color: #6b7280;
    max-width: 34rem;
    line-height: 1.55;
    margin-bottom: 0.5rem;
}

/* ---- raw page text ---- */
.bs-text[b-ljqlscv8df] { border-top: 1px solid #eef1f5; }

.bs-text-cap[b-ljqlscv8df] {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6b7280;
    background: #f7f9fb;
    border-bottom: 1px solid #eef1f5;
    padding: 0.45rem 1.1rem;
}

.bs-pre[b-ljqlscv8df] {
    margin: 0;
    max-height: 22rem;
    overflow: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.72rem;
    line-height: 1.55;
    color: #334155;
    background: #fbfcfd;
    padding: 0.8rem 1.1rem;
    white-space: pre-wrap;
    word-break: break-word;
}

@media (max-width: 780px) {
    .bs-head-r[b-ljqlscv8df] { margin-left: 0; width: 100%; }
    .bs-pw-in[b-ljqlscv8df] { width: 100%; }
    .bs-desc[b-ljqlscv8df] { max-width: 14rem; }
}

/* ---- all lines / transactions filter ---- */
.bs-filter[b-ljqlscv8df] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    padding: 0.6rem 1.1rem;
    background: #f7f9fb;
    border-bottom: 1px solid #eef1f5;
}

.bs-seg[b-ljqlscv8df] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: #4b5563;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 0.36rem 0.7rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.bs-seg:hover[b-ljqlscv8df] { background: #f3f4f6; color: #111827; }

.bs-seg.on[b-ljqlscv8df] {
    color: #007ab5;
    font-weight: 600;
    background: #e0f2fe;
    border-color: #bae6fd;
}

.bs-seg-n[b-ljqlscv8df] {
    font-size: 0.7rem;
    font-weight: 700;
    color: #6b7280;
    background: #f3f4f6;
    border-radius: 999px;
    padding: 0.04rem 0.38rem;
    font-variant-numeric: tabular-nums;
}

.bs-seg.on .bs-seg-n[b-ljqlscv8df] { background: #bae6fd; color: #026da3; }

.bs-filter-note[b-ljqlscv8df] {
    font-size: 0.76rem;
    color: #6b7280;
    margin-left: 0.35rem;
    max-width: 46rem;
    line-height: 1.45;
}

/* a line that is not a transaction — shown, but clearly not part of the figures */
.bs-info td[b-ljqlscv8df] { background: #fcfcfd; }
.bs-table tbody tr.bs-info:hover td[b-ljqlscv8df] { background: #f4f6f8; }

.bs-raw[b-ljqlscv8df] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.73rem;
    color: #94a3b8;
    white-space: pre-wrap;
    word-break: break-word;
}

.bs-vd[b-ljqlscv8df] { color: #9ca3af; font-size: 0.76rem; }

/* ---- who the money moved with ---- */
.bs-party[b-ljqlscv8df] { max-width: 17rem; }

/* the badge is fixed width and the name takes what is left, so neither
   spills into the reference column */
.bs-party-box[b-ljqlscv8df] { display: flex; align-items: center; gap: 0.35rem; min-width: 0; }

.bs-party-n[b-ljqlscv8df] {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    color: #1f2937;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* a clearing row cannot be resolved cleanly, so it reads as a guess */
.bs-party-n.weak[b-ljqlscv8df] { color: #6b7280; font-weight: 500; font-style: italic; }

.bs-party-none[b-ljqlscv8df] { color: #cbd5e1; }

.bs-role[b-ljqlscv8df] {
    flex-shrink: 0;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 0.05rem 0.36rem;
    vertical-align: middle;
}

.bs-role.out[b-ljqlscv8df] { color: #b91c1c; background: #fee2e2; }
.bs-role.in[b-ljqlscv8df]  { color: #166534; background: #dcfce7; }

/* ---- grouped by party ---- */
.bs-sec[b-ljqlscv8df] { border-top: 1px solid #eef1f5; }

.bs-sec-h[b-ljqlscv8df] {
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
    flex-wrap: wrap;
    padding: 0.8rem 1.1rem 0.6rem;
    background: #f7f9fb;
    border-bottom: 1px solid #eef1f5;
}

.bs-sec-t[b-ljqlscv8df] {
    font-size: 0.86rem;
    font-weight: 700;
    color: #111827;
}

.bs-sec-s[b-ljqlscv8df] {
    font-size: 0.76rem;
    color: #6b7280;
    line-height: 1.45;
    max-width: 52rem;
}

.bs-pt-name[b-ljqlscv8df] { font-weight: 600; color: #1f2937; }

.bs-bar-h[b-ljqlscv8df] { width: 30%; min-width: 12rem; }

.bs-bar-c[b-ljqlscv8df] { padding-right: 1.1rem !important; }

/* one bar per party: length is its share of everything moved, and the split
   inside it is paid against received */
.bs-bar[b-ljqlscv8df] {
    display: flex;
    height: 9px;
    min-width: 2px;
    border-radius: 999px;
    overflow: hidden;
    background: #eef2f6;
}

.bs-bar-out[b-ljqlscv8df] { background: #dc2626; flex-shrink: 0; }
.bs-bar-in[b-ljqlscv8df]  { background: #16a34a; flex: 1; }

/* ---- several statements at once ---- */
.bs-head-btns[b-ljqlscv8df] { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }

/* the file input sits invisibly over the button so the two read as one control */
.bs-add[b-ljqlscv8df] { position: relative; overflow: hidden; cursor: pointer; display: inline-flex; }
.bs-add[b-ljqlscv8df]  input[type=file] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.bs-files[b-ljqlscv8df] { margin-bottom: 1rem; }

.bs-file-row[b-ljqlscv8df] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.7rem 1.1rem;
    border-top: 1px solid #f4f6f8;
}

.bs-file-row:hover[b-ljqlscv8df] { background: #fafbfc; }
.bs-file-row.lock[b-ljqlscv8df] { background: #fffdf6; }
.bs-file-row.bad[b-ljqlscv8df]  { background: #fef5f5; }

.bs-file-row .bs-file-ic[b-ljqlscv8df] {
    width: 26px;
    height: 26px;
    font-size: 0.8rem;
    border-radius: 8px;
    flex-shrink: 0;
}

.bs-file-row.ok   .bs-file-ic[b-ljqlscv8df] { color: #166534; background: #dcfce7; border-color: #bbf7d0; }
.bs-file-row.lock .bs-file-ic[b-ljqlscv8df] { background: #fff7ed; border-color: #fed7aa; }
.bs-file-row.bad  .bs-file-ic[b-ljqlscv8df] { background: #fef2f2; border-color: #fecaca; }

.bs-file-main[b-ljqlscv8df] { flex: 1; min-width: 0; }

.bs-file-fig[b-ljqlscv8df] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.1rem;
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.bs-file-bal[b-ljqlscv8df] { color: #111827; font-weight: 600; }

.bs-file-x[b-ljqlscv8df] {
    flex-shrink: 0;
    border: 0;
    background: transparent;
    color: #cbd5e1;
    font-size: 0.8rem;
    line-height: 1;
    padding: 0.25rem;
    cursor: pointer;
}

.bs-file-x:hover[b-ljqlscv8df] { color: #b91c1c; }

.bs-file-row .bs-pw[b-ljqlscv8df] { margin-top: 0.5rem; justify-content: flex-start; }
.bs-file-row .bs-pw-in[b-ljqlscv8df] { width: 220px; }

.bs-pw-bad[b-ljqlscv8df] { font-size: 0.75rem; font-weight: 600; color: #b91c1c; }

.bs-file-note[b-ljqlscv8df] {
    font-size: 0.76rem;
    line-height: 1.5;
    color: #6b7280;
    background: #f9fafb;
    border-top: 1px solid #eef1f5;
    padding: 0.6rem 1.1rem;
}

/* which statement a row came from */
.bs-src[b-ljqlscv8df] {
    width: 8rem;
    font-size: 0.72rem;
    color: #94a3b8;
    white-space: nowrap;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---- party report: dense enough to read every party without scrolling ---- */
.bs-side[b-ljqlscv8df] { display: flex; align-items: center; gap: 0.3rem; }

.bs-party-table th[b-ljqlscv8df],
.bs-party-table td[b-ljqlscv8df] {
    padding-top: 0.3rem !important;
    padding-bottom: 0.3rem !important;
    font-size: 0.79rem;
    line-height: 1.35;
}

.bs-party-table .bs-pt-name[b-ljqlscv8df] {
    max-width: 22rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bs-party-table .bs-bar[b-ljqlscv8df] { height: 7px; }

/* the totals line has to stand apart from the parties above it */
.bs-party-table tfoot .bs-tot td[b-ljqlscv8df] {
    font-weight: 700;
    color: #111827;
    background: #f7f9fb;
    border-top: 2px solid #e5e7eb;
    position: sticky;
    bottom: 0;
}

.bs-party-table tfoot .bs-tot td.bs-out[b-ljqlscv8df] { color: #b91c1c; }
.bs-party-table tfoot .bs-tot td.bs-in[b-ljqlscv8df]  { color: #166534; }

/* ---- keep a long table from burying whatever follows it ---- */
.bs-scroll[b-ljqlscv8df] {
    max-height: 58vh;
    overflow-y: auto;
}

/* the header has to stay put once the body scrolls under it */
.bs-sticky thead th[b-ljqlscv8df] {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f4f8fb;
    box-shadow: inset 0 -1px 0 #e5e7eb;
}

/* ---- choosing the bank ---- */
.bs-pick[b-ljqlscv8df] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 0.9rem;
    padding: 0.65rem 0.85rem;
    background: #f7f9fb;
    border: 1px solid #eef1f5;
    border-radius: 10px;
}

.bs-pick-l[b-ljqlscv8df] { font-size: 0.83rem; font-weight: 600; color: #1f2937; }

.bs-pick-s[b-ljqlscv8df] {
    font-size: 0.82rem;
    font-family: inherit;
    color: #111827;
    background: #fff;
    border: 1px solid #dfe3e8;
    border-radius: 8px;
    padding: 0.38rem 0.55rem;
    outline: none;
    box-shadow: 0 1px 2px rgb(16 24 40 / 0.04);
}

.bs-pick-s:focus[b-ljqlscv8df] { border-color: #008FD3; box-shadow: 0 0 0 3px rgb(0 143 211 / 0.13); }

.bs-pick-n[b-ljqlscv8df] { font-size: 0.76rem; color: #6b7280; }

.bs-bank[b-ljqlscv8df] { font-weight: 600; color: #007ab5; }

/* ---- the bank ask that opens from "Add more" ---- */
.bs-addbar[b-ljqlscv8df] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin: 0 0 0.9rem;
    padding: 0.7rem 0.9rem;
    background: #f0f9ff;
    border: 1px solid #cbe6f6;
    border-radius: 10px;
}

/* ---- reading the files: a clear "working" state instead of a frozen page ---- */
.bs-loading[b-ljqlscv8df] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 1.1rem 1.25rem;
    background: linear-gradient(180deg, #f8fcff, #f0f9ff);
    border-color: #bae6fd;
}

.bs-spin[b-ljqlscv8df] {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 3px solid #bae6fd;
    border-top-color: #008FD3;
    animation: bs-spin-b-ljqlscv8df 0.8s linear infinite;
}

/* the small one inside the Unlock button */
.bs-spin.sm[b-ljqlscv8df] {
    display: inline-block;
    width: 13px;
    height: 13px;
    border-width: 2px;
    border-color: rgb(255 255 255 / 0.45);
    border-top-color: #fff;
    vertical-align: -2px;
    margin-right: 0.35rem;
}

@keyframes bs-spin-b-ljqlscv8df { to { transform: rotate(360deg); } }

.bs-load-main[b-ljqlscv8df] { flex: 1; min-width: 0; }

.bs-load-t[b-ljqlscv8df] {
    font-size: 0.9rem;
    color: #111827;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bs-load-t b[b-ljqlscv8df] { font-weight: 700; }
.bs-load-s[b-ljqlscv8df] { margin-top: 0.15rem; font-size: 0.76rem; color: #6b7280; }

.bs-load-bar[b-ljqlscv8df] {
    margin-top: 0.6rem;
    height: 6px;
    border-radius: 999px;
    background: #e0f2fe;
    overflow: hidden;
}

/* striped and moving, so it reads as busy even while one file is being read */
.bs-load-bar span[b-ljqlscv8df] {
    display: block;
    height: 100%;
    min-width: 6%;
    border-radius: 999px;
    background-color: #008FD3;
    background-image: linear-gradient(45deg, rgb(255 255 255 / 0.28) 25%, transparent 25%, transparent 50%,
                                             rgb(255 255 255 / 0.28) 50%, rgb(255 255 255 / 0.28) 75%, transparent 75%);
    background-size: 16px 16px;
    animation: bs-stripe-b-ljqlscv8df 0.7s linear infinite;
    transition: width 0.35s ease;
}

@keyframes bs-stripe-b-ljqlscv8df { to { background-position: 16px 0; } }

/* the file pickers stay on the page while files are taken in, just out of sight */
.bs-hide[b-ljqlscv8df] { display: none !important; }

/* ---- a party row opens its transactions; the eye sits on the right ---- */
.bs-party-table tbody tr.bs-pt-row[b-ljqlscv8df] { cursor: pointer; }

.bs-eye-c[b-ljqlscv8df] { width: 3rem; text-align: right; padding-right: 0.9rem !important; }

.bs-view[b-ljqlscv8df] {
    width: 30px;
    height: 26px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    color: #4b5563;
    background: #fff;
    border: 1px solid #dfe3e8;
    border-radius: 7px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.bs-view svg[b-ljqlscv8df] { width: 15px; height: 15px; fill: currentColor; }

.bs-view:hover[b-ljqlscv8df],
.bs-party-table tbody tr.bs-pt-row:hover .bs-view[b-ljqlscv8df] {
    color: #007ab5;
    background: #e0f2fe;
    border-color: #93c5fd;
}

/* ---- dialog: every transaction with one party ---- */
.bs-back[b-ljqlscv8df] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgb(15 23 42 / 0.5);
}

.bs-modal[b-ljqlscv8df] {
    position: fixed;
    z-index: 1001;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(1120px, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 24px 60px rgb(15 23 42 / 0.3);
    outline: none;
}

.bs-modal-head[b-ljqlscv8df] {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    padding: 1rem 1.2rem 0.9rem;
    border-bottom: 1px solid #eef1f5;
}

.bs-modal-ic[b-ljqlscv8df] {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    font-size: 1.1rem;
    background: #e0f2fe;
    border-radius: 10px;
}

.bs-modal-titles[b-ljqlscv8df] { flex: 1; min-width: 0; }

.bs-modal-k[b-ljqlscv8df] {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6b7280;
}

.bs-modal-t[b-ljqlscv8df] {
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.25;
    color: #111827;
    word-break: break-word;
}

.bs-modal-s[b-ljqlscv8df] { margin-top: 0.1rem; font-size: 0.78rem; color: #6b7280; }

.bs-modal-x[b-ljqlscv8df] {
    border: 0;
    background: transparent;
    color: #9ca3af;
    font-size: 1rem;
    line-height: 1;
    padding: 0.35rem;
    border-radius: 6px;
    cursor: pointer;
}

.bs-modal-x:hover[b-ljqlscv8df] { background: #f3f4f6; color: #b91c1c; }

.bs-mstats[b-ljqlscv8df] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.7rem;
    padding: 0.85rem 1.2rem;
    background: #f7f9fb;
    border-bottom: 1px solid #eef1f5;
}

.bs-mstat[b-ljqlscv8df] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.6rem 0.8rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
}

.bs-mstat-l[b-ljqlscv8df] {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #6b7280;
}

.bs-mstat-v[b-ljqlscv8df] { font-size: 1.1rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.bs-mstat-s[b-ljqlscv8df] { font-size: 0.72rem; color: #9ca3af; }

.bs-modal-body[b-ljqlscv8df] { flex: 1; min-height: 0; overflow: auto; }

/* in the dialog the description has room, so it wraps instead of being cut off */
.bs-mdesc[b-ljqlscv8df] {
    min-width: 16rem;
    max-width: 30rem;
    white-space: normal;
    word-break: break-word;
    line-height: 1.35;
}

.bs-mtable tfoot .bs-tot td[b-ljqlscv8df] {
    position: sticky;
    bottom: 0;
    font-weight: 700;
    color: #111827;
    background: #f7f9fb;
    border-top: 2px solid #e5e7eb;
}

.bs-mtable tfoot .bs-tot td.bs-out[b-ljqlscv8df] { color: #b91c1c; }
.bs-mtable tfoot .bs-tot td.bs-in[b-ljqlscv8df]  { color: #166534; }

@media (max-width: 640px) {
    .bs-mstats[b-ljqlscv8df] { grid-template-columns: 1fr; }
}
/* /Components/Pages/Configuration.razor.rz.scp.css */
/* ===== Configuration — Control Panel =====================================
   Accent #008FD3 and the pill-nav language of the app's own top bar. */

/* ---- header ---- */
.cfg-head-right[b-240a6rapkc] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-left: auto;
}

.cfg-search[b-240a6rapkc] {
    position: relative;
    display: flex;
    align-items: center;
}

.cfg-search-ic[b-240a6rapkc] {
    position: absolute;
    left: 0.7rem;
    font-size: 0.8rem;
    opacity: 0.5;
    pointer-events: none;
}

.cfg-search input[b-240a6rapkc] {
    width: 300px;
    max-width: 42vw;
    font-size: 0.83rem;
    color: #111827;
    padding: 0.5rem 1.8rem 0.5rem 2rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 9px;
    outline: none;
    box-shadow: 0 1px 2px rgb(16 24 40 / 0.04);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cfg-search input[b-240a6rapkc]::-webkit-search-cancel-button { display: none; }

.cfg-search input:focus[b-240a6rapkc] {
    border-color: #008FD3;
    box-shadow: 0 0 0 3px rgb(0 143 211 / 0.13);
}

.cfg-search-x[b-240a6rapkc] {
    position: absolute;
    right: 0.5rem;
    border: 0;
    background: transparent;
    color: #9ca3af;
    font-size: 0.75rem;
    line-height: 1;
    padding: 0.2rem;
    cursor: pointer;
}

.cfg-search-x:hover[b-240a6rapkc] { color: #374151; }

/* ---- preview notice ---- */
.cfg-note[b-240a6rapkc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.7rem 0 1rem;
    font-size: 0.78rem;
    font-weight: 500;
    color: #92400e;
    background: linear-gradient(180deg, #fffdf5, #fffbeb);
    border: 1px solid #fde68a;
    border-radius: 9px;
    padding: 0.55rem 0.85rem;
}

.cfg-note-dot[b-240a6rapkc] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #f59e0b;
    flex-shrink: 0;
}

/* ---- shell ---- */
.cfg-shell[b-240a6rapkc] {
    display: grid;
    grid-template-columns: 244px minmax(0, 1fr);
    gap: 1.1rem;
    align-items: start;
    padding-bottom: 5.5rem;   /* keeps the last row clear of the action bar */
}

/* ---- module rail ---- */
.cfg-side[b-240a6rapkc] {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    background: #fff;
    border: 1px solid #e9edf2;
    border-radius: 12px;
    padding: 0.6rem;
    box-shadow: 0 1px 2px rgb(16 24 40 / 0.04), 0 1px 3px rgb(16 24 40 / 0.05);
}

.cfg-side-cap[b-240a6rapkc] {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #9ca3af;
    padding: 0.35rem 0.55rem 0.5rem;
}

.cfg-mod[b-240a6rapkc] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    text-align: left;
    font-size: 0.84rem;
    font-weight: 500;
    color: #4b5563;
    background: transparent;
    border: 0;
    border-radius: 8px;
    padding: 0.52rem 0.6rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.cfg-mod:hover[b-240a6rapkc] { background: #f3f4f6; color: #111827; }

.cfg-mod.on[b-240a6rapkc] {
    background: #e0f2fe;
    color: #007ab5;
    font-weight: 600;
}

/* a quiet accent bar marks the open module */
.cfg-mod.on[b-240a6rapkc]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 22%;
    bottom: 22%;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: #008FD3;
}

.cfg-mod.dim[b-240a6rapkc] { opacity: 0.45; }

.cfg-mod-ic[b-240a6rapkc] { font-size: 0.95rem; flex-shrink: 0; }

.cfg-mod-name[b-240a6rapkc] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cfg-mod-n[b-240a6rapkc] {
    flex-shrink: 0;
    font-size: 0.7rem;
    font-weight: 600;
    color: #6b7280;
    background: #f3f4f6;
    border-radius: 999px;
    padding: 0.08rem 0.45rem;
    font-variant-numeric: tabular-nums;
}

.cfg-mod-n.bad[b-240a6rapkc]  { background: #fee2e2; color: #b91c1c; }
.cfg-mod-n.warn[b-240a6rapkc] { background: #fef3c7; color: #92400e; }
.cfg-mod.on .cfg-mod-n[b-240a6rapkc] { background: #bae6fd; color: #026da3; }

/* ---- settings column ---- */
.cfg-main[b-240a6rapkc] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.cfg-group[b-240a6rapkc] {
    background: #fff;
    border: 1px solid #e9edf2;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgb(16 24 40 / 0.04), 0 1px 3px rgb(16 24 40 / 0.05);
}

.cfg-group-head[b-240a6rapkc] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1.1rem;
    background: linear-gradient(180deg, #fcfdfe, #f7f9fb);
    border-bottom: 1px solid #eef1f5;
}

.cfg-group-ic[b-240a6rapkc] {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.02rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 9px;
    box-shadow: 0 1px 2px rgb(16 24 40 / 0.05);
}

.cfg-group-head h2[b-240a6rapkc] {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #111827;
}

.cfg-group-head p[b-240a6rapkc] {
    margin: 0.12rem 0 0;
    font-size: 0.76rem;
    color: #6b7280;
}

.cfg-group-n[b-240a6rapkc] {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 0.72rem;
    font-weight: 600;
    color: #4b5563;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    padding: 0.15rem 0.55rem;
    font-variant-numeric: tabular-nums;
}

/* ---- sub-tabs: the app's own pill nav ---- */
.cfg-tabs[b-240a6rapkc] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin: 0.85rem 1.1rem 0;
    padding: 0.32rem;
    background: #f4f6f8;
    border: 1px solid #eaeef2;
    border-radius: 11px;
}

.cfg-tab[b-240a6rapkc] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.2;
    color: #4b5563;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 0.44rem 0.85rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.cfg-tab:hover[b-240a6rapkc] { background: #eaeef2; color: #111827; }

.cfg-tab.on[b-240a6rapkc] {
    color: #007ab5;
    font-weight: 600;
    background: #fff;
    border-color: #d4e9f5;
    box-shadow: 0 1px 2px rgb(16 24 40 / 0.06);
}

.cfg-tab-bad[b-240a6rapkc] {
    font-size: 0.66rem;
    font-weight: 700;
    color: #b91c1c;
    background: #fee2e2;
    border-radius: 999px;
    padding: 0.04rem 0.34rem;
}

/* ---- group caption inside a tab ---- */
.cfg-sec-cap[b-240a6rapkc] {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6b7280;
    background: #f7f9fb;
    border-top: 1px solid #eef1f5;
    border-bottom: 1px solid #eef1f5;
    padding: 0.5rem 1.1rem;
}

/* ---- one setting per row ---- */
.cfg-rows[b-240a6rapkc] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    padding: 0.25rem 0;
}

.cfg-row[b-240a6rapkc] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.72rem 1.1rem;
    border-top: 1px solid #f4f6f8;
    transition: background 0.15s ease;
}

.cfg-rows > .cfg-row:first-child[b-240a6rapkc] { border-top: 0; }

/* banded rows so the eye can follow a long list across to its control */
.cfg-rows > .cfg-row:nth-child(even)[b-240a6rapkc] { background: #fafbfd; }
.cfg-rows > .cfg-row.changed[b-240a6rapkc] { background: #fffdf5; }
.cfg-rows > .cfg-row.bad[b-240a6rapkc]     { background: #fef5f5; }
.cfg-rows > .cfg-row:hover[b-240a6rapkc]   { background: #eef4fa; }
.cfg-row.wide[b-240a6rapkc] { flex-wrap: wrap; align-items: flex-start; }

.cfg-no[b-240a6rapkc] {
    flex-shrink: 0;
    width: 1.7rem;
    text-align: right;
    font-size: 0.78rem;
    font-weight: 600;
    color: #b6bcc6;
    font-variant-numeric: tabular-nums;
}

.cfg-row-txt[b-240a6rapkc] { flex: 1; min-width: 0; }

.cfg-label[b-240a6rapkc] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    font-size: 0.855rem;
    font-weight: 600;
    color: #1f2937;
    line-height: 1.4;
}

.cfg-req[b-240a6rapkc] { color: #dc2626; font-weight: 700; }

.cfg-dot[b-240a6rapkc] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #f59e0b;
    flex-shrink: 0;
}

.cfg-desc[b-240a6rapkc] {
    margin-top: 0.16rem;
    font-size: 0.765rem;
    color: #6b7280;
    line-height: 1.45;
}

.cfg-err[b-240a6rapkc] {
    margin-top: 0.28rem;
    font-size: 0.745rem;
    font-weight: 600;
    color: #b91c1c;
}

.cfg-ctl[b-240a6rapkc] { flex-shrink: 0; display: flex; align-items: center; }
.cfg-row.wide .cfg-ctl[b-240a6rapkc] { flex: 0 0 100%; width: 100%; margin-top: 0.5rem; }

/* ---- controls ---- */
.cfg-check[b-240a6rapkc] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    cursor: pointer;
    user-select: none;
}

.cfg-check input[b-240a6rapkc] {
    width: 17px;
    height: 17px;
    accent-color: #008FD3;
    cursor: pointer;
    margin: 0;
}

.cfg-check input:disabled[b-240a6rapkc] { cursor: not-allowed; }

.cfg-check-tx[b-240a6rapkc] {
    font-size: 0.8rem;
    font-weight: 500;
    color: #4b5563;
}

.cfg-select[b-240a6rapkc],
.cfg-input[b-240a6rapkc],
.cfg-area[b-240a6rapkc] {
    font-size: 0.82rem;
    font-family: inherit;
    color: #111827;
    background: #fff;
    border: 1px solid #dfe3e8;
    border-radius: 8px;
    padding: 0.42rem 0.6rem;
    outline: none;
    box-shadow: 0 1px 2px rgb(16 24 40 / 0.04);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cfg-select[b-240a6rapkc] { min-width: 180px; max-width: 250px; }
.cfg-input.num[b-240a6rapkc] { width: 100px; text-align: right; font-variant-numeric: tabular-nums; }
.cfg-input.txt[b-240a6rapkc] { width: 240px; }
.cfg-area[b-240a6rapkc] { width: 100%; resize: vertical; line-height: 1.5; }

.cfg-select:hover[b-240a6rapkc],
.cfg-input:hover[b-240a6rapkc],
.cfg-area:hover[b-240a6rapkc] { border-color: #c9cfd6; }

.cfg-select:focus[b-240a6rapkc],
.cfg-input:focus[b-240a6rapkc],
.cfg-area:focus[b-240a6rapkc] {
    border-color: #008FD3;
    box-shadow: 0 0 0 3px rgb(0 143 211 / 0.13);
}

.cfg-select.bad[b-240a6rapkc],
.cfg-input.bad[b-240a6rapkc],
.cfg-area.bad[b-240a6rapkc] { border-color: #dc2626; }

.cfg-select.bad:focus[b-240a6rapkc],
.cfg-input.bad:focus[b-240a6rapkc],
.cfg-area.bad:focus[b-240a6rapkc] { box-shadow: 0 0 0 3px rgb(220 38 38 / 0.14); }

.cfg-select:disabled[b-240a6rapkc],
.cfg-input:disabled[b-240a6rapkc],
.cfg-area:disabled[b-240a6rapkc] {
    background: #f7f8fa;
    color: #9ca3af;
    cursor: not-allowed;
    box-shadow: none;
}

.cfg-pw[b-240a6rapkc] { display: inline-flex; align-items: center; gap: 0.35rem; }

.cfg-eye[b-240a6rapkc] {
    font-size: 0.85rem;
    line-height: 1;
    background: #fff;
    border: 1px solid #dfe3e8;
    border-radius: 8px;
    padding: 0.38rem 0.48rem;
    cursor: pointer;
    box-shadow: 0 1px 2px rgb(16 24 40 / 0.04);
}

.cfg-eye:hover[b-240a6rapkc] { background: #f3f4f6; }
.cfg-eye:disabled[b-240a6rapkc] { opacity: 0.4; cursor: not-allowed; }

/* ---- empty state ---- */
.cfg-empty[b-240a6rapkc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    text-align: center;
    background: #fff;
    border: 1px dashed #d8dde3;
    border-radius: 12px;
    padding: 2.75rem 1rem;
}

.cfg-empty-ic[b-240a6rapkc] { font-size: 1.7rem; opacity: 0.45; }
.cfg-empty-t[b-240a6rapkc] { font-size: 0.92rem; font-weight: 600; color: #374151; }
.cfg-empty-s[b-240a6rapkc] { font-size: 0.79rem; color: #6b7280; margin-bottom: 0.6rem; }

/* ---- live format preview (Common) ---- */
.cfg-preview[b-240a6rapkc] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 1.6rem;
    padding: 0.7rem 1.1rem;
    background: linear-gradient(180deg, #f7fcff, #f0f9ff);
    border-top: 1px solid #e3f2fb;
    border-bottom: 1px solid #e3f2fb;
}

.cfg-pv-cap[b-240a6rapkc] {
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #0284c7;
}

.cfg-pv[b-240a6rapkc] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.45rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #0c4a6e;
    font-variant-numeric: tabular-nums;
}

.cfg-pv b[b-240a6rapkc] {
    font-size: 0.66rem;
    font-weight: 600;
    color: #7c8794;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ---- action bar ---- */
.cfg-bar[b-240a6rapkc] {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: -3.6rem;
    background: #fff;
    backdrop-filter: blur(10px);
    border: 1px solid #e9edf2;
    border-radius: 12px;
    padding: 0.65rem 0.9rem;
    box-shadow: 0 -1px 3px rgb(16 24 40 / 0.05), 0 8px 24px rgb(16 24 40 / 0.07);
}

.cfg-bar-l[b-240a6rapkc] { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.cfg-bar-r[b-240a6rapkc] { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }

.cfg-bad-n[b-240a6rapkc],
.cfg-dirty[b-240a6rapkc],
.cfg-clean[b-240a6rapkc],
.cfg-ok[b-240a6rapkc] {
    font-size: 0.755rem;
    font-weight: 600;
    border-radius: 999px;
    padding: 0.24rem 0.6rem;
    white-space: nowrap;
}

.cfg-bad-n[b-240a6rapkc] { color: #b91c1c; background: #fee2e2; border: 1px solid #fecaca; }
.cfg-dirty[b-240a6rapkc] { color: #92400e; background: #fef3c7; border: 1px solid #fde68a; }
.cfg-clean[b-240a6rapkc] { color: #6b7280; background: #f3f4f6; border: 1px solid #e5e7eb; }
.cfg-ok[b-240a6rapkc]    { color: #166534; background: #dcfce7; border: 1px solid #bbf7d0; }

.cfg-btn[b-240a6rapkc] {
    font-size: 0.81rem;
    font-weight: 600;
    color: #374151;
    background: #fff;
    border: 1px solid #dfe3e8;
    border-radius: 8px;
    padding: 0.46rem 1rem;
    cursor: pointer;
    box-shadow: 0 1px 2px rgb(16 24 40 / 0.04);
    transition: background 0.15s ease, color 0.15s ease;
}

.cfg-btn:hover:not(:disabled)[b-240a6rapkc] { background: #f3f4f6; color: #111827; }
.cfg-btn:disabled[b-240a6rapkc] { opacity: 0.5; cursor: not-allowed; box-shadow: none; }

.cfg-btn.primary[b-240a6rapkc] {
    color: #fff;
    background: #008FD3;
    border-color: #008FD3;
    box-shadow: 0 1px 2px rgb(0 143 211 / 0.25);
}

.cfg-btn.primary:hover:not(:disabled)[b-240a6rapkc] { background: #007ab5; border-color: #007ab5; }

/* ---- catalog could not be read ---- */
.cfg-fail[b-240a6rapkc] {
    background: #fff;
    border: 1px solid #fecaca;
    border-left: 3px solid #dc2626;
    border-radius: 12px;
    padding: 0.9rem 1.1rem;
}

.cfg-fail-t[b-240a6rapkc] { font-size: 0.9rem; font-weight: 700; color: #b91c1c; }
.cfg-fail-s[b-240a6rapkc] { margin: 0.2rem 0 0.45rem; font-size: 0.79rem; color: #6b7280; }

.cfg-path[b-240a6rapkc] {
    display: inline-block;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.7rem;
    color: #6b7280;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 0.1rem 0.4rem;
}

/* ---- narrow screens ---- */
@media (max-width: 900px) {
    .cfg-shell[b-240a6rapkc] { grid-template-columns: minmax(0, 1fr); }

    .cfg-side[b-240a6rapkc] {
        position: static;
        flex-direction: row;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .cfg-side[b-240a6rapkc]::-webkit-scrollbar { display: none; }
    .cfg-side-cap[b-240a6rapkc] { display: none; }
    .cfg-mod[b-240a6rapkc] { width: auto; flex-shrink: 0; }
    .cfg-mod.on[b-240a6rapkc]::before { display: none; }
    .cfg-mod-name[b-240a6rapkc] { overflow: visible; }

    .cfg-head-right[b-240a6rapkc] { width: 100%; margin-left: 0; }
    .cfg-search[b-240a6rapkc] { flex: 1; }
    .cfg-search input[b-240a6rapkc] { width: 100%; max-width: none; }

    .cfg-row[b-240a6rapkc] { flex-wrap: wrap; }
    .cfg-ctl[b-240a6rapkc] { width: 100%; }
    .cfg-input.txt[b-240a6rapkc], .cfg-select[b-240a6rapkc] { width: 100%; max-width: none; }
}
/* /Components/Pages/HandwrittenPayments.razor.rz.scp.css */
.hp-page[b-2lf69d3b2r]{max-width:1600px;margin:auto;padding:32px 24px;color:#172b3a}.hp-heading[b-2lf69d3b2r]{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:28px}.hp-eyebrow[b-2lf69d3b2r]{font-size:11px;letter-spacing:1.6px;color:#087e8b;font-weight:750}.hp-heading h1[b-2lf69d3b2r]{font-size:30px;font-weight:750;margin:8px 0}.hp-heading p[b-2lf69d3b2r],.hp-section p[b-2lf69d3b2r],.hp-export p[b-2lf69d3b2r]{color:#677987;font-size:13px;margin:5px 0}.hp-badge[b-2lf69d3b2r]{background:#e9f6f5;color:#18746e;padding:10px 16px;border-radius:30px;font-size:12px;white-space:nowrap}.hp-grid[b-2lf69d3b2r]{display:grid;grid-template-columns:330px minmax(0,1fr);gap:22px;align-items:start}.hp-card[b-2lf69d3b2r]{background:white;border:1px solid #e0e7ec;border-radius:16px;box-shadow:0 4px 24px #17384b06;overflow:hidden}.hp-source[b-2lf69d3b2r]{padding:22px}.hp-results[b-2lf69d3b2r]{padding:24px}.hp-section[b-2lf69d3b2r]{display:flex;gap:12px;align-items:flex-start;margin-bottom:24px}.hp-step[b-2lf69d3b2r]{display:inline-flex;width:26px;height:26px;align-items:center;justify-content:center;border-radius:8px;background:#eaf4f5;color:#127d83;font-size:12px;font-weight:700;flex-shrink:0}h2[b-2lf69d3b2r]{font-size:16px;font-weight:700;margin:2px 0}.hp-upload[b-2lf69d3b2r]{display:flex;flex-direction:column;align-items:center;gap:8px;padding:24px 12px;border:1.5px dashed #96bfc6;border-radius:12px;background:#f5fbfb;text-align:center;font-size:12px;color:#607b86;cursor:pointer}.hp-upload strong[b-2lf69d3b2r]{color:#255a69;font-size:13px}.hp-upload-icon[b-2lf69d3b2r]{font-size:30px;color:#16818a}.hp-upload[b-2lf69d3b2r]  input{width:100%;font-size:11px;margin-top:8px}.hp-image[b-2lf69d3b2r]{margin-top:18px;background:#f1f4f7;border-radius:10px;overflow:auto;max-height:480px}.hp-image img[b-2lf69d3b2r]{width:100%;height:auto}.hp-filename[b-2lf69d3b2r]{font-size:12px;color:#617684;overflow-wrap:anywhere;margin:10px 0 20px}.hp-photo-tip[b-2lf69d3b2r]{padding:28px 8px;color:#627481;font-size:12px;line-height:1.7}.hp-photo-tip strong[b-2lf69d3b2r]{color:#405966}.hp-button[b-2lf69d3b2r]{background:white;border:1px solid #d5e1e7;border-radius:8px;padding:10px 14px;font-size:12px;font-weight:650;color:#335463;cursor:pointer;white-space:nowrap}.hp-button:hover[b-2lf69d3b2r]{background:#edf6f6}.hp-primary[b-2lf69d3b2r]{background:#107d85;color:white;border-color:#107d85}.hp-primary:hover[b-2lf69d3b2r]{background:#08656d}.hp-button:disabled[b-2lf69d3b2r]{opacity:.45;cursor:not-allowed}.hp-wide[b-2lf69d3b2r]{width:100%;margin-top:8px}.hp-note[b-2lf69d3b2r]{font-size:11px;line-height:1.7;color:#81909a;margin:16px 0 0}.hp-toolbar[b-2lf69d3b2r]{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;font-size:13px}.hp-muted[b-2lf69d3b2r]{color:#8a99a2}.hp-table-wrap[b-2lf69d3b2r]{overflow:auto;border:1px solid #e2e9ed;border-radius:10px}.hp-table[b-2lf69d3b2r]{width:100%;border-collapse:collapse;min-width:640px;font-size:12px}.hp-table th[b-2lf69d3b2r]{background:#f5f8fa;color:#69808c;font-weight:650;font-size:11px;padding:14px 10px;white-space:nowrap}.hp-table td[b-2lf69d3b2r]{padding:10px 6px;border-top:1px solid #edf0f3}.hp-table td:first-child[b-2lf69d3b2r],.hp-table th:first-child[b-2lf69d3b2r]{width:34px;padding-left:14px}.hp-table input:not([type=checkbox])[b-2lf69d3b2r]{width:100%;min-width:85px;border:1px solid transparent;border-radius:5px;padding:8px 4px;background:transparent;color:#233e4c}.hp-table td:nth-child(2)[b-2lf69d3b2r]{width:29%}.hp-table td:nth-child(5)[b-2lf69d3b2r]{width:19%}.hp-table input:hover[b-2lf69d3b2r]{border-color:#d5e1e7}.hp-table input:focus[b-2lf69d3b2r]{outline:2px solid #1b939c;background:white}.hp-table input[b-2lf69d3b2r]::placeholder{color:#a0adb5}.hp-table input[type=checkbox][b-2lf69d3b2r]{accent-color:#107d85;width:15px;height:15px}.hp-amount[b-2lf69d3b2r]{text-align:right}.hp-delete[b-2lf69d3b2r]{border:0;background:transparent;color:#9a6670;font-size:22px}.hp-unselected[b-2lf69d3b2r]{opacity:.55}.hp-empty[b-2lf69d3b2r]{padding:70px 20px;text-align:center;color:#82939f}.hp-empty>span[b-2lf69d3b2r]{font-size:40px;color:#acc5cb}.hp-empty h3[b-2lf69d3b2r]{font-size:15px;margin:18px 0 8px;color:#536d7b}.hp-empty p[b-2lf69d3b2r]{font-size:12px}.hp-summary[b-2lf69d3b2r]{display:flex;justify-content:space-between;align-items:center;padding:20px 8px;font-size:13px}.hp-summary strong[b-2lf69d3b2r]{font-size:24px;font-variant-numeric:tabular-nums}.hp-export[b-2lf69d3b2r]{border-top:1px solid #e5ecef;padding-top:22px;display:flex;gap:18px;align-items:center;justify-content:space-between}.hp-export h2[b-2lf69d3b2r]{display:flex;align-items:center;gap:9px}.hp-export p[b-2lf69d3b2r]{font-size:11px;max-width:360px;line-height:1.6}.hp-message[b-2lf69d3b2r]{background:#f0f7fb;color:#315b71;border:1px solid #d6e8f2;border-radius:8px;padding:12px;font-size:12px;line-height:1.6;margin-bottom:16px}@media(max-width:1100px){.hp-grid[b-2lf69d3b2r]{grid-template-columns:280px minmax(0,1fr)}.hp-export[b-2lf69d3b2r]{align-items:flex-start;flex-direction:column}}@media(max-width:800px){.hp-page[b-2lf69d3b2r]{padding:20px 12px}.hp-grid[b-2lf69d3b2r]{grid-template-columns:1fr}.hp-heading[b-2lf69d3b2r]{align-items:flex-start;flex-direction:column}.hp-heading h1[b-2lf69d3b2r]{font-size:25px}.hp-results[b-2lf69d3b2r]{padding:16px}.hp-image[b-2lf69d3b2r]{max-height:320px}.hp-image img[b-2lf69d3b2r]{object-fit:contain;max-height:320px}}
.hp-grid[b-2lf69d3b2r]{grid-template-columns:minmax(360px,40%) minmax(0,1fr)}.hp-source[b-2lf69d3b2r]{position:sticky;top:18px}.hp-editor[b-2lf69d3b2r]{height:440px;margin-top:18px;background:#edf2f5;overflow:hidden;border-radius:10px}.hp-editor>img[b-2lf69d3b2r]{display:block;max-width:100%}.hp-image-tools[b-2lf69d3b2r]{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}.hp-image-tools .hp-button[b-2lf69d3b2r]{padding:9px 11px}.hp-preview-heading[b-2lf69d3b2r]{display:flex;justify-content:space-between;gap:12px;margin-top:22px;font-size:12px;color:#53717e}.hp-review-image[b-2lf69d3b2r]{max-height:65vh;min-height:180px}.hp-review-image img[b-2lf69d3b2r]{display:block;height:auto}.hp-editor[b-2lf69d3b2r]  .cropper-container{font-size:12px}.hp-editor[b-2lf69d3b2r]  .cropper-point{width:10px;height:10px;opacity:1}.hp-editor[b-2lf69d3b2r]  .cropper-line{background:#107d85}.hp-editor[b-2lf69d3b2r]  .cropper-view-box{outline-color:#107d85}@media(max-width:1000px){.hp-grid[b-2lf69d3b2r]{grid-template-columns:1fr}.hp-source[b-2lf69d3b2r]{position:static}.hp-editor[b-2lf69d3b2r]{height:420px}.hp-review-image[b-2lf69d3b2r]{max-height:480px}.hp-review-image img[b-2lf69d3b2r]{max-height:none;object-fit:initial}}@media(max-width:600px){.hp-editor[b-2lf69d3b2r]{height:350px}}
.hp-scan-status[b-2lf69d3b2r]{padding:12px;border-radius:8px;background:#eaf6f4;color:#22665c;font-size:12px;line-height:1.6;margin-top:12px}.hp-enhance[b-2lf69d3b2r]{display:grid;gap:9px;margin-top:16px;font-size:12px;color:#355967}.hp-enhance label:first-child[b-2lf69d3b2r]{display:flex;align-items:center;gap:9px}.hp-enhance input[b-2lf69d3b2r]{accent-color:#107d85}.hp-enhance input[type=range][b-2lf69d3b2r]{width:100%;min-height:36px}.hp-camera[b-2lf69d3b2r]{display:flex;flex-wrap:wrap;gap:8px;padding:12px 0;font-size:12px;font-weight:650;color:#255a69}.hp-camera[b-2lf69d3b2r]  input{max-width:100%;font-size:12px}.hp-source[b-2lf69d3b2r]{top:64px}.hp-editor[b-2lf69d3b2r]{height:clamp(350px,55vh,600px)}.hp-editor[b-2lf69d3b2r]  .cropper-point{width:18px;height:18px;border-radius:50%;background:#107d85;opacity:.9}.hp-editor[b-2lf69d3b2r]  .cropper-face{touch-action:none}@media(max-width:600px){.hp-image-tools .hp-button[b-2lf69d3b2r]{min-height:44px;padding:10px 12px}.hp-editor[b-2lf69d3b2r]{height:60vh;min-height:320px;max-height:600px}.hp-source[b-2lf69d3b2r]{padding:14px}.hp-editor[b-2lf69d3b2r]  .cropper-point{width:24px;height:24px}.hp-enhance input[type=checkbox][b-2lf69d3b2r]{width:20px;height:20px}}
.hp-editor-stage[b-2lf69d3b2r]{position:relative}.hp-editor-preparing[b-2lf69d3b2r]{visibility:hidden;pointer-events:none}.hp-preparing[b-2lf69d3b2r]{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:26px;text-align:center;background:#f3f8f9;border:1px solid #dfebee;border-radius:10px}.hp-preparing h3[b-2lf69d3b2r]{font-size:18px;font-weight:700;margin:0;color:#255a69}.hp-preparing p[b-2lf69d3b2r]{font-size:13px;line-height:1.7;margin:0;color:#536f7d;max-width:300px}.hp-preparing>span:not(.hp-spinner)[b-2lf69d3b2r]{font-size:12px;color:#788e99}.hp-preparing .hp-button[b-2lf69d3b2r]{margin-top:8px;min-height:44px}.hp-spinner[b-2lf69d3b2r]{width:36px;height:36px;border:3px solid #d3e8e9;border-top-color:#107d85;border-radius:50%;animation:hp-spin-b-2lf69d3b2r .9s linear infinite}@keyframes hp-spin-b-2lf69d3b2r{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.hp-spinner[b-2lf69d3b2r]{animation:none}}
/* /Components/Pages/Manufacturing.razor.rz.scp.css */
/* Manufacturing — follows the invex-ui kit in app.css:
   accent #008FD3, white panels on #f1f5f9, gray-200 lines, compact type. */

.mf-page[b-javoaufjwd] { width: 100%; }

.mf-hero-ic[b-javoaufjwd] {
    width: 44px; height: 44px; border-radius: 12px;
    background: linear-gradient(135deg, #0ea5e9, #0369a1);
    display: grid; place-items: center; font-size: 22px;
    box-shadow: 0 4px 14px rgba(3, 105, 161, .25);
}

.mf-head-end[b-javoaufjwd] { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; justify-content: flex-end; }

.mf-demo-chip[b-javoaufjwd] {
    font-size: .72rem; font-weight: 600; white-space: nowrap;
    color: #92400e; background: #fffbeb; border: 1px solid #fde68a;
    border-radius: 9999px; padding: .3rem .7rem;
}

.mf-link[b-javoaufjwd] {
    background: none; border: none; padding: 0; cursor: pointer;
    color: var(--ii-accent, #008FD3); font-weight: 600; font-size: inherit;
}
.mf-link:hover[b-javoaufjwd] { text-decoration: underline; }

/* ---- how it works ---- */
.mf-guide[b-javoaufjwd] {
    background: #f0f9ff; border: 1px solid #bae6fd; border-radius: 12px;
    padding: .8rem 1rem; margin-bottom: 1.1rem;
}
.mf-guide-head[b-javoaufjwd] { display: flex; justify-content: space-between; align-items: center; font-size: .85rem; color: #075985; }
.mf-guide-tip[b-javoaufjwd] { margin-top: .6rem; font-size: .78rem; color: #0c4a6e; }

/* ---- first run / pick ---- */
.mf-empty[b-javoaufjwd], .mf-pick[b-javoaufjwd] {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: .5rem; padding: 2.5rem 1.5rem;
}
.mf-empty-ic[b-javoaufjwd] { font-size: 2.2rem; }
.mf-empty-title[b-javoaufjwd] { font-size: 1.05rem; font-weight: 700; color: var(--ii-ink, #111827); }
.mf-empty .ii-muted[b-javoaufjwd] { max-width: 460px; }
.mf-empty-actions[b-javoaufjwd] { display: flex; gap: .6rem; margin-top: .6rem; flex-wrap: wrap; justify-content: center; }

/* ---- summary tiles ---- */
.mf-stats[b-javoaufjwd] { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .75rem; margin-bottom: 1.1rem; }
.mf-stat[b-javoaufjwd] {
    background: #fff; border: 1px solid var(--ii-line, #e5e7eb); border-radius: 10px;
    padding: .85rem 1rem; display: flex; align-items: center; gap: .8rem;
    text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s;
}
.mf-stat:hover[b-javoaufjwd] { border-color: #bae6fd; box-shadow: 0 4px 12px rgba(2, 132, 199, .1); }
.mf-stat-ic[b-javoaufjwd] { width: 40px; height: 40px; border-radius: 9px; display: grid; place-items: center; font-size: 18px; flex: none; }
.mf-bg-blue[b-javoaufjwd] { background: #e0f2fe; }
.mf-bg-amber[b-javoaufjwd] { background: #fef3c7; }
.mf-bg-green[b-javoaufjwd] { background: #dcfce7; }
.mf-bg-red[b-javoaufjwd] { background: #fee2e2; }

/* ---- tabs ---- */
.mf-tabs[b-javoaufjwd] { display: flex; gap: .25rem; border-bottom: 1px solid var(--ii-line, #e5e7eb); margin-bottom: 1rem; overflow-x: auto; }
.mf-tab[b-javoaufjwd] {
    background: none; border: none; border-bottom: 2px solid transparent;
    padding: .6rem .95rem; font-size: .85rem; font-weight: 600; color: var(--ii-muted, #6b7280);
    cursor: pointer; white-space: nowrap; margin-bottom: -1px;
}
.mf-tab:hover[b-javoaufjwd] { color: var(--ii-ink, #111827); }
.mf-tab.active[b-javoaufjwd] { color: var(--ii-accent, #008FD3); border-bottom-color: var(--ii-accent, #008FD3); }

/* ---- message ---- */
.mf-msg[b-javoaufjwd] {
    display: flex; align-items: center; gap: .6rem; padding: .65rem .9rem;
    border-radius: 10px; font-size: .83rem; font-weight: 500; margin-bottom: 1rem;
}
.mf-msg.ok[b-javoaufjwd] { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.mf-msg.err[b-javoaufjwd] { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.mf-msg-text[b-javoaufjwd] { flex: 1; }

/* ---- layout ---- */
.mf-split[b-javoaufjwd] { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1rem; align-items: start; }
.mf-col[b-javoaufjwd] { display: flex; flex-direction: column; gap: .8rem; min-width: 0; }
.mf-grow[b-javoaufjwd] { flex: 1; }

.mf-panel-title[b-javoaufjwd] { font-size: .92rem; font-weight: 700; color: var(--ii-ink, #111827); }
.mf-help[b-javoaufjwd] { font-size: .78rem; color: var(--ii-muted, #6b7280); line-height: 1.45; margin: .2rem 0 .8rem; }
.mf-help-bar[b-javoaufjwd] { background: #fff; border: 1px solid var(--ii-line, #e5e7eb); border-radius: 10px; padding: .6rem .85rem; }
.mf-sub-title[b-javoaufjwd] { font-size: .8rem; font-weight: 700; color: var(--ii-ink, #111827); margin: 1rem 0 .45rem; }
.mf-none[b-javoaufjwd] {
    font-size: .82rem; color: var(--ii-muted, #6b7280); text-align: center;
    padding: 1.2rem; border: 1px dashed var(--ii-line, #e5e7eb); border-radius: 10px; background: #fff;
}

/* ---- form ---- */
.mf-form-row[b-javoaufjwd] { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: .6rem; }
.mf-form-row:last-child[b-javoaufjwd] { margin-bottom: 0; }
.mf-field[b-javoaufjwd] { display: flex; flex-direction: column; gap: .25rem; font-size: .75rem; font-weight: 600; color: #374151; margin-bottom: .6rem; }
.mf-form-row .mf-field[b-javoaufjwd] { margin-bottom: 0; }
.mf-field input[b-javoaufjwd], .mf-field select[b-javoaufjwd], .mf-rline input[b-javoaufjwd], .mf-rline select[b-javoaufjwd] {
    font-size: .83rem; padding: .45rem .6rem; border: 1px solid #d1d5db; border-radius: 8px;
    background: #fff; color: var(--ii-ink, #111827); width: 100%;
}
.mf-field input:focus[b-javoaufjwd], .mf-field select:focus[b-javoaufjwd], .mf-rline input:focus[b-javoaufjwd], .mf-rline select:focus[b-javoaufjwd] {
    outline: none; border-color: var(--ii-accent, #008FD3); box-shadow: 0 0 0 3px rgba(0, 143, 211, .12);
}
.mf-w-sm[b-javoaufjwd] { width: 100px; }
.mf-w-md[b-javoaufjwd] { width: 150px; }

.mf-type-pick[b-javoaufjwd] { display: flex; gap: .35rem; margin-bottom: .8rem; flex-wrap: wrap; }
.mf-type-opt[b-javoaufjwd] {
    flex: 1; font-size: .78rem; font-weight: 600; padding: .45rem .6rem; border-radius: 8px;
    border: 1px solid var(--ii-line, #e5e7eb); background: #fff; color: #374151; cursor: pointer;
}
.mf-type-opt.active[b-javoaufjwd] { border-color: var(--ii-accent, #008FD3); background: #f0f9ff; color: #0369a1; }

/* ---- filters ---- */
.mf-list-head[b-javoaufjwd] { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; margin-top: .4rem; }
.mf-filters[b-javoaufjwd] { display: flex; gap: .3rem; flex-wrap: wrap; }
.mf-filter[b-javoaufjwd] {
    font-size: .72rem; font-weight: 600; padding: .25rem .65rem; border-radius: 9999px;
    border: 1px solid var(--ii-line, #e5e7eb); background: #fff; color: #4b5563; cursor: pointer;
}
.mf-filter.active[b-javoaufjwd] { background: var(--ii-accent, #008FD3); border-color: var(--ii-accent, #008FD3); color: #fff; }

/* ---- order list ---- */
.mf-order-list[b-javoaufjwd] { display: flex; flex-direction: column; gap: .45rem; }
.mf-order[b-javoaufjwd] {
    text-align: left; background: #fff; border: 1px solid var(--ii-line, #e5e7eb); border-radius: 10px;
    padding: .65rem .8rem; cursor: pointer; transition: border-color .15s, box-shadow .15s;
}
.mf-order:hover[b-javoaufjwd] { border-color: #bae6fd; }
.mf-order.selected[b-javoaufjwd] { border-color: var(--ii-accent, #008FD3); box-shadow: 0 0 0 3px rgba(0, 143, 211, .1); }
.mf-order-top[b-javoaufjwd] { display: flex; justify-content: space-between; align-items: center; font-size: .82rem; }
.mf-order-name[b-javoaufjwd] { font-size: .85rem; color: var(--ii-ink, #111827); margin-top: .15rem; }
.mf-order-meta[b-javoaufjwd] { display: flex; gap: .7rem; flex-wrap: wrap; font-size: .72rem; color: var(--ii-muted, #6b7280); margin-top: .3rem; }
.mf-short-tag[b-javoaufjwd] { color: #b91c1c; font-weight: 600; }

/* ---- status + type badges ---- */
.mf-status[b-javoaufjwd] { font-size: .7rem; font-weight: 700; padding: .18rem .55rem; border-radius: 9999px; white-space: nowrap; }
.mf-st-planned[b-javoaufjwd] { background: #e0f2fe; color: #075985; }
.mf-st-inprogress[b-javoaufjwd] { background: #fef3c7; color: #92400e; }
.mf-st-completed[b-javoaufjwd] { background: #dcfce7; color: #166534; }
.mf-st-cancelled[b-javoaufjwd] { background: #f3f4f6; color: #6b7280; }

.mf-type[b-javoaufjwd] { display: inline-block; font-size: .66rem; font-weight: 700; padding: .1rem .45rem; border-radius: 6px; }
.mf-type-rm[b-javoaufjwd] { background: #f5f5f4; color: #57534e; }
.mf-type-sfg[b-javoaufjwd] { background: #ede9fe; color: #5b21b6; }
.mf-type-fg[b-javoaufjwd] { background: #dcfce7; color: #166534; }
.mf-type-dot[b-javoaufjwd] { width: 9px; height: 9px; border-radius: 50%; display: inline-block; padding: 0; }
.mf-type-dot.mf-type-rm[b-javoaufjwd] { background: #a8a29e; }
.mf-type-dot.mf-type-sfg[b-javoaufjwd] { background: #8b5cf6; }
.mf-type-dot.mf-type-fg[b-javoaufjwd] { background: #22c55e; }

/* ---- order detail ---- */
.mf-od-head[b-javoaufjwd] { display: flex; justify-content: space-between; align-items: flex-start; gap: .8rem; }
.mf-od-no[b-javoaufjwd] { font-size: .75rem; font-weight: 700; color: var(--ii-accent, #008FD3); }
.mf-od-title[b-javoaufjwd] { font-size: 1.1rem; font-weight: 700; color: var(--ii-ink, #111827); }
.mf-od-sub[b-javoaufjwd] { font-size: .78rem; color: var(--ii-muted, #6b7280); margin-top: .1rem; }

.mf-track[b-javoaufjwd] { display: flex; align-items: center; gap: .4rem; margin: 1rem 0; }
.mf-tstep[b-javoaufjwd] { display: flex; align-items: center; gap: .4rem; font-size: .78rem; font-weight: 600; color: #9ca3af; white-space: nowrap; }
.mf-tstep span[b-javoaufjwd] {
    width: 22px; height: 22px; border-radius: 50%; background: #e5e7eb; color: #6b7280;
    display: grid; place-items: center; font-size: .7rem;
}
.mf-tstep.active[b-javoaufjwd] { color: var(--ii-ink, #111827); }
.mf-tstep.active span[b-javoaufjwd] { background: var(--ii-accent, #008FD3); color: #fff; }
.mf-tstep.done[b-javoaufjwd] { color: #166534; }
.mf-tstep.done span[b-javoaufjwd] { background: #22c55e; color: #fff; }
.mf-tline[b-javoaufjwd] { flex: 1; height: 2px; background: #e5e7eb; border-radius: 2px; }
.mf-tline.done[b-javoaufjwd] { background: #22c55e; }

.mf-next[b-javoaufjwd] {
    display: flex; flex-direction: column; gap: .15rem; font-size: .8rem;
    padding: .65rem .85rem; border-radius: 10px; background: #f9fafb; border: 1px solid var(--ii-line, #e5e7eb); color: #374151;
}
.mf-next b[b-javoaufjwd] { font-size: .84rem; }
.mf-next.go[b-javoaufjwd] { background: #f0f9ff; border-color: #bae6fd; color: #075985; }
.mf-next.warn[b-javoaufjwd] { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.mf-next.done[b-javoaufjwd] { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }

.mf-table .num[b-javoaufjwd] { text-align: right; }
.mf-part[b-javoaufjwd] { font-weight: 600; color: var(--ii-ink, #111827); }
.mf-code[b-javoaufjwd] { font-size: .68rem; color: #9ca3af; }
.mf-row-short td[b-javoaufjwd] { background: #fef2f2; }
.mf-row-sel td[b-javoaufjwd] { background: #f0f9ff; }
.mf-ok[b-javoaufjwd] { color: #15803d; font-weight: 600; }
.mf-bad[b-javoaufjwd] { color: #b91c1c; font-weight: 600; }
.mf-coming[b-javoaufjwd] { color: #92400e; font-weight: 600; }
.mf-pos[b-javoaufjwd] { color: #15803d; font-weight: 600; }
.mf-neg[b-javoaufjwd] { color: #b91c1c; font-weight: 600; }

.mf-actions[b-javoaufjwd] { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; }
.mf-btn-danger[b-javoaufjwd] { color: #b91c1c; }
.mf-btn-danger:hover[b-javoaufjwd] { color: #991b1b; border-color: #fecaca; background: #fef2f2; }

.mf-result-form[b-javoaufjwd] { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.mf-result-form .mf-field[b-javoaufjwd] { margin-bottom: 0; }
.mf-sum[b-javoaufjwd] { font-size: .78rem; font-weight: 600; margin: .5rem 0 .8rem; }
.mf-sum.ok[b-javoaufjwd] { color: #15803d; }
.mf-sum.bad[b-javoaufjwd] { color: #b45309; }

.mf-result-tiles[b-javoaufjwd] { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin: .9rem 0 .6rem; }
.mf-rt[b-javoaufjwd] { border-radius: 10px; padding: .7rem; text-align: center; border: 1px solid; }
.mf-rt b[b-javoaufjwd] { display: block; font-size: 1.3rem; }
.mf-rt span[b-javoaufjwd] { font-size: .72rem; font-weight: 600; }
.mf-rt.good[b-javoaufjwd] { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.mf-rt.rej[b-javoaufjwd] { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.mf-rt.scr[b-javoaufjwd] { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.mf-kv[b-javoaufjwd] { display: flex; gap: .6rem; font-size: .8rem; margin-bottom: .3rem; }
.mf-kv span[b-javoaufjwd] { color: var(--ii-muted, #6b7280); min-width: 60px; }

.mf-subs[b-javoaufjwd] { display: flex; flex-direction: column; gap: .35rem; }
.mf-subo[b-javoaufjwd] {
    display: flex; align-items: center; gap: .7rem; text-align: left; font-size: .8rem;
    background: #fafafa; border: 1px solid var(--ii-line, #e5e7eb); border-radius: 8px; padding: .5rem .7rem; cursor: pointer;
}
.mf-subo:hover[b-javoaufjwd] { border-color: #bae6fd; background: #fff; }
.mf-subo span:nth-child(2)[b-javoaufjwd] { flex: 1; color: #374151; }

/* ---- items ---- */
.mf-row-actions[b-javoaufjwd] { text-align: right; }
.mf-mini[b-javoaufjwd] {
    font-size: .72rem; font-weight: 600; padding: .2rem .55rem; border-radius: 6px; margin-left: .25rem;
    border: 1px solid var(--ii-line, #e5e7eb); background: #fff; color: #374151; cursor: pointer;
}
.mf-mini:hover[b-javoaufjwd] { border-color: #bae6fd; color: var(--ii-accent, #008FD3); }
.mf-mini.danger:hover[b-javoaufjwd] { border-color: #fecaca; color: #b91c1c; }

.mf-recipe[b-javoaufjwd] { display: flex; flex-direction: column; gap: .45rem; }
.mf-rline[b-javoaufjwd] { display: grid; grid-template-columns: minmax(0, 1fr) 90px 36px 24px; gap: .45rem; align-items: center; }
.mf-unit[b-javoaufjwd] { font-size: .75rem; color: var(--ii-muted, #6b7280); }
.mf-add-line[b-javoaufjwd] { align-self: flex-start; font-size: .8rem; margin-top: .2rem; }

.mf-tree[b-javoaufjwd] { display: flex; flex-direction: column; gap: .3rem; font-size: .82rem; }
.mf-tnode[b-javoaufjwd] { display: flex; align-items: center; gap: .45rem; color: var(--ii-ink, #111827); }
.mf-tbranch[b-javoaufjwd] { color: #cbd5e1; }
.mf-tqty[b-javoaufjwd] { color: var(--ii-muted, #6b7280); font-size: .76rem; }

/* ---- stock ---- */
.mf-stock-grid[b-javoaufjwd] { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .6rem; margin-bottom: .4rem; }
.mf-stock-card[b-javoaufjwd] {
    background: #fff; border: 1px solid var(--ii-line, #e5e7eb); border-radius: 10px;
    padding: .7rem .85rem; display: flex; flex-direction: column; gap: .25rem; align-items: flex-start;
}
.mf-sc-name[b-javoaufjwd] { font-size: .83rem; font-weight: 600; color: var(--ii-ink, #111827); }
.mf-sc-qty[b-javoaufjwd] { font-size: 1.25rem; font-weight: 700; color: var(--ii-ink, #111827); }
.mf-sc-qty small[b-javoaufjwd] { font-size: .72rem; color: var(--ii-muted, #6b7280); font-weight: 600; }
.mf-sc-qty.zero[b-javoaufjwd] { color: #b91c1c; }

.mf-stock-grid + .mf-list-head[b-javoaufjwd] { margin-top: 1rem; }

/* ---- small screens ---- */
@media (max-width: 1000px) {
    .mf-split[b-javoaufjwd] { grid-template-columns: 1fr; }
    .mf-stats[b-javoaufjwd] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .mf-result-form[b-javoaufjwd], .mf-result-tiles[b-javoaufjwd] { grid-template-columns: 1fr; }
    .mf-w-sm[b-javoaufjwd], .mf-w-md[b-javoaufjwd] { width: 100%; }
}

/* ════════ start-to-end flow ════════ */
.mf-bg-violet[b-javoaufjwd] { background: #ede9fe; }

/* how it works: two rows — masters, then the order flow */
.mf-guide-row[b-javoaufjwd] { display: flex; align-items: flex-start; gap: .8rem; margin-top: .7rem; }
.mf-guide-lbl[b-javoaufjwd] { flex: none; width: 88px; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #0369a1; padding-top: .55rem; }
.mf-flow[b-javoaufjwd] { display: flex; flex-wrap: wrap; align-items: stretch; gap: .35rem; flex: 1; }
.mf-flow-step[b-javoaufjwd] {
    display: flex; flex-direction: column; gap: .1rem; background: #fff; border: 1px solid #e0f2fe;
    border-radius: 9px; padding: .45rem .6rem; font-size: .76rem; min-width: 110px; flex: 1;
}
.mf-flow-step i[b-javoaufjwd] { font-style: normal; font-size: .66rem; font-weight: 700; color: var(--ii-accent, #008FD3); }
.mf-flow-step b[b-javoaufjwd] { color: var(--ii-ink, #111827); font-size: .8rem; }
.mf-flow-step small[b-javoaufjwd] { color: var(--ii-muted, #6b7280); font-size: .7rem; line-height: 1.3; }
.mf-flow-step.master[b-javoaufjwd] { background: #fefce8; border-color: #fde68a; flex: 0 1 220px; }
.mf-flow-arrow[b-javoaufjwd] { align-self: center; color: #7dd3fc; font-weight: 700; }

/* step numbers and headings inside an order */
.mf-step-no[b-javoaufjwd] {
    display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
    background: var(--ii-accent, #008FD3); color: #fff; font-size: .7rem; font-weight: 700; margin-right: .3rem; vertical-align: 1px;
}
.mf-steps[b-javoaufjwd] { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .3rem; margin: 1rem 0; }
.mf-sstep[b-javoaufjwd] { display: flex; flex-direction: column; align-items: center; gap: .3rem; text-align: center; position: relative; }
.mf-sstep span[b-javoaufjwd] {
    width: 26px; height: 26px; border-radius: 50%; background: #e5e7eb; color: #6b7280;
    display: grid; place-items: center; font-size: .74rem; font-weight: 700; z-index: 1;
}
.mf-sstep small[b-javoaufjwd] { font-size: .68rem; font-weight: 600; color: #9ca3af; line-height: 1.2; }
.mf-sstep[b-javoaufjwd]::before { content: ""; position: absolute; top: 12px; left: -50%; width: 100%; height: 2px; background: #e5e7eb; }
.mf-sstep:first-child[b-javoaufjwd]::before { display: none; }
.mf-sstep.done span[b-javoaufjwd] { background: #22c55e; color: #fff; }
.mf-sstep.done small[b-javoaufjwd] { color: #166534; }
.mf-sstep.done[b-javoaufjwd]::before, .mf-sstep.active[b-javoaufjwd]::before { background: #22c55e; }
.mf-sstep.active span[b-javoaufjwd] { background: var(--ii-accent, #008FD3); color: #fff; box-shadow: 0 0 0 4px rgba(0, 143, 211, .15); }
.mf-sstep.active small[b-javoaufjwd] { color: var(--ii-ink, #111827); }

.mf-stephead[b-javoaufjwd] { border-top: 1px solid var(--ii-line, #e5e7eb); padding-top: .9rem; margin-bottom: .7rem; }
.mf-stephead-title[b-javoaufjwd] { font-size: .95rem; font-weight: 700; color: var(--ii-ink, #111827); }
.mf-stephead-what[b-javoaufjwd] { font-size: .78rem; color: var(--ii-muted, #6b7280); line-height: 1.45; margin-top: .25rem; }
.mf-next[b-javoaufjwd] { margin-bottom: .8rem; }

.mf-order-step[b-javoaufjwd] { color: var(--ii-accent, #008FD3); font-weight: 600; }
.mf-overdue[b-javoaufjwd] { color: #b91c1c; font-weight: 600; }
.mf-st-reserved[b-javoaufjwd] { background: #e0e7ff; color: #3730a3; }
.mf-st-inproduction[b-javoaufjwd] { background: #fef3c7; color: #92400e; }
.mf-st-qualitycheck[b-javoaufjwd] { background: #ede9fe; color: #5b21b6; }

.mf-inline-info[b-javoaufjwd], .mf-inline-warn[b-javoaufjwd] { font-size: .76rem; border-radius: 8px; padding: .5rem .65rem; margin-top: .2rem; line-height: 1.5; }
.mf-inline-info[b-javoaufjwd] { background: #f0f9ff; color: #075985; border: 1px solid #bae6fd; }
.mf-inline-warn[b-javoaufjwd] { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; margin-bottom: .7rem; }

/* material check tree */
.mf-tree-cell[b-javoaufjwd] { display: flex; align-items: center; gap: .4rem; }
.mf-row-sub td[b-javoaufjwd] { background: #fafafa; font-size: .76rem; }
.mf-legend[b-javoaufjwd] { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .7rem; color: var(--ii-muted, #6b7280); margin-top: .45rem; }
.mf-legend > span[b-javoaufjwd] { display: inline-flex; align-items: center; gap: .3rem; }
.mf-tiny[b-javoaufjwd] { font-size: .7rem; }

/* issue */
.mf-w-input[b-javoaufjwd] { width: 130px; }
.mf-num-input[b-javoaufjwd] { width: 110px; text-align: right; font-size: .82rem; padding: .35rem .5rem; border: 1px solid #d1d5db; border-radius: 7px; }
.mf-num-input:focus[b-javoaufjwd] { outline: none; border-color: var(--ii-accent, #008FD3); }

/* operations */
.mf-ops[b-javoaufjwd] { display: flex; flex-direction: column; gap: .4rem; margin-bottom: .6rem; }
.mf-op[b-javoaufjwd] { display: flex; gap: .65rem; align-items: flex-start; padding: .55rem .7rem; border: 1px solid var(--ii-line, #e5e7eb); border-radius: 9px; background: #fff; }
.mf-op.done[b-javoaufjwd] { background: #f0fdf4; border-color: #bbf7d0; }
.mf-op.current[b-javoaufjwd] { border-color: var(--ii-accent, #008FD3); box-shadow: 0 0 0 3px rgba(0, 143, 211, .1); }
.mf-op-no[b-javoaufjwd] { flex: none; width: 22px; height: 22px; border-radius: 50%; background: #e5e7eb; color: #4b5563; display: grid; place-items: center; font-size: .7rem; font-weight: 700; }
.mf-op.done .mf-op-no[b-javoaufjwd] { background: #22c55e; color: #fff; }
.mf-op.current .mf-op-no[b-javoaufjwd] { background: var(--ii-accent, #008FD3); color: #fff; }
.mf-op-body[b-javoaufjwd] { min-width: 0; }
.mf-op-name[b-javoaufjwd] { font-size: .84rem; font-weight: 600; color: var(--ii-ink, #111827); }
.mf-op-name small[b-javoaufjwd] { font-weight: 500; color: #9ca3af; margin-left: .3rem; }
.mf-op-res[b-javoaufjwd] { font-size: .76rem; color: #374151; margin-top: .1rem; }
.mf-opform[b-javoaufjwd] { border: 1px dashed #bae6fd; background: #f8fcff; border-radius: 10px; padding: .1rem .85rem .6rem; }
.mf-grid-3[b-javoaufjwd] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.mf-grid-3 .mf-field[b-javoaufjwd] { margin-bottom: 0; }
.mf-details[b-javoaufjwd] { margin-top: .9rem; font-size: .8rem; }
.mf-details summary[b-javoaufjwd] { cursor: pointer; color: var(--ii-accent, #008FD3); font-weight: 600; margin-bottom: .45rem; }

/* result tiles + cost */
.mf-rt.neutral[b-javoaufjwd] { background: #f8fafc; border-color: #e2e8f0; color: #334155; }
.mf-result-tiles.four[b-javoaufjwd] { grid-template-columns: repeat(4, 1fr); }
.mf-cost td:first-child[b-javoaufjwd] { white-space: normal; }
.mf-cost-total td[b-javoaufjwd] { font-weight: 700; background: #f8fafc; }
.mf-variance[b-javoaufjwd] { font-size: .8rem; border-radius: 9px; padding: .55rem .75rem; margin-top: .5rem; }
.mf-variance.over[b-javoaufjwd] { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.mf-variance.under[b-javoaufjwd] { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }

/* BOM */
.mf-split-bom[b-javoaufjwd] { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); margin-top: .8rem; }
.mf-bomcard[b-javoaufjwd] {
    text-align: left; background: #fff; border: 1px solid var(--ii-line, #e5e7eb); border-radius: 10px;
    padding: .65rem .8rem; cursor: pointer; display: flex; flex-direction: column; gap: .3rem;
}
.mf-bomcard:hover[b-javoaufjwd] { border-color: #bae6fd; }
.mf-bomcard.selected[b-javoaufjwd] { border-color: var(--ii-accent, #008FD3); box-shadow: 0 0 0 3px rgba(0, 143, 211, .1); }
.mf-bomcard-top[b-javoaufjwd] { display: flex; justify-content: space-between; align-items: center; gap: .5rem; font-size: .85rem; }
.mf-bomcard-meta[b-javoaufjwd] { display: flex; flex-wrap: wrap; gap: .25rem .8rem; font-size: .72rem; color: var(--ii-muted, #6b7280); }
.mf-versions[b-javoaufjwd] { display: flex; gap: .3rem; flex-wrap: wrap; margin: .7rem 0 .2rem; }
.mf-input-unit[b-javoaufjwd] { display: flex; align-items: center; gap: .4rem; }
.mf-input-unit span[b-javoaufjwd] { font-size: .78rem; color: var(--ii-muted, #6b7280); }
.mf-page .mf-split-bom .mf-field[b-javoaufjwd] { margin-top: .8rem; }

.mf-bomgrid[b-javoaufjwd] { display: grid; gap: .4rem; align-items: center; margin-bottom: .4rem; }
.mf-bomgrid-lines[b-javoaufjwd] { grid-template-columns: minmax(0, 1fr) 80px 70px 90px 24px; }
.mf-bomgrid-ops[b-javoaufjwd] { grid-template-columns: 22px minmax(0, 1fr) minmax(0, 1fr) 80px 80px 24px; }
.mf-bomgrid-head[b-javoaufjwd] { font-size: .68rem; font-weight: 700; color: var(--ii-muted, #6b7280); text-transform: uppercase; letter-spacing: .03em; margin-bottom: .2rem; }
.mf-bomgrid input[b-javoaufjwd], .mf-bomgrid select[b-javoaufjwd] {
    font-size: .82rem; padding: .4rem .5rem; border: 1px solid #d1d5db; border-radius: 7px; background: #fff; width: 100%; min-width: 0;
}
.mf-bomgrid input:disabled[b-javoaufjwd], .mf-bomgrid select:disabled[b-javoaufjwd], .mf-input-unit input:disabled[b-javoaufjwd] { background: #f9fafb; color: #6b7280; }
.mf-op-seq[b-javoaufjwd] { font-size: .75rem; font-weight: 700; color: var(--ii-accent, #008FD3); text-align: center; }
.mf-foot-wrap[b-javoaufjwd] { flex-wrap: wrap; align-items: center; }

/* reports */
.mf-report-title[b-javoaufjwd] { font-size: .9rem; margin-top: 1.3rem; }
.mf-report-title:first-child[b-javoaufjwd] { margin-top: 0; }
.mf-scroll[b-javoaufjwd] { max-height: 420px; overflow-y: auto; }

@media (max-width: 1000px) {
    .mf-split-bom[b-javoaufjwd] { grid-template-columns: 1fr; }
    .mf-guide-row[b-javoaufjwd] { flex-direction: column; gap: .3rem; }
    .mf-guide-lbl[b-javoaufjwd] { padding-top: 0; }
}

@media (max-width: 640px) {
    .mf-stats[b-javoaufjwd] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mf-steps small[b-javoaufjwd] { display: none; }
    .mf-grid-3[b-javoaufjwd], .mf-result-tiles.four[b-javoaufjwd] { grid-template-columns: repeat(2, 1fr); }
    .mf-bomgrid-lines[b-javoaufjwd] { grid-template-columns: minmax(0, 1fr) 64px 56px 24px; }
    .mf-bomgrid-lines .mf-unit[b-javoaufjwd] { display: none; }
    .mf-bomgrid-ops[b-javoaufjwd] { grid-template-columns: 18px minmax(0, 1fr) 64px 64px 24px; }
    .mf-bomgrid-ops > :nth-child(3)[b-javoaufjwd] { display: none; }
}

/* ════════ one order: parts as stages + timeline ════════ */
.mf-st-ontime[b-javoaufjwd] { background: #dcfce7; color: #166534; }
.mf-st-late[b-javoaufjwd] { background: #fee2e2; color: #991b1b; }

.mf-order-bar[b-javoaufjwd] { height: 4px; border-radius: 4px; background: #e5e7eb; margin-top: .45rem; overflow: hidden; }
.mf-order-bar span[b-javoaufjwd] { display: block; height: 100%; background: #22c55e; border-radius: 4px; }

/* new order: what will happen */
.mf-preview[b-javoaufjwd] { border: 1px solid #e0f2fe; background: #f8fcff; border-radius: 10px; padding: .6rem .75rem; display: flex; flex-direction: column; gap: .3rem; }
.mf-preview-title[b-javoaufjwd] { font-size: .72rem; font-weight: 700; color: #0369a1; text-transform: uppercase; letter-spacing: .04em; }
.mf-preview-row[b-javoaufjwd] { font-size: .8rem; color: #374151; }
.mf-preview-row span[b-javoaufjwd] { color: var(--ii-muted, #6b7280); font-size: .74rem; }
.mf-preview-row.make b[b-javoaufjwd] { color: #5b21b6; }
.mf-preview-row.buy b[b-javoaufjwd] { color: #b45309; }
.mf-preview-row.ok[b-javoaufjwd] { color: #15803d; }
.mf-preview-row.final[b-javoaufjwd] { border-top: 1px dashed #bae6fd; padding-top: .35rem; margin-top: .1rem; }
.mf-preview-row.final b[b-javoaufjwd] { color: #166534; }

/* estimated finish */
.mf-eta[b-javoaufjwd] { display: flex; flex-direction: column; align-items: flex-end; text-align: right; border-radius: 10px; padding: .45rem .7rem; flex: none; }
.mf-eta small[b-javoaufjwd] { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; opacity: .8; }
.mf-eta b[b-javoaufjwd] { font-size: .92rem; }
.mf-eta span[b-javoaufjwd] { font-size: .72rem; font-weight: 600; }
.mf-eta.ok[b-javoaufjwd] { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.mf-eta.late[b-javoaufjwd] { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

/* timeline */
.mf-gantt[b-javoaufjwd] { display: flex; flex-direction: column; gap: .35rem; }
.mf-gantt-row[b-javoaufjwd] {
    display: grid; grid-template-columns: 170px minmax(0, 1fr); grid-template-rows: auto auto; gap: .15rem .8rem;
    align-items: center; text-align: left; background: #fff; border: 1px solid var(--ii-line, #e5e7eb);
    border-radius: 9px; padding: .5rem .7rem; cursor: pointer; width: 100%;
}
.mf-gantt-row:hover[b-javoaufjwd] { border-color: #bae6fd; }
.mf-gantt-row.selected[b-javoaufjwd] { border-color: var(--ii-accent, #008FD3); box-shadow: 0 0 0 3px rgba(0, 143, 211, .1); }
.mf-gantt-name[b-javoaufjwd] { grid-row: 1 / 3; display: flex; flex-direction: column; min-width: 0; }
.mf-gantt-name b[b-javoaufjwd] { font-size: .82rem; color: var(--ii-ink, #111827); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mf-gantt-name small[b-javoaufjwd] { font-size: .7rem; color: var(--ii-muted, #6b7280); }
.mf-gantt-track[b-javoaufjwd] { position: relative; height: 14px; background: #f1f5f9; border-radius: 7px; }
.mf-gantt-bar[b-javoaufjwd] { position: absolute; top: 0; bottom: 0; border-radius: 7px; min-width: 6px; }
.mf-gantt-bar.done[b-javoaufjwd], .mf-lg.done[b-javoaufjwd] { background: #22c55e; }
.mf-gantt-bar.running[b-javoaufjwd], .mf-lg.running[b-javoaufjwd] { background: #f59e0b; }
.mf-gantt-bar.planned[b-javoaufjwd], .mf-lg.planned[b-javoaufjwd] { background: var(--ii-accent, #008FD3); }
.mf-gantt-bar.locked[b-javoaufjwd], .mf-lg.locked[b-javoaufjwd] { background: repeating-linear-gradient(45deg, #c4b5fd, #c4b5fd 5px, #ede9fe 5px, #ede9fe 10px); }
.mf-gantt-due[b-javoaufjwd] { position: absolute; top: -4px; bottom: -4px; width: 2px; background: #dc2626; border-radius: 2px; }
.mf-gantt-time[b-javoaufjwd] { font-size: .7rem; color: #4b5563; display: flex; flex-wrap: wrap; gap: .2rem .7rem; }
.mf-gantt-wait[b-javoaufjwd] { color: #6d28d9; font-weight: 600; }
.mf-lg[b-javoaufjwd] { display: inline-block; width: 14px; height: 8px; border-radius: 4px; }
.mf-lg.due[b-javoaufjwd] { width: 2px; height: 12px; background: #dc2626; }

/* stages */
.mf-stage-tabs[b-javoaufjwd] { display: flex; gap: .4rem; margin: 1rem 0 .2rem; overflow-x: auto; padding-bottom: .2rem; }
.mf-stage-tab[b-javoaufjwd] {
    display: flex; align-items: center; gap: .5rem; text-align: left; flex: 1 0 150px;
    background: #fff; border: 1px solid var(--ii-line, #e5e7eb); border-radius: 10px; padding: .45rem .6rem; cursor: pointer;
}
.mf-stage-tab > span[b-javoaufjwd] {
    flex: none; width: 24px; height: 24px; border-radius: 50%; background: #e5e7eb; color: #4b5563;
    display: grid; place-items: center; font-size: .72rem; font-weight: 700;
}
.mf-stage-tab div[b-javoaufjwd] { display: flex; flex-direction: column; min-width: 0; }
.mf-stage-tab b[b-javoaufjwd] { font-size: .8rem; color: var(--ii-ink, #111827); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mf-stage-tab small[b-javoaufjwd] { font-size: .68rem; color: var(--ii-muted, #6b7280); }
.mf-stage-tab.done > span[b-javoaufjwd] { background: #22c55e; color: #fff; }
.mf-stage-tab.active[b-javoaufjwd] { border-color: var(--ii-accent, #008FD3); background: #f0f9ff; }
.mf-stage-tab.active > span[b-javoaufjwd] { background: var(--ii-accent, #008FD3); color: #fff; }

.mf-stage-head[b-javoaufjwd] {
    display: flex; justify-content: space-between; align-items: center; gap: .6rem;
    border-top: 1px solid var(--ii-line, #e5e7eb); margin-top: .9rem; padding-top: .8rem;
}
.mf-stage-head > div[b-javoaufjwd] { display: flex; flex-direction: column; }
.mf-stage-head b[b-javoaufjwd] { font-size: 1rem; color: var(--ii-ink, #111827); }
.mf-stage-head small[b-javoaufjwd] { font-size: .74rem; color: var(--ii-muted, #6b7280); }

.mf-lock[b-javoaufjwd] {
    display: flex; gap: .75rem; align-items: flex-start; margin-top: .8rem;
    background: #f5f3ff; border: 1px solid #ddd6fe; border-radius: 10px; padding: .7rem .85rem; color: #4c1d95; font-size: .8rem;
}
.mf-lock-ic[b-javoaufjwd] { font-size: 1.3rem; line-height: 1; }
.mf-lock b[b-javoaufjwd] { display: block; margin-bottom: .15rem; }
.mf-lock span b[b-javoaufjwd] { display: inline; }
.mf-lock-links[b-javoaufjwd] { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.mf-lock-links .mf-mini[b-javoaufjwd] { margin-left: 0; }

@media (max-width: 640px) {
    .mf-gantt-row[b-javoaufjwd] { grid-template-columns: 1fr; }
    .mf-gantt-name[b-javoaufjwd] { grid-row: auto; }
    .mf-eta[b-javoaufjwd] { align-items: flex-start; text-align: left; }
    .mf-od-head[b-javoaufjwd] { flex-direction: column; }
}

/* ════════ top tabs: one job per tab ════════ */
.mf-topnav[b-javoaufjwd] {
    display: flex; gap: .3rem; overflow-x: auto; margin-bottom: 1.1rem; padding: .3rem;
    background: #fff; border: 1px solid var(--ii-line, #e5e7eb); border-radius: 12px;
    position: sticky; top: 0; z-index: 5;
}
.mf-topnav-btn[b-javoaufjwd] {
    display: inline-flex; align-items: center; gap: .45rem; flex: 1 0 auto; justify-content: center;
    padding: .6rem .9rem; border: 0; border-radius: 9px; background: transparent;
    font-size: .86rem; font-weight: 600; color: #4b5563; cursor: pointer; white-space: nowrap;
}
.mf-topnav-btn:hover[b-javoaufjwd] { background: #f1f5f9; color: var(--ii-ink, #111827); }
.mf-topnav-btn.active[b-javoaufjwd] { background: var(--ii-accent, #008FD3); color: #fff; box-shadow: 0 2px 8px rgba(0, 143, 211, .25); }
.mf-topnav-ic[b-javoaufjwd] { font-size: 1rem; line-height: 1; }
.mf-topnav-btn em[b-javoaufjwd] {
    font-style: normal; font-size: .68rem; font-weight: 700; min-width: 18px; height: 18px; padding: 0 .3rem;
    border-radius: 9px; background: #e0f2fe; color: #075985; display: inline-grid; place-items: center;
}
.mf-topnav-btn.active em[b-javoaufjwd] { background: rgba(255, 255, 255, .25); color: #fff; }

/* new order: one centred form */
.mf-narrow[b-javoaufjwd] { max-width: 720px; margin: 0 auto; }

/* orders: list | selected order */
.mf-split-orders[b-javoaufjwd] { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
.mf-split-orders .mf-list-head[b-javoaufjwd] { margin-top: 0; }
.mf-btn-sm[b-javoaufjwd] { padding: .35rem .7rem; font-size: .78rem; }

/* overview */
.mf-overview[b-javoaufjwd] { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1rem; align-items: start; margin-bottom: 1.1rem; }
.mf-overview .mf-list-head[b-javoaufjwd] { margin-top: 0; }
.mf-action[b-javoaufjwd] {
    display: flex; align-items: center; gap: .75rem; text-align: left; width: 100%;
    background: #fff; border: 1px solid var(--ii-line, #e5e7eb); border-radius: 10px; padding: .75rem .85rem; cursor: pointer;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.mf-action:hover[b-javoaufjwd] { border-color: #bae6fd; box-shadow: 0 4px 12px rgba(2, 132, 199, .1); transform: translateY(-1px); }
.mf-action-ic[b-javoaufjwd] { flex: none; width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center; font-size: 1.05rem; }
.mf-action div[b-javoaufjwd] { display: flex; flex-direction: column; }
.mf-action b[b-javoaufjwd] { font-size: .88rem; color: var(--ii-ink, #111827); }
.mf-action small[b-javoaufjwd] { font-size: .75rem; color: var(--ii-muted, #6b7280); }

/* inside an order: Work | Timeline */
.mf-subtabs[b-javoaufjwd] { display: flex; gap: .25rem; margin: .9rem 0 .8rem; padding: .25rem; background: #f1f5f9; border-radius: 10px; width: fit-content; max-width: 100%; }
.mf-subtabs button[b-javoaufjwd] {
    border: 0; background: transparent; padding: .45rem .9rem; border-radius: 8px;
    font-size: .8rem; font-weight: 600; color: #4b5563; cursor: pointer; white-space: nowrap;
}
.mf-subtabs button.active[b-javoaufjwd] { background: #fff; color: var(--ii-accent, #008FD3); box-shadow: 0 1px 4px rgba(15, 23, 42, .08); }
.mf-subtabs + .mf-stage-tabs[b-javoaufjwd] { margin-top: 0; }

@media (max-width: 1000px) {
    .mf-overview[b-javoaufjwd], .mf-split-orders[b-javoaufjwd] { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .mf-topnav-btn[b-javoaufjwd] { flex: 0 0 auto; padding: .55rem .7rem; }
    .mf-topnav-btn span:not(.mf-topnav-ic)[b-javoaufjwd] { font-size: .8rem; }
}

.mf-list-head .mf-link[b-javoaufjwd] { font-size: .8rem; }
/* /Components/Pages/ProductGallery.razor.rz.scp.css */
/* Product Gallery — scoped to ProductGallery.razor. Colours come from the ii-* kit tokens in app.css. */

/* ── filters ── */
.pg-import[b-iocox78yrj] {
    padding: 1rem; margin-bottom: 1rem; background: #fff;
    border: 1px solid var(--ii-line); border-radius: 12px;
    font-size: .85rem; color: var(--ii-ink);
}
.pg-import p[b-iocox78yrj] { margin: .35rem 0; color: var(--ii-muted); }
.pg-import[b-iocox78yrj]  input { margin-top: .5rem; max-width: 100%; }
.pg-import-status[b-iocox78yrj] { margin-top: .65rem; overflow-wrap: anywhere; }

.pg-filters[b-iocox78yrj] {
    display: grid;
    grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(170px, 1fr)) auto;
    gap: .75rem; align-items: end;
    background: #fff; border: 1px solid var(--ii-line); border-radius: 12px;
    padding: .9rem 1rem; margin-bottom: 1rem;
}
.pg-f[b-iocox78yrj] { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.pg-f label[b-iocox78yrj] { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ii-muted); margin: 0; }
.pg-f[b-iocox78yrj]  .ss { width: 100%; }
.pg-input-wrap[b-iocox78yrj] { position: relative; }
.pg-input-ic[b-iocox78yrj] { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; fill: var(--ii-muted); pointer-events: none; }
.pg-input[b-iocox78yrj] {
    width: 100%; height: 38px; border: 1px solid var(--ii-line); border-radius: 8px;
    padding: 0 .75rem 0 2rem; font-size: .85rem; color: var(--ii-ink); background: #fff; outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.pg-input:focus[b-iocox78yrj] { border-color: var(--ii-accent); box-shadow: 0 0 0 3px rgba(0, 143, 211, .15); }
.pg-clear[b-iocox78yrj] { height: 38px; white-space: nowrap; }

/* ── result bar ── */
.pg-bar[b-iocox78yrj] { min-height: 1.2rem; margin-bottom: .6rem; font-size: .82rem; color: var(--ii-muted); }
.pg-bar b[b-iocox78yrj] { color: var(--ii-ink); font-variant-numeric: tabular-nums; }

/* ── item cards ── */
.pg-grid[b-iocox78yrj] { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; transition: opacity .15s; }
.pg-grid.is-dim[b-iocox78yrj] { opacity: .55; pointer-events: none; }
.pg-card[b-iocox78yrj] {
    background: #fff; border: 1px solid var(--ii-line); border-radius: 12px; overflow: hidden;
    display: flex; flex-direction: column; transition: box-shadow .15s, border-color .15s;
}
.pg-card:hover[b-iocox78yrj] { box-shadow: 0 8px 22px rgba(2, 132, 199, .13); border-color: #bae6fd; }
.pg-card.is-viewing[b-iocox78yrj] { border-color: var(--ii-accent); box-shadow: 0 0 0 2px rgba(0, 143, 211, .2); }

.pg-img[b-iocox78yrj] { position: relative; aspect-ratio: 1 / 1; background: #fff; border-bottom: 1px solid #f1f5f9; display: grid; place-items: center; overflow: hidden; }
/* saved images stacked on top of each other; the visible one cross-fades to the next (product-gallery.js) */
.pg-rot[b-iocox78yrj] { position: absolute; inset: 0; }
.pg-rot img[b-iocox78yrj] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: .6rem; opacity: 0; transition: opacity .8s ease; }
.pg-rot:not([data-i]) img:first-child[b-iocox78yrj],
.pg-rot img.is-on[b-iocox78yrj] { opacity: 1; }
.pg-pics[b-iocox78yrj] {
    position: absolute; right: .5rem; bottom: .5rem; z-index: 1;
    font-size: .66rem; font-weight: 700; color: #334155; background: rgba(241, 245, 249, .95);
    border: 1px solid var(--ii-line); padding: .1rem .45rem; border-radius: 999px;
}
.pg-noimg[b-iocox78yrj] { display: flex; flex-direction: column; align-items: center; gap: .4rem; color: #94a3b8; font-size: .72rem; font-weight: 600; }
.pg-noimg svg[b-iocox78yrj] { width: 38px; height: 38px; fill: #cbd5e1; }
.pg-badge[b-iocox78yrj] {
    position: absolute; top: .5rem; left: .5rem; z-index: 1; max-width: calc(100% - 1rem);
    font-size: .62rem; font-weight: 700; padding: .18rem .5rem; border-radius: 999px;
    background: rgba(239, 246, 255, .95); color: #1e40af; border: 1px solid #bfdbfe;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.pg-body[b-iocox78yrj] { padding: .7rem .8rem .8rem; display: flex; flex-direction: column; gap: .15rem; flex: 1; min-width: 0; }
.pg-name[b-iocox78yrj] {
    font-size: .84rem; font-weight: 700; color: var(--ii-ink); line-height: 1.3; min-height: 2.6em;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pg-code[b-iocox78yrj] { font-size: .68rem; color: var(--ii-muted); }
.pg-brand[b-iocox78yrj] { margin-top: .15rem; font-size: .68rem; font-weight: 700; color: var(--ii-accent); text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-sub[b-iocox78yrj] { font-size: .72rem; color: var(--ii-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-meta[b-iocox78yrj] { margin-top: auto; padding-top: .45rem; display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; font-size: .74rem; color: #475569; }
.pg-mrp[b-iocox78yrj] { font-weight: 700; color: var(--ii-ink); font-size: .86rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pg-view[b-iocox78yrj] { margin-top: .55rem; justify-content: center; padding: .35rem .75rem; font-size: .78rem; }
.pg-view svg[b-iocox78yrj] { width: 14px; height: 14px; }
.pg-none[b-iocox78yrj] { text-align: center; color: var(--ii-muted); padding: 2.5rem 1rem; background: #fff; border: 1px solid var(--ii-line); border-radius: 12px; }
.pg-sk-line[b-iocox78yrj] {
    height: .8rem; border-radius: 4px; margin: .25rem 0;
    background: linear-gradient(100deg, #f1f5f9 30%, #e2e8f0 50%, #f1f5f9 70%);
    background-size: 200% 100%; animation: pg-shine-b-iocox78yrj 1.2s linear infinite;
}
.pg-sk-line.short[b-iocox78yrj] { width: 55%; }

/* ── pagination ── */
.pg-pager[b-iocox78yrj] { display: flex; justify-content: center; align-items: center; gap: .3rem; flex-wrap: wrap; margin: 1.2rem 0 .5rem; }
.pg-pager button[b-iocox78yrj] {
    min-width: 36px; height: 36px; padding: 0 .65rem; border: 1px solid var(--ii-line); background: #fff;
    border-radius: 8px; font-size: .8rem; font-weight: 600; color: #374151; cursor: pointer;
    font-variant-numeric: tabular-nums; transition: border-color .15s, color .15s, background .15s;
}
.pg-pager button:hover:not(:disabled)[b-iocox78yrj] { border-color: #bae6fd; color: var(--ii-accent); }
.pg-pager button.is-active[b-iocox78yrj] { background: var(--ii-accent); border-color: var(--ii-accent); color: #fff; }
.pg-pager button:disabled[b-iocox78yrj] { opacity: .45; cursor: not-allowed; }
.pg-gap[b-iocox78yrj] { padding: 0 .25rem; color: var(--ii-muted); }

/* ── messages ── */
.pg-err[b-iocox78yrj] { color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px; padding: .55rem .75rem; font-size: .8rem; margin: .6rem 0; }

/* ── image viewer dialog ── */
.pg-back[b-iocox78yrj] { position: fixed; inset: 0; background: rgba(15, 23, 42, .5); z-index: 1000; }
.pg-modal[b-iocox78yrj] {
    position: fixed; z-index: 1001; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: min(980px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem);
    display: flex; flex-direction: column; background: #fff; border-radius: 14px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .3); outline: none;
}
.pg-modal-head[b-iocox78yrj] { display: flex; align-items: flex-start; gap: .75rem; padding: 1rem 1.15rem .85rem; border-bottom: 1px solid var(--ii-line); }
.pg-modal-titles[b-iocox78yrj] { flex: 1; min-width: 0; }
.pg-modal-title[b-iocox78yrj] { font-size: 1.05rem; font-weight: 700; color: var(--ii-ink); line-height: 1.25; }
.pg-facts[b-iocox78yrj] { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.pg-fact[b-iocox78yrj] { font-size: .7rem; padding: .18rem .55rem; border-radius: 999px; background: #f1f5f9; color: #334155; font-weight: 600; }
.pg-fact b[b-iocox78yrj] { color: var(--ii-muted); font-weight: 600; margin-right: .3rem; }
.pg-modal-body[b-iocox78yrj] { padding: .9rem 1.15rem 1.2rem; overflow: auto; }

.pg-tabs[b-iocox78yrj] { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; margin-bottom: .75rem; }
.pg-tab[b-iocox78yrj] {
    height: 32px; padding: 0 .8rem; border: 1px solid var(--ii-line); border-radius: 8px; background: #fff;
    font-size: .78rem; font-weight: 600; color: #374151; cursor: pointer; transition: border-color .15s, color .15s, background .15s;
}
.pg-tab:hover:not(:disabled)[b-iocox78yrj] { border-color: #bae6fd; color: var(--ii-accent); }
.pg-tab.is-on[b-iocox78yrj] { background: #eff6ff; border-color: #93c5fd; color: #1d4ed8; }
.pg-tab:disabled[b-iocox78yrj] { opacity: .5; cursor: default; }
.pg-q[b-iocox78yrj] { margin-left: auto; font-size: .76rem; color: var(--ii-muted); }
.pg-q b[b-iocox78yrj] { color: var(--ii-ink); }
.pg-link[b-iocox78yrj] { border: none; background: none; padding: 0; color: var(--ii-accent); font-weight: 600; font-size: .78rem; cursor: pointer; }
.pg-link:disabled[b-iocox78yrj] { opacity: .5; cursor: wait; }

.pg-preview[b-iocox78yrj] {
    position: relative; height: min(380px, 44vh); margin-bottom: .6rem;
    border: 1px solid var(--ii-line); border-radius: 12px; background: #fff;
    display: grid; place-items: center; overflow: hidden;
}
/* the image sits alone in its stage so the crop tool can wrap it without touching the buttons */
.pg-stage[b-iocox78yrj] { position: absolute; inset: .75rem; display: flex; align-items: center; justify-content: center; }
.pg-stage > img[b-iocox78yrj] { display: block; max-width: 100%; max-height: 100%; }
/* "Remove watermark" draws its box in red — that area gets erased, not kept */
.pg-stage.is-heal[b-iocox78yrj]  .cropper-view-box { outline-color: #ef4444; }
.pg-stage.is-heal[b-iocox78yrj]  .cropper-line,
.pg-stage.is-heal[b-iocox78yrj]  .cropper-point { background-color: #ef4444; }

.pg-tools[b-iocox78yrj] { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; flex-wrap: wrap; min-height: 36px; margin-bottom: .8rem; }
.pg-hint[b-iocox78yrj] { flex: 1 1 220px; min-width: 0; font-size: .76rem; color: var(--ii-muted); }
.pg-btns[b-iocox78yrj] { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
.pg-hint.pg-ok[b-iocox78yrj] { color: #15803d; font-weight: 600; }
.pg-hint.pg-bad[b-iocox78yrj] { color: #b91c1c; font-weight: 600; }

/* deleting a saved image: a red-tinted button, then a confirmation with a solid red "Yes, delete" */
.pg-danger[b-iocox78yrj] { color: #b91c1c; border-color: #fecaca; }
.pg-danger:hover[b-iocox78yrj] { color: #991b1b; background: #fef2f2; border-color: #fca5a5; }
.pg-btn-danger[b-iocox78yrj] { color: #fff; background: #dc2626; border-color: #dc2626; }
.pg-btn-danger:hover[b-iocox78yrj] { background: #b91c1c; border-color: #b91c1c; }
.pg-preview.is-deleting[b-iocox78yrj] { border-color: #fca5a5; box-shadow: 0 0 0 3px rgb(239 68 68 / 0.15); }
.pg-preview-note[b-iocox78yrj] { position: relative; font-size: .8rem; font-weight: 600; color: var(--ii-muted); }
.pg-nav[b-iocox78yrj] {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--ii-line);
    background: rgba(255, 255, 255, .92); color: var(--ii-ink); font-size: 1.3rem; line-height: 1;
    cursor: pointer; box-shadow: 0 2px 8px rgba(15, 23, 42, .12);
}
.pg-nav:hover[b-iocox78yrj] { border-color: var(--ii-accent); color: var(--ii-accent); }
.pg-nav.prev[b-iocox78yrj] { left: .7rem; }
.pg-nav.next[b-iocox78yrj] { right: .7rem; }
.pg-count[b-iocox78yrj] { position: absolute; right: .7rem; bottom: .6rem; font-size: .7rem; font-weight: 700; color: #475569; background: rgba(241, 245, 249, .95); padding: .12rem .5rem; border-radius: 999px; font-variant-numeric: tabular-nums; }

.pg-thumbs[b-iocox78yrj] { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .6rem; }
.pg-tile[b-iocox78yrj] {
    padding: 0; border: 2px solid transparent; box-shadow: 0 0 0 1px var(--ii-line); border-radius: 10px;
    background: #fff; overflow: hidden; cursor: pointer; display: flex; flex-direction: column; text-align: left;
    transition: border-color .15s, box-shadow .15s;
}
.pg-tile[b-iocox78yrj] { position: relative; }
.pg-tile:hover[b-iocox78yrj] { box-shadow: 0 0 0 1px var(--ii-accent); }
.pg-tile.is-on[b-iocox78yrj] { border-color: var(--ii-accent); box-shadow: 0 0 0 1px var(--ii-accent); }
/* ✓ box in the corner of each online image: tick several, then "Save N marked" */
.pg-mark[b-iocox78yrj] {
    position: absolute; top: .35rem; left: .35rem; z-index: 1; width: 24px; height: 24px; padding: 0;
    border-radius: 6px; border: 1.5px solid #94a3b8; background: rgba(255, 255, 255, .95);
    color: #fff; font-size: .85rem; font-weight: 800; line-height: 1; display: grid; place-items: center; cursor: pointer;
}
.pg-mark:hover[b-iocox78yrj] { border-color: #16a34a; }
.pg-tile.is-marked[b-iocox78yrj] { box-shadow: 0 0 0 2px #16a34a; }
.pg-tile.is-marked .pg-mark[b-iocox78yrj] { background: #16a34a; border-color: #16a34a; }
.pg-tile-img[b-iocox78yrj] { position: relative; aspect-ratio: 1 / 1; display: grid; place-items: center; background: #fff; overflow: hidden; }
.pg-tile-img img[b-iocox78yrj] { width: 100%; height: 100%; object-fit: contain; padding: .35rem; }
.pg-empty[b-iocox78yrj] { text-align: center; padding: 2.5rem 1rem; color: var(--ii-muted); font-size: .85rem; }

.pg-shimmer[b-iocox78yrj] {
    position: absolute; inset: 0;
    background: linear-gradient(100deg, #f1f5f9 30%, #e2e8f0 50%, #f1f5f9 70%);
    background-size: 200% 100%; animation: pg-shine-b-iocox78yrj 1.2s linear infinite;
}
@keyframes pg-shine-b-iocox78yrj { to { background-position: -200% 0; } }

/* ── responsive ── */
@media (max-width: 1000px) {
    .pg-filters[b-iocox78yrj] { grid-template-columns: 1fr 1fr; }
    .pg-f-search[b-iocox78yrj] { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
    .pg-filters[b-iocox78yrj] { grid-template-columns: 1fr; }
    .pg-grid[b-iocox78yrj] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
    .pg-thumbs[b-iocox78yrj] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* /Components/Pages/SmartOrder.razor.rz.scp.css */
/* Smart Order — follows the invex-ui kit in app.css:
   accent #008FD3, white panels on #f1f5f9, gray-200 lines, compact type. */

.so-page[b-7fgpr847ku] {
    width: 100%;
}

.so-lang-chip[b-7fgpr847ku] {
    flex: none;
    font-size: 0.74rem;
    font-weight: 600;
    color: #0b5563;
    background: #e0f7fa;
    border: 1px solid #c4e8ee;
    border-radius: 9999px;
    padding: 0.3rem 0.75rem;
    white-space: nowrap;
}

/* ---- step marker (same language as the OCR Updated page) ---- */
.so-step[b-7fgpr847ku] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--ii-ink, #111827);
    margin: 1.25rem 0 0.6rem;
}

.so-step:first-of-type[b-7fgpr847ku] {
    margin-top: 0;
}

.so-dot[b-7fgpr847ku] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--ii-accent, #008FD3);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 0.68rem;
    font-weight: 700;
}

.so-dot-done[b-7fgpr847ku] {
    background: #22c55e;
}

/* ---- capture ---- */
.so-input[b-7fgpr847ku] {
    width: 100%;
    min-height: 104px;
    resize: vertical;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    padding: 0.7rem 0.85rem;
    font: inherit;
    font-size: 0.87rem;
    line-height: 1.55;
    color: var(--ii-ink, #111827);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

.so-input[b-7fgpr847ku]::placeholder {
    color: #9ca3af;
}

.so-input:focus[b-7fgpr847ku] {
    border-color: var(--ii-accent, #008FD3);
    box-shadow: 0 0 0 3px rgba(0, 143, 211, .14);
}

.so-hint[b-7fgpr847ku] {
    font-size: 0.76rem;
    color: var(--ii-muted, #6b7280);
    margin-top: 0.5rem;
}

.so-err[b-7fgpr847ku] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    font-size: 0.8rem;
    font-weight: 500;
}

.so-foot[b-7fgpr847ku] {
    justify-content: space-between;
    align-items: center;
}

.so-btn-mic[b-7fgpr847ku] {
    background: #e0f7fa;
    color: #0b5563;
    border-color: #c4e8ee;
}

.so-btn-mic:hover[b-7fgpr847ku] {
    background: #cdeff4;
}

.so-btn-mic.listening[b-7fgpr847ku] {
    background: #fee2e2;
    border-color: #fecaca;
    color: #b91c1c;
    animation: so-pulse-b-7fgpr847ku 1.1s ease-in-out infinite;
}

@keyframes so-pulse-b-7fgpr847ku {
    50% { opacity: .55; }
}

/* ---- review summary ---- */
.so-summary[b-7fgpr847ku] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.so-sum-item[b-7fgpr847ku] {
    background: #fff;
    border: 1px solid var(--ii-line, #e5e7eb);
    border-left: 3px solid #cbd5e1;
    border-radius: 10px;
    padding: 0.6rem 0.85rem;
}

.so-sum-item b[b-7fgpr847ku] {
    display: block;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--ii-ink, #111827);
    line-height: 1.15;
}

.so-sum-item span[b-7fgpr847ku] {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ii-muted, #6b7280);
}

.so-sum-item.ok[b-7fgpr847ku] { border-left-color: #22c55e; }
.so-sum-item.ok b[b-7fgpr847ku] { color: #166534; }
.so-sum-item.warn[b-7fgpr847ku] { border-left-color: #f59e0b; }
.so-sum-item.warn b[b-7fgpr847ku] { color: #b45309; }

/* ---- review list ---- */
.so-panel[b-7fgpr847ku] {
    overflow: hidden;
}

.so-row[b-7fgpr847ku] {
    display: grid;
    grid-template-columns: 40px minmax(180px, 1.5fr) 96px minmax(230px, 2fr) 110px 132px;
    gap: 0.9rem;
    align-items: center;
    padding: 0.7rem 1rem;
}

.so-thead[b-7fgpr847ku] {
    background: #eff6ff;
    border-bottom: 1px solid #bfdbfe;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: #1e40af;
    text-transform: uppercase;
}

.so-item[b-7fgpr847ku] {
    border-bottom: 1px solid #f1f5f9;
    transition: background .15s;
}

.so-item:last-child[b-7fgpr847ku] {
    border-bottom: none;
}

.so-item:hover[b-7fgpr847ku] {
    background: #f8fafc;
}

.so-item.review[b-7fgpr847ku] {
    background: #fffbeb;
}

.so-item.review:hover[b-7fgpr847ku] {
    background: #fef6da;
}

.so-index[b-7fgpr847ku] {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: grid;
    place-items: center;
    background: #f1f5f9;
    color: var(--ii-muted, #6b7280);
    font-size: 0.7rem;
    font-weight: 700;
}

.so-item.review .so-index[b-7fgpr847ku] {
    background: #fef3c7;
    color: #92400e;
}

.so-cell[b-7fgpr847ku] {
    min-width: 0;
}

.so-cell b[b-7fgpr847ku] {
    display: block;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--ii-ink, #111827);
    overflow-wrap: anywhere;
}

.so-cell small[b-7fgpr847ku] {
    display: block;
    font-size: 0.72rem;
    color: var(--ii-muted, #6b7280);
    margin-top: 0.1rem;
}

.so-col-label[b-7fgpr847ku] {
    display: none;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #94a3b8;
    margin-bottom: 0.2rem;
}

.so-qty b[b-7fgpr847ku] {
    display: inline;
    font-variant-numeric: tabular-nums;
}

.so-qty small[b-7fgpr847ku] {
    display: inline;
    margin-left: 0.15rem;
}

.so-picked[b-7fgpr847ku] {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
}

.so-check[b-7fgpr847ku] {
    flex: none;
    width: 17px;
    height: 17px;
    margin-top: 0.1rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #dcfce7;
    color: #166534;
    font-size: 0.65rem;
    font-weight: 700;
}

.so-unmatched[b-7fgpr847ku] {
    display: inline-block;
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
    border-radius: 6px;
    padding: 0.22rem 0.5rem;
    font-size: 0.72rem;
    font-weight: 600;
}

.so-score[b-7fgpr847ku] {
    font-size: 1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.so-score.high[b-7fgpr847ku] { color: #16a34a; }
.so-score.mid[b-7fgpr847ku] { color: #b45309; }
.so-score.low[b-7fgpr847ku] { color: #dc2626; }

.so-actions[b-7fgpr847ku] {
    display: flex;
    justify-content: flex-end;
}

.so-toggle[b-7fgpr847ku] {
    font-size: 0.75rem;
    padding: 0.35rem 0.7rem;
    white-space: nowrap;
}

.so-toggle:disabled[b-7fgpr847ku] {
    opacity: .45;
    cursor: not-allowed;
}

/* ---- candidate picker ---- */
.so-candidates[b-7fgpr847ku] {
    grid-column: 2 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 0.5rem;
    margin-top: 0.6rem;
    padding-top: 0.7rem;
    border-top: 1px dashed #d9e0ea;
}

.so-candidate[b-7fgpr847ku] {
    position: relative;
    text-align: left;
    background: #fff;
    border: 1px solid var(--ii-line, #e5e7eb);
    border-radius: 9px;
    padding: 0.5rem 3.3rem 0.5rem 0.6rem;
    cursor: pointer;
    transition: border-color .15s, background .15s, box-shadow .15s;
}

.so-candidate:hover[b-7fgpr847ku] {
    border-color: #bae6fd;
    background: #f0f9ff;
}

.so-candidate.chosen[b-7fgpr847ku] {
    border-color: var(--ii-accent, #008FD3);
    background: #f0f9ff;
    box-shadow: inset 0 0 0 1px var(--ii-accent, #008FD3);
}

.so-cand-name[b-7fgpr847ku] {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ii-ink, #111827);
    overflow-wrap: anywhere;
}

.so-candidate small[b-7fgpr847ku] {
    display: block;
    font-size: 0.7rem;
    color: var(--ii-muted, #6b7280);
    margin-top: 0.12rem;
}

.so-candidate b[b-7fgpr847ku] {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: #e0f2fe;
    color: #075985;
}

.so-empty[b-7fgpr847ku] {
    font-size: 0.78rem;
    color: var(--ii-muted, #6b7280);
}

/* ---- commit bar ---- */
.so-commit[b-7fgpr847ku] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 0.85rem;
    padding: 0.75rem 1rem;
    background: #fff;
    border: 1px solid var(--ii-line, #e5e7eb);
    border-radius: 10px;
    font-size: 0.78rem;
    color: var(--ii-muted, #6b7280);
}

/* ---- states ---- */
.so-loading[b-7fgpr847ku],
.so-empty-state[b-7fgpr847ku] {
    margin-top: 1.25rem;
    padding: 2.2rem 1rem;
    text-align: center;
    background: #fff;
    border: 1px solid var(--ii-line, #e5e7eb);
    border-radius: 12px;
    color: var(--ii-muted, #6b7280);
    font-size: 0.85rem;
}

.so-empty-state[b-7fgpr847ku] {
    border-style: dashed;
}

.so-loading b[b-7fgpr847ku] {
    display: block;
    color: var(--ii-ink, #111827);
    font-size: 0.87rem;
}

.so-loading span[b-7fgpr847ku] {
    display: block;
    font-size: 0.76rem;
    margin-top: 0.25rem;
}

.so-spinner[b-7fgpr847ku] {
    width: 28px;
    height: 28px;
    margin: 0 auto 0.75rem;
    border: 3px solid #e0f2fe;
    border-top-color: var(--ii-accent, #008FD3);
    border-radius: 50%;
    animation: so-spin-b-7fgpr847ku .7s linear infinite;
}

@keyframes so-spin-b-7fgpr847ku {
    to { transform: rotate(360deg); }
}

/* ---- responsive: table collapses to stacked cards ---- */
@media (max-width: 1100px) {
    .so-thead[b-7fgpr847ku] { display: none; }
    .so-col-label[b-7fgpr847ku] { display: block; }

    .so-row[b-7fgpr847ku] {
        grid-template-columns: 34px minmax(0, 1fr) minmax(0, 1fr);
        row-gap: 0.75rem;
        align-items: start;
        padding: 0.85rem 0.9rem;
    }

    .so-index[b-7fgpr847ku]      { grid-column: 1;      grid-row: 1; }
    .so-spoken[b-7fgpr847ku]     { grid-column: 2 / 4;  grid-row: 1; }
    .so-match[b-7fgpr847ku]      { grid-column: 2 / 4;  grid-row: 2; }
    .so-qty[b-7fgpr847ku]        { grid-column: 2 / 3;  grid-row: 3; }
    .so-confidence[b-7fgpr847ku] { grid-column: 3 / 4;  grid-row: 3; }
    .so-actions[b-7fgpr847ku]    { grid-column: 2 / 4;  grid-row: 4; justify-content: flex-start; }
    .so-candidates[b-7fgpr847ku] { grid-column: 1 / -1; grid-row: 5; }
}

@media (max-width: 640px) {
    .so-summary[b-7fgpr847ku] { grid-template-columns: minmax(0, 1fr); }
    .so-lang-chip[b-7fgpr847ku] { display: none; }
    .so-foot[b-7fgpr847ku] { flex-wrap: wrap; }
    .so-commit[b-7fgpr847ku] { justify-content: stretch; }
}