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

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


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

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

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

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

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

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
.controls[b-e31r3mhz7x] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.action-button[b-e31r3mhz7x] {
    padding: 0.3rem 0.6rem;
    border: 1px solid #222;
    background: #f2f2f2;
    color: #000;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
}

.action-button:hover[b-e31r3mhz7x] {
    background: #e7e7e7;
}

.action-button.icon-button[b-e31r3mhz7x] {
    width: 36px;
    height: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.action-button.active[b-e31r3mhz7x] {
    background: #dfeeff;
}

.action-button:focus-visible[b-e31r3mhz7x] {
    outline: 2px solid #3d7cc2;
    outline-offset: 2px;
}

.action-button:disabled[b-e31r3mhz7x] {
    border-color: #888;
    background: #dedede;
    color: #777;
    cursor: not-allowed;
}

.action-button:disabled:hover[b-e31r3mhz7x] {
    background: #dedede;
}

.mode-toggle[b-e31r3mhz7x] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.95rem;
    font-weight: 600;
}

.difficulty-picker[b-e31r3mhz7x] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.95rem;
    font-weight: 600;
}

.difficulty-select[b-e31r3mhz7x] {
    padding: 0.3rem 0.45rem;
    border: 1px solid #222;
    background: #fff;
    color: #000;
    font-size: 0.9rem;
}

.mode-switch[b-e31r3mhz7x] {
    display: inline-flex;
    border: 1px solid #222;
    background: #f2f2f2;
}

.mode-button[b-e31r3mhz7x] {
    border: none;
    border-right: 1px solid #222;
    background: transparent;
    color: #000;
    padding: 0.3rem 0.6rem;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}

.mode-button.icon-mode-button[b-e31r3mhz7x] {
    width: 36px;
    height: 34px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mode-button:last-child[b-e31r3mhz7x] {
    border-right: none;
}

.mode-button.active[b-e31r3mhz7x] {
    background: #dfeeff;
}

.candidate-host[b-e31r3mhz7x] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.generation-status[b-e31r3mhz7x] {
    margin-bottom: 0.75rem;
    color: #9f1d1d;
    font-size: 0.95rem;
    font-weight: 600;
}
/* /Components/SudokuCandidate.razor.rz.scp.css */
.candidate-shell[b-za0ssudoft] {
    padding: 0.35rem;
    background: #e0e0e0;
    border: 1px solid #a9a9a9;
    width: fit-content;
}

.candidate-board[b-za0ssudoft] {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-template-rows: repeat(9, 1fr);
    width: min(94vmin, 620px);
    aspect-ratio: 1 / 1;
    border: 3px solid #111;
    background: #fff;
}

.candidate-cell[b-za0ssudoft] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #444;
    border-bottom: 1px solid #444;
    user-select: none;
}

.candidate-cell.contradiction[b-za0ssudoft] {
    background: #ffd7d7;
}

.candidate-cell.contradiction .fixed-value[b-za0ssudoft],
.candidate-cell.contradiction .candidate-number.visible[b-za0ssudoft] {
    color: #a00000;
}

.candidate-cell.house-hint:not(.contradiction):not(.solo-hint)[b-za0ssudoft] {
    background: #edf9ed;
}

.candidate-cell.solo-hint:not(.contradiction)[b-za0ssudoft] {
    background: #d9f8d9;
}

.candidate-cell.pair-hint:not(.contradiction):not(.solo-hint)[b-za0ssudoft] {
    background: #e4f5e4;
}

.candidate-cell.locked-source-hint:not(.contradiction):not(.solo-hint)[b-za0ssudoft] {
    background: #fff2d9;
}

.candidate-cell.locked-target-hint:not(.contradiction):not(.solo-hint)[b-za0ssudoft] {
    background: #ffe5e5;
}

.candidate-input[b-za0ssudoft] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border: none;
    background: transparent;
    text-align: center;
    font-size: clamp(1.7rem, 4.4vmin, 2.7rem);
    line-height: 1;
    font-weight: 700;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    color: #222;
    z-index: 1;
}

.candidate-input:focus[b-za0ssudoft] {
    outline: none;
    background: #eaf2ff;
}

