/* Jill3D Scan – uses the site tokens (light/dark) from site.css */
.j3s { --j3s-line: var(--border, rgba(127,127,127,.35)); --j3s-muted: var(--muted, #666); --j3s-acc: var(--accent, #a54f30); margin: 1.5em 0; }
.j3s [hidden] { display: none !important; }
.j3s-step { margin: 0 0 2em; }
.j3s-h { font-size: 1.25em; margin: 0 0 .6em; }
.j3s-hint, .j3s-muted { color: var(--j3s-muted); font-size: .92em; }
.j3s-modes { display: grid; grid-template-columns: 1fr 1fr; gap: .8em; }
.j3s-mode { display: flex; gap: .6em; align-items: flex-start; padding: 1em; border: 2px solid var(--j3s-line); border-radius: 12px; cursor: pointer; }
.j3s-mode:has(input:checked) { border-color: var(--j3s-acc); }
.j3s-mode input { margin-top: .3em; }
.j3s-mode small { display: block; color: var(--j3s-muted); margin-top: .2em; }
.j3s-views { display: grid; gap: 1em; margin: 1em 0; }
.j3s-view { border: 1px solid var(--j3s-line); border-radius: 12px; padding: 1em; }
.j3s-vhead { display: flex; gap: .6em; align-items: center; }
.j3s-tag { font-size: .75em; padding: .1em .6em; border-radius: 99px; background: var(--j3s-acc); color: var(--accent-contrast, #fff); }
.j3s-tag-opt { background: transparent; color: var(--j3s-muted); border: 1px solid var(--j3s-line); }
.j3s-shot { margin: .6em 0; border-radius: 8px; overflow: hidden; }
.j3s-shot canvas { display: block; max-width: 100%; touch-action: manipulation; }
.j3s-vbtns { display: flex; flex-wrap: wrap; gap: .5em; align-items: center; }
.j3s-file-btn { cursor: pointer; }
.j3s-link { background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; cursor: pointer; font: inherit; }
.j3s-vstatus { margin: .4em 0 .6em; min-height: 1.2em; }
.j3s-vstatus.is-bad, .j3s-badtxt { color: var(--danger, #b3261e); }
.j3s-ok { color: #2e7d32; font-weight: 600; }
.j3s-coin { margin: 0 0 .6em; display: flex; gap: .4em; align-items: center; flex-wrap: wrap; }
.j3s-chip { border: 1px solid var(--j3s-line); background: none; color: inherit; border-radius: 99px; padding: .2em .9em; cursor: pointer; }
.j3s-chip.is-on { border-color: var(--j3s-acc); background: var(--j3s-acc); color: var(--accent-contrast, #fff); }
.j3s-adjust { margin-top: .6em; }
.j3s-adjust summary { cursor: pointer; color: var(--j3s-muted); }
.j3s label { display: block; margin: .6em 0; font-weight: 600; }
.j3s label small { display: block; font-weight: 400; color: var(--j3s-muted); }
.j3s select, .j3s input[type=number], .j3s textarea, .j3s input[type=range] { display: block; width: 100%; margin-top: .25em; font-weight: 400; }
.j3s .j3s-check { display: flex; gap: .5em; align-items: center; font-weight: 400; }
.j3s .j3s-check input, .j3s-mode input { width: auto; }
.j3s-extra { max-width: 32em; }
.j3s-make { min-width: 14em; }
.j3s-result { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1.5em; align-items: start; margin-top: 1.2em; }
.j3s-view3d { height: 380px; border: 1px solid var(--j3s-line); border-radius: 12px; overflow: hidden; background: var(--surface-alt, rgba(127,127,127,.06)); }
.j3s-view3d canvas { display: block; touch-action: none; }
.j3s-summary { margin: 0 0 .6em; }
.j3s-warn { padding: .6em .9em; border-radius: 8px; background: color-mix(in srgb, #f9c80e 22%, transparent); margin-bottom: .6em; }
.j3s-total { font-size: 1.8em; font-weight: 700; line-height: 1.2; }
.j3s-price { min-height: 4.5em; margin: 1em 0; }
.j3s-order .button { width: 100%; }
.j3s-error { margin-top: 1em; padding: .8em 1em; border-radius: 8px; background: color-mix(in srgb, var(--danger, #b3261e) 12%, transparent); color: var(--danger, #b3261e); }
.j3s-privacy { margin-top: 1.5em; }
/* camera */
.j3s-noscroll, .j3s-noscroll body { overflow: hidden; }
.j3s-cam { position: fixed; inset: 0; z-index: 100000; background: #000; color: #fff; }
.j3s-cam video, .j3s-cam canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.j3s-cam-status { position: absolute; left: 1em; right: 1em; top: max(1em, env(safe-area-inset-top)); margin: 0; padding: .6em .9em; border-radius: 10px; background: rgba(0,0,0,.55); text-align: center; }
.j3s-cam-status.is-ok { background: rgba(46,158,79,.85); }
.j3s-cam-bar { position: absolute; left: 0; right: 0; bottom: max(1.2em, env(safe-area-inset-bottom)); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 1.2em; }
.j3s-cam-x { justify-self: start; background: rgba(0,0,0,.5); color: #fff; border: 0; border-radius: 99px; padding: .6em 1.1em; font: inherit; }
.j3s-shutter { width: 74px; height: 74px; border-radius: 50%; border: 5px solid #fff; background: rgba(255,255,255,.35); }
.j3s-shutter:active { background: #fff; }
@media (max-width: 760px) {
  .j3s-modes, .j3s-result { grid-template-columns: 1fr; }
  .j3s-view3d { height: 300px; }
}
.j3s-beta { padding: .7em 1em; border-radius: 10px; border: 1px dashed var(--j3s-acc); font-size: .92em; }
.j3s-view3d { position: relative; }
.j3s-3d-busy { position: absolute; left: .8em; top: .7em; z-index: 1; font-size: .85em; padding: .2em .7em; border-radius: 99px; background: rgba(0,0,0,.55); color: #fff; }
.j3s-order .j3s-make { margin: .4em 0; }
.j3s-try { margin: 0 0 .6em; display: flex; flex-wrap: wrap; gap: .4em; align-items: center; }
.j3s-try small { flex-basis: 100%; color: var(--j3s-muted); }
.j3s-pick { display: flex; flex-wrap: wrap; gap: .4em; align-items: center; margin: .8em 0 1em; }
.j3s-pick-q { flex-basis: 100%; margin: 0 0 .2em; }
.j3s-pick small { opacity: .75; }
.j3s-level { position: absolute; right: 1em; top: calc(max(1em, env(safe-area-inset-top)) + 4.2em); width: 64px; height: 64px; border-radius: 50%; border: 2px solid rgba(255,255,255,.8); background: rgba(0,0,0,.35); }
.j3s-level::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; border: 1px dashed rgba(255,255,255,.7); }
.j3s-level span { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #f9c80e; transition: transform .1s; }
.j3s-level.is-ok span { background: #3ddc84; }
.j3s-cam-tools { position: absolute; left: 1em; right: 1em; bottom: calc(max(1.2em, env(safe-area-inset-bottom)) + 92px); display: flex; flex-wrap: wrap; gap: .5em .8em; align-items: center; }
.j3s-cam-tools label, .j3s-torch { background: rgba(0,0,0,.5); color: #fff; border-radius: 99px; padding: .35em .8em; font-size: .9em; border: 0; font-weight: 400; display: flex; gap: .4em; align-items: center; margin: 0; }
.j3s-cam-tools input[type=range] { width: 8em; margin: 0; display: inline-block; }
.j3s-cam-tools input[type=checkbox] { width: auto; margin: 0; display: inline-block; }
.j3s-torch[aria-pressed=true] { background: #f9c80e; color: #000; }
.j3s-print { flex-basis: 100%; margin: .4em 0 0; display: flex; flex-wrap: wrap; gap: .5em; align-items: center; }
.j3s-print small { color: var(--j3s-muted); flex-basis: 100%; }
.j3s-cards { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: .4em; align-items: center; margin-top: .3em; }
.j3s-cards-how { flex-basis: 100%; }