:root{--bg-primary: #f5f7fb;--bg-secondary: #ffffff;--bg-tertiary: #f0f2f8;--bg-hover: #e8ecf4;--bg-inset: #f8f9fd;--border: #e2e6ef;--border-focus: #c7cdd9;--text-primary: #1a1f36;--text-secondary: #5a6178;--text-muted: #9ca3b8;--accent: #4f6ef7;--accent-hover: #3b5ae0;--accent-light: rgba(79, 110, 247, .08);--accent-lighter: rgba(79, 110, 247, .05);--success: #22c55e;--success-light: rgba(34, 197, 94, .1);--danger: #ef4444;--danger-light: rgba(239, 68, 68, .08);--warning: #f59e0b;--radius: 12px;--radius-sm: 8px;--shadow-sm: 0 1px 3px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.02);--shadow-md: 0 4px 12px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04);--font-mono: "JetBrains Mono", "Fira Code", "Cascadia Code", "Consolas", monospace;--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--transition: .15s ease}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-sans);background:var(--bg-primary);color:var(--text-primary);line-height:1.5;min-height:100vh;-webkit-font-smoothing:antialiased}.app{max-width:1320px;margin:0 auto;padding:24px 24px 16px;display:flex;flex-direction:column;height:100vh}.app-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.header-left{display:flex;align-items:baseline;gap:14px}.app-title{font-size:18px;font-weight:700;color:var(--text-primary);letter-spacing:-.3px}.header-datetime{font-size:13px;color:var(--text-muted);font-family:var(--font-mono);letter-spacing:.5px}.ws-status{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:500;color:var(--text-muted);background:var(--bg-secondary);padding:5px 12px;border-radius:20px;border:1px solid var(--border)}.ws-status.connected{color:var(--success);border-color:#22c55e40}.ws-status.disconnected{color:var(--danger);border-color:#ef444433}.status-dot{width:7px;height:7px;border-radius:50%;display:inline-block}.ws-status.connected .status-dot{background:var(--success);box-shadow:0 0 0 3px #22c55e33}.ws-status.disconnected .status-dot{background:var(--danger)}.tab-bar{display:flex;gap:2px;background:var(--bg-tertiary);border-radius:var(--radius) var(--radius) 0 0;padding:5px 5px 0}.tab-btn{background:transparent;border:none;color:var(--text-muted);padding:10px 28px;font-size:13px;font-weight:600;cursor:pointer;border-radius:10px 10px 0 0;transition:all var(--transition);font-family:var(--font-sans);position:relative}.tab-btn:hover{color:var(--text-secondary);background:var(--bg-hover)}.tab-btn.active{color:var(--accent);background:var(--bg-secondary);box-shadow:var(--shadow-sm)}.tab-btn.active:after{content:"";position:absolute;bottom:0;left:16px;right:16px;height:2px;background:var(--accent);border-radius:2px 2px 0 0}.main-body{flex:1;display:flex;gap:14px;min-height:0}.tab-content{flex:1;overflow:hidden;background:var(--bg-secondary);border-radius:0 0 var(--radius) var(--radius);box-shadow:var(--shadow-md)}.ascii-panel{width:180px;flex-shrink:0;background:var(--bg-secondary);border-radius:var(--radius);border:1px solid var(--border);overflow:hidden;display:flex;flex-direction:column}.ascii-panel.collapsed{width:auto}.ascii-header{padding:10px 14px;font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--border);background:var(--bg-tertiary);cursor:pointer;display:flex;justify-content:space-between;align-items:center;-webkit-user-select:none;user-select:none}.ascii-header:hover{color:var(--text-secondary)}.ascii-toggle{font-size:14px;font-weight:700;line-height:1}.ascii-body{flex:1;overflow-y:auto;padding:4px 0}.ascii-table{width:100%;border-collapse:collapse;font-size:11px;font-family:var(--font-mono)}.ascii-table th{font-size:10px;font-weight:700;color:var(--text-muted);text-align:center;padding:4px 6px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--bg-secondary)}.ascii-table td{padding:2px 6px;color:var(--text-secondary);text-align:center;border-bottom:1px solid rgba(226,230,239,.3)}.ascii-table td.hex-val{color:var(--accent);font-weight:600}.ascii-table td.char-val{color:var(--text-primary);font-weight:600;min-width:30px}.panel{display:flex;flex-direction:column;height:100%;padding:16px}.config-bar{background:var(--bg-inset);border-radius:var(--radius);padding:14px 16px;margin-bottom:14px;border:1px solid var(--border)}.config-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.config-row+.config-row{margin-top:10px}.config-row label{font-size:12px;color:var(--text-muted);white-space:nowrap;font-weight:600;text-transform:uppercase;letter-spacing:.3px}.port-display{font-size:16px;font-weight:700;color:var(--accent);background:var(--accent-light);padding:4px 14px;border-radius:6px;font-family:var(--font-mono);letter-spacing:1px}.connection-addr{font-size:14px;font-weight:600;color:var(--text-primary);font-family:var(--font-mono);background:var(--bg-secondary);padding:4px 12px;border-radius:6px;border:1px solid var(--border);letter-spacing:.5px}.info-row{margin-top:6px;padding-top:6px;border-top:1px dashed var(--border)}.input{background:var(--bg-secondary);border:1px solid var(--border);color:var(--text-primary);padding:8px 12px;border-radius:var(--radius-sm);font-size:13px;font-family:var(--font-sans);transition:all var(--transition);outline:none}.input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-light)}.input-port{width:90px}.input-sm{background:var(--bg-secondary);border:1px solid var(--border);color:var(--text-primary);padding:5px 10px;border-radius:6px;font-size:12px;font-family:var(--font-sans);outline:none;cursor:pointer;transition:all var(--transition)}.input-sm:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-light)}.btn-primary{background:var(--accent);color:#fff;border:none;padding:8px 22px;border-radius:var(--radius-sm);font-size:13px;font-weight:600;cursor:pointer;transition:all var(--transition);font-family:var(--font-sans)}.btn-primary:hover:not(:disabled){background:var(--accent-hover);transform:translateY(-1px);box-shadow:0 4px 12px #4f6ef740}.btn-primary:active:not(:disabled){transform:translateY(0)}.btn-primary:disabled{opacity:.45;cursor:not-allowed}.btn-danger{background:var(--bg-secondary);color:var(--danger);border:1px solid rgba(239,68,68,.3);padding:7px 22px;border-radius:var(--radius-sm);font-size:13px;font-weight:600;cursor:pointer;transition:all var(--transition);font-family:var(--font-sans)}.btn-danger:hover{background:var(--danger);color:#fff;border-color:var(--danger)}.btn-sm{background:var(--bg-secondary);color:var(--text-secondary);border:1px solid var(--border);padding:5px 12px;border-radius:6px;font-size:12px;font-weight:500;cursor:pointer;transition:all var(--transition);font-family:var(--font-sans)}.btn-sm:hover{color:var(--text-primary);border-color:var(--border-focus);background:var(--bg-hover)}.status-badge{font-size:11px;padding:4px 12px;border-radius:20px;font-weight:600;letter-spacing:.2px}.status-ok{background:var(--success-light);color:var(--success)}.status-err{background:var(--danger-light);color:var(--danger)}.status-idle{background:var(--bg-tertiary);color:var(--text-muted)}.data-display{flex:1;display:flex;flex-direction:column;background:var(--bg-inset);border-radius:var(--radius);border:1px solid var(--border);margin-bottom:12px;min-height:0;overflow:hidden}.display-toolbar{display:flex;align-items:center;justify-content:space-between;padding:8px 14px;border-bottom:1px solid var(--border);background:var(--bg-secondary)}.display-toolbar-left{display:flex;align-items:center;gap:10px}.display-label{font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}.stats-badge{font-size:11px;color:var(--text-muted);font-family:var(--font-mono)}.stats-badge strong{color:var(--text-secondary);font-weight:600}.display-actions{display:flex;align-items:center;gap:6px}.display-content{flex:1;overflow-y:auto;padding:12px 16px;font-family:var(--font-mono);font-size:12.5px;line-height:1.8;background:var(--bg-primary)}.msg-line{display:flex;gap:10px;padding:3px 0;border-bottom:1px solid rgba(226,230,239,.6)}.msg-line:last-child{border-bottom:none}.msg-time{color:var(--text-muted);font-size:11px;min-width:95px;padding-top:1px}.msg-dir{font-size:10px;font-weight:700;min-width:32px;padding:1px 5px;border-radius:4px;text-align:center;letter-spacing:.3px}.msg-dir.sent{background:var(--accent-light);color:var(--accent)}.msg-dir.received{background:var(--success-light);color:#16a34a}.msg-data{color:var(--text-primary);word-break:break-all}.msg-empty{text-align:center;color:var(--text-muted);padding:48px 20px;font-size:13px;font-family:var(--font-sans)}.send-panel{background:var(--bg-inset);border-radius:var(--radius);border:1px solid var(--border);padding:14px 16px}.send-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.send-label{font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}.send-actions{display:flex;align-items:center;gap:8px}.auto-send-label{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--text-secondary);cursor:pointer;font-weight:500}.auto-send-label input[type=checkbox]{accent-color:var(--accent);width:14px;height:14px}.auto-interval{width:80px}.interval-unit{font-size:12px;color:var(--text-muted);font-weight:500}.send-input-row{display:flex;gap:10px;align-items:stretch}.send-input{flex:1;background:var(--bg-secondary);border:1px solid var(--border);color:var(--text-primary);padding:10px 14px;border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:13px;resize:vertical;outline:none;min-height:64px;transition:all var(--transition)}.send-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-light)}.send-input::placeholder{color:var(--text-muted)}.btn-send{background:var(--accent);color:#fff;border:none;padding:12px 32px;border-radius:var(--radius-sm);font-size:14px;font-weight:700;cursor:pointer;transition:all var(--transition);font-family:var(--font-sans);white-space:nowrap;letter-spacing:.2px}.btn-send:hover:not(:disabled){background:var(--accent-hover);transform:translateY(-1px);box-shadow:0 4px 14px #4f6ef74d}.btn-send:active:not(:disabled){transform:translateY(0)}.btn-send:disabled{opacity:.4;cursor:not-allowed}.send-hint{font-size:11px;color:var(--text-muted);margin-top:8px}.send-extra-row{display:flex;align-items:center;gap:8px;margin-top:8px;flex-wrap:wrap}.append-select{min-width:100px}.append-hex-input{width:140px;font-family:var(--font-mono);text-transform:uppercase}.server-body{flex:1;display:flex;gap:14px;min-height:0}.client-sidebar{width:230px;background:var(--bg-inset);border-radius:var(--radius);border:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;flex-shrink:0}.sidebar-header{padding:10px 16px;font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--border);background:var(--bg-secondary)}.client-item{display:flex;align-items:center;gap:8px;padding:9px 16px;cursor:pointer;transition:all var(--transition);border-bottom:1px solid rgba(226,230,239,.5)}.client-item:hover{background:var(--bg-hover)}.client-item.active{background:var(--accent-lighter);border-left:3px solid var(--accent)}.client-name{font-size:13px;font-weight:600;color:var(--text-primary)}.client-addr{font-size:11px;color:var(--text-muted);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-mono)}.client-item .status-dot{width:6px;height:6px;flex-shrink:0}.status-dot.status-ok{background:var(--success);box-shadow:0 0 0 3px #22c55e33}.btn-kick{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:16px;padding:0 4px;line-height:1;border-radius:4px;transition:all var(--transition);width:22px;height:22px;display:flex;align-items:center;justify-content:center}.btn-kick:hover{color:var(--danger);background:var(--danger-light)}.server-main{flex:1;display:flex;flex-direction:column;min-height:0;min-width:0}.send-target-row{display:flex;align-items:center;gap:8px;margin-bottom:10px}.send-target-row label{font-size:12px;color:var(--text-muted);font-weight:600}.echo-row{padding-top:10px;border-top:1px solid var(--border)}.echo-label{font-weight:700!important}.echo-input{flex:1;min-width:150px}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--border-focus)}::selection{background:#4f6ef726}.http-sub-tabs{display:flex;gap:0;margin-bottom:14px;background:var(--bg-tertiary);border-radius:8px;padding:3px}.http-sub-tab{flex:1;padding:7px 16px;font-size:12px;font-weight:600;color:var(--text-muted);background:transparent;border:none;border-radius:6px;cursor:pointer;transition:all var(--transition)}.http-sub-tab.active{background:var(--accent);color:#fff;box-shadow:var(--shadow-sm)}.http-sub-tab:not(.active):hover{color:var(--text-secondary)}.http-section{flex:1;display:flex;flex-direction:column;overflow:hidden}.http-request-list{flex:1;display:flex;flex-direction:column;overflow:hidden;background:var(--bg-secondary);border-radius:var(--radius);border:1px solid var(--border)}.req-list-header{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;font-size:12px;font-weight:700;color:var(--text-muted);border-bottom:1px solid var(--border);background:var(--bg-tertiary)}.req-list-body{flex:1;overflow-y:auto;padding:4px 0}.req-item{border-bottom:1px solid var(--border)}.req-summary{display:flex;align-items:center;gap:8px;padding:8px 12px;cursor:pointer;font-size:12px;font-family:var(--font-mono)}.req-summary:hover{background:var(--bg-primary)}.req-method{font-weight:700;font-size:11px;padding:2px 6px;border-radius:3px;min-width:50px;text-align:center}.method-get{background:#4caf501f;color:#388e3c}.method-post{background:#2196f31f;color:#1976d2}.method-delete{background:#f443361f;color:#d32f2f}.req-path{color:var(--text-primary);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.req-time{color:var(--text-muted);font-size:11px;flex-shrink:0}.req-detail{padding:8px 12px 12px;font-size:12px}.req-detail-row{margin-bottom:6px;color:var(--text-secondary)}.req-detail-row strong{color:var(--text-primary);margin-right:6px}.req-pre{background:var(--bg-primary);border-radius:6px;padding:8px 10px;margin-top:4px;font-size:11px;font-family:var(--font-mono);white-space:pre-wrap;word-break:break-all;max-height:200px;overflow-y:auto;color:var(--text-secondary)}.resp-body-input{flex:1;font-family:var(--font-mono);font-size:12px}.method-select{min-width:80px;font-weight:700}.url-input{flex:1}.headers-input,.body-input{flex:1;font-family:var(--font-mono);font-size:12px}.http-response{flex:1;overflow-y:auto;background:var(--bg-secondary);border-radius:var(--radius);border:1px solid var(--border);padding:12px}.resp-header-row{margin-bottom:8px}.resp-status{font-size:14px;font-weight:700;font-family:var(--font-mono)}.status-2xx{color:#388e3c}.status-3xx{color:#f57c00}.status-4xx{color:#d32f2f}.status-5xx{color:#b71c1c}.resp-error{color:#d32f2f;font-size:12px;padding:8px;background:#f4433614;border-radius:6px;margin-bottom:8px}.http-help{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:12px;overflow:hidden}.help-header{display:flex;justify-content:space-between;align-items:center;padding:8px 14px;font-size:12px;font-weight:700;color:var(--accent);background:#4f6ef70f;border-bottom:1px solid var(--border)}.help-body{padding:12px 14px;font-size:12px;color:var(--text-secondary);line-height:1.8}.help-body p{margin:0 0 6px}.help-body strong{color:var(--text-primary)}.help-steps{background:var(--bg-primary);border-radius:8px;padding:10px 14px;margin:8px 0}.help-steps ol{margin:4px 0 0;padding-left:20px}.help-steps li{margin-bottom:2px}.help-tips p{margin-bottom:4px}.btn-help-toggle{display:inline-flex;align-items:center;gap:4px;padding:5px 12px;font-size:11px;font-weight:600;color:var(--accent);background:#4f6ef70f;border:1px solid rgba(79,110,247,.2);border-radius:6px;cursor:pointer;margin-bottom:12px;transition:all var(--transition)}.btn-help-toggle:hover{background:#4f6ef71f}