.candidate-input-readonly[b-za0ssudoft] {
    pointer-events: none;
}

.candidate-cell:nth-child(9n)[b-za0ssudoft] {
    border-right: none;
}

.candidate-cell:nth-child(n + 73)[b-za0ssudoft] {
    border-bottom: none;
}

.candidate-cell.thick-right[b-za0ssudoft] {
    border-right: 3px solid #111;
}

.candidate-cell.thick-bottom[b-za0ssudoft] {
    border-bottom: 3px solid #111;
}

.fixed-value[b-za0ssudoft] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(1.7rem, 4.4vmin, 2.7rem);
    line-height: 1;
    font-weight: 700;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    color: #222;
}

.candidates-grid[b-za0ssudoft] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    width: 92%;
    height: 92%;
    align-items: center;
    justify-items: center;
}

.candidate-number[b-za0ssudoft] {
    font-size: clamp(0.62rem, 1.45vmin, 0.95rem);
    line-height: 1;
    font-weight: 600;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    color: #1d1d1d;
}

.candidate-number.hidden[b-za0ssudoft] {
    visibility: hidden;
}

.candidate-number.hinted-candidate.visible[b-za0ssudoft] {
    color: #0b7a0b;
    font-weight: 800;
}

.candidate-number.pair-candidate.visible[b-za0ssudoft] {
    color: #0d7d0d;
    font-weight: 800;
}

.candidate-number.locked-source-candidate.visible[b-za0ssudoft] {
    color: #b26a00;
    font-weight: 800;
}

.candidate-number.locked-target-candidate.visible[b-za0ssudoft] {
    color: #b00000;
    font-weight: 800;
}

.candidate-toggle[b-za0ssudoft] {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    font-size: clamp(0.62rem, 1.45vmin, 0.95rem);
    line-height: 1;
    font-weight: 600;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    cursor: pointer;
}

.candidate-toggle.active[b-za0ssudoft] {
    color: #0d0d0d;
}

.candidate-toggle.inactive[b-za0ssudoft] {
    color: #eee;
}

.candidate-toggle.conflicting.active[b-za0ssudoft] {
    color: #b00000;
    font-weight: 800;
}

.candidate-toggle.hinted-candidate[b-za0ssudoft] {
    color: #0b7a0b;
    font-weight: 800;
}

.candidate-toggle.pair-candidate[b-za0ssudoft] {
    color: #0d7d0d;
    font-weight: 800;
}

.candidate-toggle.locked-source-candidate[b-za0ssudoft] {
    color: #b26a00;
    font-weight: 800;
}

.candidate-toggle.locked-target-candidate[b-za0ssudoft] {
    color: #b00000;
    font-weight: 800;
}
/* /Components/SudokuInputOutput.razor.rz.scp.css */
.io-shell[b-asz44hae3r] {
    margin-top: 0.75rem;
    display: grid;
    gap: 0.35rem;
    width: fit-content;
}

.io-label[b-asz44hae3r] {
    font-size: 0.9rem;
    font-weight: 600;
}

.io-row[b-asz44hae3r] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.io-input[b-asz44hae3r] {
    width: 750px;
    flex: 1 1 auto;
    padding: 0.45rem 0.55rem;
    border: 1px solid #999;
    background: #fff;
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.92rem;
    line-height: 1.3;
}

.io-copy-button[b-asz44hae3r] {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid #222;
    background: #f2f2f2;
    color: #000;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.io-copy-button:hover[b-asz44hae3r] {
    background: #e7e7e7;
}

.io-copy-button:focus-visible[b-asz44hae3r] {
    outline: 2px solid #3d7cc2;
    outline-offset: 2px;
}

.io-hint[b-asz44hae3r] {
    font-size: 0.82rem;
    color: #444;
}
/* /Components/SudokuOcrLoader.razor.rz.scp.css */
.ocr-shell[b-iooa9oed79] {
    display: grid;
    gap: 0.4rem;
    width: fit-content;
    margin-bottom: 0.6rem;
}

