.mcp-lead {
    color: var(--pn-text-dim);
}

.mcp-note {
    color: var(--pn-text-faint);
}

.mcp-address {
    color: var(--pn-accent);
    background: var(--pn-bg);
    border: 1px solid var(--pn-border-strong);
}

.mcp-config pre,
.mcp-code {
    background: var(--pn-bg);
    border: 1px solid var(--pn-border);
    border-radius: var(--pn-radius);
    padding: .75rem 1rem;
    overflow-x: auto;
    font-size: .8125rem;
    line-height: 1.6;
    color: var(--pn-text-dim);
    white-space: pre;
}

.mcp-tab-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.mcp-tab-label {
    display: inline-block;
    margin: 0 .5rem .5rem 0;
    padding: .5rem .875rem;
    border: 1px solid var(--pn-border);
    border-radius: 999px;
    cursor: pointer;
    color: var(--pn-text-dim);
    font-size: .875rem;
    user-select: none;
}

.mcp-tab-input:focus-visible + .mcp-tab-label {
    outline: 2px solid var(--pn-accent);
    outline-offset: 2px;
}

.mcp-tab-input:checked + .mcp-tab-label {
    background: var(--pn-accent-soft);
    border-color: var(--pn-accent);
    color: var(--pn-text);
}

.mcp-panel {
    display: none;
    padding-top: 1.25rem;
    margin-top: .25rem;
    border-top: 1px solid var(--pn-border);
}

#tab-chatgpt:checked ~ #panel-chatgpt,
#tab-claude:checked ~ #panel-claude,
#tab-claude-code:checked ~ #panel-claude-code,
#tab-codex:checked ~ #panel-codex,
#tab-copilot-cli:checked ~ #panel-copilot-cli,
#tab-gemini-cli:checked ~ #panel-gemini-cli,
#tab-grok:checked ~ #panel-grok,
#tab-cursor:checked ~ #panel-cursor,
#tab-vscode:checked ~ #panel-vscode,
#tab-jetbrains:checked ~ #panel-jetbrains {
    display: block;
}