/* Human check (rotate the picture). */
.vshc {
    --vshc-brand: #6366f1;
    --vshc-accent: #a801db;
    --vshc-ink: #111827;
    --vshc-muted: #6b7280;
    position: relative;
    margin-top: 1.75rem;
    padding: 1.25rem;
    border: 1px solid #e0e7ff;
    border-radius: 1.25rem;
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(99, 102, 241, .1) 0%, rgba(99, 102, 241, 0) 55%),
        radial-gradient(120% 140% at 100% 100%, rgba(168, 1, 219, .07) 0%, rgba(168, 1, 219, 0) 55%),
        #fbfbff;
    overflow: hidden;
    transition: border-color .3s, background-color .3s;
}
.vshc * { box-sizing: border-box; }
.vshc__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.vshc__badge { display: inline-flex; align-items: center; gap: .375rem; padding: .25rem .625rem .25rem .5rem; border-radius: 999px; background: #fff; color: #4338ca; font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; box-shadow: 0 1px 2px rgba(17, 24, 39, .06), 0 0 0 1px #e0e7ff; }
.vshc__badge svg { width: 14px; height: 14px; }
.vshc__refresh { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; border: 1px solid #e0e7ff; border-radius: 50%; background: #fff; color: var(--vshc-muted); cursor: pointer; transition: color .15s, border-color .15s, transform .4s; }
.vshc__refresh:hover { border-color: var(--vshc-brand); color: var(--vshc-brand); transform: rotate(-180deg); }
.vshc__refresh svg { width: 16px; height: 16px; }
.vshc.is-passed .vshc__refresh { visibility: hidden; }

.vshc__body { display: flex; align-items: center; gap: 1.5rem; }
.vshc__stage { position: relative; flex: none; width: 148px; height: 148px; }
.vshc__ring { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, #6366f1, #a801db, #6366f1); padding: 3px; -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px)); opacity: .9; transition: opacity .3s; }
.vshc.is-loading .vshc__ring, .vshc.is-checking .vshc__ring { animation: vshc-spin 1.2s linear infinite; }
.vshc__disc { position: absolute; inset: 9px; border-radius: 50%; background: #eef2ff; box-shadow: inset 0 0 0 1px rgba(99, 102, 241, .15), 0 12px 30px -12px rgba(79, 70, 229, .55); overflow: hidden; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.vshc.is-dragging .vshc__disc { cursor: grabbing; }
.vshc__img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; will-change: transform; animation: vshc-fade .35s ease-out; }
.vshc__img[hidden] { display: none; }
.vshc__loading { position: absolute; inset: 0; background: linear-gradient(110deg, #eef2ff 30%, #f8f9ff 50%, #eef2ff 70%); background-size: 200% 100%; animation: vshc-shimmer 1.2s linear infinite; }
.vshc:not(.is-loading) .vshc__loading { display: none; }
.vshc__done { position: absolute; right: 2px; bottom: 6px; display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center; border: 3px solid #fff; border-radius: 50%; background: #10b981; color: #fff; box-shadow: 0 8px 18px -6px rgba(16, 185, 129, .7); transform: scale(0); transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.vshc__done svg { width: 18px; height: 18px; }

.vshc__side { flex: 1; min-width: 0; }
.vshc__prompt { margin: 0 0 1rem; color: var(--vshc-ink); font-size: 1rem; font-weight: 700; line-height: 1.4; }
.vshc__track { position: relative; height: 44px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px #e0e7ff, inset 0 2px 4px rgba(17, 24, 39, .04); cursor: pointer; touch-action: none; outline: none; }
.vshc__track:focus-visible { box-shadow: inset 0 0 0 1px #e0e7ff, 0 0 0 3px rgba(99, 102, 241, .3); }
.vshc__fill { position: absolute; top: 0; bottom: 0; left: 0; width: 22px; border-radius: 999px; background: linear-gradient(90deg, rgba(99, 102, 241, .14), rgba(168, 1, 219, .14)); }
.vshc__thumb { position: absolute; top: 0; left: 0; display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient(135deg, #6366f1, #8b5cf6 60%, #a801db); color: #fff; box-shadow: 0 6px 16px -4px rgba(99, 102, 241, .65); transition: transform .15s, box-shadow .15s; }
.vshc__thumb svg { width: 20px; height: 20px; }
.vshc__track:hover .vshc__thumb, .vshc.is-dragging .vshc__thumb { transform: scale(1.06); box-shadow: 0 8px 20px -4px rgba(99, 102, 241, .8); }
.vshc__status { margin: .625rem 0 0; color: var(--vshc-muted); font-size: .8125rem; line-height: 1.45; }

.vshc.is-error .vshc__status { color: #b91c1c; }
.vshc.is-error .vshc__disc { animation: vshc-shake .4s; }
.vshc.is-passed { border-color: #a7f3d0; background: radial-gradient(120% 140% at 0% 0%, rgba(16, 185, 129, .1) 0%, rgba(16, 185, 129, 0) 60%), #f6fdf9; }
.vshc.is-passed .vshc__ring { background: #10b981; }
.vshc.is-passed .vshc__done { transform: scale(1); }
.vshc.is-passed .vshc__img { transition: transform .4s cubic-bezier(.34, 1.56, .64, 1); }
.vshc.is-passed .vshc__status { color: #047857; font-weight: 600; }
.vshc.is-passed .vshc__track { pointer-events: none; }
.vshc.is-passed .vshc__thumb { background: #10b981; box-shadow: 0 6px 16px -4px rgba(16, 185, 129, .6); }
.vshc.is-passed .vshc__fill { background: rgba(16, 185, 129, .14); }
.vshc.is-passed .vshc__disc { cursor: default; }

@keyframes vshc-spin { to { transform: rotate(360deg); } }
@keyframes vshc-shimmer { to { background-position: -200% 0; } }
@keyframes vshc-fade { from { opacity: 0; } }
@keyframes vshc-shake { 25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }

@media (max-width: 559px) {
    .vshc__body { flex-direction: column; text-align: center; gap: 1.125rem; }
    .vshc__side { width: 100%; }
    .vshc__stage { width: 168px; height: 168px; }
}
@media (prefers-reduced-motion: reduce) {
    .vshc__ring, .vshc__loading, .vshc__img, .vshc__disc { animation: none !important; }
    .vshc__done, .vshc__refresh { transition: none; }
}
