.screenshot-workspace { --trace-border:#d8dee7; --trace-muted:#526176; color:#172033; max-width:1240px; margin:0 auto; }
.screenshot-header { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:8px 0 22px; }
.screenshot-header h2 { margin:0; font-size:23px; font-weight:650; letter-spacing:-.4px; }
.screenshot-header p { margin:7px 0 0; color:var(--trace-muted); font-size:13px; line-height:1.6; }
.screenshot-page-status { display:flex; gap:7px; align-items:center; flex-wrap:wrap; font-size:12px; color:#92400e; }
.screenshot-status-dot { width:7px; height:7px; border-radius:50%; background:currentColor; }
.screenshot-page-status.is-active { color:#166534; }
.screenshot-page-status button { border:0; background:none; color:var(--trace-muted); text-decoration:underline; text-underline-offset:3px; padding:8px 4px; }
.screenshot-workbench { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(300px,.9fr); border:1px solid var(--trace-border); background:white; border-radius:4px; overflow:hidden; }
.screenshot-source { padding:22px; min-width:0; }
.screenshot-results { display:flex; flex-direction:column; min-width:0; border-left:1px solid var(--trace-border); background:#fcfcfd; }
.screenshot-section-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }
.screenshot-section-heading h3 { margin:0; font-size:14px; font-weight:650; }
.screenshot-section-heading>span { color:var(--trace-muted); font-size:11px; }
.screenshot-results>.screenshot-section-heading { padding:22px 24px 18px; margin:0; border-bottom:1px solid var(--trace-border); }
.screenshot-dropzone { display:flex; align-items:center; justify-content:center; min-height:330px; border:1px dashed #aab6c7; border-radius:3px; background:#f8fafc; overflow:hidden; }
.screenshot-dropzone.is-dragging { border-color:var(--ph-red,#b51f32); background:#fff3f4; }
.screenshot-dropzone.has-preview { border-style:solid; }
.screenshot-empty-upload { display:flex; flex-direction:column; align-items:center; justify-content:center; width:100%; min-height:330px; padding:24px; gap:10px; cursor:pointer; color:var(--trace-muted); border:0; background:none; }
.screenshot-empty-upload svg { margin-bottom:7px; color:#64748b; }
.screenshot-empty-upload strong { font-size:15px; color:#263448; font-weight:600; }
.screenshot-empty-upload span { font-size:13px; }
.screenshot-empty-upload small { margin-top:5px; font-size:12px; }
.screenshot-preview { display:block; width:100%; height:330px; object-fit:contain; }
.screenshot-file-meta { padding-top:12px; display:flex; gap:5px; flex-direction:column; overflow-wrap:anywhere; font-size:12px; }
.screenshot-file-meta strong { font-weight:550; }.screenshot-file-meta span { color:var(--trace-muted); font-variant-numeric:tabular-nums; }
.screenshot-actions { display:flex; justify-content:flex-end; gap:10px; padding-top:18px; }
.screenshot-primary,.screenshot-secondary { min-height:40px; border-radius:3px; padding:9px 18px; font-size:13px; font-weight:600; }
.screenshot-primary { color:white; background:var(--ph-red,#b51f32); border:1px solid var(--ph-red,#b51f32); }
.screenshot-secondary { background:white; border:1px solid var(--trace-border); color:#334155; }
.screenshot-workspace button:disabled { opacity:.5; cursor:not-allowed; }
.screenshot-workspace button:focus-visible { outline:2px solid #475569; outline-offset:3px; }
.screenshot-privacy,.screenshot-footnote { color:var(--trace-muted); font-size:12px; line-height:1.7; margin:14px 0 0; }
.screenshot-error { color:#b91c1c; margin-top:12px; font-size:13px; }
.screenshot-result-empty { padding:40px 24px; }.screenshot-result-empty h4 { font-weight:600; font-size:16px; margin:0 0 10px; }
.screenshot-result-empty p,.screenshot-result-note { font-size:13px; color:var(--trace-muted); line-height:1.8; margin:0; }
.screenshot-result-body { padding:24px; }.screenshot-result-label { font-size:14px; font-weight:650; margin:0 0 22px; }
.screenshot-result-label.is-matched { color:#166534; }.screenshot-result-label.is-unmatched { color:#92400e; }
.screenshot-match { padding-bottom:20px; margin-bottom:18px; border-bottom:1px solid var(--trace-border); }.screenshot-small-label { color:var(--trace-muted); font-size:12px; }
.screenshot-match h4 { font-weight:650; font-size:23px; margin:6px 0 2px; overflow-wrap:anywhere; }.screenshot-username { font-size:13px; color:var(--trace-muted); margin:0; overflow-wrap:anywhere; }
.screenshot-match dl { display:grid; grid-template-columns:auto 1fr; gap:10px 14px; margin-top:22px; font-size:12px; }.screenshot-match dt { color:var(--trace-muted); }.screenshot-match dd { text-align:right; margin:0; font-variant-numeric:tabular-nums; }
.screenshot-how { padding:20px 24px; margin-top:auto; border-top:1px solid var(--trace-border); }.screenshot-how h4 { font-size:12px; font-weight:650; margin:0 0 12px; }
.screenshot-evidence { padding:0 24px 24px; font-size:12px; }
.screenshot-evidence h4 { font-size:13px; margin:0 0 12px; }
.screenshot-evidence>p { color:var(--trace-muted); line-height:1.7; }
.screenshot-evidence details { margin-top:12px; color:var(--trace-muted); line-height:1.7; }.screenshot-evidence summary { cursor:pointer; }.screenshot-evidence summary:focus-visible { outline:2px solid #475569; outline-offset:3px; }
.screenshot-evidence dl { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:9px 12px; font-variant-numeric:tabular-nums; }
.screenshot-evidence dt { color:var(--trace-muted); }.screenshot-evidence dd { margin:0; text-align:right; }
.screenshot-candidates { margin-top:20px; }.screenshot-candidates table { width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; }
.screenshot-candidates th,.screenshot-candidates td { padding:9px 4px; border-bottom:1px solid var(--trace-border); text-align:right; }
.screenshot-candidates th:first-child,.screenshot-candidates td:first-child { text-align:left; overflow-wrap:anywhere; }
.screenshot-candidates td span { display:block; color:var(--trace-muted); margin-top:4px; }
.screenshot-how ol,.screenshot-recovery { list-style:decimal; padding-left:18px; margin:0; color:var(--trace-muted); font-size:12px; line-height:1.9; }.screenshot-recovery { margin-top:15px; }.screenshot-how li+li,.screenshot-recovery li+li { margin-top:7px; }
@media(max-width:760px) { .screenshot-header { align-items:flex-start; flex-direction:column; gap:10px; padding-bottom:16px; }.screenshot-workbench { grid-template-columns:minmax(0,1fr); }.screenshot-results { border-left:0; border-top:1px solid var(--trace-border); }.screenshot-source { padding:16px; }.screenshot-header h2 { font-size:21px; }.screenshot-dropzone,.screenshot-empty-upload { min-height:250px; }.screenshot-preview { height:280px; }.screenshot-primary,.screenshot-secondary { min-height:44px; }.screenshot-page-status button { min-height:36px; }.screenshot-result-empty { padding:24px; } }
