.container{font-family:Arial,sans-serif;margin:0 auto;padding:20px;max-width:800px;line-height:1.6}h1{color:#333}.status{padding:10px;margin-bottom:20px;border-radius:4px}.connected{background-color:#d4edda;color:#155724}.disconnected{background-color:#f8d7da;color:#721c24}.tabs{display:flex;margin-bottom:20px;border-bottom:1px solid #ddd}.tabs button{background-color:#f8f9fa;border:1px solid #ddd;border-bottom:none;border-radius:4px 4px 0 0;padding:10px 20px;margin-right:5px;cursor:pointer;color:#555}.tabs button.active{background-color:#007bff;color:#fff;border-color:#007bff}.data-container{background-color:#f8f9fa;border:1px solid #ddd;border-radius:4px;padding:15px;margin-bottom:20px}.data-list{list-style-type:none;padding:0}.data-list li{border-bottom:1px solid #eee;padding:10px 0;word-break:break-word}.data-list li pre{margin:5px 0;white-space:pre-wrap;font-family:monospace}.timestamp{font-size:12px;color:#666;display:block;margin-bottom:5px}.text-content{font-family:inherit;white-space:pre-wrap;padding:10px;background-color:#fff;border-radius:4px;border-left:3px solid #007bff}.form-container{margin-top:20px}textarea{width:100%;font-family:monospace;padding:8px;margin-bottom:10px;border:1px solid #ddd;border-radius:4px}button{background-color:#007bff;color:#fff;border:none;padding:10px 15px;border-radius:4px;cursor:pointer;font-size:16px}button:hover{background-color:#0069d9}