html, body { margin: 0; height: 100%; font-family: "Segoe UI", Roboto, Arial, sans-serif; background: #f4f5f7; }
.topbar { display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; background: #1f2d3d; color: #fff; }
.topbar h1 { margin: 0; font-size: 20px; }
.topbar h1 small { font-weight: 400; opacity: .7; font-size: 14px; margin-left: 8px; }
.state { padding: 3px 10px; border-radius: 12px; font-size: 12px; }
.state-on { background: #1e7e34; }
.state-off { background: #6c757d; }
main { padding: 16px 20px; max-width: 900px; margin: 0 auto; }
.connect, .send { display: flex; gap: 10px; margin-bottom: 12px; }
.connect > div:nth-child(1), .connect > div:nth-child(2) { flex: 1; }
.send > div:nth-child(2) { flex: 1; }
.send > div:nth-child(1) { width: 200px; }
.log { height: 420px; overflow-y: auto; background: #fff; border: 1px solid #d0d4da; border-radius: 4px; padding: 8px; font-family: Consolas, monospace; font-size: 12px; margin-bottom: 12px; }
.log .row { padding: 3px 0; border-bottom: 1px solid #eee; white-space: pre-wrap; word-break: break-all; }
.log .in { color: #0b5ed7; }
.log .out { color: #1e7e34; }
.log .sys { color: #6c757d; }
.log .err { color: #b02a37; }
.note { color: #6c757d; font-size: 12px; }