.App{text-align:center}.App-header{background-color:#282c34;padding:20px;color:#fff;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:calc(10px + 2vmin)}.connection-status{margin-bottom:20px;padding:10px 20px;border-radius:20px;font-size:14px;font-weight:700}.connected{background-color:#4caf5033;color:#4caf50;border:1px solid #4caf50}.disconnected{background-color:#f4433633;color:#f44336;border:1px solid #f44336}.error-message{margin-bottom:20px;padding:10px 20px;border-radius:20px;font-size:14px;background-color:#ff980033;color:#ff9800;border:1px solid #ff9800;max-width:600px;word-break:break-word}.button-container{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:30px;max-width:600px;width:100%}.button-wrapper{padding:20px;border-radius:12px;transition:all .3s ease;display:flex;flex-direction:column;align-items:center;gap:15px}.button-wrapper:hover{transform:translateY(-2px);box-shadow:0 6px 12px #0000004d}.count-display{font-size:36px;font-weight:700;min-width:60px;text-align:center}.sub-buttons{display:flex;gap:10px}.sub-button{width:40px;height:40px;border:none;border-radius:50%;cursor:pointer;font-size:20px;font-weight:700;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.sub-button:hover:not(:disabled){transform:scale(1.1)}.sub-button:active:not(:disabled){transform:scale(.95)}.sub-button:disabled{opacity:.5;cursor:not-allowed}.button-1{background-color:#ff6b6b}.button-1 .sub-button{background-color:#ff5252;color:#fff}.button-1 .sub-button:hover:not(:disabled){background-color:#ff3838}.button-2{background-color:#4ecdc4}.button-2 .sub-button{background-color:#45b7b0;color:#fff}.button-2 .sub-button:hover:not(:disabled){background-color:#3da39c}.button-3{background-color:#45b7d1}.button-3 .sub-button{background-color:#3498db;color:#fff}.button-3 .sub-button:hover:not(:disabled){background-color:#2980b9}.button-4{background-color:#f7b731}.button-4 .sub-button{background-color:#f39c12;color:#fff}.button-4 .sub-button:hover:not(:disabled){background-color:#e67e22}.button-5{background-color:#5f27cd}.button-5 .sub-button{background-color:#4a1fa8;color:#fff}.button-5 .sub-button:hover:not(:disabled){background-color:#3e1a8e}.button-6{background-color:#00d2d3}.button-6 .sub-button{background-color:#00b8b9;color:#fff}.button-6 .sub-button:hover:not(:disabled){background-color:#00a5a6}@media (max-width: 768px){.button-container{grid-template-columns:repeat(2,1fr);gap:15px}.button-wrapper{padding:15px}.count-display{font-size:28px}.sub-button{width:35px;height:35px;font-size:18px}}@media (max-width: 480px){.button-container{grid-template-columns:1fr;gap:10px}.count-display{font-size:24px}}body{margin:0;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;background-color:#f5f5f5}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}