.ping-cz{--cz-ink:#0b1220;--cz-muted:#5b6778;--cz-line:#e3e8ee;--cz-soft:#f4f7f9;--cz-teal:#47c0bf;--cz-navy:#25477f;--cz-violet:#9f4b9c;
  margin:0 0 22px;padding:18px;border:1px solid var(--cz-line);border-radius:24px;background:rgba(255,255,255,.85);backdrop-filter:blur(10px);color:var(--cz-ink);
  font-family:Urbanist,"Readex Pro",system-ui,sans-serif;box-shadow:0 20px 50px -20px rgba(37,71,127,.25)}
.ping-cz[dir=rtl]{font-family:"Readex Pro",Urbanist,system-ui,sans-serif}
.ping-cz__head{display:flex;align-items:center;gap:10px;margin:2px 4px 14px}
.ping-cz__dot{width:9px;height:9px;border-radius:50%;background:var(--cz-teal);box-shadow:0 0 0 0 rgba(71,192,191,.6);animation:czPulse 2s infinite}
@keyframes czPulse{70%{box-shadow:0 0 0 10px rgba(71,192,191,0)}100%{box-shadow:0 0 0 0 rgba(71,192,191,0)}}
.ping-cz__title{margin:0;font-size:1.1rem;font-weight:800}
.ping-cz__grid{display:grid;gap:18px}

/* stage */
.ping-cz__stage{position:relative;overflow:hidden;border-radius:20px;padding:34px 18px 52px;min-height:250px;display:grid;place-items:center;perspective:1100px;
  background:radial-gradient(60% 70% at 20% 10%,rgba(71,192,191,.35),transparent 60%),radial-gradient(60% 70% at 90% 100%,rgba(159,75,156,.35),transparent 60%),linear-gradient(160deg,#0b1220,#141d33 60%,#0b1220)}
.ping-cz__stage:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:26px 26px;mask-image:radial-gradient(circle at center,#000 30%,transparent 75%)}
.ping-cz__stage:after{content:"";position:absolute;left:50%;bottom:26px;width:60%;height:18px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(71,192,191,.45),transparent);filter:blur(6px)}
.ping-cz__scene{position:relative;z-index:1;transform-style:preserve-3d}
.ping-cz__obj{--rx:0deg;--ry:0deg;--flip:0deg;position:relative;transform-style:preserve-3d;transform:rotateX(var(--rx)) rotateY(calc(var(--ry) + var(--flip)));transition:transform .6s cubic-bezier(.2,.8,.2,1);animation:czFloat 5s ease-in-out infinite}
.ping-cz__scene.is-back .ping-cz__obj{--flip:180deg}
@keyframes czFloat{50%{translate:0 -8px}}
.ping-cz__face{display:block;backface-visibility:hidden;box-shadow:0 30px 50px -18px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.08)}
.ping-cz__face--back{position:absolute;inset:0;transform:rotateY(180deg)}
.ping-cz__obj--card .ping-cz__face{width:min(330px,72vw);height:auto;border-radius:14px}
.ping-cz__obj--round .ping-cz__face{width:170px;height:170px;border-radius:50%}
.ping-cz__obj--square .ping-cz__face{width:170px;height:170px;border-radius:16px}
.ping-cz__shine{position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.22) 48%,transparent 60%);background-size:250% 100%;animation:czShine 4.5s ease-in-out infinite;mix-blend-mode:screen}
.ping-cz__obj--card .ping-cz__shine{border-radius:14px}.ping-cz__obj--round .ping-cz__shine{border-radius:50%}.ping-cz__obj--square .ping-cz__shine{border-radius:16px}
@keyframes czShine{0%{background-position:120% 0}60%,100%{background-position:-30% 0}}
.ping-cz__flip{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);z-index:2;padding:7px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:#fff;font:inherit;font-size:.82rem;font-weight:600;cursor:pointer;backdrop-filter:blur(6px)}
.ping-cz__flip:hover{background:rgba(255,255,255,.16)}

