/* ==========================================================================
   PLIXWIN – "I'm not a robot" slider (slide the piece into the gap)
   ========================================================================== */
.pxhc {
  --hc-card: #061B25; --hc-field: #0A222D; --hc-line: #143544; --hc-line-2: #1E4557;
  --hc-text: #EEF3F6; --hc-muted: #7F9CAD; --hc-green: #00B175; --hc-red: #FF6B6B;
  position: fixed; inset: 0; z-index: 450; display: grid; place-items: center; padding: 16px;
  background: rgba(1, 8, 12, .72); opacity: 0; transition: opacity .18s ease;
  font-family: var(--pa-font, 'Manrope', system-ui, sans-serif); color: var(--hc-text);
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
.pxhc.is-open { opacity: 1; }
.pxhc *, .pxhc *::before, .pxhc *::after { box-sizing: border-box; }
.pxhc-card { width: min(360px, 100%); padding: 16px; border: 1px solid var(--hc-line); border-radius: 18px; background: var(--hc-card); box-shadow: 0 30px 80px -24px rgba(0, 6, 10, .9); transform: translateY(10px) scale(.98); transition: transform .22s cubic-bezier(.22, .8, .24, 1); }
.pxhc.is-open .pxhc-card { transform: none; }

.pxhc-head { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }
.pxhc-title { flex: 1; min-width: 0; }
.pxhc-title b { display: block; font-size: 16px; font-weight: 800; }
.pxhc-title small { display: block; margin-top: 2px; color: var(--hc-muted); font-size: 12.5px; font-weight: 600; }
.pxhc-ic { display: grid; place-items: center; flex: none; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 9px; background: var(--hc-field); color: #C3D4DE; cursor: pointer; transition: background .15s, color .15s; }
.pxhc-ic:hover { background: #17394A; color: var(--hc-text); }
.pxhc-ic .px-ic-svg { width: 17px; height: 17px; }
.pxhc.is-loading [data-new] .px-ic-svg { animation: pxhc-spin .8s linear infinite; }

/* picture */
.pxhc-pic { position: relative; width: 100%; aspect-ratio: 2 / 1; overflow: hidden; border-radius: 12px; background: var(--hc-field); }
.pxhc-bg { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.pxhc-piece { position: absolute; left: 0; top: 0; height: auto; pointer-events: none; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .55)); will-change: left; }
.pxhc-load { position: absolute; inset: 0; display: none; place-items: center; background: var(--hc-field); }
.pxhc-load span { width: 26px; height: 26px; border: 3px solid var(--hc-line-2); border-top-color: var(--hc-green); border-radius: 50%; animation: pxhc-spin .8s linear infinite; }
.pxhc.is-loading .pxhc-load { display: grid; }
.pxhc.is-loading .pxhc-piece { visibility: hidden; }
.pxhc-msg { position: absolute; left: 0; right: 0; bottom: 0; padding: 7px 10px; font-size: 13px; font-weight: 800; text-align: center; color: #fff; transform: translateY(100%); transition: transform .18s ease; }
.pxhc-msg:empty { display: none; }
.pxhc.is-ok .pxhc-msg { transform: none; background: rgba(0, 177, 117, .92); }
.pxhc.is-bad .pxhc-msg { transform: none; background: rgba(214, 64, 64, .92); }
.pxhc.is-loading.is-bad .pxhc-load { display: none; }

/* slider */
.pxhc-track { position: relative; height: 48px; margin-top: 12px; border: 1px solid var(--hc-line); border-radius: 12px; background: var(--hc-field); overflow: hidden; touch-action: none; }
.pxhc-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: rgba(0, 177, 117, .16); border-right: 1px solid rgba(0, 177, 117, .35); }
.pxhc-hint { position: absolute; inset: 0; display: grid; place-items: center; padding-left: 40px; color: var(--hc-muted); font-size: 13.5px; font-weight: 700; pointer-events: none; transition: opacity .15s; }
.pxhc.is-drag .pxhc-hint, .pxhc.is-ok .pxhc-hint, .pxhc.is-bad .pxhc-hint { opacity: 0; }
.pxhc-handle { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 56px; height: 100%; padding: 0; border: 0; border-radius: 11px; background: var(--hc-green); color: #fff; cursor: grab; touch-action: none; box-shadow: 0 4px 14px -4px rgba(0, 177, 117, .6); transition: background .15s; }
.pxhc-handle:hover { background: #00C784; }
.pxhc.is-drag .pxhc-handle { cursor: grabbing; }
.pxhc-handle svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pxhc-ok { display: none; }
.pxhc.is-ok .pxhc-arrow { display: none; }
.pxhc.is-ok .pxhc-ok { display: block; }
.pxhc.is-bad .pxhc-handle { background: var(--hc-red); box-shadow: none; }
.pxhc.is-bad .pxhc-fill { background: rgba(255, 107, 107, .14); border-color: rgba(255, 107, 107, .4); }
.pxhc.is-bad .pxhc-card { animation: pxhc-shake .35s ease; }
.pxhc.is-loading .pxhc-handle { opacity: .6; cursor: default; }

@keyframes pxhc-spin { to { transform: rotate(360deg); } }
@keyframes pxhc-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) { .pxhc *, .pxhc { animation: none !important; transition: none !important; } }