.request-panel {
            background: #f8fafc;
            border-radius: 12px;
            padding: 1.5rem;
            border: 1px solid #e9edf2;
        }
        .response-panel {
            background: #ffffff;
            border-radius: 12px;
            padding: 1.5rem;
            border: 1px solid #e9edf2;
            min-height: 180px;
        }
        .method-selector .btn {
            border-radius: 0;
            font-weight: 600;
            font-size: 0.85rem;
            padding: 0.4rem 1rem;
        }
        .method-selector .btn:first-child { border-radius: 6px 0 0 6px; }
        .method-selector .btn:last-child { border-radius: 0 6px 6px 0; }
        .method-selector .btn-check:checked + .btn {
            background-color: var(--primary-color, #0d6efd);
            color: #fff;
            border-color: var(--primary-color, #0d6efd);
        }
        .method-selector .btn-outline-primary {
            color: #2c3e50;
            border-color: #d0d7de;
        }
        .method-selector .btn-outline-primary:hover {
            background-color: #eaf0f6;
            border-color: #b0c4d9;
        }
        .header-row {
            display: flex;
            gap: 0.5rem;
            margin-bottom: 0.5rem;
            align-items: center;
        }
        .header-row input { flex: 1; }
        .header-row .btn-remove {
            color: #dc3545;
            background: none;
            border: none;
            padding: 0 0.5rem;
        }
        .body-type-tabs .body-type-tabs .response-status {
            font-size: 1.6rem;
            font-weight: 700;
            padding: 0.5rem 1rem;
            border-radius: 8px;
            display: inline-block;
        }
        .response-status.success { color: #0f7b3a; background: #e3f5eb; }
        .response-status.error { color: #b02a37; background: #f8d7da; }
        .response-status.info { color: #0a58ca; background: #cfe2ff; }
        .response-headers-box {
            background: #f2f4f8;
            padding: 0.75rem 1rem;
            border-radius: 6px;
            font-family: 'Courier New', monospace;
            font-size: 0.85rem;
            max-height: 200px;
            overflow-y: auto;
            white-space: pre-wrap;
            word-break: break-all;
        }
        .response-body-box {
            background: #0d1117;
            color: #e6edf3;
            padding: 1rem;
            border-radius: 6px;
            font-family: 'Courier New', monospace;
            font-size: 0.85rem;
            max-height: 400px;
            overflow-y: auto;
            white-space: pre-wrap;
            word-break: break-word;
        }
        .response-body-box .json-key { color: #f0883e; }
        .response-body-box .json-string { color: #a5d6ff; }
        .response-body-box .json-number { color: #79c0ff; }
        .response-body-box .json-boolean { color: #ff7b72; }
        .response-body-box .json-null { color: #8b949e; }
        .preset-examples {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin: 0.75rem 0;
        }
        .preset-btn {
            background: rgba(70, 130, 180, 0.08);
            border: 1px solid rgba(70, 130, 180, 0.18);
            border-radius: 20px;
            padding: 0.3rem 1rem;
            font-size: 0.8rem;
            color: var(--primary-color, #0d6efd);
            cursor: pointer;
            transition: 0.2s;
            font-family: 'Segoe UI', system-ui, sans-serif;
        }
        .preset-btn:hover {
            background: rgba(70, 130, 180, 0.18);
            transform: translateY(-1px);
        }
        .preset-btn .badge-method {
            font-size: 0.65rem;
            margin-right: 4px;
        }
        .timer-badge {
            font-size: 0.85rem;
            background: #eef2f6;
            padding: 0.2rem 0.8rem;
            border-radius: 20px;
            display: inline-block;
        }
        #historyList {
            max-height: 180px;
            overflow-y: auto;
        }
        .history-item {
            padding: 0.4rem 0.8rem;
            border-radius: 6px;
            background: #f2f4f8;
            margin-bottom: 0.3rem;
            font-size: 0.85rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: default;
            transition: 0.15s;
        }
        .history-item:hover { background: #e5e9f0; }
        .history-method {
            font-weight: 700;
            width: 60px;
            display: inline-block;
        }
        .history-url {
            color: #2c3e50;
            flex: 1;
            margin: 0 0.5rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .history-status {
            font-weight: 600;
            font-size: 0.8rem;
            padding: 0.1rem 0.5rem;
            border-radius: 4px;
        }
        .badge-method {
            font-weight: 600;
            font-size: 0.7rem;
            padding: 0.2rem 0.6rem;
            border-radius: 4px;
            display: inline-block;
            min-width: 56px;
            text-align: center;
        }
        .badge-method.get { background: #d1ecf1; color: #0c5460; }
        .badge-method.post { background: #d4edda; color: #155724; }
        .badge-method.put { background: #fff3cd; color: #856404; }
        .badge-method.delete { background: #f8d7da; color: #721c24; }
        .badge-method.patch { background: #e2d9f3; color: #4a1a7a; }
        .badge-method.head { background: #d6d8db; color: #383d41; }
        .badge-method.options { background: #cce5ff; color: #004085; }
        .quick-header-btn {
            font-size: 0.75rem;
            padding: 0.2rem 0.6rem;
        }
        .curl-preview {
            background: #0d1117;
            color: #e6edf3;
            padding: 0.75rem 1rem;
            border-radius: 6px;
            font-family: 'Courier New', monospace;
            font-size: 0.8rem;
            white-space: pre-wrap;
            word-break: break-all;
            max-height: 150px;
            overflow-y: auto;
        }
        .http-ref-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.9rem;
        }
        .http-ref-table th,
        .http-ref-table td {
            padding: 0.5rem 0.75rem;
            border: 1px solid #dee2e6;
        }
        .http-ref-table th { background: #f2f4f8; font-weight: 600; }
        .tool-header h1 { font-size: 2.2rem; }
        @media (max-width: 768px) {
            .header-row { flex-wrap: wrap; }
            .method-selector .btn { font-size: 0.7rem; padding: 0.3rem 0.6rem; }
            .response-status { font-size: 1.2rem; }
            .tool-header h1 { font-size: 1.6rem; }
        }