@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap";:root{--font-family: "Inter", system-ui, Avenir, Helvetica, Arial, sans-serif;--font-mono: "JetBrains Mono", monospace;--color-bg-app: #0f172a;--color-bg-panel: #1e293b;--color-bg-input: #334155;--color-primary: #6366f1;--color-primary-hover: #4f46e5;--color-text-main: #f8fafc;--color-text-muted: #94a3b8;--color-success: #10b981;--color-error: #ef4444;--color-warning: #f59e0b;--border-color: #475569;--radius-sm: 6px;--radius-md: 12px;--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .4), 0 4px 6px -2px rgba(0, 0, 0, .2)}*{box-sizing:border-box}body{margin:0;font-family:var(--font-family);background-color:var(--color-bg-app);color:var(--color-text-main);min-height:100vh;-webkit-font-smoothing:antialiased}#app{width:100%;height:100vh;display:flex;flex-direction:column}h1,h2,h3,h4,h5,h6{margin:0;font-weight:600}button{font-family:inherit;font-size:.9em;font-weight:500;padding:.6em 1.2em;border-radius:var(--radius-sm);background:var(--color-bg-input);color:var(--color-text-main);border:1px solid var(--border-color);cursor:pointer;transition:all .2s ease}button:hover:not(:disabled){background:var(--color-primary-hover);border-color:var(--color-primary);transform:translateY(-1px)}button.primary{background:var(--color-primary);border-color:var(--color-primary)}button:disabled{opacity:.6;cursor:not-allowed}input,select,textarea{font-family:inherit;background-color:var(--color-bg-input);color:var(--color-text-main);border:1px solid var(--border-color);padding:.6em;border-radius:var(--radius-sm);font-size:.9em;transition:border-color .2s;width:100%}input:focus,select:focus,textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 2px #6366f133}.panel{background-color:var(--color-bg-panel);border-radius:var(--radius-md);padding:1.5em;box-shadow:var(--shadow-lg);border:1px solid rgba(255,255,255,.05)}.flex{display:flex}.flex-col{flex-direction:column}.gap-2{gap:.5rem}.gap-4{gap:1rem}.items-center{align-items:center}.justify-between{justify-content:space-between}.w-full{width:100%}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#475569;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#64748b}.status-indicator{width:8px;height:8px;border-radius:50%;margin-right:8px;display:inline-block}.status-connected{background-color:var(--color-success);box-shadow:0 0 8px var(--color-success)}.status-disconnected{background-color:var(--color-error)}.status-connecting{background-color:var(--color-warning);animation:pulse 1s infinite}@keyframes pulse{0%{opacity:1}50%{opacity:.5}to{opacity:1}}.log-entry{font-family:var(--font-mono);font-size:.85em;padding:4px 8px;border-bottom:1px solid rgba(255,255,255,.05);display:grid;grid-template-columns:80px 1fr;align-items:flex-start;animation:fadeIn .3s ease}.log-entry:hover{background:#ffffff05}@keyframes fadeIn{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.mb-4[data-v-4239db93]{margin-bottom:1rem}.mt-4[data-v-4239db93]{margin-top:1rem}.status-badge[data-v-4239db93]{background:#ffffff0d;padding:4px 12px;border-radius:20px;font-size:.85em;display:flex;align-items:center}.form-group[data-v-4239db93]{margin-bottom:1rem}.form-group label[data-v-4239db93]{display:block;font-size:.8em;color:var(--color-text-muted);margin-bottom:.4em}.host-input-group[data-v-4239db93]{display:flex;gap:.5rem}.protocol-select[data-v-4239db93]{width:90px}.host-input[data-v-4239db93]{flex-grow:1}.port-input[data-v-4239db93]{width:80px}.form-row[data-v-4239db93]{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.advanced-toggle[data-v-4239db93]{font-size:.8em;color:var(--color-primary);cursor:pointer;text-align:center;margin:1rem 0;-webkit-user-select:none;user-select:none}.advanced-toggle[data-v-4239db93]:hover{text-decoration:underline}.info-grid[data-v-4239db93]{background:#0003;padding:1rem;border-radius:var(--radius-sm)}.info-item[data-v-4239db93]{display:flex;justify-content:space-between;font-size:.9em;margin-bottom:.5rem}.info-item[data-v-4239db93]:last-child{margin-bottom:0}.info-item .label[data-v-4239db93]{color:var(--color-text-muted)}.disconnect-btn[data-v-4239db93]{background:transparent;border-color:var(--color-error);color:var(--color-error)}.disconnect-btn[data-v-4239db93]:hover{background:var(--color-error);color:#fff}.fade-in[data-v-4239db93]{animation:fadeIn-4239db93 .3s ease}@keyframes fadeIn-4239db93{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.h-full[data-v-0176d555]{height:100%}.flex-grow[data-v-0176d555]{flex-grow:1}.btn-xs[data-v-0176d555]{padding:4px 8px;font-size:.8rem}.mb-4[data-v-0176d555]{margin-bottom:1rem}.sub-controls[data-v-0176d555]{margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid rgba(255,255,255,.05)}.sub-controls.disabled[data-v-0176d555]{opacity:.5;pointer-events:none}.input-group[data-v-0176d555]{display:flex;gap:.5rem}.qos-select[data-v-0176d555]{width:80px}.color-dropdown-container[data-v-0176d555]{position:relative;-webkit-user-select:none;user-select:none}.color-trigger[data-v-0176d555]{display:flex;align-items:center;gap:8px;padding:0 8px;background:var(--color-bg-input);border:1px solid var(--border-color);border-radius:var(--radius-sm);height:38px;cursor:pointer;transition:border-color .2s}.color-trigger[data-v-0176d555]:hover{border-color:var(--color-text-muted)}.color-preview[data-v-0176d555]{width:20px;height:20px;border-radius:4px;box-shadow:0 0 0 1px #ffffff1a}.dropdown-arrow[data-v-0176d555]{font-size:.7em;opacity:.6}.color-menu[data-v-0176d555]{position:absolute;top:100%;left:0;margin-top:4px;background:var(--color-bg-panel);border:1px solid var(--border-color);border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);z-index:100;min-width:140px;padding:4px;display:flex;flex-direction:column;gap:2px}.color-option[data-v-0176d555]{display:flex;align-items:center;gap:10px;padding:6px 10px;cursor:pointer;border-radius:4px;transition:background .1s;font-size:.9em}.color-option[data-v-0176d555]:hover{background:#ffffff1a}.color-dot[data-v-0176d555]{width:12px;height:12px;border-radius:50%}.custom-dot[data-v-0176d555]{background:linear-gradient(135deg,red,#0f0,#00f);display:flex;align-items:center;justify-content:center;font-size:8px;color:#fff;font-weight:700}.hidden-picker[data-v-0176d555]{position:absolute;width:1px;height:1px;opacity:0;padding:0;border:none}.custom-picker-label[data-v-0176d555]{position:relative;overflow:hidden}.chips-container[data-v-0176d555]{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}.chip[data-v-0176d555]{display:flex;align-items:center;padding:4px 8px;border-radius:12px;border:1px solid;font-size:.85rem}.chip-dot[data-v-0176d555]{width:8px;height:8px;border-radius:50%;margin-right:6px}.chip-text[data-v-0176d555]{margin-right:6px;font-weight:500}.chip-qos[data-v-0176d555]{opacity:.6;font-size:.8em;margin-right:6px}.chip-close[data-v-0176d555]{background:none;border:none;color:inherit;padding:0;width:16px;height:16px;line-height:1;font-size:1.2em;opacity:.7}.chip-close[data-v-0176d555]:hover{opacity:1;background:none;transform:none}.log-container[data-v-0176d555]{flex-grow:1;background:#000;border-radius:var(--radius-sm);overflow-y:auto;border:1px solid var(--border-color);min-height:300px}.empty-state[data-v-0176d555]{height:100%;display:flex;align-items:center;justify-content:center;color:var(--color-text-muted);font-style:italic}.log-entry[data-v-0176d555]{border-bottom:1px solid #1e293b;padding:6px 10px}.log-meta[data-v-0176d555]{font-size:.75rem;color:var(--color-text-muted);margin-bottom:2px;display:flex;gap:8px}.log-content[data-v-0176d555]{font-family:var(--font-mono);font-size:.9rem;word-break:break-all}.log-topic[data-v-0176d555]{font-weight:600;font-size:.8rem;margin-bottom:2px}.mt-4[data-v-30b4044a]{margin-top:1rem}.mb-2[data-v-30b4044a]{margin-bottom:.5rem}.mt-2[data-v-30b4044a]{margin-top:.5rem}.mb-1[data-v-30b4044a]{margin-bottom:.25rem}.font-mono[data-v-30b4044a]{font-family:var(--font-mono)}.text-xs[data-v-30b4044a]{font-size:.75rem}.text-sm[data-v-30b4044a]{font-size:.875rem}.text-muted[data-v-30b4044a]{color:var(--color-text-muted)}.cursor-pointer[data-v-30b4044a]{cursor:pointer}.w-auto[data-v-30b4044a]{width:auto}.publish-btn[data-v-30b4044a]{min-width:100px;transition:background-color .3s ease}.publish-btn.success[data-v-30b4044a]{background-color:var(--color-success);border-color:var(--color-success)}.layout[data-v-bd14e0f2]{height:100vh;display:flex;flex-direction:column}.app-header[data-v-bd14e0f2]{height:60px;background:#1e293b;border-bottom:1px solid rgba(255,255,255,.05);display:flex;align-items:center;justify-content:space-between;padding:0 2rem}.logo[data-v-bd14e0f2]{display:flex;align-items:center;gap:12px}.logo-icon[data-v-bd14e0f2]{width:32px;height:32px}.logo h1[data-v-bd14e0f2]{font-size:1.2rem;font-weight:600;letter-spacing:-.5px}.header-status[data-v-bd14e0f2]{font-size:.85rem;color:var(--color-text-muted);font-family:var(--font-mono)}.main-grid[data-v-bd14e0f2]{flex-grow:1;display:grid;grid-template-columns:350px 1fr;gap:1.5rem;padding:1.5rem;max-width:1600px;margin:0 auto;width:100%}.sidebar[data-v-bd14e0f2]{display:flex;flex-direction:column;gap:1.5rem}.content-area[data-v-bd14e0f2]{min-width:0;display:flex;flex-direction:column}@media(max-width:900px){.main-grid[data-v-bd14e0f2]{grid-template-columns:1fr;padding:1rem}}