body{margin:0;padding:0;min-height:100vh;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}.otp-container{background:white;border-radius:16px;box-shadow:0 20px 40px #0000001a;padding:32px;min-width:500px;max-width:800px;width:100%}.otp-header{text-align:center;margin-bottom:32px}.otp-header h1{font-size:32px;color:#333;margin-bottom:8px;display:flex;align-items:center;justify-content:center;gap:12px}.otp-header p{color:#666;font-size:16px;margin:0}.otp-code-display{font-size:48px;font-weight:700;text-align:center;color:#52c41a;background:#f6ffed;border:2px dashed #52c41a;border-radius:12px;padding:24px;margin:24px 0;letter-spacing:4px}.status-indicator{display:flex;align-items:center;gap:8px;margin-bottom:16px;padding:12px;border-radius:8px;font-size:14px}.status-connected{background:#f6ffed;border:1px solid #b7eb8f;color:#389e0d}.status-disconnected{background:#fff2f0;border:1px solid #ffccc7;color:#cf1322}.phone-input{margin-bottom:24px}.button-group{display:flex;gap:12px;margin-bottom:16px}.list-all-button{width:100%;margin-bottom:24px}.otp-list-item{background:#fafafa;border-left:4px solid #1890ff;padding:16px;margin-bottom:12px;border-radius:6px}.footer-info{text-align:center;margin-top:24px;padding-top:16px;border-top:1px solid #f0f0f0;color:#666;font-size:14px}.pin-container{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}.pin-card{width:100%;max-width:500px;border-radius:16px!important;box-shadow:0 20px 40px #00000026!important}.pin-header{text-align:center;margin-bottom:32px}.pin-header h1{font-size:28px;color:#333;margin-bottom:8px;display:flex;align-items:center;justify-content:center;gap:12px}.pin-input-container{margin:32px 0;text-align:center}.pin-inputs{justify-content:center}.pin-digit{border-radius:12px!important;border:2px solid #d9d9d9!important;transition:all .3s ease!important}.pin-digit:focus{border-color:#1890ff!important;box-shadow:0 0 0 2px #1890ff33!important}.pin-digit:hover{border-color:#40a9ff!important}.pin-controls{margin-top:24px}.pin-actions{display:flex;justify-content:space-between;margin-bottom:16px}.pin-info{margin-top:24px;padding:16px;background:#f8f9fa;border-radius:8px}.pin-footer{margin-top:24px;padding-top:16px;border-top:1px solid #f0f0f0}.pin-digit.ant-input-focused{transform:scale(1.05)}.pin-digit[disabled]{background-color:#f5f5f5!important;cursor:not-allowed!important}.pin-success{animation:pinSuccess .6s ease-in-out}@keyframes pinSuccess{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}.pin-error{animation:pinError .5s ease-in-out}@keyframes pinError{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}@media (max-width: 576px){.otp-container{min-width:auto;margin:10px;padding:20px}.button-group{flex-direction:column}.otp-header h1{font-size:24px}.otp-code-display{font-size:36px;letter-spacing:2px}.pin-inputs{flex-wrap:wrap;gap:8px!important}.pin-digit{width:45px!important;height:55px!important;font-size:20px!important}.pin-header h1{font-size:24px}.pin-card{margin:10px;padding:24px!important}}