/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-fcn3ixdlep],
.components-reconnect-repeated-attempt-visible[b-fcn3ixdlep],
.components-reconnect-failed-visible[b-fcn3ixdlep],
.components-pause-visible[b-fcn3ixdlep],
.components-resume-failed-visible[b-fcn3ixdlep],
.components-rejoining-animation[b-fcn3ixdlep] {
    display: none;
}

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


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

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

@keyframes components-rejoining-animation-b-fcn3ixdlep {
    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/Modals/CategoryDetailsModal.razor.rz.scp.css */
.class-section[b-su6aergri5] {
    transition: all 0.2s ease;
}

.class-header[b-su6aergri5] {
    cursor: pointer;
    transition: background-color 0.2s;
}

    .class-header:hover[b-su6aergri5] {
        background-color: #e9ecef !important;
    }

.expand-icon[b-su6aergri5] {
    font-size: 0.8rem;
    color: #6c757d;
    display: inline-block;
    width: 12px;
    transition: transform 0.2s;
}

.label-details[b-su6aergri5] {
    animation: slideDown-b-su6aergri5 0.2s ease-out;
}

.progress-sm[b-su6aergri5] {
    height: 12px;
    background-color: #e9ecef;
}

.progress-class[b-su6aergri5] {
    width: 150px;
}

.progress-label[b-su6aergri5] {
    max-width: 250px;
}

.progress-sm[b-su6aergri5],
.progress-class[b-su6aergri5],
.progress-label[b-su6aergri5] {
    direction: rtl;
}

.progress-sm .progress-bar[b-su6aergri5],
.progress-class .progress-bar[b-su6aergri5],
.progress-label .progress-bar[b-su6aergri5] {
    float: left;
    direction: ltr;
}

.prob-value[b-su6aergri5] {
    min-width: 50px;
}

.confidence-low[b-su6aergri5] {
    color: #dc3545 !important;
    font-weight: 600;
}

.confidence-medium[b-su6aergri5] {
    color: #fd7e14 !important;
    font-weight: 600;
}

.confidence-moderate[b-su6aergri5] {
    color: #ffc107 !important;
    font-weight: 600;
}

@keyframes slideDown-b-su6aergri5 {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* /Components/Modals/ClassificationComparisonModal.razor.rz.scp.css */
/* Modal z-index */
.modal-details[b-et9wwxszbi] {
    z-index: 1055;
}

/* Layout */
.details-modal-header-section[b-et9wwxszbi] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #dee2e6;
}

.details-modal-image[b-et9wwxszbi] {
    flex-shrink: 0;
}

.details-modal-info[b-et9wwxszbi] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.details-modal-comparison[b-et9wwxszbi] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.details-modal-column h6[b-et9wwxszbi] {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #6c757d;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #dee2e6;
}

.details-modal-column-current h6[b-et9wwxszbi] {
    color: #495057;
    border-bottom-color: #adb5bd;
}

.details-modal-column-proposed h6[b-et9wwxszbi] {
    color: #0d6efd;
    border-bottom-color: #0d6efd;
}

/* Class sections */
.class-section[b-et9wwxszbi] {
    margin-bottom: 0.75rem;
}

.class-header[b-et9wwxszbi] {
    cursor: pointer;
    user-select: none;
}

.expand-icon[b-et9wwxszbi] {
    font-size: 0.75rem;
    width: 1rem;
    display: inline-block;
}

.label-details[b-et9wwxszbi] {
    animation: slideDown-b-et9wwxszbi 0.2s ease-out;
}

@keyframes slideDown-b-et9wwxszbi {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Progress bars */
.progress-sm[b-et9wwxszbi] {
    height: 0.5rem;
    background-color: #e9ecef;
}

.progress-class[b-et9wwxszbi] {
    width: 120px;
    height: 8px;
}

.progress-label[b-et9wwxszbi] {
    height: 6px;
}

.progress-class[b-et9wwxszbi],
.progress-label[b-et9wwxszbi] {
    direction: rtl;
}

.progress-class .progress-bar[b-et9wwxszbi],
.progress-label .progress-bar[b-et9wwxszbi] {
    float: left;
    direction: ltr;
}

.prob-value[b-et9wwxszbi] {
    min-width: 3.5rem;
}

.confidence-low[b-et9wwxszbi] {
    color: #dc3545;
}

.confidence-medium[b-et9wwxszbi] {
    color: #fd7e14;
}

.confidence-moderate[b-et9wwxszbi] {
    color: #ffc107;
}
/* /Components/Modals/ExpectedClassesModal.razor.rz.scp.css */
/* The dialog is sized so that image and controls always fit without scrolling - the point of the
   layout is that a decision takes one look and one click, not a scroll. */
.expected-modal[b-52787q71gc] {
    max-width: min(1400px, 96vw);
}

.expected-modal-body[b-52787q71gc] {
    padding: .75rem;
    /* Only ever needed on a very short viewport, where the controls column outgrows the image
       stage - the layout is sized so that normally nothing scrolls. */
    overflow-y: auto;
    max-height: calc(100vh - 160px);
}

.expected-modal-grid[b-52787q71gc] {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr);
    gap: 1rem;
    align-items: start;
}

.expected-modal-image[b-52787q71gc] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(100vh - 250px);
    min-height: 260px;
    max-height: 70vh;
    min-width: 0;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 6px;
}

.expected-modal-controls[b-52787q71gc] {
    min-width: 0;
}

@media (max-width: 991.98px) {
    .expected-modal-grid[b-52787q71gc] {
        grid-template-columns: 1fr;
    }

    .expected-modal-image[b-52787q71gc] {
        height: 34vh;
    }
}
/* /Components/Modals/ImageDetectionsModal.razor.rz.scp.css */
/* Nearly the whole window: the modal exists to make the picture big, and the boxes on it are only
   worth anything if what they sit on is readable. */
.detect-dialog[b-ioybcp683i] {
    max-width: min(1700px, 96vw);
    width: 100%;
}

/* Leaves the dialog's own 1.75rem margins - anything taller makes the modal container scroll. */
.detect-content[b-ioybcp683i] {
    height: calc(100vh - 4rem);
}

.detect-head[b-ioybcp683i] {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
}

.detect-summary[b-ioybcp683i] {
    max-width: 100%;
}

/* The row is declared rather than left implicit, and that is not cosmetic: wwwroot/js/detectionOverlay.js
   measures the stage to size the frame onto it, so the stage's height must come from the modal and
   never from what is inside it. With an auto row the two would define each other - the frame takes
   the stage's height, the stage takes the frame's - and every measurement would hand the script a
   bigger figure than the last, which is what made the image creep larger frame after frame. */
