* { margin:0; padding:0; box-sizing:border-box; }
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
            background: linear-gradient(135deg,#1e293b 0%,#0f172a 100%);
            color:#e2e8f0; padding:2rem; min-height:100vh;
        }
        .container { max-width:1200px; margin:0 auto; }
        h1 { text-align:center; margin-bottom:1rem; font-size:1.75rem; color:#60a5fa; }

        .controls { display:flex; gap:1rem; align-items:center; margin-bottom:1rem; flex-wrap:wrap; }
        .select { background:rgba(15,23,42,0.6); border:1px solid rgba(148,163,184,0.12); color:#e2e8f0; padding:.5rem .75rem; border-radius:.375rem; }
        label { font-size:.85rem; color:#94a3b8; margin-right:.4rem; }

        .stats { display:grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap:1rem; margin-bottom:1rem; }
        .stat-card { background:rgba(15,23,42,0.5); border:1px solid rgba(148,163,184,0.12); border-radius:.5rem; padding:1rem; text-align:center; }
        .stat-card h3 { font-size:.75rem; color:#94a3b8; margin-bottom:.25rem; text-transform:uppercase; }
        .stat-card .value { font-size:1.5rem; font-weight:700; color:#60a5fa; }

        .messages-container { background:rgba(15,23,42,0.8); border:1px solid rgba(148,163,184,0.12); border-radius:.75rem; overflow:hidden; }
        .messages-header { background:rgba(30,41,59,0.6); padding:1rem; border-bottom:1px solid rgba(148,163,184,0.08); display:flex; justify-content:space-between; align-items:center; gap:1rem; }
        .messages-header h2 { font-size:1.1rem; color:#60a5fa; margin:0; }
        .messages-list { max-height:600px; overflow-y:auto; display:flex; flex-direction:column-reverse; padding:0.5rem 0; }

        .message-item { padding:1rem 1.5rem; border-bottom:1px solid rgba(148,163,184,0.06); transition:background-color .18s; }
        .message-item:hover { background: rgba(59,130,246,0.03); }
        .message-meta { display:flex; justify-content:space-between; margin-bottom:.5rem; font-size:.86rem; }
        .message-topic { background:rgba(59,130,246,0.12); color:#60a5fa; padding:.2rem .6rem; border-radius:.25rem; font-weight:600; font-family:monospace; }
        .message-time { color:#94a3b8; font-family:monospace; }
        .message-payload { background:rgba(0,0,0,0.2); border-left:2px solid rgba(59,130,246,0.4); padding:.6rem; border-radius:.2rem; font-family:monospace; font-size:.85rem; overflow-x:auto; white-space:pre-wrap; }

        .empty-state { text-align:center; padding:3rem 1.5rem; color:#94a3b8; }
        .controls-right { margin-left:auto; display:flex; gap:.5rem; align-items:center; }