.log-container {
            background-color: #1e1e2f;
            color: #b0f0b0;
            font-family: 'Fira Code', 'Courier New', monospace;
            font-size: 0.85rem;
            padding: 1rem;
            border-radius: 6px;
            height: 270px;
            overflow-y: auto;
            white-space: pre-wrap;
            word-break: break-all;
            border: 1px solid #444c56;
            margin-top: 1rem;
        }
        .log-entry {
            margin: 2px 0;
            border-bottom: 1px dotted #3a3a4a;
            padding: 2px 0;
        }
        .log-timestamp {
            color: #88c0d0;
            margin-right: 8px;
        }
        .log-info { color: #a3be8c; }
        .log-error { color: #bf616a; }
        .log-message { color: #dcdcaa; }
        .log-publish { color: #81a1c1; }
        .log-subscribe { color: #b48ead; }
        .status-badge {
            display: inline-block;
            padding: 0.25rem 0.75rem;
            border-radius: 30px;
            font-size: 0.8rem;
            font-weight: 600;
        }
        .status-connected {
            background-color: #2b5e2b;
            color: white;
        }
        .status-disconnected {
            background-color: #6c4b4b;
            color: white;
        }
        .broker-input-group {
            background-color: #f8fafc;
            border-radius: 8px;
            padding: 1rem;
            border: 1px solid #e2e8f0;
        }
        .qos-select {
            width: 80px;
            display: inline-block;
        }
        .example-tag {
            cursor: pointer;
            transition: all 0.1s;
        }
        .example-tag:hover {
            background-color: #d0e2ff;
            transform: scale(1.02);
        }
        .client-action-btn {
            min-width: 100px;
        }
        .privacy-note i {
            color: #2c7da0;
        }
        .broker-table {
            font-size: 0.9rem;
        }
        .broker-table td:first-child {
            font-weight: 600;
        }
        .warning-tip {
            background-color: #fff3cd;
            border-left: 5px solid #ffc107;
            padding: 0.75rem;
            margin: 1rem 0;
            border-radius: 0 8px 8px 0;
        }
        .deep-dive p {
            text-align: justify;
        }