*{box-sizing:border-box;margin:0;padding:0}body{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;background-color:#f5f5f5;color:#333;line-height:1.6}.container{max-width:800px;margin:0 auto;padding:20px}h1{text-align:center;color:#2c3e50;margin-bottom:30px}.form-container{background:white;padding:30px;border-radius:10px;box-shadow:0 0 20px rgba(0,0,0,0.1);margin-bottom:30px}.form-group{margin-bottom:20px}label{display:block;margin-bottom:5px;font-weight:bold;color:#555}input{width:100%;padding:12px;border:1px solid #ddd;border-radius:5px;font-size:16px}button{background-color:#3498db;color:white;padding:12px 20px;border:none;border-radius:5px;cursor:pointer;font-size:16px;width:100%;transition:background-color 0.3s;-webkit-tap-highlight-color:transparent;touch-action:manipulation}@media screen and (max-width:768px){.container{padding:10px}.form-container{padding:20px}h1{font-size:24px;margin-bottom:20px}input{font-size:16px;padding:15px}button{padding:15px;font-size:18px;min-height:50px}.result-container{padding:20px}.user-info-value{font-size:16px}}button:hover{background-color:#2980b9}.result-container{background:white;padding:30px;border-radius:10px;box-shadow:0 0 20px rgba(0,0,0,0.1)}.result-container h2{color:#2c3e50;margin-bottom:20px;text-align:center}.user-info-item{margin-bottom:15px;padding:15px;background-color:#f8f9fa;border-left:4px solid #3498db;border-radius:5px}.user-info-label{font-weight:bold;color:#555}.user-info-value{color:#2c3e50;font-size:18px;margin-top:5px;word-break:break-all}.message{padding:15px;border-radius:5px;margin-bottom:20px;text-align:center}.message.success{background-color:#d4edda;color:#155724;border:1px solid #c3e6cb}.message.error{background-color:#f8d7da;color:#721c24;border:1px solid #f5c6cb}.button-group{display:flex;flex-direction:column;gap:15px;margin-top:20px}@media screen and (max-width:768px){.button-group{gap:15px}.button-group{gap:15px}}.loading{text-align:center;padding:20px}.loading::after{content:" ";display:inline-block;width:20px;height:20px;border:3px solid #f3f3f3;border-top:3px solid #3498db;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes fadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:fadeIn 0.5s ease-out forwards}.loading-spinner{display:inline-block;width:20px;height:20px;border:3px solid #f3f3f3;border-top:3px solid #3498db;border-radius:50%;animation:spin 1s linear infinite;margin-right:10px;vertical-align:middle}@media screen and (max-width:768px){.loading-spinner{width:24px;height:24px;border-width:4px}}button{position:relative;overflow:hidden;transition:all 0.3s ease}button:hover{transform:translateY(-2px);box-shadow:0 5px 15px rgba(0,0,0,0.2)}button:active{transform:translateY(0)}.bind-button{background-color:#8e44ad;margin-top:20px}@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(39,174,96,0.7)}70%{box-shadow:0 0 0 10px rgba(39,174,96,0)}100%{box-shadow:0 0 0 0 rgba(39,174,96,0)}}.pulse{animation:pulse 2s infinite}.loading-spinner{display:inline-block;width:20px;height:20px;border:3px solid #f3f3f3;border-top:3px solid #3498db;border-radius:50%;animation:spin 1s linear infinite;margin-right:10px;vertical-align:middle}