/* /Components/Account/Login.razor.rz.scp.css */
.login-page[b-s5r1ms20jt] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 3rem 1.5rem;
}

.login-card[b-s5r1ms20jt] {
    position: relative;
    background: var(--surface);
    border-radius: 12px;
    max-width: 410px;
    width: 100%;
    padding: 2.25rem 2rem 2rem;
    box-shadow: 0 24px 60px rgba(8, 25, 39, .12);
    border: 1px solid var(--border);
    overflow: hidden;
}

/* Accent bar across the top of the card. */
.login-card[b-s5r1ms20jt]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--brand), var(--accent-light, #9392c0));
}

.login-head[b-s5r1ms20jt] {
    text-align: center;
    margin-bottom: 1.5rem;
}

.login-badge[b-s5r1ms20jt] {
    width: 56px;
    height: 56px;
    margin: .25rem auto 1rem;
    border-radius: 50%;
    background: var(--soft-accent, #f0f1fb);
    color: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-badge svg[b-s5r1ms20jt] {
    width: 26px;
    height: 26px;
}

.eyebrow[b-s5r1ms20jt] {
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: .7rem;
    font-weight: 700;
    color: var(--brand);
    margin-bottom: .35rem;
}

.login-card h2[b-s5r1ms20jt] {
    font-size: 1.4rem;
    margin: 0 0 .3rem;
    color: var(--ink);
}

.login-subtitle[b-s5r1ms20jt] {
    color: var(--text-muted);
    font-size: .92rem;
    margin: 0;
}

.field[b-s5r1ms20jt] {
    margin-bottom: 1rem;
}

.field label[b-s5r1ms20jt] {
    display: block;
    font-size: .82rem;
    font-weight: 600;
    color: var(--ink-2);
    margin-bottom: .4rem;
}

.input-group[b-s5r1ms20jt] {
    position: relative;
    display: flex;
    align-items: center;
}

.input-icon[b-s5r1ms20jt] {
    position: absolute;
    left: .8rem;
    width: 18px;
    height: 18px;
    color: var(--text-muted);
    pointer-events: none;
    transition: color .12s ease;
}

.input-group:focus-within .input-icon[b-s5r1ms20jt] {
    color: var(--brand);
}

.input[b-s5r1ms20jt] {
    width: 100%;
    padding: .65rem .8rem .65rem 2.5rem;
    font: inherit;
    font-size: .95rem;
    color: var(--text);
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    background: #fbfcfd;
    transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}

.input:focus[b-s5r1ms20jt] {
    outline: none;
    background: #fff;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .18);
}

.login-error[b-s5r1ms20jt] {
    background: #fcefed;
    color: #b42318;
    border: 1px solid #f4d4cf;
    border-radius: 4px;
    padding: .5rem .7rem;
    font-size: .85rem;
    margin-bottom: 1rem;
}

.login-submit[b-s5r1ms20jt] {
    width: 100%;
    margin-top: .25rem;
    padding: .7rem;
}

.login-hint[b-s5r1ms20jt] {
    margin-top: 1.25rem;
    padding: .65rem .75rem;
    background: #f5f7f9;
    border: 1px dashed var(--border-strong);
    border-radius: 4px;
    font-size: .78rem;
    color: var(--text-muted);
    text-align: center;
}
/* /Components/Layout/BeforeAfterSlider.razor.rz.scp.css */
.ba[b-6gexdtvs0g] {
    margin: 0 0 1.75rem;
}

.ba-slider[b-6gexdtvs0g] {
    position: relative;
    /* aspect-ratio is set inline per tool; this is a fallback. */
    aspect-ratio: 918 / 418;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    cursor: ew-resize;
    user-select: none;
    touch-action: none; /* let pointer drag work on touch without scrolling */
    background: #f5f7f9;
    line-height: 0;
}

/* Each pane is the full container size, so the clip-path boundary lines up
   with the divider regardless of how much the content inside is zoomed. */
.ba-pane[b-6gexdtvs0g] {
    position: absolute;
    inset: 0;
}

/* ::deep because the before/after content is passed in as a RenderFragment. */
.ba-pane[b-6gexdtvs0g]  img,
.ba-pane[b-6gexdtvs0g]  svg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(var(--ba-zoom, 1));
    transform-origin: center center;
    -webkit-user-drag: none;
    user-select: none;
}

/* Corner labels */
.ba-tag[b-6gexdtvs0g] {
    position: absolute;
    top: .75rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(18, 34, 47, .72);
    padding: .25rem .55rem;
    border-radius: 3px;
    pointer-events: none;
    line-height: 1;
}

.ba-tag-before[b-6gexdtvs0g] { left: .75rem; }
.ba-tag-after[b-6gexdtvs0g] { right: .75rem; }

/* Divider line + handle (purely visual; the whole slider captures pointers) */
.ba-divider[b-6gexdtvs0g] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(18, 34, 47, .15);
    transform: translateX(-50%);
    pointer-events: none;
}

.ba-handle[b-6gexdtvs0g] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #fff;
    color: var(--brand);
    box-shadow: 0 2px 8px rgba(18, 34, 47, .25);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ba-handle svg[b-6gexdtvs0g] {
    width: 20px;
    height: 20px;
}