.detect-body[b-ioybcp683i] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 19rem;
    grid-template-rows: minmax(0, 1fr);
    gap: .75rem;
    min-height: 0;
    overflow: hidden;
}

.detect-stage[b-ioybcp683i] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 0;
    height: 100%;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: .35rem;
}

.detect-side[b-ioybcp683i] {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    min-height: 0;
    overflow-y: auto;
}

.detect-toggles[b-ioybcp683i] {
    display: flex;
    align-items: center;
    gap: .9rem;
    flex-wrap: wrap;
    padding-bottom: .35rem;
    border-bottom: 1px solid #e9ecef;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 2;
}

.detect-section-title[b-ioybcp683i] {
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #6c757d;
    margin-top: .35rem;
}

.detect-table td[b-ioybcp683i] {
    padding: .2rem .35rem;
    vertical-align: middle;
    cursor: pointer;
}

.detect-cell-index[b-ioybcp683i] {
    width: 2.2rem;
}

.detect-cell-conf[b-ioybcp683i] {
    width: 45%;
}

.detect-swatch[b-ioybcp683i] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    vertical-align: middle;
    margin-right: 4px;
}

/* Under a tile's width the side panel would squeeze the image rather than complement it, so it
   moves below and the whole body scrolls instead. */
@media (max-width: 991.98px) {
    .detect-body[b-ioybcp683i] {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto;
        overflow-y: auto;
    }

    /* Still a length rather than a share of the row, for the reason above. */
    .detect-stage[b-ioybcp683i] {
        height: 55vh;
    }

    .detect-side[b-ioybcp683i] {
        overflow: visible;
    }
}
/* /Components/Modals/ImageViewerModal.razor.rz.scp.css */
/* Higher z-index for image modal (can appear over other modals) */
.modal-image-backdrop[b-xwwblml9oe] {
    z-index: 1070;
}

.modal-image[b-xwwblml9oe] {
    z-index: 1071;
    overflow: hidden;
}
/* /Components/Modals/SimilarImagesModal.razor.rz.scp.css */
.thumbnail[b-s4oxqkbfgd] {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #dee2e6;
    cursor: pointer;
}

.similar-preview[b-s4oxqkbfgd] {
    max-width: 150px;
    max-height: 150px;
    object-fit: contain;
    cursor: pointer;
}

.progress-md[b-s4oxqkbfgd] {
    height: 20px;
    background-color: #e9ecef;
}

.progress-similarity[b-s4oxqkbfgd] {
    max-width: 150px;
}

.progress-md[b-s4oxqkbfgd] {
    direction: rtl;
}

.progress-md .progress-bar[b-s4oxqkbfgd] {
    float: left;
    direction: ltr;
}
/* /Components/Modals/VariantDetailsModal.razor.rz.scp.css */
.variant-detail-table th[b-vrc8s6tg3n],
.variant-detail-table td[b-vrc8s6tg3n] {
    vertical-align: middle;
}

.variant-detail-table .cell-deviation[b-vrc8s6tg3n] {
    background-color: rgba(220, 53, 69, 0.12);
    font-weight: 600;
}

.variant-detail-table .best-label[b-vrc8s6tg3n] {
    font-size: 0.78em;
    line-height: 1.2;
    margin-top: 0.15rem;
    max-width: 16rem;
}

.variant-detail-table .best-label .bi[b-vrc8s6tg3n] {
    opacity: 0.7;
}
/* /Components/Pages/CategoryLabelEditor.razor.rz.scp.css */
.editor-container[b-7j1laajyaj] {
    display: flex;
    gap: 1.5rem;
    min-height: calc(100vh - 200px);
}

.main-content[b-7j1laajyaj] {
    flex: 1;
    min-width: 0;
}

.sidebar[b-7j1laajyaj] {
    width: 200px;
    flex-shrink: 0;
}

.sidebar-sticky[b-7j1laajyaj] {
    position: sticky;
    top: 1rem;
}