.ocr-input-row[b-iooa9oed79] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.ocr-drop-zone[b-iooa9oed79] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.55rem;
    border: 2px dashed #7d7d7d;
    background: #fafafa;
    color: #2a2a2a;
    font-size: 0.88rem;
    white-space: nowrap;
}

.ocr-drop-zone.drag-active[b-iooa9oed79] {
    border-color: #3d7cc2;
    background: #eef7ff;
}

.ocr-file-control[b-iooa9oed79] {
    position: absolute;
}

.ocr-file-input[b-iooa9oed79] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.ocr-icon-button[b-iooa9oed79] {
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid #222;
    background: #f2f2f2;
    color: #111;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-sizing: border-box;
}

.ocr-icon-button:hover:not(:disabled)[b-iooa9oed79] {
    background: #e7e7e7;
}

.ocr-icon-button:focus-visible[b-iooa9oed79] {
    outline: 2px solid #3d7cc2;
    outline-offset: 2px;
}

.ocr-icon-button:disabled[b-iooa9oed79] {
    color: #777;
    cursor: default;
    opacity: 0.6;
}

.ocr-file-name[b-iooa9oed79] {
    min-width: 360px;
    max-width: min(520px, calc(100vw - 2rem));
    color: #333;
    font-size: 0.86rem;
    overflow-wrap: anywhere;
    white-space: normal;
}

.ocr-media-stage[b-iooa9oed79] {
    position: relative;
    width: fit-content;
}

.ocr-media-stage video[b-iooa9oed79],
.ocr-media-stage canvas[b-iooa9oed79] {
    display: none;
    width: min(92vw, 420px);
    max-height: 320px;
    border: 1px solid #777;
    background: #111;
}

.ocr-media-stage [data-active="true"][b-iooa9oed79] {
    display: block;
}

.ocr-image-close[b-iooa9oed79] {
    position: absolute;
    top: 0.35rem;
    right: 0.35rem;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid rgb(0 0 0 / 55%);
    border-radius: 999px;
    background: rgb(255 255 255 / 92%);
    color: #111;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 1px 4px rgb(0 0 0 / 30%);
}

.ocr-image-close:hover[b-iooa9oed79] {
    background: #fff;
}

.ocr-image-close:focus-visible[b-iooa9oed79] {
    outline: 2px solid #3d7cc2;
    outline-offset: 2px;
}

.ocr-status[b-iooa9oed79] {
    color: #333;
    font-size: 0.84rem;
}

.ocr-error[b-iooa9oed79] {
    color: #9f1d1d;
    font-size: 0.84rem;
    font-weight: 600;
}

.ocr-dialog-backdrop[b-iooa9oed79] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    place-items: center;
    padding: 1rem;
    background: rgb(0 0 0 / 45%);
}

.ocr-dialog-backdrop.open[b-iooa9oed79] {
    display: grid;
}

.ocr-dialog[b-iooa9oed79] {
    position: relative;
    container-name: ocr-dialog;
    container-type: inline-size;
    width: min(1180px, calc(100vw - 2rem));
    min-width: min(560px, calc(100vw - 2rem));
    min-height: min(420px, calc(100vh - 2rem));
    max-width: calc(100vw - 2rem);
    max-height: calc(100vh - 2rem);
    overflow: auto;
    border: 1px solid #555;
    background: #fff;
    box-shadow: 0 12px 36px rgb(0 0 0 / 30%);
}

.ocr-dialog.resize-n[b-iooa9oed79],
.ocr-dialog.resize-s[b-iooa9oed79] { cursor: ns-resize; }

.ocr-dialog.resize-e[b-iooa9oed79],
.ocr-dialog.resize-w[b-iooa9oed79] { cursor: ew-resize; }

.ocr-dialog.resize-ne[b-iooa9oed79],
.ocr-dialog.resize-sw[b-iooa9oed79] { cursor: nesw-resize; }

.ocr-dialog.resize-nw[b-iooa9oed79],
.ocr-dialog.resize-se[b-iooa9oed79] { cursor: nwse-resize; }

.ocr-dialog-resize[b-iooa9oed79] {
    position: absolute;
    z-index: 20;
    background: transparent;
    user-select: none;
    touch-action: none;
}

