.tgate-container{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#4180ff 0%,#2d5aff 100%);padding:20px}.tgate-container .tgate-loading{background:white;border-radius:20px;padding:60px 40px;box-shadow:0 20px 60px #0000004d;text-align:center;max-width:400px;width:100%}.tgate-container .tgate-loading i.fa-spinner{color:#4180ff;margin-bottom:20px}.tgate-container .tgate-loading p{font-size:18px;color:#333;margin:0}.tgate-container .tgate-content{background:white;border-radius:20px;padding:40px;box-shadow:0 20px 60px #0000004d;max-width:500px;width:100%}.tgate-container .tgate-header{text-align:center;margin-bottom:30px;position:relative;padding:20px;border-radius:10px;transition:all .3s ease}.tgate-container .tgate-header h1{font-size:28px;color:#333;margin:0;font-weight:600}.tgate-container .tgate-header .header-status{position:absolute;top:12px;right:12px}.tgate-container .tgate-header.connected{background-color:#d4edda;border:2px solid #28a745}.tgate-container .tgate-header.connected h1{color:#155724}.tgate-container .tgate-header.disconnected{background-color:#f8d7da;border:2px solid #dc3545}.tgate-container .tgate-header.disconnected h1{color:#721c24}.tgate-container .tgate-header.connecting{background-color:#fff3cd;border:2px solid #ffc107}.tgate-container .tgate-header.connecting h1{color:#856404}.tgate-container .status-indicator{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:20px;font-size:14px;font-weight:500}.tgate-container .status-indicator.connected{background-color:#d4edda;color:#155724}.tgate-container .status-indicator.connected i{color:#28a745}.tgate-container .status-indicator.connecting{background-color:#fff3cd;color:#856404}.tgate-container .status-indicator.connecting i{color:#ffc107}.tgate-container .status-indicator.disconnected{background-color:#f8d7da;color:#721c24}.tgate-container .status-indicator.disconnected i{color:#dc3545}.tgate-container .connection-indicator{width:12px;height:12px;border-radius:50%;cursor:pointer;transition:all .3s ease}.tgate-container .connection-indicator .indicator-dot{display:block;width:100%;height:100%;border-radius:50%}.tgate-container .connection-indicator.online .indicator-dot{background-color:#28a745;box-shadow:0 0 4px #28a74580}.tgate-container .connection-indicator.offline .indicator-dot{background-color:#dc3545;box-shadow:0 0 4px #dc354580}.tgate-container .connection-indicator.checking .indicator-dot{background-color:#4180ff;box-shadow:0 0 4px #4180ff80;animation:pulse 1s infinite}.tgate-container .connection-indicator:hover{transform:scale(1.3);z-index:10}.tgate-container .device-status{display:flex;align-items:center;justify-content:center;gap:10px;padding:15px;border-radius:10px;margin-bottom:20px;font-size:16px;font-weight:500}.tgate-container .device-status.checking{background-color:#e7f3ff;color:#004085}.tgate-container .device-status.checking i{color:#4180ff}.tgate-container .device-status.online{background-color:#d4edda;color:#155724}.tgate-container .device-status.online i{color:#28a745;animation:pulse 2s infinite}.tgate-container .device-status.offline{background-color:#f8d7da;color:#721c24}.tgate-container .device-status.offline i{color:#dc3545}.tgate-container .tgate-body{display:flex;flex-direction:column;align-items:center;gap:20px}.tgate-container .button-label{text-align:center}.tgate-container .button-label p{font-size:18px;color:#555;margin:0;line-height:1.5}.tgate-container .tgate-button{display:flex;align-items:center;justify-content:center;gap:12px;padding:18px 40px;font-size:18px;font-weight:600;border:none;border-radius:50px;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #0003;min-width:200px}.tgate-container .tgate-button.idle{background:linear-gradient(135deg,#4180ff 0%,#2d5aff 100%);color:#fff}.tgate-container .tgate-button.idle:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #0000004d}.tgate-container .tgate-button.idle:active:not(:disabled){transform:translateY(0)}.tgate-container .tgate-button.sending{background:linear-gradient(135deg,#ffc107 0%,#ff9800 100%);color:#fff;cursor:wait;animation:zoomInOut 1s infinite}.tgate-container .tgate-button.success{background:linear-gradient(135deg,#28a745 0%,#20c997 100%);color:#fff;animation:successBounce .5s}.tgate-container .tgate-button.error{background:linear-gradient(135deg,#dc3545 0%,#c82333 100%);color:#fff;animation:shake .5s}.tgate-container .tgate-button:disabled{opacity:.6;cursor:not-allowed}.tgate-container .tgate-button i{font-size:20px}.tgate-container .error-message{display:flex;align-items:center;gap:10px;padding:12px 20px;background-color:#f8d7da;color:#721c24;border-radius:10px;border-left:4px solid #dc3545;width:100%;box-sizing:border-box}.tgate-container .error-message i{font-size:18px}.tgate-container .error-message span{flex:1;font-size:14px}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes zoomInOut{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes successBounce{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-10px)}75%{transform:translate(10px)}}@media (max-width: 600px){.tgate-container .tgate-content,.tgate-container .tgate-loading{padding:30px 20px}.tgate-container .tgate-header h1{font-size:24px}.tgate-container .tgate-button{padding:15px 30px;font-size:16px;min-width:180px}.tgate-container .button-label p{font-size:16px}}*{margin:0;padding:0;box-sizing:border-box}body{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}