.pe-btn {
    appearance: none;
    border: 1px solid var(--border-strong);
    background: var(--surface-raised);
    color: var(--color-text-primary);
    border-radius: var(--radius-sm);
    padding: 0.3rem 0.65rem;
    font-size: var(--font-size-sm);
    font-family: var(--font-family-base);
    cursor: pointer;
    line-height: 1.3;
}

.pe-btn:hover {
    border-color: var(--color-brand-muted);
    color: var(--color-brand-primary);
}

.pe-btn--ghost {
    background: transparent;
    border-color: var(--border-default);
}

.pe-btn[aria-pressed="true"] {
    background: var(--color-brand-primary);
    border-color: var(--color-brand-primary);
    color: var(--color-text-inverse);
}

.pe-btn--icon {
    padding: 0.3rem 0.45rem;
    min-width: 2rem;
}