.visual-scan-page {
    --visual-ink: #10233f;
    --visual-muted: #62718a;
    --visual-line: #dce5f2;
    --visual-soft: #f4f8fc;
    --visual-primary: #1e63d8;
    --visual-success: #16794c;
}

.visual-scan-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(260px, .7fr);
    gap: 1.25rem;
    align-items: stretch;
    margin-bottom: 1rem;
}

.visual-scan-hero > div:first-child,
.visual-scan-hero-card,
.visual-scan-panel,
.visual-scan-side-card,
.visual-scan-toolbar,
.visual-scan-empty {
    border: 1px solid var(--visual-line);
    border-radius: 1.35rem;
    box-shadow: 0 18px 55px rgba(20, 47, 82, .08);
}

.visual-scan-hero > div:first-child {
    padding: clamp(1.4rem, 3vw, 2.5rem);
    background: linear-gradient(135deg, #fff, #f5f9ff);
}

.visual-scan-kicker,
.visual-scan-panel-head > div > span,
.visual-scan-run-panel > div > span,
.visual-scan-side-card > span {
    color: var(--visual-primary);
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.visual-scan-hero h1 {
    color: var(--visual-ink);
    font-size: clamp(2rem, 4vw, 3.4rem);
    line-height: 1.02;
    margin: .5rem 0 .8rem;
}

.visual-scan-hero p,
.visual-scan-panel p,
.visual-scan-side-card p {
    color: var(--visual-muted);
}

.visual-scan-hero-card {
    background: linear-gradient(145deg, #10284a, #154c91);
    color: #fff;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .7rem;
}

.visual-scan-hero-card strong { font-size: 1.25rem; }
.visual-scan-hero-card span { color: rgba(255,255,255,.82); }
.visual-scan-hero-card small {
    align-self: flex-start;
    background: rgba(255,255,255,.13);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 999px;
    padding: .4rem .7rem;
}

.visual-scan-disclaimer {
    display: flex;
    gap: .7rem;
    align-items: center;
    padding: .85rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid #f0d9a8;
    border-radius: 1rem;
    background: #fffaf0;
    color: #6d5017;
}

.visual-scan-workspace { display: grid; gap: 1rem; }
.visual-scan-toolbar {
    background: #fff;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: end;
}
.visual-scan-toolbar label { min-width: min(100%, 430px); }
.visual-scan-toolbar label > span,
.visual-photo-body label > span {
    display: block;
    margin-bottom: .35rem;
    color: var(--visual-ink);
    font-size: .82rem;
    font-weight: 700;
}
.visual-scan-toolbar-actions { display: flex; gap: .6rem; flex-wrap: wrap; }

.visual-scan-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 310px;
    gap: 1rem;
    align-items: start;
}
.visual-scan-grid main,
.visual-scan-grid aside { display: grid; gap: 1rem; }
.visual-scan-grid aside { position: sticky; top: 6.3rem; }

.visual-scan-panel,
.visual-scan-side-card,
.visual-scan-empty {
    background: #fff;
    padding: clamp(1rem, 2vw, 1.45rem);
}
.visual-scan-panel-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1rem;
}
.visual-scan-panel-head h2,
.visual-scan-run-panel h2,
.visual-scan-side-card h2,
.visual-scan-empty h2 {
    color: var(--visual-ink);
    font-size: clamp(1.15rem, 2vw, 1.55rem);
    margin: .2rem 0 0;
}
.visual-scan-count,
.visual-result-badge {
    border-radius: 999px;
    background: #eaf2ff;
    color: #174eaa;
    font-weight: 800;
    padding: .45rem .75rem;
}

.visual-upload-dropzone {
    position: relative;
    min-height: 155px;
    border: 2px dashed #a8bddb;
    border-radius: 1.15rem;
    background: #f7faff;
    color: var(--visual-ink);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.25rem;
    cursor: pointer;
    transition: .2s ease;
}
.visual-upload-dropzone:hover { border-color: var(--visual-primary); background: #eef5ff; }
.visual-upload-dropzone.is-busy { opacity: .65; pointer-events: none; }
.visual-upload-dropzone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.visual-upload-icon { font-size: 2rem; color: var(--visual-primary); line-height: 1; }
.visual-upload-dropzone small { color: var(--visual-muted); margin-top: .35rem; }

.visual-photo-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .8rem;
    margin-top: 1rem;
}
.visual-photo-card {
    border: 1px solid var(--visual-line);
    border-radius: 1rem;
    overflow: hidden;
    background: #fff;
}
.visual-photo-preview { position: relative; aspect-ratio: 4/3; background: #e9eef5; }
.visual-photo-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.visual-photo-preview > .visual-photo-number,
.visual-finding-image > span:not(.visual-bounding-box) {
    position: absolute;
    top: .55rem;
    left: .55rem;
    border-radius: 999px;
    background: rgba(7, 22, 43, .82);
    color: #fff;
    padding: .25rem .5rem;
    font-size: .72rem;
    font-weight: 800;
}
.visual-photo-body { padding: .8rem; display: grid; gap: .55rem; }
.visual-photo-body > strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--visual-ink); }
.visual-photo-body > small { color: var(--visual-muted); }

