*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;background:linear-gradient(135deg,#1a1a2e,#16213e);min-height:100vh;color:#fff}.app{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:20px}h1{font-size:2.5rem;margin-bottom:20px;text-shadow:0 0 20px rgba(79,172,254,.5)}.status{padding:8px 20px;border-radius:20px;font-size:.9rem;margin-bottom:30px}.status.connected{background:#2ed57333;color:#2ed573;border:1px solid #2ed573}.status.disconnected{background:#ff6b6b33;color:#ff6b6b;border:1px solid #ff6b6b}.error{background:#ff6b6b33;color:#ff6b6b;padding:10px 20px;border-radius:8px;margin-bottom:20px}.counter-container{margin:40px 0;text-align:center}.counter{font-size:6rem;font-weight:700;color:#4facfe;text-shadow:0 0 30px rgba(79,172,254,.6);transition:transform .1s ease}.counter.animate{animation:bounce .5s ease}@keyframes bounce{0%{transform:scale(1)}25%{transform:scale(1.3)}50%{transform:scale(.9)}75%{transform:scale(1.1)}to{transform:scale(1)}}.added-value{font-size:1.5rem;color:#2ed573;margin-top:10px;opacity:0;transform:translateY(10px);animation:fadeUp 1s ease forwards}@keyframes fadeUp{0%{opacity:0;transform:translateY(10px)}20%{opacity:1;transform:translateY(0)}80%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-10px)}}.buttons{display:flex;gap:15px;margin-top:20px}button{padding:15px 40px;font-size:1.2rem;border:none;border-radius:30px;cursor:pointer;transition:all .3s ease;font-weight:600}.increment-btn{background:linear-gradient(135deg,#4facfe,#00f2fe);color:#1a1a2e}.increment-btn:hover:not(:disabled){transform:translateY(-3px);box-shadow:0 10px 30px #4facfe66}.increment-btn:disabled{opacity:.5;cursor:not-allowed}.reconnect-btn{background:#ffffff1a;color:#fff;border:1px solid rgba(255,255,255,.3)}.reconnect-btn:hover{background:#fff3}.info{margin-top:30px;color:#fff9;font-size:.9rem}