/* controls */
.ping-cz__controls{display:flex;flex-direction:column;gap:14px}
.ping-cz__modes{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ping-cz__mode{position:relative;display:flex;flex-direction:column;gap:3px;text-align:start;padding:14px;border-radius:16px;border:1.5px solid var(--cz-line);background:#fff;color:var(--cz-ink);font:inherit;cursor:pointer;transition:border-color .2s,box-shadow .2s,transform .2s}
.ping-cz__mode strong{font-size:.98rem}
.ping-cz__mode span{font-size:.8rem;color:var(--cz-muted)}
.ping-cz__mode:hover{transform:translateY(-1px)}
.ping-cz__mode.is-on{border-color:transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(120deg,var(--cz-teal),var(--cz-navy),var(--cz-violet)) border-box;box-shadow:0 10px 24px -12px rgba(37,71,127,.45)}
.ping-cz__mode.is-on:after{content:"✓";position:absolute;top:10px;inset-inline-end:12px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:.72rem;color:#fff;background:linear-gradient(120deg,var(--cz-teal),var(--cz-navy))}
.ping-cz__box{display:flex;flex-direction:column;gap:14px}
.ping-cz__box[hidden]{display:none}
.ping-cz__field>label{display:block;margin-bottom:7px;font-weight:700;font-size:.9rem}
.ping-cz__sub{display:block;margin:10px 0 4px;font-size:.84rem;color:var(--cz-muted)}
.ping-cz__swatches{display:flex;flex-wrap:wrap;gap:9px;align-items:center}
.ping-cz__sw{width:32px;height:32px;border-radius:50%;border:1px solid rgba(14,26,43,.18);cursor:pointer;padding:0;transition:transform .15s}
.ping-cz__sw:hover{transform:scale(1.08)}
.ping-cz__sw.is-on{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--cz-teal)}
.ping-cz__custom{display:inline-flex;align-items:center;gap:6px;font-size:.84rem;color:var(--cz-muted);cursor:pointer}
.ping-cz__custom input{width:32px;height:32px;padding:0;border:1px solid var(--cz-line);border-radius:50%;background:none;cursor:pointer}
.ping-cz__seg{display:inline-flex;flex-wrap:wrap;gap:6px;padding:4px;border-radius:999px;background:var(--cz-soft)}
.ping-cz__segbtn{padding:8px 16px;border:0;border-radius:999px;background:transparent;color:var(--cz-ink);font:inherit;font-size:.88rem;font-weight:600;cursor:pointer}
.ping-cz__segbtn.is-on{background:var(--cz-ink);color:#fff;box-shadow:0 6px 14px -6px rgba(11,18,32,.5)}
.ping-cz__row{display:flex;gap:12px;align-items:center}
.ping-cz__btn{padding:11px 16px;border:1.5px dashed var(--cz-teal);border-radius:14px;background:rgba(71,192,191,.08);color:var(--cz-ink);font:inherit;font-weight:700;cursor:pointer}
.ping-cz__link{background:none;border:0;color:var(--cz-muted);text-decoration:underline;font:inherit;cursor:pointer}
.ping-cz__input{width:100%;padding:12px 14px;border:1px solid var(--cz-line);border-radius:12px;font:inherit;font-size:1rem;background:#fff}
.ping-cz__input:focus{outline:2px solid var(--cz-teal);outline-offset:1px}
.ping-cz input[type=range]{width:100%;accent-color:var(--cz-navy)}
.ping-cz__hint,.ping-cz__note{margin:6px 0 0;font-size:.82rem;color:var(--cz-muted)}
.ping-cz__note{padding:10px 12px;border-radius:12px;background:var(--cz-soft)}
.ping-cz__warn{margin:6px 0 0;font-size:.82rem;color:#9a6700}
.ping-cz__err{margin:0;padding:10px 12px;border-radius:12px;background:#fdecec;color:#a61b1b;font-size:.9rem}
@media (prefers-reduced-motion:reduce){.ping-cz__obj,.ping-cz__shine,.ping-cz__dot{animation:none}}