.ocr-dialog-resize-n[b-iooa9oed79],
.ocr-dialog-resize-s[b-iooa9oed79] {
    left: 12px;
    right: 12px;
    height: 10px;
    cursor: ns-resize;
}

.ocr-dialog-resize-n[b-iooa9oed79] {
    top: 0;
}

.ocr-dialog-resize-s[b-iooa9oed79] {
    bottom: 0;
}

.ocr-dialog-resize-e[b-iooa9oed79],
.ocr-dialog-resize-w[b-iooa9oed79] {
    top: 12px;
    bottom: 12px;
    width: 10px;
    cursor: ew-resize;
}

.ocr-dialog-resize-e[b-iooa9oed79] {
    right: 0;
}

.ocr-dialog-resize-w[b-iooa9oed79] {
    left: 0;
}

.ocr-dialog-resize-ne[b-iooa9oed79],
.ocr-dialog-resize-nw[b-iooa9oed79],
.ocr-dialog-resize-se[b-iooa9oed79],
.ocr-dialog-resize-sw[b-iooa9oed79] {
    width: 18px;
    height: 18px;
}

.ocr-dialog-resize-ne[b-iooa9oed79] {
    top: 0;
    right: 0;
    cursor: nesw-resize;
}

.ocr-dialog-resize-sw[b-iooa9oed79] {
    bottom: 0;
    left: 0;
    cursor: nesw-resize;
}

.ocr-dialog-resize-nw[b-iooa9oed79] {
    top: 0;
    left: 0;
    cursor: nwse-resize;
}

.ocr-dialog-resize-se[b-iooa9oed79] {
    right: 0;
    bottom: 0;
    cursor: nwse-resize;
}

.ocr-dialog-header[b-iooa9oed79] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem 0.8rem;
    border-bottom: 1px solid #d0d0d0;
}

.ocr-dialog-header h2[b-iooa9oed79] {
    margin: 0;
    font-size: 1.2rem;
}

.ocr-dialog-header p[b-iooa9oed79] {
    margin: 0.25rem 0 0;
    color: #555;
    font-size: 0.86rem;
}

.ocr-dialog-close[b-iooa9oed79] {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid transparent;
    background: transparent;
    color: #222;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.ocr-dialog-close:hover[b-iooa9oed79] {
    border-color: #aaa;
    background: #eee;
}

.ocr-method-option[b-iooa9oed79] {
    display: inline-flex;
    align-items: center;
}

.ocr-option[b-iooa9oed79] {
    display: grid;
    gap: 0.35rem;
}

.ocr-option > span[b-iooa9oed79] {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.9rem;
    font-weight: 600;
}

.ocr-option output[b-iooa9oed79] {
    min-width: 3.5rem;
    color: #12666a;
    font-family: Consolas, "Courier New", monospace;
    text-align: right;
}

.ocr-option input[type="range"][b-iooa9oed79] {
    width: 100%;
}

.ocr-option small[b-iooa9oed79] {
    color: #5c625f;
    font-size: 0.75rem;
    line-height: 1.3;
}

.ocr-method-switch[b-iooa9oed79] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    width: max-content;
    padding: 0.35rem 0.5rem;
    border: 1px solid #c8cfca;
    background: #f8faf7;
    color: #303a35;
    font-size: 0.8rem;
    font-weight: 700;
}

.ocr-method-switch input[b-iooa9oed79] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.ocr-method-toggle[b-iooa9oed79] {
    position: relative;
    width: 42px;
    height: 22px;
    border: 1px solid #8f9992;
    border-radius: 999px;
    background: #e9ede8;
}

.ocr-method-toggle[b-iooa9oed79]::after {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgb(0 0 0 / 24%);
    content: "";
    transition: transform 0.15s ease;
}

.ocr-method-switch input:checked + .ocr-method-toggle[b-iooa9oed79] {
    border-color: #12666a;
    background: #12666a;
}

.ocr-method-switch input:checked + .ocr-method-toggle[b-iooa9oed79]::after {
    transform: translateX(20px);
}

.ocr-diagnostics[b-iooa9oed79] {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
    grid-template-areas:
        "registration binary"
        "registration result";
    gap: 1rem;
    padding: 0 1.1rem 1.1rem;
}

