/* 3D viewer + placement check — uses only the site's design tokens (see site.css :root). */
.v3d { display: grid; gap: 14px; }
@media (min-width: 960px) { .v3d { grid-template-columns: 1.7fr 1fr; align-items: start; } }
.v3d-stage { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.v3d-canvas { display: block; width: 100%; aspect-ratio: 4 / 3; max-height: 70vh; border-radius: var(--radius-md); background: var(--surface-2); border: 1px solid var(--border); touch-action: none; cursor: grab; }
@media (min-width: 700px) { .v3d-canvas { aspect-ratio: 16 / 10; } }
.v3d-canvas:active { cursor: grabbing; }
.v3d-bar { display: flex; flex-wrap: wrap; gap: 6px; }
.v3d-bar .btn[aria-pressed="true"] { border-color: var(--hub-orange); color: var(--accent-2); background: var(--accent-soft); }
.v3d-note { margin: 0; display: flex; gap: 6px; align-items: flex-start; font-size: .88rem; color: var(--warn); background: var(--warn-bg); border-radius: var(--radius-sm); padding: 8px 12px; }
.v3d-note .ic { margin-top: 5px; flex: none; }
.v3d-parts { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.v3d-part { width: 100%; display: flex; align-items: center; gap: 10px; text-align: start; font: inherit; font-weight: 600; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 12px; min-height: 44px; cursor: pointer; }
.v3d-part:hover { border-color: var(--niro-blue); }
.v3d-part[aria-pressed="true"] { border-color: var(--hub-orange); background: var(--accent-soft); }
.v3d-sw { width: 16px; height: 16px; border-radius: 5px; flex: none; border: 1px solid var(--border); }
.v3d-info h3 { margin: 0 0 4px; }
.v3d-info p { margin: 0 0 6px; }

/* ---------- placement check (AR-lite) ---------- */
.arl { display: grid; gap: 14px; }
@media (min-width: 960px) { .arl { grid-template-columns: 1.7fr 1fr; align-items: start; } }
.arl-modes { display: flex; gap: 6px; padding: 4px; background: var(--seg-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-pill); width: fit-content; max-width: 100%; }
.arl-modes button { font: inherit; font-weight: 700; border: 0; background: none; color: var(--muted); padding: 8px 18px; border-radius: var(--radius-pill); cursor: pointer; min-height: 40px; }
.arl-modes button[aria-selected="true"] { background: var(--niro-blue); color: var(--surface); }
.arl-stage { position: relative; border-radius: var(--radius-md); overflow: hidden; background: var(--surface-2); border: 1px solid var(--border); aspect-ratio: 4 / 3; max-height: 72vh; touch-action: none; }
.arl-stage video, .arl-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.arl-stage video { object-fit: cover; background: var(--navy); }
.arl-gate { position: absolute; inset: 0; display: grid; place-content: center; gap: 10px; text-align: center; padding: 20px; background: var(--glass-bg-strong); }
.arl-gate p { margin: 0; max-width: 46ch; }
.arl-tools { display: grid; gap: 10px; }
.arl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.arl-seg { display: flex; gap: 6px; flex-wrap: wrap; }
.arl-seg label { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.arl-seg input { width: 18px; height: 18px; }
.arl-verdict { border-radius: var(--radius-sm); padding: 8px 12px; font-weight: 700; }
.arl-verdict.ok { background: var(--ok-bg); color: var(--ok); }
.arl-verdict.bad { background: var(--danger-bg); color: var(--danger); }
.arl-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: .86rem; color: var(--muted); }
.arl-legend span::before { content: ""; display: inline-block; width: 14px; height: 14px; border-radius: 4px; margin-inline-end: 6px; vertical-align: -2px; border: 2px solid var(--hub-orange); }
.arl-legend span.m::before { border-style: dashed; border-color: var(--niro-blue); }