body{font-family:Arial,sans-serif;max-width:800px;margin:0 auto;padding:20px}h1{text-align:center;color:#333}.token-form{background-color:#f5f5f5;padding:15px;border-radius:5px;margin-bottom:20px}.token-list{margin-top:20px}.token-item{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;border-bottom:1px solid #ddd;transition:background-color .3s}.token-item:hover{background-color:#f9f9f9}.price{flex:1;text-align:right;padding:0 15px;font-family:monospace;font-size:.9em;transition:all .3s ease-in-out;min-width:180px}.price .sell-price,.price .buy-price{display:inline-block;font-weight:700}.price .sell-price{color:#06c}.price .buy-price{color:#063}.price-up{background-color:#00ff001a;animation:flash-green 1.5s}.price-down{background-color:#ff00001a;animation:flash-red 1.5s}@keyframes flash-green{0%{background-color:#00ff001a}50%{background-color:#00ff004d}to{background-color:#00ff001a}}@keyframes flash-red{0%{background-color:#ff00001a}50%{background-color:#ff00004d}to{background-color:#ff00001a}}button{background-color:#4caf50;color:#fff;border:none;padding:8px 12px;border-radius:4px;cursor:pointer;transition:background-color .2s ease}button:hover{opacity:.9}button.delete{background-color:#e76f51}input,select{padding:8px;margin-right:10px;border:1px solid #ddd;border-radius:4px;box-sizing:border-box}#add-token-form{display:flex;align-items:center;flex-wrap:wrap}#add-token-form input{margin-bottom:10px}#add-token-form button{margin-left:auto;margin-bottom:10px}.status{position:fixed;bottom:10px;right:10px;padding:5px 10px;border-radius:5px;font-size:12px;background-color:#ddd;color:#333}.connected{background-color:#2a9d8f;color:#fff}.disconnected{background-color:#e76f51;color:#fff}@media (max-width: 600px){#add-token-form{flex-direction:column;align-items:stretch}#add-token-form input,#add-token-form button{width:100%;margin-right:0;margin-left:0}.token-item{flex-direction:column;align-items:flex-start}.token-item .price{margin-top:5px;margin-bottom:5px}.token-item button.delete{margin-top:5px;align-self:flex-end}}.refresh-button-container{display:flex;justify-content:flex-end;margin-bottom:15px;padding:0 10px}.refresh-button{background-color:#3498db;color:#fff;border:none;border-radius:4px;padding:8px 15px;cursor:pointer;font-weight:700;transition:background-color .3s}.refresh-button:hover{background-color:#2980b9}.refresh-button:active{background-color:#1f6aa5}.update-time{font-size:.8em;color:#777;margin-top:5px;text-align:right}
