.cpl-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.25rem;min-height:100vh;padding:2rem 1.5rem;background:var(--bg-root);position:relative}.cpl-back-btn{position:absolute;top:1.25rem;left:1.25rem;background:var(--bg-panel-2);border:1px solid var(--line);border-radius:var(--radius-sm);color:var(--text-sub);font-size:.85rem;font-weight:600;padding:.45rem .85rem;cursor:pointer;transition:background var(--duration-fast);min-height:44px}.cpl-back-btn:hover{background:var(--line)}.cpl-avatar-wrap{width:88px;height:88px;border-radius:50%;overflow:hidden;box-shadow:var(--shadow);border:3px solid var(--bg-action)}.cpl-avatar-img{width:100%;height:100%;object-fit:cover;display:block}.cpl-avatar-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:2.2rem;font-weight:800;color:var(--bg-action)}.cpl-name{font-size:1.5rem;font-weight:800;color:var(--text-main);margin:0;text-align:center}.cpl-dots{display:flex;gap:1rem;align-items:center;justify-content:center;height:28px}.cpl-dot{width:18px;height:18px;border-radius:50%;border:2px solid var(--line-strong);background:transparent;transition:background var(--duration-fast),border-color var(--duration-fast),transform var(--duration-fast)}.cpl-dot-filled{background:var(--bg-action);border-color:var(--bg-action);transform:scale(1.15)}.cpl-dot-error{border-color:var(--color-error);background:var(--color-error)}.cpl-dot-success{background:var(--color-success);border-color:var(--color-success)}@keyframes cpl-pulse{0%,to{opacity:1;transform:scale(1.15)}50%{opacity:.4;transform:scale(.9)}}.cpl-dot-pulse{animation:cpl-pulse .8s ease-in-out infinite}.cpl-dot-pulse:nth-child(2){animation-delay:.15s}.cpl-dot-pulse:nth-child(3){animation-delay:.3s}.cpl-dot-pulse:nth-child(4){animation-delay:.45s}@keyframes cpl-shake{0%{transform:translateX(0)}15%{transform:translateX(-8px)}30%{transform:translateX(8px)}45%{transform:translateX(-6px)}60%{transform:translateX(6px)}75%{transform:translateX(-3px)}to{transform:translateX(0)}}.cpl-dots-shake{animation:cpl-shake .55s var(--ease-default) both}.cpl-dots-error .cpl-dot{border-color:var(--color-error);background:var(--color-error)}.cpl-error{font-size:.92rem;color:var(--color-error);min-height:1.3em}.cpl-error,.cpl-lockout{font-weight:700;margin:0;text-align:center}.cpl-lockout{font-size:.95rem;color:var(--color-warning-dark);background:var(--color-warning-surface);border:1px solid var(--color-warning);border-radius:var(--radius-md);padding:.65rem 1.25rem;max-width:280px}.cpl-numpad{display:flex;flex-direction:column;gap:.75rem;margin-top:.5rem}.cpl-numpad-row{gap:.75rem}.cpl-key,.cpl-numpad-row{display:flex;align-items:center;justify-content:center}.cpl-key{width:80px;height:80px;border-radius:var(--radius-md);border:1px solid var(--line-strong);background:var(--bg-shell);color:var(--text-main);cursor:pointer;transition:background var(--duration-fast),transform var(--duration-fast),box-shadow var(--duration-fast);box-shadow:var(--shadow-sm);-webkit-tap-highlight-color:transparent}.cpl-key:hover:not(:disabled){background:var(--bg-panel-2);transform:translateY(-1px);box-shadow:var(--shadow)}.cpl-key:active:not(:disabled){transform:scale(.94);box-shadow:none}.cpl-key:disabled{opacity:.45;cursor:not-allowed;transform:none}.cpl-key-digit{font-size:2rem;font-weight:700;font-feature-settings:"tnum";font-variant-numeric:tabular-nums;line-height:1}.cpl-key-del{background:var(--bg-panel-2);color:var(--text-sub)}.cpl-key-del:hover:not(:disabled){background:var(--color-error-surface);color:var(--color-error-dark);border-color:var(--color-error)}.cpl-numpad-spacer{width:80px;height:80px;flex-shrink:0}@media (max-width:400px){.cpl-key,.cpl-numpad-spacer{width:70px;height:70px}.cpl-key-digit{font-size:1.7rem}}@media (min-width:768px){.cpl-key,.cpl-numpad-spacer{width:90px;height:90px}.cpl-key-digit{font-size:2.2rem}}@media (prefers-reduced-motion:reduce){.cpl-dot-pulse,.cpl-dots-shake{animation:none}.cpl-key:active:not(:disabled),.cpl-key:hover:not(:disabled){transform:none}}