.ba-caption[b-6gexdtvs0g] {
    margin-top: .65rem;
    text-align: center;
    font-size: .82rem;
    color: var(--text-muted);
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.app-shell[b-q5kb3oh8sw] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ---- Header (light, brand logo) --------------------------------------- */
.app-header[b-q5kb3oh8sw] {
    background: #fff;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 3px rgba(18, 34, 47, .05);
    position: relative; /* anchors the mobile dropdown menu */
}

.app-header-inner[b-q5kb3oh8sw] {
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 1.5rem;
    height: 80px;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.brand[b-q5kb3oh8sw] {
    display: inline-flex;
    align-items: center;
}

.brand-logo[b-q5kb3oh8sw] {
    height: 56px;
    width: auto;
    display: block;
}

/* Holds the nav + language + auth cluster. On desktop it's an inline row that fills the
   header; on mobile it collapses into a dropdown toggled by the hamburger (see media query). */
.app-menu[b-q5kb3oh8sw] {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 1.5rem;
}

/* Hamburger toggle — hidden on desktop, shown on mobile. */
.nav-toggle[b-q5kb3oh8sw] {
    display: none;
    width: 40px;
    height: 40px;
    padding: 0;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    color: var(--ink-2);
    cursor: pointer;
    transition: border-color .12s ease, color .12s ease;
}

.nav-toggle:hover[b-q5kb3oh8sw] {
    border-color: var(--brand);
    color: var(--brand);
}

.nav-toggle svg[b-q5kb3oh8sw] {
    width: 22px;
    height: 22px;
}

/* ---- Tool navigation --------------------------------------------------- */
.app-nav[b-q5kb3oh8sw] {
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* ::deep is required: NavLink renders its <a> in a child component, which a
   plain scoped selector can't reach (that's why it looked like bare text). */
.app-nav[b-q5kb3oh8sw]  .nav-tool {
    display: inline-flex;
    align-items: center;
    padding: .5rem 1rem;
    border-radius: 6px;
    font-size: .9rem;
    font-weight: 600;
    color: var(--ink-2);
    text-decoration: none;
    white-space: nowrap;
    background: #fff;
    border: 1px solid var(--border-strong);
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}

.app-nav[b-q5kb3oh8sw]  .nav-tool:hover {
    border-color: var(--brand);
    color: var(--brand);
}

/* Selected tool: solid brand button. */
.app-nav[b-q5kb3oh8sw]  .nav-tool.active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

.app-nav[b-q5kb3oh8sw]  .nav-tool.active:hover {
    background: var(--brand-dark);
    border-color: var(--brand-dark);
    color: #fff;
}

/* Push the language + auth cluster to the far right. */
.header-right[b-q5kb3oh8sw] {
    margin-left: auto;
}

.header-right[b-q5kb3oh8sw] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Language toggle */
.lang-toggle[b-q5kb3oh8sw] {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    font-size: .82rem;
    font-weight: 600;
}

.lang[b-q5kb3oh8sw] {
    color: var(--text-muted);
    text-decoration: none;
    padding: .15rem .25rem;
    border-radius: 3px;
}

.lang:hover[b-q5kb3oh8sw] {
    color: var(--brand);
}

.lang.active[b-q5kb3oh8sw] {
    color: var(--brand);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.lang-sep[b-q5kb3oh8sw] {
    color: var(--border-strong);
}

.header-divider[b-q5kb3oh8sw] {
    width: 1px;
    height: 24px;
    background: var(--border);
}

.auth-area[b-q5kb3oh8sw] {
    display: flex;
    align-items: center;
    gap: .7rem;
}

.auth-info[b-q5kb3oh8sw] {
    font-size: .82rem;
    color: var(--text-muted);
}

.auth-free[b-q5kb3oh8sw] {
    font-weight: 600;
    color: var(--ink-2);
}

/* Login link is an <a> styled as a button — strip the anchor underline. */
.auth-area a.btn[b-q5kb3oh8sw] {
    text-decoration: none;
}

/* Logout is a POST form; keep its button inline with the rest of the auth cluster. */
.logout-form[b-q5kb3oh8sw] {
    display: inline-flex;
    margin: 0;
}

/* Admin tool link — subtle brand accent so it stands apart from the public tools. */
.app-nav[b-q5kb3oh8sw]  .nav-admin:not(.active) {
    border-color: var(--brand);
    color: var(--brand);
}

/* ---- Main / Footer ----------------------------------------------------- */
.app-main[b-q5kb3oh8sw] {
    flex: 1;
}

.app-footer[b-q5kb3oh8sw] {
    background: var(--ink);
    color: #8597a4;
    font-size: .8rem;
}

.app-footer-inner[b-q5kb3oh8sw] {
    max-width: 1040px;
    margin: 0 auto;
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.footer-right[b-q5kb3oh8sw] {
    display: flex;
    align-items: center;
    gap: .9rem;
}

.footer-link[b-q5kb3oh8sw] {
    color: #b9c6d0;
    text-decoration: none;
    font-weight: 600;
}

.footer-link:hover[b-q5kb3oh8sw] {
    color: #fff;
    text-decoration: underline;
}

/* Copyright / about, revealed from the info icon. */
.footer-info-wrap[b-q5kb3oh8sw] {
    position: relative;
    display: flex;
}

.footer-info[b-q5kb3oh8sw] {
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #b9c6d0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .12s ease, color .12s ease;
}

.footer-info:hover[b-q5kb3oh8sw] {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

.footer-info svg[b-q5kb3oh8sw] {
    width: 17px;
    height: 17px;
}

.footer-popover[b-q5kb3oh8sw] {
    position: absolute;
    right: 0;
    bottom: calc(100% + 10px);
    width: 240px;
    background: #fff;
    color: var(--text);
    border-radius: 8px;
    padding: .8rem .9rem;
    box-shadow: 0 12px 32px rgba(8, 25, 39, .28);
    z-index: 950;
}

.footer-popover[b-q5kb3oh8sw]::after {
    content: "";
    position: absolute;
    right: 12px;
    bottom: -6px;
    width: 12px;
    height: 12px;
    background: #fff;
    transform: rotate(45deg);
}

.footer-popover-title[b-q5kb3oh8sw] {
    font-weight: 700;
    font-size: .82rem;
    color: var(--ink);
}

.footer-popover-sub[b-q5kb3oh8sw] {
    margin-top: .3rem;
    font-size: .78rem;
    color: var(--text-muted);
}

/* ---- Mobile: collapse the bar into a hamburger dropdown ---------------- */
@media (max-width: 860px) {
    .app-header-inner[b-q5kb3oh8sw] {
        height: 64px;
        gap: 1rem;
    }

    .brand-logo[b-q5kb3oh8sw] {
        height: 44px;
    }

    .nav-toggle[b-q5kb3oh8sw] {
        display: inline-flex;
        margin-left: auto; /* push the hamburger to the far right */
    }

    /* The collapsed menu becomes a full-width dropdown panel under the header. */
    .app-menu[b-q5kb3oh8sw] {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: none;
        flex: none;
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
        padding: 1rem 1.5rem 1.25rem;
        background: #fff;
        border-bottom: 1px solid var(--border);
        box-shadow: 0 14px 30px rgba(8, 25, 39, .14);
        z-index: 920;
    }

    .app-menu.open[b-q5kb3oh8sw] {
        display: flex;
    }

    /* Stack the tool links as full-width rows. */
    .app-nav[b-q5kb3oh8sw] {
        flex-direction: column;
        align-items: stretch;
        gap: .4rem;
    }

    .app-nav[b-q5kb3oh8sw]  .nav-tool {
        justify-content: flex-start;
        padding: .6rem .9rem;
        font-size: .95rem;
    }

    /* Language + auth stack below the links. */
    .header-right[b-q5kb3oh8sw] {
        margin-left: 0;
        flex-direction: column;
        align-items: stretch;
        gap: .9rem;
        border-top: 1px solid var(--border);
        padding-top: .9rem;
    }

    .header-divider[b-q5kb3oh8sw] {
        display: none;
    }

    .lang-toggle[b-q5kb3oh8sw] {
        justify-content: flex-start;
    }

    .auth-area[b-q5kb3oh8sw] {
        justify-content: space-between;
        flex-wrap: wrap;
        gap: .6rem .8rem;
    }

    .auth-info[b-q5kb3oh8sw] {
        min-width: 0;
        overflow-wrap: anywhere;
    }
}

#blazor-error-ui[b-q5kb3oh8sw] {
    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-q5kb3oh8sw] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-9malvkos85],
.components-reconnect-repeated-attempt-visible[b-9malvkos85],
.components-reconnect-failed-visible[b-9malvkos85],
.components-pause-visible[b-9malvkos85],
.components-resume-failed-visible[b-9malvkos85],
.components-rejoining-animation[b-9malvkos85] {
    display: none;
}

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


#components-reconnect-modal[b-9malvkos85] {
    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-9malvkos85 0.5s both;
    &[open]

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

@keyframes components-rejoining-animation-b-9malvkos85 {
    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/Layout/ScrollToTop.razor.rz.scp.css */
.scroll-top[b-d8rhlg20cp] {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--brand);
    box-shadow: 0 4px 14px rgba(18, 34, 47, .18);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 900;

    /* Hidden until scrolled down; JS toggles the .visible class. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease, background .12s ease;
}

.scroll-top.visible[b-d8rhlg20cp] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.scroll-top:hover[b-d8rhlg20cp] {
    background: #f4f7f9;
}

.scroll-top svg[b-d8rhlg20cp] {
    width: 20px;
    height: 20px;
}
/* /Components/Pages/Admin.razor.rz.scp.css */
.admin-page[b-6buybqoz5f] {
    max-width: 1040px;
    margin: 0 auto;
    padding: 2.5rem 1.5rem 4rem;
}

.admin-head[b-6buybqoz5f] {
    margin-bottom: 1.5rem;
}

.admin-head h1[b-6buybqoz5f] {
    font-size: 1.6rem;
    margin: 0 0 .35rem;
    color: var(--ink);
}

.admin-sub[b-6buybqoz5f] {
    margin: 0;
    color: var(--text-muted);
    font-size: .95rem;
}

/* ---- Sub-nav tabs (Accounts / Processing log) -------------------------- */
.admin-tabs[b-6buybqoz5f] {
    display: flex;
    gap: .4rem;
    margin: 0 0 1.5rem;
    border-bottom: 1px solid var(--border);
}

.admin-tabs[b-6buybqoz5f]  .admin-tab {
    padding: .5rem .9rem;
    font-size: .9rem;
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.admin-tabs[b-6buybqoz5f]  .admin-tab:hover {
    color: var(--brand);
}

.admin-tabs[b-6buybqoz5f]  .admin-tab.active {
    color: var(--brand);
    border-bottom-color: var(--brand);
}

/* ---- Feedback banner --------------------------------------------------- */
.admin-banner[b-6buybqoz5f] {
    border-radius: 6px;
    padding: .6rem .85rem;
    font-size: .88rem;
    margin-bottom: 1.25rem;
    border: 1px solid transparent;
}

.admin-banner.is-ok[b-6buybqoz5f] {
    background: #eafaf1;
    color: #126b3f;
    border-color: #bce6cd;
}

.admin-banner.is-error[b-6buybqoz5f] {
    background: #fcefed;
    color: #b42318;
    border-color: #f4d4cf;
}

/* ---- Sections ---------------------------------------------------------- */
.admin-section[b-6buybqoz5f] {
    margin-bottom: 2.25rem;
}

.admin-section h2[b-6buybqoz5f] {
    font-size: 1.05rem;
    margin: 0 0 .85rem;
    color: var(--ink-2);
}

/* ---- Accounts table ---------------------------------------------------- */
.table-wrap[b-6buybqoz5f] {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
}

.admin-table[b-6buybqoz5f] {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}

.admin-table th[b-6buybqoz5f],
.admin-table td[b-6buybqoz5f] {
    padding: .65rem .8rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.admin-table thead th[b-6buybqoz5f] {
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    background: #f7f9fb;
}

.admin-table tbody tr:last-child td[b-6buybqoz5f] {
    border-bottom: none;
}

.col-user[b-6buybqoz5f] {
    font-weight: 600;
    color: var(--ink-2);
}

.col-created[b-6buybqoz5f] {
    color: var(--text-muted);
}

.col-page[b-6buybqoz5f] {
    text-align: center;
    width: 1%;
}

.col-page input[b-6buybqoz5f] {
    width: 16px;
    height: 16px;
    accent-color: var(--brand);
    cursor: pointer;
}

.row-actions[b-6buybqoz5f] {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.reset-group[b-6buybqoz5f] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

/* ---- Create-account form ----------------------------------------------- */
.create-form[b-6buybqoz5f] {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 560px;
}

.create-fields[b-6buybqoz5f] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.field[b-6buybqoz5f] {
    flex: 1 1 200px;
}

.field label[b-6buybqoz5f] {
    display: block;
    font-size: .8rem;
    font-weight: 600;
    color: var(--ink-2);
    margin-bottom: .35rem;
}

.create-pages[b-6buybqoz5f] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.create-pages-label[b-6buybqoz5f] {
    font-size: .8rem;
    font-weight: 600;
    color: var(--ink-2);
}

.check[b-6buybqoz5f] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .9rem;
    color: var(--ink-2);
    cursor: pointer;
}

.check input[b-6buybqoz5f] {
    width: 16px;
    height: 16px;
    accent-color: var(--brand);
    cursor: pointer;
}

/* ---- Inputs (component-local; .input isn't global) --------------------- */
.input[b-6buybqoz5f] {
    width: 100%;
    padding: .55rem .7rem;
    font: inherit;
    font-size: .92rem;
    color: var(--text);
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    background: #fbfcfd;
    transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}

.input:focus[b-6buybqoz5f] {
    outline: none;
    background: #fff;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .18);
}

.input-sm[b-6buybqoz5f] {
    width: 150px;
    padding: .42rem .6rem;
    font-size: .85rem;
}

/* ---- Danger button (not in the global button set) ---------------------- */
.btn-danger[b-6buybqoz5f] {
    background: var(--surface);
    color: #b42318;
    border-color: #f1c7c1;
}

.btn-danger:not(:disabled):hover[b-6buybqoz5f] {
    background: #fcefed;
    border-color: #e7a89f;
}

@media (max-width: 560px) {
    .reset-group .input-sm[b-6buybqoz5f] {
        width: 120px;
    }
}
/* /Components/Pages/AdminLog.razor.rz.scp.css */
.admin-page[b-h160xqg4a7] {
    max-width: 1040px;
    margin: 0 auto;
    padding: 2.5rem 1.5rem 4rem;
}

.admin-head[b-h160xqg4a7] {
    margin-bottom: 1.5rem;
}

.admin-head h1[b-h160xqg4a7] {
    font-size: 1.6rem;
    margin: 0 0 .35rem;
    color: var(--ink);
}

.admin-sub[b-h160xqg4a7] {
    margin: 0;
    color: var(--text-muted);
    font-size: .95rem;
}

/* ---- Sub-nav tabs (Accounts / Processing log) -------------------------- */
.admin-tabs[b-h160xqg4a7] {
    display: flex;
    gap: .4rem;
    margin: 0 0 1.5rem;
    border-bottom: 1px solid var(--border);
}

.admin-tabs[b-h160xqg4a7]  .admin-tab {
    padding: .5rem .9rem;
    font-size: .9rem;
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.admin-tabs[b-h160xqg4a7]  .admin-tab:hover {
    color: var(--brand);
}

.admin-tabs[b-h160xqg4a7]  .admin-tab.active {
    color: var(--brand);
    border-bottom-color: var(--brand);
}

/* ---- Pager toolbar ----------------------------------------------------- */
.log-toolbar[b-h160xqg4a7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .75rem;
    flex-wrap: wrap;
}

.log-range[b-h160xqg4a7] {
    font-size: .85rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.log-pager[b-h160xqg4a7] {
    display: flex;
    gap: .5rem;
}

.log-pager button:disabled[b-h160xqg4a7] {
    opacity: .5;
    cursor: default;
}

/* ---- Log table --------------------------------------------------------- */
.table-wrap[b-h160xqg4a7] {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
}

.log-table[b-h160xqg4a7] {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}

.log-table th[b-h160xqg4a7],
.log-table td[b-h160xqg4a7] {
    padding: .6rem .8rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.log-table thead th[b-h160xqg4a7] {
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    background: #f7f9fb;
}

.log-table tbody tr:last-child td[b-h160xqg4a7] {
    border-bottom: none;
}

.col-time[b-h160xqg4a7] {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.col-user[b-h160xqg4a7] {
    font-weight: 600;
    color: var(--ink-2);
}

.col-file[b-h160xqg4a7] {
    color: var(--text);
    white-space: normal;
    word-break: break-all;
}

.col-ip[b-h160xqg4a7] {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ---- Status badge + error detail --------------------------------------- */
.col-status[b-h160xqg4a7] {
    white-space: nowrap;
}

.badge[b-h160xqg4a7] {
    display: inline-block;
    padding: .15rem .5rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    vertical-align: middle;
}

.badge-ok[b-h160xqg4a7] {
    background: #e7f6ec;
    color: #1f7a3d;
}

.badge-err[b-h160xqg4a7] {
    background: #fdecec;
    color: #c0392b;
}

.err-detail[b-h160xqg4a7] {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-left: .45rem;
    max-width: 22rem;
    color: var(--text-muted);
    cursor: help;
    vertical-align: middle;
}

.err-text[b-h160xqg4a7] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .82rem;
}

.info-icon[b-h160xqg4a7] {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    color: #c0392b;
}

.log-empty[b-h160xqg4a7] {
    color: var(--text-muted);
    font-size: .95rem;
    padding: 1.5rem 0;
}
/* /Components/Pages/Lettering.razor.rz.scp.css */
/* ---- Lettering illustration (inside the before/after slider) ----------- */
/* The cut-out lettering code, in the Allerta Stencil font. */
.let-code[b-75ygzzg2nt] {
    font-family: "Allerta Stencil", "Segoe UI", sans-serif;
    font-size: 96px;
    fill: #14233a;
    letter-spacing: 2px;
}

.let-anno[b-75ygzzg2nt] {
    font-family: "Segoe UI", sans-serif;
    font-size: 15px;
    fill: #8a97a3;
    text-transform: uppercase;
    letter-spacing: .08em;
}

/* ---- Settings grid ----------------------------------------------------- */
.settings-grid[b-75ygzzg2nt] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem 2rem;
    align-items: start;
}

.setting label[b-75ygzzg2nt] {
    display: block;
    font-size: .82rem;
    font-weight: 600;
    color: var(--ink-2);
    margin-bottom: .4rem;
}

.input[b-75ygzzg2nt] {
    width: 100%;
    padding: .55rem .65rem;
    font: inherit;
    color: var(--text);
    border: 1px solid var(--border-strong);
    border-radius: 4px;
    background: #fff;
}

.input:focus[b-75ygzzg2nt] {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .18);
}

.setting-static[b-75ygzzg2nt] {
    padding: .55rem .65rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: #f5f7f9;
    color: var(--ink-2);
    font-weight: 600;
    font-size: .9rem;
}

.setting-hint[b-75ygzzg2nt] {
    margin-top: .35rem;
    font-size: .76rem;
    color: var(--text-muted);
}

.setting-wide[b-75ygzzg2nt] {
    grid-column: 1 / -1;
}

/* Keep the (single-option) font select from stretching the full width. */
.font-select[b-75ygzzg2nt] {
    max-width: 280px;
}

/* The curve-approximation spinner only holds a small number. */
.curve-input[b-75ygzzg2nt] {
    max-width: 140px;
}

/* ---- Pattern builder --------------------------------------------------- */
.var-chips[b-75ygzzg2nt] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    margin-bottom: .6rem;
}

.var-chips-label[b-75ygzzg2nt] {
    font-size: .78rem;
    color: var(--text-muted);
    margin-right: .25rem;
    font-weight: 500;
}

.var-chip[b-75ygzzg2nt] {
    display: inline-flex;
    align-items: center;
    font-family: "Consolas", "Menlo", monospace;
    font-size: .78rem;
    font-weight: 600;
    color: var(--brand);
    background: #eaf2f7;
    border: 1px solid #cfe1ec;
    border-radius: 4px;
    padding: .2rem .5rem;
    cursor: grab;
    user-select: none;
    transition: background .12s ease, border-color .12s ease;
}

.var-chip:hover[b-75ygzzg2nt] {
    background: #dceaf2;
    border-color: var(--brand);
}

.var-chip:active[b-75ygzzg2nt] {
    cursor: grabbing;
}

.pattern-input[b-75ygzzg2nt] {
    font-family: "Consolas", "Menlo", monospace;
    font-size: .9rem;
}

/* Live regex validity feedback. */
.pattern-input.pattern-valid[b-75ygzzg2nt] {
    border-color: #2f9e6b;
}

.pattern-input.pattern-valid:focus[b-75ygzzg2nt] {
    border-color: #2f9e6b;
    box-shadow: 0 0 0 3px rgba(47, 158, 107, .18);
}

.pattern-input.pattern-invalid[b-75ygzzg2nt] {
    border-color: #d9534f;
}

.pattern-input.pattern-invalid:focus[b-75ygzzg2nt] {
    border-color: #d9534f;
    box-shadow: 0 0 0 3px rgba(217, 83, 79, .18);
}

.pattern-error[b-75ygzzg2nt] {
    margin-top: .35rem;
    font-size: .78rem;
    color: #b42318;
}

.setting-check[b-75ygzzg2nt] {
    align-self: center;
}

/* Lock toggle + disabled pattern block */
.apply-toggle[b-75ygzzg2nt] {
    font-weight: 600 !important;
    color: var(--ink-2);
}

.is-disabled[b-75ygzzg2nt] {
    opacity: .5;
}

.is-disabled .var-chip[b-75ygzzg2nt] {
    pointer-events: none;
}

/* ---- Per-row lettering code cell --------------------------------------- */
.code-input[b-75ygzzg2nt] {
    width: 100%;
    min-width: 0;
    padding: .4rem .55rem;
    font: inherit;
    font-size: .85rem;
    font-family: "Consolas", "Menlo", monospace;
    color: var(--ink);
    border: 1px solid var(--border-strong);
    border-radius: 4px;
    background: #fff;
}

.code-input:focus[b-75ygzzg2nt] {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .18);
}

.code-input:disabled[b-75ygzzg2nt] {
    background: #f3f5f7;
    color: var(--text-muted);
    cursor: not-allowed;
}

/* Empty code = file can't be processed; flag it. */
.code-input.code-input-empty[b-75ygzzg2nt] {
    border-color: #d98c6a;
    background: #fdf4ee;
}

.check[b-75ygzzg2nt] {
    display: flex;
    align-items: center;
    gap: .55rem;
    cursor: pointer;
    font-weight: 500 !important;
    margin-bottom: 0 !important;
    color: var(--ink-2);
}

.check input[b-75ygzzg2nt] {
    width: 16px;
    height: 16px;
    accent-color: var(--brand);
    cursor: pointer;
}
/* /Components/Pages/RepairWorkspace.razor.rz.scp.css */
.page[b-w7grk7hmnk] {
    max-width: 1040px;
    margin: 0 auto;
    padding: 2.5rem 1.5rem 3rem;
}

/* ---- Hero -------------------------------------------------------------- */
.hero[b-w7grk7hmnk] {
    margin-bottom: 1.75rem;
}

.eyebrow[b-w7grk7hmnk] {
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: .72rem;
    font-weight: 700;
    color: var(--brand);
    margin-bottom: .5rem;
}

.hero h1[b-w7grk7hmnk] {
    font-size: 1.7rem;
    font-weight: 700;
    margin: 0 0 .6rem;
    color: var(--ink);
    letter-spacing: -.01em;
}

.subtitle[b-w7grk7hmnk] {
    color: var(--text-muted);
    max-width: 680px;
    margin: 0;
    line-height: 1.6;
    font-size: .98rem;
}

/* ---- Settings panel ---------------------------------------------------- */
.settings[b-w7grk7hmnk] {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    padding: 1.25rem 1.5rem 1.5rem;
    margin-bottom: 1.5rem;
}

.settings-title[b-w7grk7hmnk] {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-muted);
    margin: 0 0 1rem;
    font-weight: 700;
}

/* ---- Dropzone ---------------------------------------------------------- */
.dropzone[b-w7grk7hmnk] {
    position: relative;
    display: block;
    border: 1.5px dashed var(--border-strong);
    border-radius: 6px;
    background: var(--surface);
    padding: 2.25rem 1.5rem;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.dropzone:hover[b-w7grk7hmnk] {
    border-color: var(--brand);
    background: #f8fafb;
}

.dropzone.dragover[b-w7grk7hmnk] {
    border-color: var(--brand);
    background: #eef5f9;
    box-shadow: inset 0 0 0 1px var(--brand);
}

/* The native file input overlays the whole zone so drag-and-drop just works.
   ::deep is required because InputFile renders the <input> in a child
   component, which scoped selectors don't reach on their own. */
.dropzone[b-w7grk7hmnk]  .dropzone-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.dropzone-content[b-w7grk7hmnk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .7rem;
    pointer-events: none;
}

.dropzone-glyph[b-w7grk7hmnk] {
    width: 34px;
    height: 34px;
    color: var(--brand);
}

.dropzone-text[b-w7grk7hmnk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
    color: var(--ink-2);
}

.dropzone-text strong[b-w7grk7hmnk] {
    font-size: 1rem;
    font-weight: 600;
}

.dropzone-text span[b-w7grk7hmnk] {
    color: var(--text-muted);
    font-size: .82rem;
}

.dropzone-button[b-w7grk7hmnk] {
    pointer-events: none;
}

.dropzone-hint[b-w7grk7hmnk] {
    color: var(--text-muted);
    font-size: .78rem;
}

/* ---- Toolbar ----------------------------------------------------------- */
.toolbar[b-w7grk7hmnk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 2rem 0 .9rem;
    flex-wrap: wrap;
}

.toolbar-summary[b-w7grk7hmnk] {
    color: var(--text-muted);
    font-size: .92rem;
}

.toolbar-summary strong[b-w7grk7hmnk] {
    color: var(--ink);
}

.toolbar-dot[b-w7grk7hmnk] {
    margin: 0 .4rem;
    color: var(--border-strong);
}

.toolbar-done[b-w7grk7hmnk] {
    color: #1d7a4d;
    font-weight: 600;
}

.toolbar-failed[b-w7grk7hmnk] {
    color: #b42318;
    font-weight: 600;
}


/* ---- Table ------------------------------------------------------------- */
/* No overflow clipping here: the metrics hover balloon has to be able to escape the table.
   The rounded corners are therefore applied to the corner cells themselves (below) instead. */
.table-wrap[b-w7grk7hmnk] {
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
}

.files-table[b-w7grk7hmnk] {
    width: 100%;
    border-collapse: collapse;
}

.files-table thead th[b-w7grk7hmnk] {
    text-align: left;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-muted);
    background: #f5f7f9;
    padding: .7rem 1rem;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
}

.files-table tbody td[b-w7grk7hmnk] {
    padding: .85rem 1rem;
    border-bottom: 1px solid #eef1f4;
    vertical-align: middle;
}

.files-table tbody tr:last-child td[b-w7grk7hmnk] {
    border-bottom: none;
}

.files-table tbody tr:hover[b-w7grk7hmnk] {
    background: #fafbfc;
}

/* Corner rounding, since .table-wrap can no longer clip (see above). */
.files-table thead th:first-child[b-w7grk7hmnk] { border-top-left-radius: 6px; }
.files-table thead th:last-child[b-w7grk7hmnk] { border-top-right-radius: 6px; }

.col-preview[b-w7grk7hmnk] { width: 96px; }
.col-metrics[b-w7grk7hmnk] { width: 148px; }
.col-status[b-w7grk7hmnk] { width: 200px; }
.col-code[b-w7grk7hmnk] { width: 210px; }
.col-actions[b-w7grk7hmnk] { width: 1%; white-space: nowrap; }

/* Action column: batch buttons (header) line up over per-row buttons. */
.row-actions[b-w7grk7hmnk] {
    display: flex;
    gap: .4rem;
    justify-content: flex-end;
    align-items: center;
    text-transform: none;
    letter-spacing: normal;
}

.act-process[b-w7grk7hmnk] { min-width: 104px; }
.act-download[b-w7grk7hmnk] { min-width: 122px; }

.act-remove[b-w7grk7hmnk] {
    width: 32px;
    min-width: 32px;
    flex: none;
}

.preview-img[b-w7grk7hmnk] {
    width: 80px;
    height: 60px;
    border-radius: 4px;
    object-fit: contain;
    border: 1px solid var(--border);
    background: #f5f7f9;
    display: block;
}

.preview-placeholder[b-w7grk7hmnk] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.file-name[b-w7grk7hmnk] {
    font-weight: 600;
    color: var(--ink);
    max-width: 340px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-meta[b-w7grk7hmnk] {
    font-size: .78rem;
    color: var(--text-muted);
    margin-top: .15rem;
}

.file-error[b-w7grk7hmnk] {
    font-size: .78rem;
    color: #b42318;
    margin-top: .3rem;
}

/* ---- Part metrics (type / thickness + hover balloon) ------------------- */
.metrics-none[b-w7grk7hmnk] {
    color: var(--text-muted);
}

.metrics-pending[b-w7grk7hmnk] {
    display: inline-flex;
    align-items: center;
}

/* Measuring is on demand, so the column carries an action rather than a value until it is asked for.
   Kept visually quiet — it is an option, not something the user must do before processing. */
.metrics-measure[b-w7grk7hmnk] {
    padding: .18rem .5rem;
    font-size: .78rem;
    white-space: nowrap;
}

.spinner-sm[b-w7grk7hmnk] {
    width: 14px;
    height: 14px;
    border-width: 2px;
}

.metrics-cell[b-w7grk7hmnk] {
    position: relative;
    display: inline-block;
    cursor: help;
    outline: none;
}

.metrics-class[b-w7grk7hmnk] {
    font-weight: 600;
    color: var(--ink);
    font-size: .86rem;
    /* Dotted underline: the standard "there is more here on hover" affordance. */
    border-bottom: 1px dotted var(--border-strong);
    display: inline-block;
}

.metrics-thickness[b-w7grk7hmnk] {
    font-size: .78rem;
    color: var(--text-muted);
    margin-top: .15rem;
}

.metrics-warning[b-w7grk7hmnk] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .8rem;
    font-weight: 600;
    color: #97600f;
    border-bottom: 1px dotted #d9b775;
}

.metrics-warning svg[b-w7grk7hmnk] {
    width: 14px;
    height: 14px;
    flex: none;
}

/* The balloon. Opens to the left of the cell and is vertically centred on it, so rows at the very
   top and bottom of the table show it just as well. */
.metrics-tip[b-w7grk7hmnk] {
    position: absolute;
    right: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 60;
    width: 260px;
    padding: .65rem .8rem;
    border-radius: 8px;
    background: #12222f;
    color: #eaf0f5;
    font-size: .78rem;
    line-height: 1.45;
    text-align: left;
    box-shadow: 0 10px 28px rgba(18, 34, 47, .3);
    opacity: 0;
    visibility: hidden;
    transition: opacity .12s ease;
    pointer-events: none;
}

/* Little arrow pointing back at the cell. */
.metrics-tip[b-w7grk7hmnk]::after {
    content: "";
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-left-color: #12222f;
}

.metrics-cell:hover .metrics-tip[b-w7grk7hmnk],
.metrics-cell:focus .metrics-tip[b-w7grk7hmnk],
.metrics-cell:focus-within .metrics-tip[b-w7grk7hmnk] {
    opacity: 1;
    visibility: visible;
}

.metrics-tip-row[b-w7grk7hmnk] {
    display: flex;
    justify-content: space-between;
    gap: .8rem;
}

.metrics-tip-row + .metrics-tip-row[b-w7grk7hmnk] {
    margin-top: .15rem;
}

.metrics-tip-label[b-w7grk7hmnk] {
    color: #9fb3c2;
    white-space: nowrap;
}

.metrics-tip-value[b-w7grk7hmnk] {
    font-weight: 600;
    text-align: right;
}

.metrics-tip-warning[b-w7grk7hmnk] {
    font-weight: 600;
    color: #ffd48a;
}

.metrics-tip-detail[b-w7grk7hmnk] {
    margin-top: .35rem;
    color: #9fb3c2;
    word-break: break-word;
}

/* ---- Status badges ----------------------------------------------------- */
.badge[b-w7grk7hmnk] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .76rem;
    font-weight: 600;
    padding: .25rem .6rem;
    border-radius: 3px;
    border: 1px solid transparent;
}

.badge[b-w7grk7hmnk]::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

.badge-waiting[b-w7grk7hmnk] { background: #f1f4f7; color: #586674; border-color: #e1e7ed; }
.badge-uploading[b-w7grk7hmnk] { background: #eef4f9; color: #1b5e8a; border-color: #cfe1ef; }
/* Cyan "ready" — intermediate, deliberately not green (green is reserved for Completed). */
.badge-uploaded[b-w7grk7hmnk] { background: #e8f6fb; color: #0e7490; border-color: #c2e6f1; }
.badge-processing[b-w7grk7hmnk] { background: #fdf4e7; color: #97600f; border-color: #f3e2c4; }
.badge-completed[b-w7grk7hmnk] { background: #eaf5ee; color: #1d7a4d; border-color: #c9e7d5; }
.badge-failed[b-w7grk7hmnk] { background: #fcefed; color: #b42318; border-color: #f4d4cf; }

/* ---- Progress bars ----------------------------------------------------- */
.progress[b-w7grk7hmnk] {
    margin-top: .55rem;
    height: 5px;
    background: #e8ecf0;
    border-radius: 2px;
    overflow: hidden;
}

.progress-bar[b-w7grk7hmnk] {
    height: 100%;
    background: var(--brand);
    border-radius: 2px;
    transition: width .15s ease;
}

.progress-label[b-w7grk7hmnk] {
    font-size: .72rem;
    color: var(--text-muted);
    margin-top: .25rem;
}

.progress.indeterminate .progress-bar[b-w7grk7hmnk] {
    width: 40%;
    background: #c8901f;
    animation: indeterminate-b-w7grk7hmnk 1.1s infinite ease-in-out;
}

@keyframes indeterminate-b-w7grk7hmnk {
    0% { margin-left: -40%; }
    100% { margin-left: 100%; }
}

/* ---- Spinner (preview loading) ----------------------------------------- */
.spinner[b-w7grk7hmnk] {
    width: 18px;
    height: 18px;
    border: 2px solid #d3dae0;
    border-top-color: var(--brand);
    border-radius: 50%;
    animation: spin-b-w7grk7hmnk .7s linear infinite;
}

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

/* ---- Empty state ------------------------------------------------------- */
.empty-state[b-w7grk7hmnk] {
    text-align: center;
    color: var(--text-muted);
    padding: 2.5rem 1rem;
    margin-top: 1.25rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    font-size: .92rem;
}

.icon-btn[b-w7grk7hmnk] {
    padding: .42rem;
}

.icon-btn svg[b-w7grk7hmnk] {
    width: 15px;
    height: 15px;
}

/* ---- Paywall modal ----------------------------------------------------- */
.modal-overlay[b-w7grk7hmnk] {
    position: fixed;
    inset: 0;
    background: rgba(18, 34, 47, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    z-index: 1000;
    animation: fade-in-b-w7grk7hmnk .12s ease;
}

.modal-card[b-w7grk7hmnk] {
    background: var(--surface);
    border-radius: 8px;
    max-width: 440px;
    width: 100%;
    padding: 2rem;
    text-align: center;
    box-shadow: 0 20px 50px rgba(18, 34, 47, .25);
    animation: pop-in-b-w7grk7hmnk .14s ease;
}

.modal-icon[b-w7grk7hmnk] {
    width: 48px;
    height: 48px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: #eef4f9;
    color: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-icon svg[b-w7grk7hmnk] {
    width: 24px;
    height: 24px;
}

.modal-card h2[b-w7grk7hmnk] {
    font-size: 1.3rem;
    color: var(--ink);
    margin: 0 0 .6rem;
}

.modal-body[b-w7grk7hmnk] {
    color: var(--text-muted);
    line-height: 1.55;
    margin: 0 0 1rem;
    font-size: .95rem;
}

.modal-contact[b-w7grk7hmnk] {
    font-weight: 600;
    color: var(--ink-2);
    margin: 0 0 1.5rem;
    font-size: .9rem;
}

.modal-actions[b-w7grk7hmnk] {
    display: flex;
    gap: .6rem;
    justify-content: center;
    flex-wrap: wrap;
}

@keyframes fade-in-b-w7grk7hmnk {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes pop-in-b-w7grk7hmnk {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* --- Preview thumbnail: clickable, with a hover "expand" overlay --- */
.preview-thumb[b-w7grk7hmnk] {
    position: relative;
    display: block;
    width: 80px;
    height: 60px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    cursor: zoom-in;
    overflow: hidden;
}

.preview-thumb .preview-img[b-w7grk7hmnk] {
    width: 100%;
    height: 100%;
}

.preview-zoom[b-w7grk7hmnk] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(18, 34, 47, .45);
    color: #fff;
    opacity: 0;
    transition: opacity .12s ease;
    pointer-events: none;
}

.preview-zoom svg[b-w7grk7hmnk] {
    width: 20px;
    height: 20px;
}

.preview-thumb:hover .preview-zoom[b-w7grk7hmnk],
.preview-thumb:focus-visible .preview-zoom[b-w7grk7hmnk] {
    opacity: 1;
}

/* --- Enlarged preview lightbox --- */
.preview-lightbox[b-w7grk7hmnk] {
    position: fixed;
    inset: 0;
    background: rgba(18, 34, 47, .72);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    z-index: 1100;
    animation: fade-in-b-w7grk7hmnk .12s ease;
    cursor: zoom-out;
}

.preview-lightbox-inner[b-w7grk7hmnk] {
    position: relative;
    max-width: min(92vw, 900px);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    cursor: default;
}

.preview-lightbox-img[b-w7grk7hmnk] {
    max-width: 100%;
    max-height: 82vh;
    object-fit: contain;
    background: #f5f7f9;
    border-radius: 8px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .4);
}

.preview-lightbox-caption[b-w7grk7hmnk] {
    color: #fff;
    font-size: .9rem;
    text-align: center;
    max-width: 100%;
    word-break: break-all;
}

.preview-lightbox-close[b-w7grk7hmnk] {
    position: absolute;
    top: -14px;
    right: -14px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: #122; 
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
    z-index: 2;
}

.preview-lightbox-close svg[b-w7grk7hmnk] {
    width: 18px;
    height: 18px;
}

/* Interactive 3D viewer modal (iframe hosting /viewer/index.html). */
.viewer-lightbox[b-w7grk7hmnk] {
    position: fixed;
    inset: 0;
    background: rgba(18, 34, 47, .82);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    z-index: 1100;
    animation: fade-in-b-w7grk7hmnk .12s ease;
    cursor: zoom-out;
}

.viewer-lightbox-inner[b-w7grk7hmnk] {
    position: relative;
    width: min(96vw, 1500px);
    height: 88vh;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .6rem;
    cursor: default;
}

.viewer-lightbox-frame[b-w7grk7hmnk] {
    flex: 1 1 auto;
    width: 100%;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 8px;
    /* Matches the viewer's "bg" param (near-white) so there's no flash before it loads. */
    background: #FDFCFE;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .45);
    display: block;
}

/* Loading state shown in the viewer shell while the 3D model URL is being resolved
   (a CAD session is opened lazily on the backend, which can take a few seconds). */
.viewer-loading[b-w7grk7hmnk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    color: #5b6470;
    font-size: .95rem;
}

/* Toast / snackbar — fixed bottom-center, click to dismiss. */
.snackbar[b-w7grk7hmnk] {
    position: fixed;
    left: 50%;
    bottom: 1.5rem;
    transform: translateX(-50%);
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: .6rem;
    max-width: min(92vw, 560px);
    padding: .85rem 1.1rem;
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .25);
    cursor: pointer;
    animation: snackbar-in-b-w7grk7hmnk .2s ease-out;
}

.snackbar-error[b-w7grk7hmnk] {
    background: #b42318;
    color: #fff;
    border: 1px solid #962014;
}

.snackbar-icon[b-w7grk7hmnk] {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
}

.snackbar-text[b-w7grk7hmnk] {
    font-size: .92rem;
    line-height: 1.35;
}

@keyframes snackbar-in-b-w7grk7hmnk {
    from { opacity: 0; transform: translate(-50%, 12px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}
/* /Components/Pages/TeklaRepair.razor.rz.scp.css */
.bend-fieldset[b-4p50imrvud] {
    border: none;
    margin: 0;
    padding: 0;
}

.bend-legend[b-4p50imrvud] {
    padding: 0;
    font-size: .82rem;
    font-weight: 600;
    color: var(--ink-2);
    margin-bottom: .85rem;
}

.bend-options[b-4p50imrvud] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: .65rem;
}

.bend-option[b-4p50imrvud] {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .7rem .85rem;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease, box-shadow .12s ease;
}

.bend-option:hover[b-4p50imrvud] {
    border-color: var(--brand);
}

.bend-option.selected[b-4p50imrvud] {
    border-color: var(--brand);
    background: #eef5f9;
    box-shadow: inset 0 0 0 1px var(--brand);
}

.bend-option.disabled[b-4p50imrvud] {
    cursor: not-allowed;
    opacity: .5;
    background: #f6f8fa;
}

.bend-option.disabled:hover[b-4p50imrvud] {
    border-color: var(--border-strong);
}

.bend-option input[b-4p50imrvud] {
    width: 16px;
    height: 16px;
    accent-color: var(--brand);
    flex: none;
    cursor: inherit;
}

.bend-thumb[b-4p50imrvud] {
    width: 64px;
    height: 32px;
    flex: none;
    background: transparent;
    object-fit: contain;
}

.bend-text[b-4p50imrvud] {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}

.bend-name[b-4p50imrvud] {
    font-weight: 600;
    color: var(--ink);
    font-size: .9rem;
}

.bend-desc[b-4p50imrvud] {
    font-size: .78rem;
    color: var(--text-muted);
    line-height: 1.35;
}

.bend-note[b-4p50imrvud] {
    margin: 1rem 0 0;
    font-size: .78rem;
    color: var(--text-muted);
}