.ocr-diagnostic-card[b-iooa9oed79] {
    min-width: 0;
    padding: 0.85rem;
    border: 1px solid #d0d6cf;
    background: #fff;
}

.ocr-registration-card[b-iooa9oed79] {
    grid-area: registration;
}

.ocr-grid-controls[b-iooa9oed79] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 0.55rem;
}

.ocr-grid-summary[b-iooa9oed79] {
    margin: 0 0 0.65rem;
    color: #5c625f;
    font-size: 0.75rem;
    line-height: 1.3;
}

.ocr-binary-card[b-iooa9oed79] {
    grid-area: binary;
}

.ocr-result-card[b-iooa9oed79] {
    grid-area: result;
}

.ocr-diagnostic-header[b-iooa9oed79] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.65rem;
}

.ocr-diagnostic-header h3[b-iooa9oed79] {
    margin: 0;
    font-size: 0.98rem;
}

.ocr-diagnostic-header p[b-iooa9oed79],
.ocr-help-text[b-iooa9oed79] {
    margin: 0.2rem 0 0;
    color: #5c625f;
    font-size: 0.75rem;
    line-height: 1.3;
}

.ocr-readouts[b-iooa9oed79] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.35rem;
}

.ocr-readouts span[b-iooa9oed79],
.ocr-match-badge[b-iooa9oed79],
.ocr-confidence-badge[b-iooa9oed79] {
    display: inline-block;
    border: 1px solid #c5cbc6;
    background: #f3f5f2;
    color: #4a5550;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 0.25rem 0.35rem;
}

.ocr-match-badge[data-state="good"][b-iooa9oed79] {
    border-color: #5f8b78;
    background: #e7f3ed;
    color: #205943;
}

.ocr-match-badge[data-state="weak"][b-iooa9oed79] {
    border-color: #c8994f;
    background: #fff5dd;
    color: #764918;
}

.ocr-match-badge[data-state="bad"][b-iooa9oed79] {
    border-color: #c97d68;
    background: #fff0eb;
    color: #802d1e;
}

.ocr-confidence-badge[b-iooa9oed79] {
    margin-left: 0;
}

.ocr-result-controls[b-iooa9oed79] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.35rem;
}

.ocr-registration-view[b-iooa9oed79] {
    display: block;
}

.ocr-registration-main[b-iooa9oed79] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20px;
    align-items: start;
}

.ocr-registration-bottom[b-iooa9oed79] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20px;
    grid-template-rows: 20px;
}

.ocr-registration-image[b-iooa9oed79] {
    grid-column: 1;
    position: relative;
    width: 100%;
    align-self: start;
    border: 1px solid #c5ccc6;
    border-radius: 4px 0 0;
    background: #f4f6f3;
    overflow: hidden;
}

.ocr-registration-canvas[b-iooa9oed79],
.ocr-histogram-x[b-iooa9oed79],
.ocr-histogram-y[b-iooa9oed79] {
    display: block;
    min-width: 0;
    min-height: 0;
}

.ocr-registration-canvas[b-iooa9oed79] {
    position: static;
    width: 100%;
    height: auto;
    border: 0;
    background: #f4f6f3;
    cursor: crosshair;
    touch-action: none;
}

.ocr-registration-canvas[data-dragging="true"][b-iooa9oed79] {
    cursor: grabbing;
}

.ocr-histogram-y[b-iooa9oed79] {
    grid-column: 2;
    width: 20px;
    height: 0;
    border: 1px solid #c5ccc6;
    border-left: 0;
    border-radius: 0 4px 0 0;
    background: #f4f6f3;
}

.ocr-histogram-x[b-iooa9oed79] {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    height: 20px;
    border: 1px solid #c5ccc6;
    border-top: 0;
    border-radius: 0 0 0 4px;
    background: #f4f6f3;
}

.ocr-histogram-corner[b-iooa9oed79] {
    grid-column: 2;
    grid-row: 1;
    width: 20px;
    height: 20px;
    border: 1px solid #c5ccc6;
    border-top: 0;
    border-left: 0;
    border-radius: 0 0 4px;
    background: #f4f6f3;
}