.stat-card[b-7j1laajyaj] {
    border-radius: 0.5rem;
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.stat-value[b-7j1laajyaj] {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 0.5rem;
}

.stat-label[b-7j1laajyaj] {
    font-size: 0.875rem;
    color: #6c757d;
    margin: 0;
}

.stat-diff[b-7j1laajyaj] {
    font-size: 1.25rem;
    font-weight: 600;
    margin-top: 0.5rem;
}

.mismatch-card[b-7j1laajyaj] {
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    padding: 0.75rem;
    margin-bottom: 0.75rem;
    transition: box-shadow 0.2s;
}

.mismatch-card:hover[b-7j1laajyaj] {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.mismatch-image[b-7j1laajyaj] {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 0.25rem;
    margin-bottom: 0.5rem;
    cursor: pointer;
}

.mismatch-label[b-7j1laajyaj] {
    font-size: 0.75rem;
    padding: 0.125rem 0.375rem;
    margin-right: 0.25rem;
    margin-bottom: 0.25rem;
    display: inline-block;
}

.class-card[b-7j1laajyaj] {
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    padding: 1.25rem;
    margin-bottom: 1.25rem;
    background: #fff;
}

.class-header[b-7j1laajyaj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.class-title-row[b-7j1laajyaj] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
}

.class-name[b-7j1laajyaj] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
}

.class-stats[b-7j1laajyaj] {
    font-size: 0.875rem;
    color: #6c757d;
    margin: 0;
}

.class-match-badge[b-7j1laajyaj] {
    padding: 0.25rem 0.625rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    font-weight: 600;
}

.class-content[b-7j1laajyaj] {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-auto-columns: 115px;
    grid-auto-flow: column;
    gap: 1rem;
}

.labels-editor[b-7j1laajyaj] {
    min-width: 160px;
    display: flex;
    flex-direction: column;
}

.labels-textarea[b-7j1laajyaj] {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.875rem;
    resize: vertical;
    flex: 1;
    min-height: 150px;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    padding: 0.5rem;
}

.labels-textarea:focus[b-7j1laajyaj] {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.labels-stats[b-7j1laajyaj] {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.label-stats-table[b-7j1laajyaj] {
    width: 100%;
    font-size: 0.8rem;
    border-collapse: collapse;
}

.label-stats-table td[b-7j1laajyaj] {
    padding: 0.15rem 0.375rem;
    vertical-align: middle;
}

.label-stat-text[b-7j1laajyaj] {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    width: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.label-stat-progress[b-7j1laajyaj] {
    width: 100%;
    padding: 0 0.5rem;
}

.label-stat-progress .progress[b-7j1laajyaj] {
    height: 6px;
    background: #e9ecef;
    direction: rtl;
}

.label-stat-progress .progress-bar[b-7j1laajyaj] {
    float: left;
    direction: ltr;
}

.label-stat-value[b-7j1laajyaj] {
    font-weight: 600;
    color: #0d6efd;
    text-align: right;
    white-space: nowrap;
    width: 1%;
}

.mismatch-container[b-7j1laajyaj] {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    margin-bottom: 0.75rem;
    transition: box-shadow 0.2s;
    cursor: pointer;
}

.mismatch-container:hover[b-7j1laajyaj] {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.mismatch-image-wrapper[b-7j1laajyaj] {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
}

.mismatch-image[b-7j1laajyaj] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0.25rem;
}

.mismatch-details[b-7j1laajyaj] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.mismatch-filename[b-7j1laajyaj] {
    font-size: 0.75rem;
    color: #6c757d;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mismatch-classes[b-7j1laajyaj] {
    font-size: 0.875rem;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.mismatch-class-row[b-7j1laajyaj] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.mismatch-class-predicted[b-7j1laajyaj] {
    color: #dc3545;
    font-weight: 600;
}

.mismatch-class-expected[b-7j1laajyaj] {
    color: #6c757d;
}

.mismatch-labels-table[b-7j1laajyaj] {
    width: 100%;
    font-size: 0.75rem;
    border-collapse: collapse;
    table-layout: fixed;
}

.mismatch-labels-table td[b-7j1laajyaj] {
    padding: 0.125rem 0.25rem;
    vertical-align: middle;
}

.mismatch-label-text[b-7j1laajyaj] {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 65%;
}

.mismatch-label-progress[b-7j1laajyaj] {
    width: 25%;
    padding: 0 0.25rem;
}

.mismatch-label-progress .progress[b-7j1laajyaj] {
    height: 4px;
    direction: rtl;
}

.mismatch-label-progress .progress-bar[b-7j1laajyaj] {
    float: left;
    direction: ltr;
}

.mismatch-label-value[b-7j1laajyaj] {
    text-align: right;
    white-space: nowrap;
    font-weight: 600;
    color: #6c757d;
    width: 10%;
    font-size: 0.7rem;
}

.breadcrumb[b-7j1laajyaj] {
    background: transparent;
    padding: 0;
    margin-bottom: 0.75rem;
}

.page-header[b-7j1laajyaj] {
    margin-bottom: 1.25rem;
}

.page-header h1[b-7j1laajyaj] {
    font-size: 1.75rem;
    margin-bottom: 0.25rem;
}

.page-header p[b-7j1laajyaj] {
    color: #6c757d;
    margin: 0;
}

@media (max-width: 1200px) {
    .editor-container[b-7j1laajyaj] {
        flex-direction: column;
    }

    .sidebar[b-7j1laajyaj] {
        width: 100%;
    }

    .sidebar-sticky[b-7j1laajyaj] {
        position: static;
    }

    .class-content[b-7j1laajyaj] {
        grid-template-columns: 1fr;
        grid-auto-flow: row;
        grid-auto-columns: initial;
    }

    .class-mismatch-section[b-7j1laajyaj] {
        contain: none;
        max-height: 200px;
    }
}

/* Bidirectional Label Bar Styles */
.label-stat-bidirectional[b-7j1laajyaj] {
    width: 100%;
    padding: 0 0.5rem;
}

.bidirectional-bar-container[b-7j1laajyaj] {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 18px;
    background: #f8f9fa;
    border-radius: 3px;
    overflow: hidden;
}

.bar-left[b-7j1laajyaj] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.bar-center[b-7j1laajyaj] {
    width: 2px;
    height: 18px;
    background: #6c757d;
    flex-shrink: 0;
}

.bar-right[b-7j1laajyaj] {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.bar-segment[b-7j1laajyaj] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 18px;
    transition: width 0.3s ease;
    position: relative;
    flex-shrink: 0;
}

.bar-left .bar-segment[b-7j1laajyaj] {
    /* Linke Balken: Gradient von rechts (hell) nach links (dunkel) */
}

.bar-expected[b-7j1laajyaj] {
    background: linear-gradient(270deg, rgba(25, 135, 84, 0.8) 0%, rgba(25, 135, 84, 1) 100%);
}

.bar-right .bar-expected[b-7j1laajyaj] {
    background: linear-gradient(90deg, rgba(25, 135, 84, 1) 0%, rgba(25, 135, 84, 0.8) 100%);
}

.bar-unclassified[b-7j1laajyaj] {
    background: linear-gradient(270deg, rgba(108, 117, 125, 0.5) 0%, rgba(108, 117, 125, 0.7) 100%);
}

.bar-unexpected[b-7j1laajyaj] {
    background: linear-gradient(90deg, rgba(220, 53, 69, 1) 0%, rgba(220, 53, 69, 0.8) 100%);
}

.bar-value[b-7j1laajyaj] {
    font-size: 0.625rem;
    font-weight: 600;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    white-space: nowrap;
    padding: 0 3px;
}

.bar-empty[b-7j1laajyaj] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 18px;
}

.legend-box[b-7j1laajyaj] {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 2px;
    margin-right: 4px;
    vertical-align: middle;
}

/* Per-class mismatch images */
.class-mismatch-section[b-7j1laajyaj] {
    min-height: 150px;
    contain: size;
    display: flex;
    flex-direction: column;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    background: #f8f9fa;
    overflow: hidden;
}

.class-mismatch-header[b-7j1laajyaj] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.375rem;
    font-size: 0.675rem;
    font-weight: 600;
    color: #495057;
    border-bottom: 1px solid #dee2e6;
    background: #fff;
    border-radius: 0.375rem 0.375rem 0 0;
    white-space: nowrap;
}

.class-mismatch-header i[b-7j1laajyaj] {
    font-size: 0.625rem;
}

.class-mismatch-scroll[b-7j1laajyaj] {
    flex: 1;
    overflow-y: auto;
    padding: 0.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-height: 0;
}

.class-mismatch-thumb[b-7j1laajyaj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    border-radius: 0.25rem;
    transition: background 0.15s;
    padding: 2px;
}

.class-mismatch-thumb:hover[b-7j1laajyaj] {
    background: #e9ecef;
}

.class-mismatch-thumb img[b-7j1laajyaj] {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 0.25rem;
    border: 1px solid #dee2e6;
}

.class-mismatch-label[b-7j1laajyaj] {
    font-size: 0.575rem;
    color: #6c757d;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 98px;
    line-height: 1.2;
    margin-top: 1px;
}

/* /Components/Pages/ClusterAnalysis.razor.rz.scp.css */
/* ── Page chrome ─────────────────────────────────────────────── */
.breadcrumb[b-yq4dassnwn] {
    background: transparent;
    padding: 0;
    margin-bottom: 0.75rem;
}

.page-header[b-yq4dassnwn] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.page-header h1[b-yq4dassnwn] {
    font-size: 1.75rem;
    margin-bottom: 0.25rem;
}

.page-header small[b-yq4dassnwn] {
    font-size: 1rem;
}

/* ── Two-column layout ───────────────────────────────────────── */
.cluster-layout[b-yq4dassnwn] {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

.cluster-main[b-yq4dassnwn] {
    flex: 1;
    min-width: 0;
}

.label-sidebar[b-yq4dassnwn] {
    width: clamp(240px, 22%, 360px);
    flex-shrink: 0;
}

.label-sidebar-sticky[b-yq4dassnwn] {
    position: sticky;
    top: 1rem;
}

.label-textarea[b-yq4dassnwn] {
    width: 100%;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.775rem;
    resize: vertical;
    min-height: 280px;
    max-height: calc(100vh - 300px);
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    padding: 0.5rem;
    display: block;
}

.label-textarea:focus[b-yq4dassnwn] {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.sidebar-legend[b-yq4dassnwn] {
    font-size: 0.75rem;
}

.legend-row[b-yq4dassnwn] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0.2rem;
}

.legend-dot[b-yq4dassnwn] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex-shrink: 0;
}

.dot-good[b-yq4dassnwn]     { background: #198754; }
.dot-moderate[b-yq4dassnwn] { background: #ffc107; }
.dot-far[b-yq4dassnwn]      { background: #dc3545; }

/* ── Class sections ──────────────────────────────────────────── */
.class-section[b-yq4dassnwn] {
    margin-bottom: 1.75rem;
}

.class-section-header[b-yq4dassnwn] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid #dee2e6;
}

/* ── Cluster card ────────────────────────────────────────────── */
.cluster-card[b-yq4dassnwn] {
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    padding: 0.6rem 0.75rem;
    margin-bottom: 0.625rem;
    background: #fff;
}

/* Size bar row */
.size-bar-row[b-yq4dassnwn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.cluster-id-badge[b-yq4dassnwn] {
    font-size: 0.68rem;
    font-weight: 700;
    color: #495057;
    background: #e9ecef;
    border-radius: 0.25rem;
    padding: 0.1rem 0.375rem;
    flex-shrink: 0;
    font-family: 'Consolas', monospace;
    min-width: 2.4rem;
    text-align: center;
}

.size-bar-track[b-yq4dassnwn] {
    flex: 1;
    height: 7px;
    background: #e9ecef;
    border-radius: 3px;
    overflow: hidden;
}

.size-bar-fill[b-yq4dassnwn] {
    height: 100%;
    background: linear-gradient(90deg, #0d6efd, #6ea8fe);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.size-bar-label[b-yq4dassnwn] {
    font-size: 0.68rem;
    font-weight: 600;
    color: #6c757d;
    flex-shrink: 0;
    min-width: 2rem;
    text-align: right;
}

/* Cluster body grid */
.cluster-body[b-yq4dassnwn] {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 0.75rem;
    align-items: start;
}

/* Left: metrics */
.cluster-metrics[b-yq4dassnwn] {
    display: flex;
    flex-direction: column;
}

.metric-block[b-yq4dassnwn] {
    display: flex;
    flex-direction: column;
}

.metric-title[b-yq4dassnwn] {
    font-size: 0.58rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6c757d;
    margin-bottom: 0.05rem;
}

.metric-big[b-yq4dassnwn] {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
}

.metric-small[b-yq4dassnwn] {
    font-size: 0.75rem;
    font-weight: 600;
}

.metric-sub[b-yq4dassnwn] {
    font-size: 0.68rem;
    color: #6c757d;
    margin-top: 0.1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.separation-good[b-yq4dassnwn]     { color: #198754; }
.separation-moderate[b-yq4dassnwn] { color: #c07800; }
.separation-poor[b-yq4dassnwn]     { color: #dc3545; }

/* Right column */
.cluster-right[b-yq4dassnwn] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

/* Scrollable thumbnail strip showing all images */
.cluster-thumbs-scroll[b-yq4dassnwn] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    overflow-x: auto;
    scrollbar-width: thin;
    padding-bottom: 0.2rem;
}

.cluster-thumb[b-yq4dassnwn] {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    cursor: pointer;
    border-radius: 0.25rem;
    overflow: hidden;
    border: 1px solid #dee2e6;
    transition: opacity 0.15s;
    position: relative;
}

.cluster-thumb:hover[b-yq4dassnwn] {
    opacity: 0.8;
}

.cluster-thumb img[b-yq4dassnwn] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.copy-btn[b-yq4dassnwn] {
    font-size: 0.8rem;
    padding: 0.25rem 0.65rem;
    line-height: 1.4;
    flex-shrink: 0;
    white-space: nowrap;
}

/* Labels toggle header */
.labels-toggle-header[b-yq4dassnwn] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    cursor: pointer;
    padding-bottom: 0.15rem;
    user-select: none;
}

.labels-toggle-header:hover[b-yq4dassnwn] {
    opacity: 0.75;
}

/* Bar color classes (shared by score bars) */
.bar-good[b-yq4dassnwn]     { background: #198754; }
.bar-moderate[b-yq4dassnwn] { background: #ffc107; }
.bar-far[b-yq4dassnwn]      { background: #dc3545; }

/* ── Singletons ──────────────────────────────────────────────── */
.singleton-size-fill[b-yq4dassnwn] {
    background: linear-gradient(90deg, #fd7e14, #ffa94d);
}

.cluster-card-singleton[b-yq4dassnwn] {
    border-color: #ffe082;
    background: #fffdf5;
}

.singleton-description[b-yq4dassnwn] {
    font-size: 0.72rem;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Boundary image highlighting ─────────────────────────────── */
.cluster-thumb-boundary[b-yq4dassnwn] {
    border: 2px solid #dc3545 !important;
    position: relative;
    overflow: visible;
}

.boundary-badge[b-yq4dassnwn] {
    position: absolute;
    top: 1px;
    right: 1px;
    width: 14px;
    height: 14px;
    background: #dc3545;
    color: #fff;
    font-size: 0.55rem;
    font-weight: 700;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    pointer-events: none;
}

/* ── Label scores section ────────────────────────────────────── */
.label-scores-section[b-yq4dassnwn] {
    border-top: 1px solid #f0f0f0;
    padding-top: 0.3rem;
    display: flex;
    flex-direction: column;
    gap: 0.175rem;
}

.eval-results-section[b-yq4dassnwn] {
    border-top: 1px dashed #bee5eb;
    background: #f8fdff;
    padding: 0.3rem 0.25rem;
    border-radius: 0.25rem;
    margin-top: 0.2rem;
}

.label-score-row[b-yq4dassnwn] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.775rem;
}

.label-score-bar-track[b-yq4dassnwn] {
    width: 50px;
    height: 7px;
    background: #e9ecef;
    border-radius: 3px;
    overflow: hidden;
    flex-shrink: 0;
}

.label-score-bar[b-yq4dassnwn] {
    height: 100%;
    border-radius: 3px;
    transition: width 0.25s ease;
}

.label-score-value[b-yq4dassnwn] {
    width: 30px;
    font-size: 0.68rem;
    font-weight: 700;
    text-align: right;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.label-score-text[b-yq4dassnwn] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.72rem;
}

.label-score-foreign[b-yq4dassnwn] {
    opacity: 0.45;
}

/* ── Score breakdown row ─────────────────────────────────────── */
.score-breakdown-row[b-yq4dassnwn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-left: 55px;
    margin-bottom: 0.15rem;
}

.breakdown-item[b-yq4dassnwn] {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    font-size: 0.62rem;
    font-variant-numeric: tabular-nums;
}

.breakdown-label[b-yq4dassnwn] {
    color: #6c757d;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.breakdown-value[b-yq4dassnwn] {
    font-weight: 700;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .cluster-layout[b-yq4dassnwn] {
        flex-direction: column;
    }

    .label-sidebar[b-yq4dassnwn] {
        width: 100%;
        order: -1;
    }

    .label-sidebar-sticky[b-yq4dassnwn] {
        position: static;
    }

    .label-textarea[b-yq4dassnwn] {
        min-height: 100px;
        max-height: 160px;
    }
}

@media (max-width: 600px) {
    .cluster-body[b-yq4dassnwn] {
        grid-template-columns: 1fr;
    }

    .cluster-metrics[b-yq4dassnwn] {
        flex-direction: row;
        gap: 1.5rem;
    }

    .metric-big[b-yq4dassnwn] {
        font-size: 1.2rem;
    }
}
/* /Components/Pages/CompressionRobustness.razor.rz.scp.css */
.breadcrumb[b-1qbjur0wes] {
    background: transparent;
    padding: 0;
    margin-bottom: 0.75rem;
}

.page-header[b-1qbjur0wes] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.page-header h1[b-1qbjur0wes] {
    font-size: 1.75rem;
    margin-bottom: 0.25rem;
}

.page-header small[b-1qbjur0wes] {
    font-size: 1rem;
}

.stat-card .card-body[b-1qbjur0wes] {
    padding: 0.75rem 1rem;
}

.font-monospace[b-1qbjur0wes] {
    font-size: 0.85rem;
}
/* /Components/Pages/Home.razor.rz.scp.css */
.home-page-root[b-tkusaiwy2y] {
    height: calc(100vh - 72px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.home-card[b-tkusaiwy2y] {
    flex: 1;
    min-height: 0;
}

.home-card-body[b-tkusaiwy2y] {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* /Components/Pages/HomePartials/ImageTable.razor.rz.scp.css */
.sortable[b-gd3c9v6fnn] {
    cursor: pointer;
    user-select: none;
}

    .sortable:hover[b-gd3c9v6fnn] {
        background-color: #e9ecef;
    }

.sticky-top[b-gd3c9v6fnn] {
    position: sticky;
    top: 0;
    z-index: 1020;
}

.table-scroll-container[b-gd3c9v6fnn] {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.table-scroll-container table[b-gd3c9v6fnn] {
    table-layout: fixed;
}

.filter-row td[b-gd3c9v6fnn] {
    padding: 4px 6px !important;
    background-color: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
}

.filter-select[b-gd3c9v6fnn] {
    font-size: 0.78rem !important;
    padding: 1px 20px 1px 6px !important;
    min-width: 90px;
    height: 28px !important;
    background-position: right 4px center !important;
    background-size: 12px !important;
}

.filter-bar[b-gd3c9v6fnn] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.table-pager[b-gd3c9v6fnn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-shrink: 0;
    padding-top: .4rem;
    border-top: 1px solid #dee2e6;
}

.filter-chip[b-gd3c9v6fnn] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background-color: #e7f1ff;
    color: #0d6efd;
    border-radius: 12px;
    font-size: 0.78rem;
    font-weight: 500;
}
/* /Components/Pages/HomePartials/ImageTableRow.razor.rz.scp.css */
.thumbnail[b-h815s8y8ak] {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #dee2e6;
    cursor: pointer;
}

.similarity-cell[b-h815s8y8ak] {
    cursor: pointer;
    transition: background-color 0.2s;
}

    .similarity-cell:hover[b-h815s8y8ak] {
        background-color: #f8f9fa;
    }

.category-cell[b-h815s8y8ak] {
    cursor: pointer;
    transition: background-color 0.2s;
}

    .category-cell:hover[b-h815s8y8ak] {
        background-color: #f8f9fa;
    }

.category-display[b-h815s8y8ak] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.class-name[b-h815s8y8ak] {
    font-weight: 500;
    font-size: 0.9rem;
}

.probability[b-h815s8y8ak] {
    font-size: 0.8rem;
    color: #6c757d;
}

.mismatch-too-permissive[b-h815s8y8ak] {
    border-left: 3px solid #fd7e14;
    background-color: rgba(253, 126, 20, 0.07);
}

.confidence-low[b-h815s8y8ak] {
    color: #dc3545 !important;
    font-weight: 600;
}

.confidence-medium[b-h815s8y8ak] {
    color: #fd7e14 !important;
    font-weight: 600;
}

.confidence-moderate[b-h815s8y8ak] {
    color: #ffc107 !important;
    font-weight: 600;
}
/* /Components/Pages/HomePartials/UploadStatusAlert.razor.rz.scp.css */
.thumbnail[b-2ftxnmnyds] {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #dee2e6;
    cursor: pointer;
}
/* /Components/Pages/ImageVariants.razor.rz.scp.css */
.stat-card .card-body[b-7aigt1uh8g] {
    padding: 0.85rem 1rem;
}
/* /Components/Pages/LabelOptimizer.razor.rz.scp.css */
.page-header[b-0ryef7qd16] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.chip[b-0ryef7qd16] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: #eef1f5;
    border: 1px solid #d6dde3;
    border-radius: 1rem;
    padding: 0.1rem 0.55rem;
    font-size: 0.8rem;
    line-height: 1.4;
    color: #333;
}

.chip-sm[b-0ryef7qd16] {
    margin: 0.1rem 0.2rem 0.1rem 0;
}

.chip-live[b-0ryef7qd16] {
    background: #e7f1ff;
    border-color: #b6d4fe;
}

.chip-added[b-0ryef7qd16] {
    background: #d1e7dd;
    border-color: #a3cfbb;
    font-weight: 600;
}

/* Counterpart of .chip-added on the "Current" side: a live label the recommendation drops.
   The strike-through sits on .chip-text only so the generality badge stays readable. */
.chip-removed[b-0ryef7qd16] {
    background: #f8d7da;
    border-color: #f1aeb5;
    color: #842029;
}

.chip-removed .chip-text[b-0ryef7qd16] {
    text-decoration: line-through;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(132, 32, 41, 0.65);
}

/* Variant a recommended label set still gets wrong — same red family as .chip-removed, but the text is
   a variant name, not a struck-out label. */
.chip-fail[b-0ryef7qd16] {
    background: #fdecee;
    border-color: #f1aeb5;
    color: #842029;
}

/* Long per-image lists stay inside their card instead of stretching the page. */
.table-scroll[b-0ryef7qd16] {
    max-height: 24rem;
    overflow-y: auto;
}

/* Legend row under the diff tables. */
.diff-legend[b-0ryef7qd16] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 1.25rem;
    font-size: 0.78rem;
    color: #6c757d;
}

.diff-legend > span[b-0ryef7qd16] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.chip-x[b-0ryef7qd16] {
    border: none;
    background: transparent;
    color: #888;
    font-size: 1rem;
    line-height: 1;
    padding: 0;
    cursor: pointer;
}

.chip-x:hover[b-0ryef7qd16] {
    color: #dc3545;
}

.chip-x:disabled[b-0ryef7qd16] {
    opacity: 0.4;
    cursor: default;
}

/* Generality badge: a small, click-to-cycle pill on each candidate chip and the bulk "rate all" row. */
.gen-badge[b-0ryef7qd16] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.45rem;
    border-radius: 0.7rem;
    border: 1px solid transparent;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: filter 0.1s ease-in-out;
}

.gen-badge:hover:not(:disabled)[b-0ryef7qd16] {
    filter: brightness(0.95);
}

.gen-badge:disabled[b-0ryef7qd16] {
    opacity: 0.55;
    cursor: default;
}

/* Read-only variant mirrored onto the recommendation result: info only, not clickable. */
.gen-badge.gen-static[b-0ryef7qd16] {
    cursor: default;
}

.gen-badge.gen-static:hover[b-0ryef7qd16] {
    filter: none;
}

.gen-broad[b-0ryef7qd16] {
    background: #d1e7dd;
    border-color: #a3cfbb;
    color: #0f5132;
}

.gen-moderate[b-0ryef7qd16] {
    background: #fff3cd;
    border-color: #ffe69c;
    color: #664d03;
}

.gen-specific[b-0ryef7qd16] {
    background: #f8d7da;
    border-color: #f1aeb5;
    color: #842029;
}

.gen-unrated[b-0ryef7qd16] {
    background: #e9ecef;
    border-color: #ced4da;
    color: #6c757d;
}

.chip-text[b-0ryef7qd16] {
    overflow-wrap: anywhere;
}

/* Empty marker the post-run auto-scroll targets; the offset keeps a little
   headroom above the result panel so it isn't flush against the viewport top. */
.scroll-anchor[b-0ryef7qd16] {
    position: relative;
    top: -1rem;
    height: 0;
}

/* ── Candidate pool: full-width class panel split into generality columns ──────────────────── */
.cand-class[b-0ryef7qd16] {
    background: #fff;
}

.gen-bucket[b-0ryef7qd16] {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    background: #fff;
    transition: background-color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

/* Active drop target. The class is toggled from LabelOptimizer.razor.js during a drag, so it never
   triggers a server re-render while the pointer moves. */
.gen-bucket.drag-over[b-0ryef7qd16] {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
    background: #f3f8ff;
}

.gen-bucket-head[b-0ryef7qd16] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.55rem;
    border-bottom: 1px solid #e9ecef;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
    font-size: 0.78rem;
    font-weight: 600;
}

.gen-bucket.gen-broad .gen-bucket-head[b-0ryef7qd16] {
    background: #eaf6ef;
    color: #0f5132;
}

.gen-bucket.gen-moderate .gen-bucket-head[b-0ryef7qd16] {
    background: #fff8e1;
    color: #664d03;
}

.gen-bucket.gen-specific .gen-bucket-head[b-0ryef7qd16] {
    background: #fdecee;
    color: #842029;
}

.gen-bucket.gen-unrated .gen-bucket-head[b-0ryef7qd16] {
    background: #f1f3f5;
    color: #6c757d;
}

.gen-bucket-name[b-0ryef7qd16] {
    flex: 1 1 auto;
}

.gen-bucket-count[b-0ryef7qd16] {
    min-width: 1.4rem;
    padding: 0 0.45rem;
    border-radius: 1rem;
    background: rgba(0, 0, 0, 0.08);
    font-size: 0.72rem;
    font-weight: 700;
    text-align: center;
}

.gen-bucket-body[b-0ryef7qd16] {
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 0.35rem;
    padding: 0.5rem;
    min-height: 3.5rem;
    max-height: 20rem;
    overflow-y: auto;
}

.gen-bucket-empty[b-0ryef7qd16] {
    width: 100%;
    align-self: center;
    text-align: center;
    color: #adb5bd;
    font-size: 0.78rem;
    font-style: italic;
    user-select: none;
}

.gen-bucket-add[b-0ryef7qd16] {
    padding: 0.4rem;
    border-top: 1px solid #e9ecef;
}

/* Draggable chip affordances. */
.chip[draggable="true"][b-0ryef7qd16] {
    cursor: grab;
}

.chip.chip-dragging[b-0ryef7qd16] {
    opacity: 0.45;
}

.chip-grip[b-0ryef7qd16] {
    display: inline-flex;
    align-items: center;
    padding: 0;
    border: none;
    background: transparent;
    color: #b0b6bd;
    font-size: 0.85rem;
    line-height: 1;
    cursor: grab;
}

.chip:hover .chip-grip[b-0ryef7qd16] {
    color: #0d6efd;
}

/* ── On-demand detail expander (native <details>/<summary>) ──────────────────────────────────── */
.detail-expander[b-0ryef7qd16] {
    border-top: 1px solid #e9ecef;
}

.detail-expander > summary[b-0ryef7qd16] {
    list-style: none;
    cursor: pointer;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #495057;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.detail-expander > summary[b-0ryef7qd16]::-webkit-details-marker {
    display: none;
}

.detail-expander > summary:hover[b-0ryef7qd16] {
    color: #0d6efd;
}

/* Caret that rotates when the expander is open. */
.detail-expander > summary .detail-caret[b-0ryef7qd16] {
    transition: transform 0.15s ease-in-out;
}

.detail-expander[open] > summary .detail-caret[b-0ryef7qd16] {
    transform: rotate(90deg);
}
/* /Components/Pages/Review.razor.rz.scp.css */
/* Focus mode must never scroll: the image and every control have to be reachable in one glance,
   otherwise the "one look, one keystroke" loop breaks down. */
.review-root[b-8fre902eou] {
    height: calc(100vh - 72px);
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: .75rem 0;
    overflow: hidden;
}

.review-toolbar[b-8fre902eou] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.review-scope[b-8fre902eou] {
    width: auto;
    min-width: 9.5rem;
}

/* Scope and page size sit next to each other and used to be indistinguishable at a glance, which
   matters because only one of them throws the current page away. The icon addon is the difference;
   the group has to stay auto-width or it would stretch across the toolbar. */
.review-control[b-8fre902eou] {
    width: auto;
}

.review-control .input-group-text[b-8fre902eou] {
    background: #f8f9fa;
    color: #6c757d;
    padding-inline: .5rem;
}

.review-control .form-select[b-8fre902eou] {
    width: auto;
    min-width: 8.5rem;
}

.review-search[b-8fre902eou] {
    width: 12rem;
}

/* Read-only echo of the filter the image list handed over - same look as the chips there. */
.filter-chip[b-8fre902eou] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background-color: #e7f1ff;
    color: #0d6efd;
    border-radius: 12px;
    font-size: 0.78rem;
    font-weight: 500;
    white-space: nowrap;
}

.review-status[b-8fre902eou] {
    min-width: 6rem;
    text-align: right;
}

.review-counter[b-8fre902eou] {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.review-empty[b-8fre902eou] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #6c757d;
}

.review-empty i[b-8fre902eou] {
    font-size: 2.5rem;
    color: #198754;
    margin-bottom: .5rem;
}

/* ── focus mode ──────────────────────────────────────────────────────────── */

.review-focus[b-8fre902eou] {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 30rem);
    gap: 1rem;
}

.review-image[b-8fre902eou] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 0;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: .5rem;
}

.review-side[b-8fre902eou] {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    min-height: 0;
    overflow-y: auto;
}

.review-side-head[b-8fre902eou] {
    min-width: 0;
}

.review-actions[b-8fre902eou] {
    display: flex;
    align-items: center;
    gap: .4rem;
}

.review-actions kbd[b-8fre902eou] {
    font-size: .62rem;
    padding: 0 3px;
    background: rgba(255, 255, 255, .25);
    border-radius: 3px;
}

.review-prefetch[b-8fre902eou] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

/* ── grid mode ───────────────────────────────────────────────────────────── */

.review-grid-scroll[b-8fre902eou] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* A tile needs room for an image plus a full set of option rows side by side. Below ~33rem the
   option rows start wrapping into a column and the tile turns tall and unreadable, so that is the
   floor - the tile count follows from the window width, and the page size below controls how many
   are loaded at once. */
.review-grid[b-8fre902eou] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 33rem), 1fr));
    gap: .6rem;
    padding-bottom: .5rem;
}

.review-card[b-8fre902eou] {
    display: grid;
    grid-template-columns: 11rem minmax(0, 1fr);
    gap: .5rem;
    padding: .45rem;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    background: #fff;
}

.review-card.dirty[b-8fre902eou] {
    border-color: #ffe69c;
    background: #fffdf6;
}

.review-card-image[b-8fre902eou] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 10.5rem;
    background: #f8f9fa;
    border-radius: 6px;
    overflow: hidden;
}

.review-card-body[b-8fre902eou] {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    min-width: 0;
}

.review-card-name[b-8fre902eou] {
    font-size: .74rem;
    font-weight: 600;
    color: #495057;
    min-width: 0;
}

/* auto-fill never produces a track below the 33rem minimum, so a tile can only be squeezed when
   the window itself is narrower than one tile. That is the only case that needs to stack. */
@media (max-width: 36rem) {
    .review-card[b-8fre902eou] {
        grid-template-columns: minmax(0, 1fr);
    }

    .review-card-image[b-8fre902eou] {
        height: 9rem;
    }
}

.review-grid-footer[b-8fre902eou] {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-shrink: 0;
    padding-top: .25rem;
    border-top: 1px solid #e9ecef;
}

@media (max-width: 1199.98px) {
    .review-focus[b-8fre902eou] {
        grid-template-columns: minmax(0, 1fr) minmax(300px, 24rem);
    }
}
/* /Components/Pages/VariantsPartials/VariantsTable.razor.rz.scp.css */
.variants-table .variant-row[b-txv9c5g3wu] {
    cursor: pointer;
}

.variants-table th.sortable[b-txv9c5g3wu] {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.variants-table th.sortable:hover[b-txv9c5g3wu] {
    background-color: rgba(0, 0, 0, 0.04);
}

.variants-table .variant-thumb[b-txv9c5g3wu] {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--bs-border-color);
}
/* /Components/Shared/DetectionOverlay.razor.rz.scp.css */
/* The frame must be exactly the painted image rectangle, because the overlay boxes are positioned
   in percentages of it. wwwroot/js/detectionOverlay.js writes the fitted pixel size onto this
   element on every image load and stage resize, and marks it [data-fitted].

   The declarations below are the pre-fit fallback: the frame fills the stage and the image is
   letterboxed inside it, so the whole image is visible from the first paint. Once fitted,
   object-fit is a no-op because the frame already carries the image's aspect ratio. */
.detection-frame[b-nw20rc4305] {
    position: relative;
    line-height: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
}

.detection-frame img[b-nw20rc4305] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 6px;
    background: #f1f3f5;
}

.detection-frame img.clickable[b-nw20rc4305] {
    cursor: zoom-in;
}

/* Border and label both read --box-color, which the markup sets per detection - see
   Models/DetectionColors.cs for what each colour means. */
.detection-box[b-nw20rc4305] {
    position: absolute;
    box-sizing: border-box;
    pointer-events: none;
    border: 2px solid var(--box-color);
    border-radius: 2px;
}

/* A person's body box, drawn beside the solid face box that carries the estimated age. */
.detection-box.dashed[b-nw20rc4305] {
    border-style: dashed;
}

/* While the frame is still the letterboxed stage, a box drawn in percentages of it would sit in
   the wrong place. Better to show nothing for that moment than something misleading. */
.detection-frame:not([data-fitted]) .detection-box[b-nw20rc4305] {
    visibility: hidden;
}

.detection-tag[b-nw20rc4305] {
    position: absolute;
    top: -1.35em;
    left: -2px;
    background: var(--box-color);
    color: #fff;
    font-size: 0.6rem;
    line-height: 1.3;
    padding: 1px 4px;
    border-radius: 3px;
    white-space: nowrap;
}
/* /Components/Shared/ExpectedValuesEditor.razor.rz.scp.css */
.ev-editor[b-lcplf4i34n] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    outline: none;
    min-width: 0;
}

.ev-editor:focus-visible[b-lcplf4i34n] {
    outline: 2px solid rgba(13, 110, 253, .35);
    outline-offset: 4px;
    border-radius: 6px;
}

/* ── toolbar ─────────────────────────────────────────────────────────────── */

.ev-toolbar[b-lcplf4i34n] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ev-toolbar-spacer[b-lcplf4i34n] {
    flex: 1;
}

.ev-toolbar kbd[b-lcplf4i34n] {
    font-size: .62rem;
    padding: 0 3px;
    background: rgba(0, 0, 0, .12);
    color: inherit;
    border-radius: 3px;
}

.ev-badge-dirty[b-lcplf4i34n] {
    font-size: .72rem;
    font-weight: 600;
    color: #664d03;
    background: #fff3cd;
    border: 1px solid #ffe69c;
    border-radius: 10px;
    padding: 1px 8px;
}

/* ── rows ────────────────────────────────────────────────────────────────── */

.ev-rows[b-lcplf4i34n] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ev-row[b-lcplf4i34n] {
    display: grid;
    grid-template-columns: minmax(6.5rem, 9rem) 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 3px 6px 3px 4px;
    border-left: 3px solid transparent;
    border-radius: 4px;
}

.ev-row.dirty[b-lcplf4i34n] {
    border-left-color: #ffc107;
    background: rgba(255, 193, 7, .07);
}

.ev-label[b-lcplf4i34n] {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.ev-label-text[b-lcplf4i34n] {
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .03em;
    color: #495057;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: help;
}

.ev-dot[b-lcplf4i34n] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ffc107;
    flex-shrink: 0;
}

.ev-options[b-lcplf4i34n] {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    min-width: 0;
}

.ev-suffix[b-lcplf4i34n] {
    font-size: .62rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #adb5bd;
}

/* ── option buttons ──────────────────────────────────────────────────────── */

.ev-opt[b-lcplf4i34n] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .76rem;
    line-height: 1.1;
    padding: 4px 9px;
    border: 1px solid #ced4da;
    border-radius: 5px;
    background: #fff;
    color: #343a40;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .1s, border-color .1s, color .1s;
}

.ev-opt:hover[b-lcplf4i34n] {
    background: #f1f3f5;
}

/* The prediction marker rides inside the option it refers to, so there is no second column to
   look at while deciding. */
.ev-opt.pred[b-lcplf4i34n] {
    border-color: #9ec5fe;
    box-shadow: inset 0 -2px 0 rgba(13, 110, 253, .35);
}

.ev-pred-mark[b-lcplf4i34n] {
    font-size: .6rem;
    opacity: .55;
}

.ev-opt.sel[b-lcplf4i34n] {
    background: #0d6efd;
    border-color: #0d6efd;
    color: #fff;
    font-weight: 600;
}

.ev-opt.sel .ev-pred-mark[b-lcplf4i34n] {
    opacity: .85;
}

.ev-opt.sel.tone-danger[b-lcplf4i34n] {
    background: #dc3545;
    border-color: #dc3545;
}

.ev-opt.sel.tone-warning[b-lcplf4i34n] {
    background: #fd7e14;
    border-color: #fd7e14;
}

.ev-opt.sel.tone-info[b-lcplf4i34n] {
    background: #0dcaf0;
    border-color: #0dcaf0;
    color: #05323a;
}

.ev-opt.sel.tone-ok[b-lcplf4i34n] {
    background: #198754;
    border-color: #198754;
}

/* Kept in step with DetectionColors.Minor, which paints the boxes on the image itself. */
.ev-opt.sel.tone-minor[b-lcplf4i34n] {
    background: #a21caf;
    border-color: #a21caf;
}

.ev-clear[b-lcplf4i34n] {
    display: inline-flex;
    align-items: center;
    font-size: .76rem;
    line-height: 1.1;
    padding: 4px 6px;
    border: 1px dashed #ced4da;
    border-radius: 5px;
    background: transparent;
    color: #adb5bd;
    cursor: pointer;
}

.ev-clear:hover[b-lcplf4i34n] {
    color: #dc3545;
    border-color: #f1aeb5;
}

/* ── footer ──────────────────────────────────────────────────────────────── */

.ev-hints[b-lcplf4i34n] {
    font-size: .68rem;
    color: #adb5bd;
}

.ev-hints kbd[b-lcplf4i34n] {
    font-size: .62rem;
    padding: 0 3px;
    margin: 0 1px;
    background: #f1f3f5;
    color: #6c757d;
    border: 1px solid #dee2e6;
    border-radius: 3px;
}

/* ── compact variant (review grid) ───────────────────────────────────────── */

.ev-editor.compact[b-lcplf4i34n] {
    gap: 3px;
}

.ev-editor.compact .ev-row[b-lcplf4i34n] {
    grid-template-columns: minmax(3.6rem, 5rem) 1fr auto;
    gap: 5px;
    padding: 1px 4px 1px 3px;
}

.ev-editor.compact .ev-label-text[b-lcplf4i34n] {
    font-size: .62rem;
    letter-spacing: 0;
}

.ev-editor.compact .ev-opt[b-lcplf4i34n] {
    font-size: .68rem;
    padding: 2px 6px;
    gap: 2px;
}

.ev-editor.compact .ev-clear[b-lcplf4i34n] {
    font-size: .68rem;
    padding: 2px 4px;
}

.ev-editor.compact .ev-toolbar .btn[b-lcplf4i34n] {
    --bs-btn-padding-y: .1rem;
    --bs-btn-padding-x: .4rem;
    --bs-btn-font-size: .7rem;
}

.ev-editor.compact .ev-suffix[b-lcplf4i34n] {
    display: none;
}