.container{max-width:800px;margin:0 auto;padding:20px;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background-color:#f9f9f9;border-radius:8px;box-shadow:0 2px 10px #0000001a}h1{color:#2c3e50;text-align:center;margin-bottom:30px;border-bottom:2px solid #eee;padding-bottom:15px}.server-config{display:grid;grid-template-columns:1fr;gap:20px;margin-bottom:30px}.server-config select,.server-config input{width:100%;padding:12px;margin-top:8px;border:1px solid #ddd;border-radius:6px;font-size:16px;transition:border-color .3s,box-shadow .3s;box-sizing:border-box}.server-config select:hover,.server-config input:hover{border-color:#aaa}.server-config select:focus,.server-config input:focus{border-color:#4caf50;outline:none;box-shadow:0 0 0 2px #4caf5033}.server-config select:disabled,.server-config input:disabled{background-color:#f5f5f5;cursor:not-allowed;opacity:.7}.server-config label{font-weight:600;margin-bottom:8px;display:block;color:#333}.status-container{grid-column:1;display:flex;justify-content:center;margin-top:15px}.status-badge{display:flex;align-items:center;gap:10px;padding:10px 20px;border-radius:30px;font-weight:500;transition:all .3s ease;min-width:180px;justify-content:center}.status-dot{width:12px;height:12px;border-radius:50%;transition:background-color .3s}.status-text{font-size:16px}.status-connected{background-color:#d4edda;color:#155724;box-shadow:0 2px 5px #1557241a}.status-connected .status-dot{background-color:#28a745}.status-disconnected{background-color:#f8d7da;color:#721c24;box-shadow:0 2px 5px #721c241a}.status-disconnected .status-dot{background-color:#dc3545}.status-connecting{background-color:#fff3cd;color:#856404;box-shadow:0 2px 5px #8564041a}.status-connecting .status-dot{background-color:#ffc107;animation:pulse 1.5s infinite}.status-error{background-color:#f8d7da;color:#721c24;box-shadow:0 2px 5px #721c241a}.status-error .status-dot{background-color:#dc3545;animation:error-pulse 1.5s infinite}@keyframes pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.2);opacity:.8}to{transform:scale(1);opacity:1}}@keyframes error-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.3);opacity:.7;background-color:red}to{transform:scale(1);opacity:1}}.controls{display:flex;justify-content:center;gap:15px;margin:30px 0}.topic-controls{display:flex;gap:10px;margin:20px 0;align-items:center}.topic-controls input{flex:1;padding:8px;border:1px solid #ddd;border-radius:4px;font-size:14px}.topic-controls label{margin-right:10px}.subscribe-btn{padding:8px 16px;border:none;border-radius:4px;background-color:#4caf50;color:#fff;cursor:pointer;font-size:14px}.subscribe-btn:disabled{background-color:#ccc;cursor:not-allowed}button{padding:12px 25px;font-size:16px;font-weight:600;border:none;border-radius:6px;cursor:pointer;transition:all .3s ease;min-width:120px}.connect-btn{background-color:#4caf50;color:#fff;box-shadow:0 2px 5px #4caf504d}.connect-btn:hover:not(:disabled){background-color:#3d8b40;transform:translateY(-2px)}.disconnect-btn{background-color:#dc3545;color:#fff;box-shadow:0 2px 5px #dc35454d}.disconnect-btn:hover:not(:disabled){background-color:#bd2130;transform:translateY(-2px)}button:disabled{background-color:#ccc;color:#888;cursor:not-allowed;box-shadow:none;transform:none}.messages{margin-top:30px}h2{color:#2c3e50;margin-bottom:15px;text-align:center}.message-list{border:1px solid #ddd;border-radius:8px;padding:15px;max-height:400px;overflow-y:auto;background-color:#fff;box-shadow:inset 0 2px 5px #0000000d}.message{border-bottom:1px solid #eee;padding:12px 0;transition:background-color .2s}.message:last-child{border-bottom:none}.message:hover{background-color:#f9f9f9}.topic{font-weight:700;color:#2c3e50;margin-bottom:5px;display:flex;justify-content:space-between}.topic:after{content:attr(data-time);font-size:12px;color:#999;font-weight:400}.payload{color:#555;font-family:monospace;background-color:#f5f5f5;padding:8px;border-radius:4px;overflow-wrap:break-word}