.ocr-processed-grid-canvas[b-iooa9oed79] {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid #c5ccc6;
    background: #fff;
}

.ocr-threshold-control[b-iooa9oed79] {
    display: grid;
    grid-template-columns: auto minmax(120px, 1fr) 3.5rem;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.65rem;
    color: #35413c;
    font-size: 0.8rem;
    font-weight: 700;
}

.ocr-threshold-control input[b-iooa9oed79] {
    width: 100%;
    accent-color: #12666a;
}

.ocr-threshold-control output[b-iooa9oed79] {
    font-family: Consolas, "Courier New", monospace;
    text-align: right;
}

.ocr-hidden-engine-value[b-iooa9oed79] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.ocr-digit-board[b-iooa9oed79] {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    overflow: hidden;
    width: min(100%, 360px);
    margin: 0 auto;
    border: 3px solid #27312c;
    background: #27312c;
}

.ocr-digit-board[b-iooa9oed79]  .digit-cell {
    display: grid;
    place-content: center;
    place-items: center;
    min-width: 0;
    aspect-ratio: 1;
    border: 1px solid #aeb7b0;
    background: #fff;
    color: #17201c;
    font-size: 0.95rem;
    font-weight: 800;
}

.ocr-digit-board[b-iooa9oed79]  .digit-cell:nth-child(3n) {
    border-right-color: #27312c;
}

.ocr-digit-board[b-iooa9oed79]  .digit-cell:nth-child(n + 19):nth-child(-n + 27),
.ocr-digit-board[b-iooa9oed79]  .digit-cell:nth-child(n + 46):nth-child(-n + 54) {
    border-bottom-color: #27312c;
}

.ocr-digit-board[b-iooa9oed79]  .digit-cell.blank,
.ocr-digit-board[b-iooa9oed79]  .digit-cell.empty {
    background: #fafbf9;
    color: transparent;
}

.ocr-digit-board[b-iooa9oed79]  .digit-cell.uncertain {
    background: #fff3d4;
    color: #7a4b18;
}

.ocr-digit-board[b-iooa9oed79]  .digit-cell.rejected {
    background: #fff0eb;
    color: #8b3422;
}

.ocr-digit-board[b-iooa9oed79]  .digit-cell small {
    display: block;
    margin-top: 1px;
    color: #65716b;
    font-size: 0.48rem;
}

.ocr-dialog-actions[b-iooa9oed79] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.8rem 1.1rem 1rem;
    border-top: 1px solid #d0d0d0;
}

.ocr-dialog-button[b-iooa9oed79] {
    padding: 0.45rem 0.75rem;
    border: 1px solid #555;
    background: #f2f2f2;
    color: #111;
    font-weight: 600;
    cursor: pointer;
}

.ocr-dialog-button:hover[b-iooa9oed79] {
    background: #e7e7e7;
}

.ocr-dialog-button.primary[b-iooa9oed79] {
    border-color: #12666a;
    background: #12666a;
    color: #fff;
}

.ocr-dialog-button.primary:hover[b-iooa9oed79] {
    background: #0e5558;
}

@media (max-width: 640px) {
    .ocr-diagnostics[b-iooa9oed79] {
        grid-template-columns: 1fr;
        grid-template-areas:
            "registration"
            "binary"
            "result";
    }

    .ocr-grid-controls[b-iooa9oed79] {
        grid-template-columns: 1fr;
    }

    .ocr-dialog-actions[b-iooa9oed79] {
        flex-wrap: wrap;
    }
}

@container ocr-dialog (max-width: 760px) {
    .ocr-diagnostics[b-iooa9oed79] {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "registration"
            "binary"
            "result";
    }

    .ocr-grid-controls[b-iooa9oed79] {
        grid-template-columns: minmax(0, 1fr);
    }

    .ocr-dialog-header[b-iooa9oed79],
    .ocr-diagnostic-header[b-iooa9oed79] {
        flex-wrap: wrap;
    }

    .ocr-dialog-actions[b-iooa9oed79] {
        flex-wrap: wrap;
    }
}