.chart-box {
    position: relative;
    height: 280px;
}

.url-cell {
    max-width: 420px;
}

.url-cell > span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.codes-cell {
    max-width: 360px;
}

.codes-cell > div {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Test reading */
.drop-zone {
    border: 2px dashed var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    padding: 2rem 1rem;
    text-align: center;
    transition: background-color .15s, border-color .15s;
}

.drop-zone.drag-over {
    border-color: var(--bs-primary);
    background: var(--bs-primary-bg-subtle);
}

.result-card .preview {
    position: relative;
    background: repeating-conic-gradient(#f1f3f5 0% 25%, #fff 0% 50%) 50% / 16px 16px;
    border-bottom: 1px solid var(--bs-border-color);
    text-align: center;
}

.result-card .preview img {
    display: block;
    max-width: 100%;
    max-height: 320px;
    margin: 0 auto;
}

.result-card .preview canvas {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
}

.code-item {
    border-top: 1px solid var(--bs-border-color-translucent);
    padding: .4rem 0;
}

.code-text {
    word-break: break-all;
    white-space: pre-wrap;
    max-height: 8rem;
    overflow: auto;
}

.code-crop {
    max-width: 140px;
    max-height: 140px;
    border: 1px solid var(--bs-border-color);
}