.visual-coverage-score { font-size: 1.4rem; color: var(--visual-primary); }
.visual-coverage-bar { height: .65rem; border-radius: 999px; background: #e8eef6; overflow: hidden; }
.visual-coverage-bar span { display: block; height: 100%; background: linear-gradient(90deg, #2a72df, #20a56c); border-radius: inherit; }
.visual-coverage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; margin: 1rem 0; }
.visual-coverage-grid span { border-radius: .8rem; padding: .65rem .75rem; font-weight: 700; }
.visual-coverage-grid .is-present { background: #e9f8f1; color: #116b43; }
.visual-coverage-grid .is-missing { background: #f3f5f8; color: #6c7788; }

.visual-scan-run-panel { display: grid; gap: 1rem; }
.visual-scan-consent { display: flex; gap: .7rem; align-items: flex-start; padding: .85rem; border-radius: .85rem; background: var(--visual-soft); }
.visual-scan-consent input { margin-top: .25rem; width: 1.1rem; height: 1.1rem; }
.visual-scan-run-panel .btn { justify-self: start; }
.visual-scan-run-panel > small { color: var(--visual-muted); }


.visual-delete-confirmation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 1rem 0;
    padding: .9rem 1rem;
    border: 1px solid #efb2b2;
    border-radius: .9rem;
    background: #fff5f5;
}
.visual-delete-confirmation > div:first-child { display: grid; gap: .2rem; }
.visual-delete-confirmation > div:last-child { display: flex; gap: .45rem; flex-wrap: wrap; }
.visual-delete-confirmation span { color: #765050; font-size: .9rem; }

.visual-result-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin: -.25rem 0 1rem;
}
.visual-result-meta span {
    border-radius: 999px;
    background: #eef2f7;
    color: #526179;
    padding: .3rem .6rem;
    font-size: .74rem;
    font-weight: 700;
}

.visual-result-summary { font-size: 1.03rem; padding: .9rem 1rem; border-left: 4px solid var(--visual-primary); background: #f6f9ff; border-radius: .7rem; }
.visual-finding-list { display: grid; gap: 1rem; }
.visual-finding-card { display: grid; grid-template-columns: 190px minmax(0, 1fr); border: 1px solid var(--visual-line); border-radius: 1rem; overflow: hidden; }
.visual-finding-card.is-accepted { border-color: #7fd3ad; box-shadow: 0 0 0 2px rgba(30, 150, 93, .08); }
.visual-finding-card.is-rejected { opacity: .68; }
.visual-finding-card.is-needs-photo { border-color: #edc871; }
.visual-finding-image { position: relative; min-height: 170px; background: #e9eef5; }
.visual-finding-image img { width: 100%; height: 100%; object-fit: contain; }
.visual-finding-copy { padding: 1rem; display: grid; gap: .75rem; }
.visual-finding-title { display: flex; justify-content: space-between; gap: .8rem; align-items: start; }
.visual-finding-title > div:first-child > span { color: var(--visual-muted); font-size: .8rem; }
.visual-finding-title h3 { margin: .1rem 0 0; color: var(--visual-ink); font-size: 1.2rem; }
.visual-finding-pills { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .35rem; }
.visual-finding-pills span { border-radius: 999px; background: #eef2f7; color: #526179; padding: .3rem .55rem; font-size: .72rem; font-weight: 800; }
.visual-finding-pills .is-major { background: #feeaea; color: #a72a2a; }
.visual-finding-pills .is-moderate { background: #fff3d9; color: #8a5a00; }
.visual-finding-pills .is-minor { background: #e8f5ff; color: #155a99; }
.visual-finding-cost { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem .8rem; border-radius: .75rem; background: #f4f7fb; }
.visual-finding-cost span { color: var(--visual-muted); }
.visual-finding-cost strong { color: var(--visual-ink); }
.visual-finding-actions { display: flex; gap: .45rem; flex-wrap: wrap; align-items: center; }
.visual-review-status { margin-left: auto; font-size: .78rem; color: var(--visual-muted); font-weight: 700; }
.visual-limitations { margin-top: 1rem; border-top: 1px solid var(--visual-line); padding-top: 1rem; }
.visual-limitations summary { cursor: pointer; font-weight: 800; color: var(--visual-ink); }

.visual-scan-side-card { display: grid; gap: .8rem; }
.visual-vehicle-metrics { display: grid; gap: .55rem; }
.visual-vehicle-metrics span { display: flex; justify-content: space-between; gap: .7rem; padding-bottom: .5rem; border-bottom: 1px solid var(--visual-line); }
.visual-vehicle-metrics small { color: var(--visual-muted); }
.visual-total-cost { color: var(--visual-success); font-size: 1.65rem; }
.visual-history-list { display: grid; gap: .45rem; }
.visual-history-entry { border: 1px solid var(--visual-line); border-radius: .75rem; background: #fff; overflow: hidden; }
.visual-history-entry.active { border-color: var(--visual-primary); background: #f2f7ff; }
.visual-history-entry > button { width: 100%; text-align: left; border: 0; background: transparent; padding: .65rem; display: grid; gap: .15rem; }
.visual-history-entry > button:hover { background: rgba(34, 99, 226, .05); }
.visual-history-entry > a { display: block; border-top: 1px solid var(--visual-line); padding: .48rem .65rem; font-size: .78rem; font-weight: 750; text-decoration: none; }
.visual-history-entry > a:hover { text-decoration: underline; }
.visual-history-list small { color: var(--visual-muted); }
.visual-scan-empty { text-align: center; padding: 2rem; }
.visual-scan-empty-inline { margin-top: 0; }
.visual-scan-empty-mini { padding: 1rem; border-radius: .8rem; background: var(--visual-soft); color: var(--visual-muted); }

@media (max-width: 1050px) {
    .visual-scan-grid { grid-template-columns: 1fr; }
    .visual-scan-grid aside { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 780px) {
    .visual-scan-hero { grid-template-columns: 1fr; }
    .visual-scan-toolbar { align-items: stretch; flex-direction: column; }
    .visual-delete-confirmation { align-items: flex-start; flex-direction: column; }
    .visual-scan-toolbar label { min-width: 0; }
    .visual-photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .visual-coverage-grid { grid-template-columns: repeat(2, 1fr); }
    .visual-finding-card { grid-template-columns: 1fr; }
    .visual-finding-image { max-height: 260px; }
    .visual-scan-grid aside { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
    .visual-scan-page { padding-left: .75rem !important; padding-right: .75rem !important; }
    .visual-photo-grid { grid-template-columns: 1fr; }
    .visual-finding-title,
    .visual-finding-cost { flex-direction: column; }
    .visual-finding-pills { justify-content: flex-start; }
    .visual-review-status { width: 100%; margin-left: 0; }
    .visual-scan-disclaimer { align-items: flex-start; flex-direction: column; }
}

/* Visual Condition Scan — Stage 2 listing import and claim comparison */
.visual-stage-badge {
    border-radius: 999px;
    padding: .4rem .7rem;
    background: #eee9ff;
    color: #5b36ae;
    font-size: .75rem;
    font-weight: 800;
}

.visual-listing-panel {
    background: linear-gradient(145deg, #ffffff, #fbf9ff);
    border-color: #ddd3f5;
}

.visual-listing-import-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, .85fr);
    gap: 1rem;
}

.visual-listing-url-box,
.visual-listing-manual-box {
    display: grid;
    align-content: start;
    gap: .7rem;
    padding: 1rem;
    border: 1px solid var(--visual-line);
    border-radius: 1rem;
    background: rgba(255,255,255,.85);
}

.visual-listing-url-box label > span,
.visual-listing-manual-box label > span {
    display: block;
    margin-bottom: .4rem;
    color: var(--visual-ink);
    font-size: .82rem;
    font-weight: 800;
}

.visual-listing-url-box > small {
    color: var(--visual-muted);
    line-height: 1.45;
}

.visual-listing-manual-box textarea {
    resize: vertical;
    min-height: 7.5rem;
}

.visual-listing-manual-box .btn {
    justify-self: start;
}

.visual-listing-source-summary {
    display: grid;
    gap: .7rem;
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid #abd7c4;
    border-radius: 1rem;
    background: #f0fbf6;
}

.visual-listing-source-summary > div:first-child {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.visual-listing-source-summary > div:first-child span {
    color: #3d6e59;
    text-align: right;
}

.visual-listing-source-summary a {
    justify-self: start;
    font-weight: 750;
    text-decoration: none;
}

.visual-listing-stats {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.visual-listing-stats span {
    padding: .35rem .55rem;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #cce7da;
    color: #315c49;
    font-size: .78rem;
}

.visual-listing-fallback {
    display: grid;
    gap: .5rem;
    margin-top: 1rem;
    padding: .9rem 1rem;
    border: 1px solid #efcd87;
    border-radius: .9rem;
    background: #fff9ec;
    color: #684d18;
}

.visual-listing-fallback ul {
    margin: 0;
    padding-left: 1.2rem;
}

.visual-photo-name-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    min-width: 0;
}

.visual-photo-name-row strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.visual-source-pill {
    flex: 0 0 auto;
    border-radius: 999px;
    padding: .2rem .45rem;
    font-size: .68rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .035em;
}

.visual-source-pill.is-listing {
    color: #5b36ae;
    background: #eee9ff;
}

.visual-source-pill.is-upload {
    color: #175e8e;
    background: #e8f5ff;
}

.visual-listing-comparison {
    display: grid;
    gap: 1rem;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--visual-line);
}

.visual-listing-comparison-head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 1rem;
}

.visual-listing-comparison-head span {
    color: #6b48b5;
    font-size: .75rem;
    font-weight: 850;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.visual-listing-comparison-head h3 {
    margin: .25rem 0 0;
    color: var(--visual-ink);
    font-size: 1.25rem;
}

.visual-listing-comparison-head > strong {
    min-width: 2.2rem;
    height: 2.2rem;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: #eee9ff;
    color: #5b36ae;
}

.visual-inconsistency-list {
    display: grid;
    gap: .8rem;
}

.visual-inconsistency-card {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid #ead39a;
    border-radius: 1rem;
    background: #fffdf7;
}

.visual-inconsistency-card img {
    width: 100%;
    height: 100%;
    min-height: 150px;
    object-fit: cover;
    background: #e9eef5;
}

.visual-inconsistency-card > div {
    display: grid;
    gap: .55rem;
    padding: 1rem;
}

.visual-inconsistency-card span {
    color: #8a641b;
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.visual-inconsistency-card h4 {
    margin: 0;
    color: var(--visual-ink);
    font-size: 1.05rem;
}

.visual-inconsistency-card p,
.visual-inconsistency-card small,
.visual-inconsistency-card > div > div {
    margin: 0;
    color: var(--visual-muted);
}

@media (max-width: 780px) {
    .visual-listing-import-grid { grid-template-columns: 1fr; }
    .visual-listing-source-summary > div:first-child { flex-direction: column; }
    .visual-listing-source-summary > div:first-child span { text-align: left; }
    .visual-inconsistency-card { grid-template-columns: 1fr; }
    .visual-inconsistency-card img { max-height: 250px; }
}

@media (max-width: 520px) {
    .visual-listing-url-box .input-group { display: grid; }
    .visual-listing-url-box .input-group > * { width: 100%; border-radius: .5rem !important; }
    .visual-listing-url-box .input-group .btn { margin-top: .5rem; }
}


/* Visual Condition Scan — Stage 3 annotations, quality, comparisons and feedback */
.visual-bounding-box {
    position: absolute;
    z-index: 3;
    border: 2px solid #ffca3a;
    border-radius: .4rem;
    background: rgba(255, 202, 58, .08);
    box-shadow: 0 0 0 1px rgba(7, 22, 43, .65), 0 0 0 9999px rgba(7, 22, 43, .06);
    pointer-events: none;
}

.visual-bounding-box.is-primary {
    border-color: #ff8a3d;
    background: rgba(255, 138, 61, .1);
}

.visual-quality-card {
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid #cfdcf0;
    border-radius: 1rem;
    background: linear-gradient(145deg, #f8fbff, #f2f7ff);
}

.visual-quality-card > div:first-child {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
}

.visual-quality-card > div:first-child span { color: var(--visual-muted); font-weight: 700; }
.visual-quality-card > div:first-child strong { color: var(--visual-primary); }
.visual-quality-meter { height: .55rem; margin: .75rem 0; border-radius: 999px; background: #dfe8f5; overflow: hidden; }
.visual-quality-meter span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #e7a62d, #2a72df, #20a56c); }
.visual-quality-card ul { margin: .5rem 0 0; padding-left: 1.15rem; color: var(--visual-muted); }

.visual-better-photo {
    display: grid;
    gap: .25rem;
    padding: .75rem .85rem;
    border-left: 3px solid #e0a225;
    border-radius: .65rem;
    background: #fff9ea;
}

.visual-better-photo strong { color: #76510b; font-size: .82rem; }
.visual-better-photo span { color: #6c5b37; font-size: .88rem; }

.visual-feedback-box {
    border-top: 1px solid var(--visual-line);
    padding-top: .7rem;
}

.visual-feedback-box summary { cursor: pointer; color: var(--visual-ink); font-weight: 800; }
.visual-feedback-box label { display: grid; gap: .35rem; margin-top: .7rem; color: var(--visual-muted); font-size: .82rem; }
.visual-feedback-box textarea { width: 100%; border: 1px solid var(--visual-line); border-radius: .65rem; padding: .6rem; resize: vertical; }
.visual-feedback-box > div { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .55rem; }
.visual-feedback-box > small { display: block; margin-top: .45rem; color: var(--visual-muted); }

.visual-photo-comparison {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--visual-line);
}

.visual-photo-comparison-list { display: grid; gap: 1rem; margin-top: 1rem; }
.visual-photo-comparison-list > article {
    border: 1px solid var(--visual-line);
    border-radius: 1rem;
    overflow: hidden;
    background: #fff;
}
.visual-photo-comparison-list > article.is-change { border-color: #edc871; }
.visual-photo-comparison-list > article.is-consistent { border-color: #7fd3ad; }
.visual-photo-comparison-list > article.is-unclear { border-color: #bfc7d4; }
.visual-photo-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: #edf2f8; }
.visual-photo-pair figure { margin: 0; min-width: 0; }
.visual-photo-pair img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.visual-photo-pair figcaption { padding: .45rem .6rem; color: #526179; font-size: .76rem; font-weight: 800; }
.visual-photo-comparison-list > article > div:last-child { display: grid; gap: .45rem; padding: 1rem; }
.visual-photo-comparison-list h4 { margin: 0; color: var(--visual-ink); }
.visual-photo-comparison-list p { margin: 0; color: var(--visual-muted); }
.visual-comparison-disclaimer { margin: .85rem 0 0; color: var(--visual-muted); font-size: .82rem; }

.visual-history-change-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; }
.visual-history-change-grid span { display: grid; gap: .15rem; padding: .65rem; border-radius: .75rem; background: #f4f7fb; text-align: center; }
.visual-history-change-grid small { color: var(--visual-muted); }
.visual-history-change-grid strong { color: var(--visual-ink); font-size: 1.25rem; }
.visual-history-changes { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.visual-history-changes li { display: flex; justify-content: space-between; gap: .6rem; border-bottom: 1px solid var(--visual-line); padding-bottom: .4rem; }
.visual-history-changes span { color: var(--visual-muted); text-align: right; }

@media (max-width: 620px) {
    .visual-quality-card > div:first-child { align-items: flex-start; flex-direction: column; }
    .visual-photo-pair { grid-template-columns: 1fr; }
    .visual-history-change-grid { grid-template-columns: 1fr; }
}

.visual-photo-preview.has-annotations img { object-fit: contain; }

/* Visual scan usability upgrade: automatic view organisation and global report library. */
.visual-view-detection {
    display: grid;
    gap: .18rem;
    padding: .65rem .72rem;
    border: 1px solid rgba(32, 45, 65, .12);
    border-radius: .75rem;
    background: rgba(247, 249, 252, .9);
}

.visual-view-detection strong {
    font-size: .82rem;
    line-height: 1.25;
}

.visual-view-detection small,
.visual-view-detection span {
    color: var(--bs-secondary-color, #657080);
    font-size: .75rem;
    line-height: 1.35;
}

.visual-view-detection.is-confident {
    border-color: rgba(25, 135, 84, .28);
    background: rgba(25, 135, 84, .07);
}

.visual-view-detection.is-uncertain {
    border-color: rgba(255, 193, 7, .36);
    background: rgba(255, 193, 7, .08);
}

.visual-photo-request-card textarea {
    resize: vertical;
    min-height: 11rem;
    white-space: pre-wrap;
    font-size: .86rem;
}

[data-visual-feature="saved-photo-reports"] .visual-history-list {
    max-height: 30rem;
    overflow-y: auto;
    padding-right: .2rem;
}

[data-visual-feature="saved-photo-reports"] .visual-history-entry > button {
    text-align: left;
}

[data-visual-feature="saved-photo-reports"] .visual-history-list strong,
[data-visual-feature="saved-photo-reports"] .visual-history-list small {
    display: block;
    overflow-wrap: anywhere;
}

/* Completed report library: compact, readable, and limited to finished scans. */
.visual-completed-library {
    gap: .7rem;
    min-width: 0;
}

.visual-library-heading {
    align-items: flex-start;
    display: flex;
    gap: .75rem;
    justify-content: space-between;
}

.visual-library-heading > div {
    min-width: 0;
}

.visual-library-heading > div > span {
    color: var(--visual-primary);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.visual-library-heading h2 {
    font-size: 1.1rem;
    line-height: 1.2;
    margin: .2rem 0 0;
}

.visual-library-heading > strong {
    align-items: center;
    background: #eaf2ff;
    border-radius: 999px;
    color: #174eaa;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: .78rem;
    height: 1.8rem;
    justify-content: center;
    min-width: 1.8rem;
    padding: 0 .48rem;
}

.visual-completed-library > p {
    font-size: .82rem;
    line-height: 1.45;
    margin: 0;
}

[data-visual-feature="saved-photo-reports"] .visual-history-list {
    display: grid;
    gap: .55rem;
    max-height: 27rem;
    overflow-y: auto;
    padding: .1rem .25rem .1rem 0;
}

[data-visual-feature="saved-photo-reports"] .visual-history-entry {
    border-radius: .9rem;
    min-width: 0;
}

[data-visual-feature="saved-photo-reports"] .visual-history-entry > button {
    display: grid;
    gap: .5rem;
    min-width: 0;
    padding: .78rem;
}

.visual-history-entry-main,
.visual-history-entry-meta {
    align-items: center;
    display: flex;
    gap: .55rem;
    min-width: 0;
}

.visual-history-entry-main {
    align-items: flex-start;
    flex-direction: column;
    gap: .15rem;
}

.visual-history-entry-main strong {
    color: var(--visual-ink);
    display: -webkit-box;
    font-size: .9rem;
    line-height: 1.3;
    overflow: hidden;
    overflow-wrap: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.visual-history-entry-main time {
    color: var(--visual-muted);
    font-size: .75rem;
    font-weight: 650;
}

.visual-history-entry-meta {
    color: var(--visual-muted);
    flex-wrap: wrap;
}

.visual-history-entry-meta small {
    background: #f1f5f9;
    border-radius: 999px;
    color: #526179;
    font-size: .7rem;
    line-height: 1;
    padding: .35rem .48rem;
}

.visual-history-entry-meta > span {
    color: var(--visual-primary);
    font-size: 1.2rem;
    line-height: 1;
    margin-left: auto;
}

[data-visual-feature="saved-photo-reports"] .visual-history-entry > a {
    font-size: .73rem;
    padding: .5rem .78rem;
}

/* Part 1.4.1 finding-card overflow regression fix.
   The old inline aspect ratio could make a 190px grid item grow to 226px,
   overlap the report copy and create page-level horizontal scrolling. */
.visual-scan-page,
.visual-scan-workspace,
.visual-scan-grid,
.visual-scan-grid > main,
.visual-scan-grid > aside,
.visual-scan-panel,
.visual-finding-list,
.visual-finding-card,
.visual-finding-copy {
    min-width: 0;
    max-width: 100%;
}

.visual-finding-card {
    width: 100%;
}

.visual-finding-image {
    width: 100%;
    min-width: 0;
    height: 100%;
    min-height: 190px;
    aspect-ratio: auto !important;
    overflow: hidden;
}

.visual-finding-image img {
    display: block;
    max-width: 100%;
}

.visual-finding-copy > *,
.visual-finding-title > div:first-child,
.visual-finding-cost > * {
    min-width: 0;
}

.visual-finding-title {
    flex-wrap: wrap;
}

.visual-finding-title > div:first-child {
    flex: 1 1 16rem;
}

.visual-finding-pills {
    flex: 0 1 auto;
}

.visual-finding-copy p,
.visual-finding-copy small,
.visual-better-photo span,
.visual-finding-cost span {
    overflow-wrap: anywhere;
}

.visual-finding-cost {
    align-items: center;
    flex-wrap: wrap;
}

.visual-finding-cost strong {
    white-space: nowrap;
}

.visual-finding-actions .btn {
    white-space: normal;
}

@media (max-width: 1180px) {
    .visual-scan-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .visual-scan-grid aside {
        position: static;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 780px) {
    .visual-finding-image {
        height: clamp(190px, 48vw, 290px);
        min-height: 0;
    }

    .visual-scan-grid aside {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Phase 2.0B: gallery review filters */
.visual-review-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 1rem 0;
    padding: .9rem 1rem;
    border: 1px solid var(--visual-line);
    border-radius: .9rem;
    background: #f7f9fc;
}

.visual-review-toolbar strong,
.visual-review-toolbar span {
    display: block;
}

.visual-review-toolbar span {
    color: #64748b;
    font-size: .8rem;
}

.visual-review-filter-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .4rem;
}

.visual-review-filter-buttons button {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 2.25rem;
    padding: .35rem .65rem;
    border: 1px solid #cfd9e7;
    border-radius: 999px;
    background: #fff;
    color: #40516b;
    font-size: .76rem;
    font-weight: 750;
}

.visual-review-filter-buttons button b {
    display: grid;
    min-width: 1.35rem;
    height: 1.35rem;
    place-items: center;
    border-radius: 999px;
    background: #e9eef6;
    font-size: .68rem;
}

.visual-review-filter-buttons button.active {
    border-color: #1463ff;
    background: #1463ff;
    color: #fff;
}

.visual-review-filter-buttons button.active b {
    background: rgba(255,255,255,.2);
}

@media (max-width: 760px) {
    .visual-review-toolbar { align-items: stretch; flex-direction: column; }
    .visual-review-filter-buttons { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: .25rem; }
}