/* OpenVibe.Vision: the room's own pieces. Colours come from the theme (--bg-*, --text-*, --border) and the room's accent
   (.ov-room: --room-accent, --room-strong, --room-fill, --room-on), so every theme, light or dark, wears it. Phone
   first; nothing scrolls sideways. Results show which engine answered, its cost and its time. */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg-primary, #0a0f1c); color: var(--text-primary, #e6edf7); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 99; padding: 8px 12px; border-radius: 10px; background: var(--bg-card, #0f1729); color: inherit; }
.vi { display: block; }
.vi a { color: var(--room-strong); }
:where(.vi) .ovk-i { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.vi-wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px; }
.vi-narrow { max-width: 620px; }
.vi-page-pad { padding-top: clamp(28px, 6vw, 64px); }
.vi h2 { margin: 0; font-size: 1.375rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }
.vi-kicker { margin: 0 0 4px; font-size: .8125rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--room-strong); }
.vi-page-h { padding-top: clamp(20px, 4vw, 40px); margin-bottom: 22px; }
.vi-page-h h1, .vi-entry-h h1 { margin: 0; font-size: clamp(1.45rem, 4.4vw, 1.75rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.12; overflow-wrap: anywhere; }
.vi-lede, .vi-summary { margin: 10px 0 0; max-width: 64ch; color: var(--text-secondary, #96a7c2); font-size: 1.0625rem; line-height: 1.55; }
.vi-fine, .vi-muted { color: var(--text-muted, #7386a3); font-size: .8125rem; line-height: 1.55; }
.vi-section { margin-top: clamp(28px, 4vw, 44px); }
.vi-head-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.vi-count { color: var(--text-muted, #7386a3); font-size: .86rem; }
.vi-more { display: inline-flex; align-items: center; gap: 2px; font-weight: 700; font-size: .9rem; text-decoration: none; }
.vi-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.vi-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--room-fill); color: var(--room-on) !important; font: inherit; font-weight: 700; font-size: .9375rem; text-decoration: none; cursor: pointer; }
.vi-btn-quiet { background: transparent; color: var(--text-primary, #e6edf7) !important; border: 1px solid var(--border, #1f2d47); }
.vi-btn-small { min-height: 34px; padding: 0 14px; font-size: .86rem; }
.vi-btn.is-mine { background: color-mix(in srgb, var(--room-accent) 22%, transparent); color: var(--room-strong) !important; }
.vi-btn:focus-visible { outline: 2px solid var(--room-accent); outline-offset: 2px; }
.vi-note { margin: 14px 0; padding: 11px 14px; border-radius: 14px; font-weight: 600; font-size: .9375rem; background: color-mix(in srgb, var(--room-accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--room-accent) 30%, transparent); }
.vi-note.is-bad { background: color-mix(in srgb, var(--error, #ef4444) 12%, transparent); border-color: color-mix(in srgb, var(--error, #ef4444) 35%, transparent); }
.vi-empty { display: grid; justify-items: start; gap: 10px; padding: 22px; border-radius: 18px; border: 1px dashed var(--border, #1f2d47); color: var(--text-secondary, #96a7c2); }
.vi-empty p { margin: 0; line-height: 1.5; }
.vi-empty h1 { margin: 0; font-size: 1.375rem; color: var(--text-primary, #e6edf7); }


.vi-card { padding: 18px; border-radius: 18px; background: var(--bg-card, #0f1729); border: 1px solid var(--border, #1f2d47); }
.vi-form { display: grid; gap: 14px; }
.vi-field { display: grid; gap: 6px; font-size: .8125rem; font-weight: 700; color: var(--text-secondary, #96a7c2); min-width: 0; }
.vi-field input, .vi-field select, .vi-field textarea { width: 100%; min-height: 44px; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--border, #1f2d47); background: var(--bg-input, var(--bg-primary, #0a0f1c)); color: var(--text-primary, #e6edf7); font: inherit; font-size: .9375rem; font-weight: 500; }
.vi-field input:focus, .vi-field select:focus, .vi-field textarea:focus { outline: 2px solid var(--room-accent); outline-offset: 1px; border-color: transparent; }
.vi-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 20px 0 0; }
.vi-facts > div { padding: 12px 14px; border-radius: 14px; background: var(--bg-card, #0f1729); border: 1px solid var(--border, #1f2d47); min-width: 0; }
.vi-facts dt { font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted, #7386a3); }
.vi-facts dd { margin: 4px 0 0; font-weight: 700; overflow-wrap: anywhere; }
.vi-eps { display: grid; gap: 10px; margin: 12px 0 0; }
.vi-eps > div { padding: 12px 14px; border-radius: 14px; background: var(--bg-card, #0f1729); border: 1px solid var(--border, #1f2d47); }
.vi-eps dt code { font-weight: 800; color: var(--room-strong); overflow-wrap: anywhere; }
.vi-eps dd { margin: 6px 0 0; color: var(--text-secondary, #96a7c2); line-height: 1.5; }

.vi-note.is-warm { background: color-mix(in srgb, var(--warning, #f59e0b) 12%, transparent); border-color: color-mix(in srgb, var(--warning, #f59e0b) 35%, transparent); }
.vi-btn[disabled] { opacity: .5; cursor: not-allowed; }
.vi-field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.vi-field input[type=file] { padding: 8px; }
.vi-two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.vi-try { padding: 20px; border-radius: 20px; background: color-mix(in srgb, var(--room-accent) 7%, var(--bg-card, #0f1729)); border: 1px solid var(--border, #1f2d47); }

/* The aperture: two engines racing on one image */

/* Scenes' demos */
.vi-demo-receipt { display: grid; gap: 4px; width: min(100%, 300px); margin: 0 auto; padding: 18px 20px; border-radius: 6px; background: #fbfaf6; color: #222; font: 500 .9rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; box-shadow: 0 12px 30px rgba(0, 0, 0, .25); }
.vi-demo-receipt strong { margin-top: 6px; padding-top: 6px; border-top: 1px dashed #999; font-size: 1.05rem; }
.vi-demo-receipt small { color: #6b6b6b; font-size: .74rem; }
.vi-demo-kicker { justify-self: start; padding: 2px 8px; border-radius: 6px; font: 800 .68rem/1.4 Inter, sans-serif; letter-spacing: .08em; color: #fff; background: #6b4ab0; }
.vi-demo-table, .vi-table { width: 100%; border-collapse: collapse; font-size: .88rem; font-variant-numeric: tabular-nums; }
.vi-demo-table caption, .vi-table caption { text-align: left; padding-bottom: 8px; color: var(--text-muted, #7386a3); font-size: .8rem; }
.vi-demo-table th, .vi-demo-table td, .vi-table th, .vi-table td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--border, #1f2d47); vertical-align: top; overflow-wrap: anywhere; }
.vi-demo-table th, .vi-table th { font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted, #7386a3); }
.vi-demo-table { background: var(--bg-card, #0f1729); border-radius: 14px; overflow: hidden; border: 1px solid var(--border, #1f2d47); }
.vi-table-wrap { overflow-x: auto; border-radius: 14px; border: 1px solid var(--border, #1f2d47); background: var(--bg-card, #0f1729); }
.vi-demo-check { display: grid; gap: 10px; }
.vi-demo-page { position: relative; height: 120px; overflow: hidden; border-radius: 12px; border: 2px dashed color-mix(in srgb, var(--error, #ef4444) 55%, transparent); background: var(--bg-card, #0f1729); }
.vi-demo-overflow { position: absolute; left: 12px; top: 14px; width: 140%; padding: 10px; border-radius: 8px; background: color-mix(in srgb, var(--room-accent) 22%, transparent); font-size: .8rem; }
.vi-demo-clip { position: absolute; left: 12px; bottom: 16px; width: 55%; white-space: nowrap; overflow: hidden; font-weight: 800; color: var(--text-primary, #e6edf7); }
.vi-demo-check ul, .vi-warnings { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.vi-demo-check li, .vi-finding { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; padding: 8px 12px; border-radius: 10px; background: var(--bg-card, #0f1729); border: 1px solid var(--border, #1f2d47); font-size: .86rem; }
.vi-demo-check li.is-bad b, .vi-finding b { color: color-mix(in srgb, var(--error, #ef4444) 68%, var(--text-primary, #e6edf7)); }
.vi-demo-check li span, .vi-finding span { color: var(--text-secondary, #96a7c2); }

/* Results */
.vi-result, .vi-answer-card { display: grid; gap: 12px; margin-top: 18px; padding: 18px; border-radius: 18px; background: var(--bg-card, #0f1729); border: 1px solid var(--border, #1f2d47); border-top: 4px solid var(--room-accent); }
.vi-question { margin: 0; font-weight: 800; font-size: 1.05rem; }
.vi-answer-text { margin: 0; font-size: 1.05rem; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.vi-ocr-text, .vi-sample-text, .vi-code { margin: 0; padding: 14px; border-radius: 12px; background: var(--bg-primary, #0a0f1c); border: 1px solid var(--border, #1f2d47); font: 500 .86rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 420px; overflow: auto; }
.vi-models { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.vi-models li { padding: 4px 10px; border-radius: 999px; font-size: .8rem; font-weight: 700; background: color-mix(in srgb, var(--room-accent) 14%, transparent); color: var(--room-strong); }
.vi-warnings li { padding: 8px 12px; border-radius: 10px; font-size: .86rem; background: color-mix(in srgb, var(--warning, #f59e0b) 10%, transparent); }

@media (max-width: 860px) { .vi-two-col { grid-template-columns: minmax(0, 1fr); } }

/* Vision v2: the task grid, the network row and the consent demo */
.vi-tasks { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.vi-task { display: grid; gap: 6px; height: 100%; padding: 16px 18px; border-radius: 18px; border: 1px solid var(--border, #1f2d47); background: var(--bg-card, #0f1729); color: inherit; text-decoration: none; transition: border-color .15s, transform .15s; }
.vi-task b { font-size: 1.05rem; color: var(--room-strong); }
.vi-task span { color: var(--text-secondary, #96a7c2); font-size: .9rem; line-height: 1.5; }
.vi-task:hover { border-color: var(--room-accent); transform: translateY(-1px); }
.vi-task:focus-visible { outline: 2px solid var(--room-accent); outline-offset: 2px; }
.vi-net { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.vi-net li { display: grid; gap: 2px; padding: 11px 14px; border-radius: 14px; background: color-mix(in srgb, var(--room-accent) 8%, transparent); border: 1px solid color-mix(in srgb, var(--room-accent) 22%, transparent); }
.vi-net b { font-size: .9rem; }
.vi-net span { font-size: .82rem; color: var(--text-secondary, #96a7c2); }
.vi-demo-consent { list-style: none; margin: 0; padding: 14px; display: grid; gap: 10px; border-radius: 18px; background: var(--bg-card, #0f1729); border: 1px solid var(--border, #1f2d47); }
.vi-demo-consent li { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; }
.vi-demo-consent b { font-size: .95rem; }
.vi-demo-consent small { grid-column: 2; color: var(--text-muted, #7386a3); }
.vi-demo-switch { grid-row: span 2; position: relative; width: 38px; height: 22px; border-radius: 999px; background: var(--border, #1f2d47); }
.vi-demo-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--text-muted, #7386a3); transition: transform .2s; }
.vi-demo-switch.is-on { background: color-mix(in srgb, var(--room-accent) 55%, transparent); }
.vi-demo-switch.is-on::after { transform: translateX(16px); background: var(--room-strong); }
html[data-ov-motion=off] .vi-task:hover{transform: none}

/* The consent switch: a real toggle (the checkbox keeps role="switch" for assistive tech) */
.vi-check:has(> input[role=switch]) { display: inline-flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none; font-weight: 700; cursor: pointer; }
.vi-check > input[role=switch] { appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 44px; height: 26px; margin: 0; border-radius: 999px; background: var(--border, #1f2d47); cursor: pointer; transition: background .2s; }
.vi-check > input[role=switch]::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--text-muted, #7386a3); transition: transform .2s, background .2s; }
.vi-check > input[role=switch]:checked { background: color-mix(in srgb, var(--room-accent) 55%, transparent); }
.vi-check > input[role=switch]:checked::after { transform: translateX(18px); background: var(--room-strong); }
.vi-check > input[role=switch]:focus-visible { outline: 2px solid var(--room-accent); outline-offset: 2px; }
.vi-check > input[role=switch]:disabled { opacity: .5; cursor: not-allowed; }

/* ── Clean by default (§9b): the task pages ─────────────────────────────────────────────────────────────────────
   One input, one result under it, examples a tap away. The tool column is deliberately narrow so the page reads
   down the middle on a desk and fills a phone without a horizontal scroll. */
.vi-tool { max-width: 760px; }
.vi-tool-h { padding-top: clamp(18px, 4vw, 32px); margin-bottom: 20px; }
.vi-tool-h .vi-lede { max-width: 58ch; }
.vi-tool-form { display: grid; gap: 16px; margin: 0; min-width: 0; }
.vi-drop { position: relative; display: grid; justify-items: center; align-content: center; gap: 6px; min-height: 170px; padding: 24px 20px; border: 2px dashed var(--border, #1f2d47); border-radius: 18px; background: color-mix(in srgb, var(--bg-card, #0f1729) 72%, transparent); color: var(--text-secondary, #96a7c2); text-align: center; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.vi-drop:hover { border-color: var(--room-accent); background: color-mix(in srgb, var(--room-accent) 6%, var(--bg-card, #0f1729)); }
.vi-drop:has(> input:focus-visible) { outline: 3px solid var(--room-accent); outline-offset: 3px; }
.vi-drop.is-drag { border-color: var(--room-accent); background: color-mix(in srgb, var(--room-accent) 12%, var(--bg-card, #0f1729)); }
.vi-drop-art { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 4px; border-radius: 50%; color: var(--room-strong); background: color-mix(in srgb, var(--room-accent) 14%, transparent); }
.vi-drop-mark { width: 24px; height: 24px; }
.vi-drop b { font-size: 1.0625rem; font-weight: 700; color: var(--text-primary, #e6edf7); overflow-wrap: anywhere; }
.vi-drop-hint { font-size: .8125rem; color: var(--text-muted, #7386a3); }
.vi-drop-file { display: none; max-width: 100%; padding: 3px 10px; border-radius: 999px; font-size: .8125rem; font-weight: 700; color: var(--room-strong); background: color-mix(in srgb, var(--room-accent) 12%, transparent); overflow-wrap: anywhere; }
.vi-drop.is-chosen .vi-drop-file { display: inline-block; }
.vi-drop.is-chosen .vi-drop-hint { display: none; }
.vi-sr { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; }
.vi-examples { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.vi-examples-label { flex-basis: 100%; font-size: .8125rem; font-weight: 700; color: var(--text-muted, #7386a3); }
.vi-example { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; max-width: 100%; padding: 0 14px; border: 1px solid var(--border, #1f2d47); border-radius: 999px; background: transparent; color: var(--text-primary, #e6edf7); font: inherit; font-size: .8125rem; font-weight: 600; text-decoration: none; cursor: pointer; overflow-wrap: anywhere; }
.vi-example:hover { border-color: var(--room-accent); }
.vi-example:focus-visible { outline: 2px solid var(--room-accent); outline-offset: 2px; }
.vi-example img { flex: none; width: auto; height: 26px; border-radius: 3px; object-fit: cover; }
.vi-searchrow { display: flex; gap: 10px; align-items: stretch; }
.vi-searchrow input { flex: 1; min-width: 0; min-height: 52px; padding: 10px 14px; border: 1px solid var(--border, #1f2d47); border-radius: 14px; background: var(--bg-input, var(--bg-primary, #0a0f1c)); color: var(--text-primary, #e6edf7); font: inherit; font-size: 1.0625rem; }
.vi-searchrow input:focus { outline: 2px solid var(--room-accent); outline-offset: 1px; }
.vi-searchrow .vi-btn { flex: none; min-width: 96px; }
.vi-tool-facts { margin-top: 16px; }
.vi-result-tool { margin-top: 24px; padding: 20px; border-radius: 18px; border: 1px solid var(--border, #1f2d47); background: var(--bg-card, #0f1729); }
.vi-result-empty { border-style: dashed; background: color-mix(in srgb, var(--bg-card, #0f1729) 55%, transparent); }
.vi-result-tool h2 { margin: 0 0 8px; }
.vi-result-tool p { margin: 8px 0 0; color: var(--text-secondary, #96a7c2); line-height: 1.55; max-width: 62ch; }
.vi-result-tool .vi-ocr-text { margin-top: 12px; }
.vi-result-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.vi-result-head h2 { margin: 0; }
.vi-status { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 999px; font-size: .8125rem; font-weight: 700; color: var(--text-muted, #7386a3); background: color-mix(in srgb, var(--text-muted, #7386a3) 12%, transparent); }
.vi-status.is-on { color: var(--room-strong); background: color-mix(in srgb, var(--room-accent) 15%, transparent); }
.vi-matches, .vi-findings-list, .vi-steps { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 0; }
.vi-match, .vi-findings-list li { display: flex; align-items: baseline; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border, #1f2d47); min-width: 0; }
.vi-match:first-child, .vi-findings-list li:first-child { border-top: 0; }
.vi-match-rank { flex: none; width: 22px; font-size: .8125rem; font-weight: 800; color: var(--text-muted, #7386a3); }
.vi-match-main { display: grid; gap: 2px; flex: 1; min-width: 0; }
.vi-match-main a, .vi-match-main b { font-weight: 700; color: var(--text-primary, #e6edf7); text-decoration: none; overflow-wrap: anywhere; }
.vi-match-main a:hover { text-decoration: underline; }
.vi-match-main small, .vi-findings-list small { color: var(--text-muted, #7386a3); font-size: .75rem; overflow-wrap: anywhere; }
.vi-match-score { flex: none; font-size: .8125rem; font-weight: 800; color: var(--room-strong); font-variant-numeric: tabular-nums; }
.vi-findings-list b { min-width: 7ch; font-size: .9375rem; }
.vi-findings-list span { flex: 1; color: var(--text-secondary, #96a7c2); font-size: .8125rem; }
.vi-steps { gap: 6px; }
.vi-steps li { position: relative; padding-left: 18px; color: var(--text-secondary, #96a7c2); font-size: .9375rem; line-height: 1.5; }
.vi-steps li::before { content: ''; position: absolute; left: 2px; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--room-accent); }
.vi-choices { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.vi-choices legend { width: 100%; margin-bottom: 2px; padding: 0; font-size: .9375rem; font-weight: 700; color: var(--text-primary, #e6edf7); }
.vi-choice { position: relative; display: inline-flex; min-width: 0; }
.vi-choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.vi-choice span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--border, #1f2d47); border-radius: 999px; background: transparent; color: var(--text-primary, #e6edf7); font-size: .9375rem; font-weight: 600; }
.vi-choice input:checked + span { border-color: transparent; background: var(--room-fill); color: var(--room-on); }
.vi-choice input:focus-visible + span { outline: 2px solid var(--room-accent); outline-offset: 2px; }
.vi-options, .vi-disclose, .vi-api { margin-top: 4px; border-top: 1px solid var(--border, #1f2d47); padding-top: 10px; min-width: 0; }
.vi-options summary, .vi-disclose summary, .vi-api summary { display: flex; align-items: center; min-height: 44px; font-size: .9375rem; font-weight: 700; color: var(--text-primary, #e6edf7); cursor: pointer; }
.vi-options summary:focus-visible, .vi-disclose summary:focus-visible, .vi-api summary:focus-visible { outline: 2px solid var(--room-accent); outline-offset: 2px; }
.vi-options[open] summary, .vi-disclose[open] summary, .vi-api[open] summary { margin-bottom: 8px; }
.vi-options .vi-field-grid, .vi-options .vi-check { margin-top: 10px; }
.vi-api { margin-top: 32px; }
.vi-api-body { padding: 2px 0 6px; }
.vi-api-body p { margin: 0; }
.vi-more-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 16px; font-size: .9375rem; color: var(--text-muted, #7386a3); }
.vi-more-row a { font-weight: 700; }
.vi-tasklist { list-style: none; margin: 12px 0 0; padding: 0; border-top: 1px solid var(--border, #1f2d47); }
.vi-tasklist li { border-bottom: 1px solid var(--border, #1f2d47); }
.vi-tasklist a { display: flex; align-items: center; gap: 12px; min-height: 68px; padding: 12px 2px; color: inherit; text-decoration: none; }
.vi-tasklist a:focus-visible { outline: 2px solid var(--room-accent); outline-offset: 2px; }
.vi-task-txt { display: grid; gap: 2px; flex: 1; min-width: 0; }
.vi-task-txt b { font-size: 1.0625rem; font-weight: 700; color: var(--room-strong); overflow-wrap: anywhere; }
.vi-task-txt span { font-size: .9375rem; line-height: 1.45; color: var(--text-secondary, #96a7c2); overflow-wrap: anywhere; }
.vi-go { flex: none; color: var(--text-muted, #7386a3); font-size: 1.125rem; }
.vi-tasklist a:hover .vi-go { color: var(--room-strong); }
.vi-home .sc-room-hero h1 { font-size: clamp(1.6rem, 5vw, 1.75rem); line-height: 1.14; letter-spacing: -.02em; }
.vi-home .sc-room-lede { font-size: 1.0625rem; max-width: 58ch; }
.vi-home .sc-room-chips a { min-height: 44px; }
.vi-net li { background: transparent; border: 0; padding: 4px 0; }
.vi-net { gap: 10px 18px; }
.vi-net b { color: var(--text-primary, #e6edf7); }
.vi-signin { display: grid; gap: 12px; justify-items: start; margin: 0 0 20px; padding: 18px; border-radius: 18px; background: color-mix(in srgb, var(--room-accent) 8%, var(--bg-card, #0f1729)); border: 1px solid color-mix(in srgb, var(--room-accent) 24%, transparent); }
.vi-signin p { margin: 0; font-size: .9375rem; line-height: 1.5; }
.vi-purposes { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border, #1f2d47); }
.vi-purpose { padding: 18px 0; border-bottom: 1px solid var(--border, #1f2d47); }
.vi-purpose-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.vi-purpose-head > div { min-width: 0; }
.vi-purpose h2 { margin: 0 0 4px; font-size: 1.0625rem; }
.vi-purpose p { margin: 0; color: var(--text-secondary, #96a7c2); font-size: .9375rem; line-height: 1.5; }
.vi-purpose .vi-fine { margin-top: 6px; }
.vi-purpose .vi-disclose { margin-top: 8px; }
.vi-people-note { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border, #1f2d47); }
.vi-people-note h2 { margin-bottom: 6px; }
.vi-people-note p { color: var(--text-secondary, #96a7c2); line-height: 1.55; }
.vi-check { display: flex; align-items: center; gap: 9px; min-height: 44px; font-size: .9375rem; font-weight: 600; color: var(--text-secondary, #96a7c2); }
.vi-check input[type=checkbox]:not([role=switch]) { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--room-accent); }
.vi-enrol { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--border, #1f2d47); }

@media (max-width: 520px) {
    .vi-searchrow { flex-direction: column; }
    .vi-searchrow .vi-btn { width: 100%; }
    .vi-drop { min-height: 154px; padding: 20px 14px; }
    .vi-result-tool { padding: 16px; }
    .vi-match, .vi-findings-list li { gap: 8px; }
    .vi-findings-list b { min-width: 0; }
}

/* The task list stays a readable column on a desk; the scene table scrolls inside its stage on a phone. */
.vi-tasklist, .vi-more-row { max-width: 820px; }
.vi-demo-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.vi-demo-table td, .vi-demo-table th { overflow-wrap: normal; }
.vi-demo-table th:nth-child(3), .vi-demo-table td:nth-child(3), .vi-demo-table th:nth-child(4), .vi-demo-table td:nth-child(4) { white-space: nowrap; }
@media (max-width: 520px) { .vi-tasks-wrap .vi-count { display: none; } }

/* Disclosure rows: a clear chevron, and no second rule inside a purpose row. */
.vi-options summary, .vi-disclose summary, .vi-api summary { gap: 8px; }
.vi-options summary::after, .vi-disclose summary::after, .vi-api summary::after { content: ''; flex: none; width: 8px; height: 8px; margin-left: auto; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .15s ease; }
.vi-options[open] summary::after, .vi-disclose[open] summary::after, .vi-api[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.vi-purpose .vi-disclose { border-top: 0; padding-top: 0; margin-top: 2px; }
.vi-purpose .vi-disclose summary { color: var(--room-strong); font-size: .8125rem; min-height: 44px; }
.vi a.vi-example { color: var(--text-primary, #e6edf7); }
.vi a.vi-example:hover { color: var(--room-strong); }
.vi input::placeholder, .vi textarea::placeholder { color: var(--text-muted, #8c99b0); opacity: 1; }
.vi-status { color: var(--text-secondary, #a9b4c8); background: color-mix(in srgb, var(--text-secondary, #a9b4c8) 12%, transparent); }
.vi-home .sc-room-chips a { color: var(--text-primary, #eef1f6); }
.vi-home .sc-room-chips a:hover, .vi-home .sc-room-chips a:focus-visible { color: var(--text-primary, #eef1f6); border-color: var(--room-accent); }
.vi-status { color: var(--text-primary, #eef1f6); background: color-mix(in srgb, var(--text-primary, #eef1f6) 8%, transparent); }

/* Pick: on a phone every pane is shown, stacked, each with its own heading; the chips are a row of links that
   jump to a pane (the owner's rule, 2026-10-31: never hide content to shorten). A wide screen shows the panes as
   before, with no chips. */
.pick-head, .pick-row { display: none; }
@media (max-width: 640px) {
  .pick-bar { margin-top: 30px; }
  .pick-head { display: block; }
  .pick-head h2 { margin: 0 0 4px; font: 700 clamp(20px, 2.4vw, 28px)/1.2 var(--ov-font, 'Inter', system-ui, sans-serif); letter-spacing: -.02em; }
  .pick-row { display: flex; gap: 8px; overflow-x: auto; margin: 10px -16px 0; padding: 2px 16px 4px; scrollbar-width: none; overscroll-behavior-x: contain; }
  .pick-row::-webkit-scrollbar { display: none; }
  .pick-chip { display: inline-flex; align-items: center; flex: none; min-height: 44px; padding: 0 15px; border-radius: 999px; border: 1px solid var(--border, #1f2d47); color: var(--text-secondary, #96a7c2); font-size: .9rem; font-weight: 650; white-space: nowrap; text-decoration: none; }
  .pick-chip:hover, .pick-chip:focus-visible { color: var(--text-primary, #e6edf7); border-color: var(--accent, #3b82f6); }
  .pick-chip:focus-visible { outline: 2px solid var(--accent, #3b82f6); outline-offset: 2px; }
  .pick .pick-pane { scroll-margin-top: 72px; }
  .pick .pick-pane + .pick-pane { margin-top: 26px; }
}

/* The fold (the owner's short-pages rule): closed on a phone, and where there is room it looks like the section it
   replaces: a heading and its content, with no card around it. */
.vn-fold-block { margin-top: 32px; }
.vn-fold-block > summary h2 { margin: 0; font: 700 clamp(19px,2.2vw,26px)/1.2 var(--ov-font,'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif); }
.vn-fold-hint { display: none; }
/* The fold's summary carries the heading, so the section's own heading gives way to it. */
.vn-fold-block .sc-sec > h2, .vn-fold-block > .sc-sec > h2 { display: none; }
@media (min-width: 641px) {
  .vn-fold-block { border: 0; background: none; border-radius: 0; margin-top: 56px; padding: 0; }
  .vn-fold-block > summary { display: block; min-height: 0; padding: 0; }
  .vn-fold-block > summary h2 { margin: 0 0 6px; font: 700 clamp(22px,2.6vw,30px)/1.2 var(--ov-font,'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif); }
  .vn-fold-block > summary span { display: none; }
  .vn-fold-block .sc-sec { margin: 0; padding: 0; }
}
@media (max-width: 640px) {
  .vn-fold-block { margin-top: 24px; }
  .vn-fold-block > summary { cursor: pointer; }
  .vn-fold-hint { display: inline; margin-left: 8px; font-size: .78rem; font-weight: 600; color: var(--text-secondary, #96a7c2); }
}


/* A link that points into a pick block opens it: the pane carries the id the link names. */
@supports selector(:has(*)) { @media (max-width: 640px) {
  .pick .pick-pane:target { display: block; }
} }

/* On a wide screen the pick block is invisible: its blocks sit where they were, in the order they were. */
@media (min-width: 641px) {
  .pick, .pick-body, .pick-pane { display: contents; }
  .pick-bar { display: none; }
}

/* The chip names the scene, so the scene's own heading gives way to it. */
@supports selector(:has(*)) { @media (max-width: 640px) {
  .pick .sc-scene-text > h2 { display: none; }
} }

/* The fold's summary carries the heading, so the section's own heading gives way to it. */
.vn-fold-block .vi-section > h2 { display: none; }

/* Tables on a phone (phone sweep, 2026-11-01): a table of three columns or more whose cells name their column (data-label) shows each row as a card, the first
   cell its title and every other cell named by its column (html.js gives each cell its data-label). Narrower tables
   stay tables. Nothing is left out and nothing scrolls sideways. */
@media (max-width: 640px) {
    .table-wrap:has(> table thead th:nth-child(3)):has(> table td[data-label]) { overflow: visible; }
    .table-wrap > table:has(thead th:nth-child(3)):has(td[data-label]) { display: block; }
    .table-wrap > table:has(thead th:nth-child(3)):has(td[data-label]) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .table-wrap > table:has(thead th:nth-child(3)):has(td[data-label]) tbody { display: grid; gap: 10px; }
    .table-wrap > table:has(thead th:nth-child(3)):has(td[data-label]) tr { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--border, #1f2d47); border-radius: 14px; background: var(--bg-card, var(--bg-secondary, #101828)); }
    .table-wrap > table:has(thead th:nth-child(3)):has(td[data-label]) td { display: block; min-width: 0; padding: 0; border: 0; overflow-wrap: anywhere; }
    .table-wrap > table:has(thead th:nth-child(3)):has(td[data-label]) td:first-child { font-weight: 700; color: var(--text-primary, #e6edf7); }
    .table-wrap > table:has(thead th:nth-child(3)):has(td[data-label]) td[data-label]:not(:first-child)::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted, #7386a3); }
    .table-wrap > table:has(thead th:nth-child(3)):has(td[data-label]) td:empty { display: none; }
}

/* ── The hero's scene (MOTION-1): Read, Find, Watch; the ghost cursor taps each, its pane shows the result. ─────────── */
.vi-scene { width: min(100%, 400px); margin: 0 auto; display: grid; gap: 10px; padding: 12px; border-radius: 18px; border: 1px solid var(--ovk-line, rgba(255,255,255,.1)); background: var(--ovk-panel, rgba(255,255,255,.03)); }
.vi-sc-tabs { display: flex; gap: 6px; }
.vi-sc-tab { flex: 1; padding: 7px 0; border-radius: 999px; text-align: center; font-size: 13px; font-weight: 700; color: var(--ovk-muted, #7386a3); border: 1px solid var(--ovk-line, rgba(255,255,255,.1)); transition: color .2s ease, background .2s ease, border-color .2s ease; }
.vi-sc-tab.is-on, .vi-sc-tab[data-ov-ghost-on] { color: var(--room-on, #fff); background: var(--room-fill, var(--room-accent)); border-color: transparent; }
.vi-scene:has([data-ov-ghost-on]) .vi-sc-tab.is-on:not([data-ov-ghost-on]) { color: var(--ovk-muted, #7386a3); background: none; border-color: var(--ovk-line, rgba(255,255,255,.1)); }
.vi-sc-panes { display: grid; }
.vi-sc-pane { grid-area: 1 / 1; display: grid; gap: 8px; align-content: start; opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s; }
.vi-sc-read, .vi-scene:has([data-ov-ghost-step="1"][data-ov-ghost-on]) .vi-sc-read,
.vi-scene:has([data-ov-ghost-step="2"][data-ov-ghost-on]) .vi-sc-find,
.vi-scene:has([data-ov-ghost-step="3"][data-ov-ghost-on]) .vi-sc-watch { opacity: 1; visibility: visible; }
.vi-scene:has([data-ov-ghost-step="2"][data-ov-ghost-on]) .vi-sc-read,
.vi-scene:has([data-ov-ghost-step="3"][data-ov-ghost-on]) .vi-sc-read { opacity: 0; visibility: hidden; }
.vi-sc-answer { margin: 0; display: grid; gap: 1px; padding: 8px 12px; border-radius: 12px; background: color-mix(in srgb, var(--room-accent) 12%, transparent); }
.vi-sc-answer b { font-size: 14px; color: var(--text-primary, #e6edf7); }
.vi-sc-answer small { font-size: 12px; color: var(--text-secondary, #b6c0d2); }
/* Read: a receipt, its total boxed. */
.vi-sc-receipt { display: grid; gap: 4px; padding: 12px 14px; border-radius: 6px; background: #f4f1ea; color: #2b2a27; font: 600 12.5px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; transform: rotate(-1.5deg); }
.vi-sc-receipt b { text-align: center; letter-spacing: .08em; }
.vi-sc-receipt span { display: flex; justify-content: space-between; }
.vi-sc-receipt i { font-style: normal; }
.vi-sc-total { margin-top: 2px; padding: 2px 4px; outline: 2px solid var(--room-accent); outline-offset: 2px; border-radius: 3px; }
/* Find: four of your photos, one a match. */
.vi-sc-query { margin: 0; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--ovk-line, rgba(255,255,255,.12)); font-size: 13px; color: var(--text-primary, #e6edf7); }
.vi-sc-query::before { content: "⌕ "; color: var(--ovk-muted, #7386a3); }
.vi-sc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.vi-sc-ph { position: relative; aspect-ratio: 1; border-radius: 8px; }
.vi-sc-ph-a { background: linear-gradient(#7aa7d9 55%, #6b8f5a 55%); }
.vi-sc-ph-b { background: linear-gradient(#f2c27b 45%, #4f9fd1 45% 70%, #e9d7a8 70%); }
.vi-sc-ph-b i { position: absolute; left: 30%; bottom: 18%; width: 40%; height: 22%; border-radius: 40% 40% 10% 10%; background: #d6453d; }
.vi-sc-ph-c { background: linear-gradient(160deg, #2f3d5c, #8a6db3); }
.vi-sc-ph-d { background: radial-gradient(circle at 50% 60%, #c98a4b 0 28%, #3b4a3a 29%); }
.vi-sc-ph.is-hit { outline: 3px solid var(--room-accent); outline-offset: 2px; }
/* Watch: a camera still, a package boxed. */
.vi-sc-cam { position: relative; aspect-ratio: 16 / 8; border-radius: 10px; overflow: hidden; background: linear-gradient(#3a4256 62%, #565044 62%); }
.vi-sc-door { position: absolute; left: 38%; top: 12%; width: 22%; height: 50%; border-radius: 4px 4px 0 0; background: #6d4a33; box-shadow: inset -6px 0 0 #5b3d2a; }
.vi-sc-box { position: absolute; left: 63%; top: 50%; width: 16%; height: 22%; background: #b98b55; outline: 2px solid var(--room-accent); outline-offset: 3px; }
.vi-sc-box em { position: absolute; left: -3px; top: -22px; padding: 1px 6px; border-radius: 4px; font: 700 10.5px/1.4 system-ui, sans-serif; font-style: normal; color: var(--room-on, #fff); background: var(--room-fill, var(--room-accent)); white-space: nowrap; }
.vi-sc-rec { position: absolute; left: 8px; top: 6px; font: 700 10px/1 ui-monospace, monospace; color: #fff; opacity: .8; }
.vi-sc-rec::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #ef4444; }
/* On a phone the room's picture is a faint corner decoration (room.css); the scene is content, so it joins the flow
   under the hero's buttons, full strength. */
@media (max-width: 759px) { .sc-room-pic:has(.vi-scene) { position: static; z-index: auto; width: auto; opacity: 1; pointer-events: auto; margin-top: 8px; } }

/* VIS-6: the operator's unsafe-image review. Exactly three categories, plain words, no sideways scroll. */
.vi-review { padding-top: clamp(20px, 4vw, 40px); }
.vi-review-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 12px; }
.vi-review-tab { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--border, #1f2d47); background: var(--bg-card, #0f1729); color: inherit; text-decoration: none; font-size: .86rem; font-weight: 700; }
.vi-review-tab span { padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, var(--room-accent) 16%, transparent); color: var(--room-strong); font-variant-numeric: tabular-nums; }
.vi-review-tab.is-on { border-color: var(--room-accent); background: color-mix(in srgb, var(--room-accent) 14%, var(--bg-card, #0f1729)); }
.vi-review-tab:focus-visible { outline: 2px solid var(--room-accent); outline-offset: 2px; }
.vi-review-rules { margin: 0 0 16px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--border, #1f2d47); background: color-mix(in srgb, var(--room-accent) 6%, var(--bg-card, #0f1729)); color: var(--text-secondary, #96a7c2); font-size: .86rem; line-height: 1.5; }
.vi-review-rules b { color: var(--text-primary, #e6edf7); }
.vi-review-list, .vi-report-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.vi-review-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px; border-radius: 18px; border: 1px solid var(--border, #1f2d47); background: var(--bg-card, #0f1729); }
.vi-review-row.is-sex_acts { border-left: 4px solid var(--warning, #f59e0b); }
.vi-review-row.is-minor_sexual { border-left: 4px solid var(--error, #ef4444); }
.vi-review-row.is-fine { border-left: 4px solid var(--success, #22c55e); }
.vi-review-pic { display: block; width: 96px; height: 72px; border-radius: 12px; overflow: hidden; background: var(--bg-primary, #0a0f1c); border: 1px solid var(--border, #1f2d47); }
.vi-review-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vi-review-main { min-width: 0; }
.vi-review-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.vi-review-badge { display: inline-flex; align-items: center; min-height: 26px; padding: 2px 9px; border-radius: 999px; font-size: .72rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.vi-review-badge.is-fine { background: color-mix(in srgb, var(--success, #22c55e) 18%, transparent); color: color-mix(in srgb, var(--success, #22c55e) 70%, var(--text-primary, #e6edf7)); }
.vi-review-badge.is-sex_acts { background: color-mix(in srgb, var(--warning, #f59e0b) 18%, transparent); color: color-mix(in srgb, var(--warning, #f59e0b) 70%, var(--text-primary, #e6edf7)); }
.vi-review-badge.is-minor_sexual { background: color-mix(in srgb, var(--error, #ef4444) 18%, transparent); color: color-mix(in srgb, var(--error, #ef4444) 70%, var(--text-primary, #e6edf7)); }
.vi-review-plain { color: var(--text-secondary, #96a7c2); font-size: .82rem; }
.vi-review-obj, .vi-review-reason, .vi-review-meta { margin: 5px 0 0; font-size: .875rem; line-height: 1.45; overflow-wrap: anywhere; }
.vi-review-obj { color: var(--text-secondary, #96a7c2); }
.vi-review-obj code, .vi-review-meta code { font-size: .82em; }
.vi-review-reason { color: var(--text-primary, #e6edf7); }
.vi-review-meta { color: var(--text-muted, #7386a3); font-size: .78rem; }
.vi-review-row > .vi-btn { justify-self: end; }
.vi-review-reports { margin-top: 26px; }
.vi-report-row { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border, #1f2d47); background: var(--bg-card, #0f1729); font-size: .84rem; line-height: 1.5; overflow-wrap: anywhere; }
.vi-report-row a { margin-left: 6px; }

/* One review */
.vi-review-detail { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.vi-review-figure { margin: 0; display: grid; gap: 8px; }
.vi-review-figure img { width: 100%; height: auto; max-height: 62vh; object-fit: contain; border-radius: 18px; border: 1px solid var(--border, #1f2d47); background: var(--bg-card, #0f1729); }
.vi-review-figure figcaption { color: var(--text-muted, #7386a3); font-size: .78rem; line-height: 1.5; }
.vi-review-detail-main { min-width: 0; display: grid; gap: 12px; }
.vi-review-detail-main h2 { font-size: 1.05rem; }
.vi-review-report { padding: 14px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--error, #ef4444) 45%, var(--border, #1f2d47)); background: color-mix(in srgb, var(--error, #ef4444) 8%, var(--bg-card, #0f1729)); }
.vi-review-report p { margin: 6px 0 0; font-size: .86rem; line-height: 1.5; overflow-wrap: anywhere; }
.vi-review-form { display: grid; gap: 12px; margin-top: 4px; }
.vi-review-choices { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; }
.vi-review-choices legend { margin-bottom: 8px; font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted, #7386a3); }
.vi-review-choice { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--border, #1f2d47); background: var(--bg-card, #0f1729); cursor: pointer; }
.vi-review-choice.is-on { border-color: var(--room-accent); background: color-mix(in srgb, var(--room-accent) 9%, var(--bg-card, #0f1729)); }
.vi-review-choice input { margin-top: 4px; width: 20px; height: 20px; accent-color: var(--room-accent); }
.vi-review-choice b { display: block; font-size: .95rem; }
.vi-review-choice small { display: block; margin-top: 3px; color: var(--text-secondary, #96a7c2); font-size: .82rem; line-height: 1.45; }
.vi-review-choice:focus-within { outline: 2px solid var(--room-accent); outline-offset: 2px; }

@media (max-width: 760px) {
    .vi-review-row { grid-template-columns: 72px minmax(0, 1fr); }
    .vi-review-pic { width: 72px; height: 56px; }
    .vi-review-row > .vi-btn { grid-column: 1 / -1; justify-self: start; }
    .vi-review-detail { grid-template-columns: minmax(0, 1fr); }
    .vi-review-tab { flex: 1 1 auto; justify-content: center; }
}

/* VIS-6 evidence handling: category 2 and 3 pictures stay hidden or blurred until an operator reveals one. */
.vi-review-thumb.is-blurred { filter: blur(12px); transform: scale(1.04); }
.vi-review-noimage { display: flex; align-items: center; justify-content: center; width: 96px; height: 72px; padding: 6px; border-radius: 12px; border: 1px dashed var(--border, #1f2d47); background: var(--bg-primary, #0a0f1c); color: var(--text-muted, #7386a3); font-size: .68rem; font-weight: 800; text-align: center; line-height: 1.25; text-transform: uppercase; letter-spacing: .04em; }
.vi-review-evidence.is-blurred { filter: blur(22px); transform: scale(1.03); }
.vi-review-held { display: flex; align-items: center; justify-content: center; min-height: 260px; padding: 24px; border-radius: 18px; border: 1px dashed color-mix(in srgb, var(--error, #ef4444) 45%, var(--border, #1f2d47)); background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--error, #ef4444) 7%, var(--bg-card, #0f1729)) 0 12px, var(--bg-card, #0f1729) 12px 24px); color: var(--text-secondary, #96a7c2); font-weight: 700; text-align: center; }
.vi-review-evidence-note { display: grid; gap: 8px; padding: 14px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--warning, #f59e0b) 45%, var(--border, #1f2d47)); background: color-mix(in srgb, var(--warning, #f59e0b) 8%, var(--bg-card, #0f1729)); }
.vi-review-evidence-note h2 { font-size: 1rem; }
.vi-review-evidence-note p { margin: 0; font-size: .86rem; line-height: 1.5; }
.vi-review-evidence-note form { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.vi-review-reveals { display: grid; gap: 6px; padding: 14px; border-radius: 16px; border: 1px solid var(--border, #1f2d47); background: var(--bg-card, #0f1729); }
.vi-review-reveals h2 { font-size: 1rem; }
.vi-review-reveals ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.vi-review-reveals li { font-size: .82rem; line-height: 1.45; overflow-wrap: anywhere; }
@media (max-width: 760px) {
    .vi-review-noimage { width: 72px; height: 56px; font-size: .62rem; }
}