body { font-family: monospace; background: #1a1a1a; color: #e0e0e0; margin: 20px; }
h1 { color: #aaa; font-size: 1.2em; margin-bottom: 12px; }

.config { margin-bottom: 10px; }
.config label { color: #888; }
.config input { background: #2a2a2a; color: #e0e0e0; border: 1px solid #444; padding: 4px 8px; width: 300px; }

#log-header { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
#log-header span { color: #888; font-size: 1em; }
#clear-log { background: #2a2a2a; color: #888; border: 1px solid #444; padding: 3px 10px; cursor: pointer; font-size: 0.85em; font-family: monospace; }
#log { background: #111; border: 1px solid #333; padding: 10px; height: 340px; overflow-y: auto; font-size: 0.85em; white-space: pre-wrap; word-break: break-all; margin-bottom: 14px; }
.log-ws   { color: #8af; }
.log-http { color: #af8; }
.log-err  { color: #f88; }
.log-info { color: #666; }

#btn-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
#btn-row button {
    background: #2a2a2a; color: #ccc; border: 1px solid #444;
    padding: 5px 10px; cursor: pointer; font-family: monospace; font-size: 0.8em;
}
#btn-row button:hover { background: #333; border-color: #666; }
#btn-row button.active { background: #2a3a2a; border-color: #4a4; color: #af8; }
#btn-row button.active.ws { background: #2a2a3a; border-color: #44a; color: #88f; }
#btn-row button.warn { color: #f88; }

#form-panel { display: none; background: #1e1e1e; border: 1px solid #333; padding: 12px; margin-bottom: 6px; }
#form-panel.open { display: block; }
#form-title { color: #888; font-size: 0.85em; margin-bottom: 10px; }
.form-content { display: none; }
.form-content.active { display: block; }
.field { margin-bottom: 7px; }
.field label { display: inline-block; width: 160px; color: #777; font-size: 0.88em; }
.field input { background: #2a2a2a; color: #e0e0e0; border: 1px solid #444; padding: 4px 8px; width: 260px; font-family: monospace; font-size: 0.88em; }
.hint { color: #555; font-size: 0.78em; margin-left: 5px; }
.form-actions { margin-top: 10px; display: flex; gap: 8px; align-items: center; }
button.send { background: #2a4a2a; color: #8f8; border: 1px solid #4a4; padding: 5px 16px; cursor: pointer; font-family: monospace; }
button.send:hover { background: #3a5a3a; }
button.ws-action { background: #2a2a4a; color: #88f; border: 1px solid #44a; padding: 5px 14px; cursor: pointer; font-family: monospace; }
button.ws-action:hover { background: #3a3a5a; }
button.ws-danger { background: #4a2a2a; color: #f88; border: 1px solid #a44; padding: 5px 14px; cursor: pointer; font-family: monospace; }
.ws-status { font-size: 0.82em; }
.ws-status.connected { color: #8f8; }
.ws-status.disconnected { color: #f88; }