/* verify-guide.css — state-bound cinematic KYC guide, 2026-09-01. */
.vg-wrap{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin:6px 0 22px;
  padding:clamp(10px,2vw,18px);border:1px solid rgba(112,242,206,.18);border-radius:22px;overflow:hidden;
  background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(16,92,74,.055))}
.vg-a11y{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}

.vg-3d{position:relative;width:100%;aspect-ratio:16/9;min-height:0;border-radius:20px;overflow:hidden;
  isolation:isolate;cursor:grab;touch-action:none;border:1px solid rgba(111,239,202,.2);
  background:radial-gradient(90% 100% at 76% 8%,rgba(22,154,116,.25),transparent 64%),
    radial-gradient(80% 110% at 8% 96%,rgba(35,91,180,.18),transparent 64%),linear-gradient(145deg,#040807,#07120f 55%,#030806)}
.vg-3d[data-vg-grab]{cursor:grabbing}.vg-3d canvas{position:absolute;inset:0;z-index:3;display:block;width:100%;height:100%}
.vg-film{position:absolute;inset:0;z-index:3;display:block;width:100%;height:100%;object-fit:cover;
  object-position:center center;transform:none;filter:saturate(.96) contrast(1.025);pointer-events:none;
  background:#040807}
.vg-3d[data-vg-renderer="photoreal-film"]{cursor:default;touch-action:pan-y}
.vg-3d[data-vg-renderer="photoreal-film"] canvas,
.vg-3d[data-vg-renderer="photoreal-film"] .vg-circuit,
.vg-3d[data-vg-renderer="photoreal-film"] .vg-depth,
.vg-3d[data-vg-renderer="photoreal-film"] .vg-beam{display:none!important}
.vg-circuit{position:absolute;inset:0;z-index:0;opacity:.5;pointer-events:none;
  background-image:linear-gradient(rgba(128,239,209,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(128,239,209,.055) 1px,transparent 1px);background-size:34px 34px;
  mask-image:linear-gradient(90deg,#000,transparent 82%)}
.vg-circuit i{position:absolute;height:1px;background:linear-gradient(90deg,transparent,#5ef0c0,transparent);
  box-shadow:0 0 12px rgba(70,237,189,.65);animation:vgCircuit 5.6s ease-in-out infinite}
.vg-circuit i:nth-child(1){width:44%;top:19%;left:3%}.vg-circuit i:nth-child(2){width:31%;top:67%;left:10%;animation-delay:-1.2s}
.vg-circuit i:nth-child(3){width:38%;top:36%;right:4%;animation-delay:-2.7s}.vg-circuit i:nth-child(4){width:28%;top:82%;right:12%;animation-delay:-4s}
.vg-depth{position:absolute;inset:15% 18%;z-index:1;perspective:800px;pointer-events:none}.vg-depth i{position:absolute;inset:0;
  border:1px solid rgba(92,236,191,.24);border-radius:18px;transform:translate3d(0,0,0) rotateX(2deg);
  box-shadow:0 18px 42px rgba(0,0,0,.28);animation:vgDepth 7s ease-in-out infinite}
.vg-depth i:nth-child(2){transform:translate3d(18px,-14px,-30px);opacity:.62;animation-delay:-1.4s}
.vg-depth i:nth-child(3){transform:translate3d(34px,-28px,-60px);opacity:.34;animation-delay:-2.8s}
.vg-beam{position:absolute;z-index:5;left:12%;right:12%;top:21%;height:2px;pointer-events:none;
  background:linear-gradient(90deg,transparent,#68ffd0 20%,#d8fff1 50%,#68ffd0 80%,transparent);
  box-shadow:0 0 10px #42e9b5,0 0 30px rgba(66,233,181,.48);animation:vgBeam 3.2s ease-in-out infinite}
.vg-telemetry{position:absolute;z-index:7;inset-inline:16px;top:14px;display:flex;gap:7px;flex-wrap:wrap;pointer-events:none}
.vg-telemetry span{padding:6px 9px;border:1px solid rgba(119,240,205,.2);border-radius:999px;background:rgba(2,13,10,.62);
  color:rgba(212,255,242,.7);font:600 10px/1.1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.08em;
  backdrop-filter:blur(8px)}.vg-telemetry b{color:#74f4ca;font-weight:800;font-variant-numeric:tabular-nums}
.vg-mode{position:absolute;z-index:7;top:15px;inset-inline-end:16px;display:flex;align-items:center;gap:7px;max-width:44%;
  color:#dffcf2;font:700 11px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;text-transform:uppercase;letter-spacing:.06em}
.vg-mode i{width:7px;height:7px;flex:0 0 auto;border-radius:50%;background:#63f0c1;box-shadow:0 0 13px #63f0c1;animation:vgPulse 1.8s ease-in-out infinite}
.vg-cap{position:absolute;z-index:7;inset-inline:0;bottom:0;padding:34px 16px 14px;background:linear-gradient(0deg,rgba(1,8,6,.94),transparent);
  display:flex;align-items:baseline;gap:9px;justify-content:center;flex-wrap:wrap;pointer-events:none}
.vg-cap b{font-size:clamp(12px,1.6vw,15px);color:#e6fff7;min-height:1.2em}.vg-cap span{font-size:11px;color:#70e7c0;font-variant-numeric:tabular-nums;letter-spacing:.08em}
.vg-flat{position:absolute;z-index:2;inset:0;display:flex;align-items:center;justify-content:center;gap:9px;padding:0 16px;flex-wrap:wrap;opacity:1}
.vg-flat i{width:9px;height:9px;border-radius:50%;display:block;background:rgba(84,226,183,.5);box-shadow:0 0 13px rgba(75,232,184,.42)}
.vg-flat i:last-child{background:#95ffdb;box-shadow:0 0 18px rgba(80,255,197,.72)}
.vg-3d[data-vg-live] .vg-flat{opacity:0}.vg-3d[data-vg-fallback] .vg-flat{opacity:1}
.vg-3d[data-vg-scene="face"] .vg-depth i{border-radius:48% 48% 42% 42%/39% 39% 55% 55%;inset:4% 28%}
.vg-3d[data-vg-scene="live"]{border-color:rgba(121,255,204,.48);box-shadow:inset 0 0 70px rgba(44,199,149,.11)}
.vg-3d[data-vg-scene="complete"] .vg-beam{top:50%;animation:none;opacity:.25}.vg-3d[data-vg-scene="complete"] .vg-depth i{border-radius:999px}
.vg-3d[data-vg-scene="error"]{border-color:rgba(255,115,115,.5)}.vg-3d[data-vg-scene="error"] .vg-beam{background:#ff7777;box-shadow:0 0 16px #ff7777}
.g-bar{position:relative;z-index:2}
@keyframes vgCircuit{0%,100%{opacity:.18;transform:scaleX(.62)}50%{opacity:.9;transform:scaleX(1)}}
@keyframes vgDepth{0%,100%{margin:0}50%{margin:-5px 6px 5px -6px}}
@keyframes vgBeam{0%,100%{transform:translateY(0);opacity:.35}50%{transform:translateY(185px);opacity:1}}
@keyframes vgPulse{0%,100%{opacity:.42;transform:scale(.8)}50%{opacity:1;transform:scale(1.18)}}
@media(min-width:601px) and (max-width:1100px){.vg-3d{aspect-ratio:16/9;min-height:0}}
@media(max-width:600px){.vg-3d{aspect-ratio:16/9;min-height:0}.vg-mode{top:auto;bottom:54px;max-width:70%}.vg-depth{inset:20% 9%}.vg-beam{left:7%;right:7%}}
@media(prefers-reduced-motion:reduce){.vg-circuit i,.vg-depth i,.vg-beam,.vg-mode i{animation:none!important}.vg-beam{top:50%;opacity:.55}.vg-film{transform:none!important}}