.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--primary {
    background: var(--color-primary-solid, var(--color-brand-primary));
    border-color: var(--color-primary-solid, var(--color-brand-primary));
    color: var(--color-primary-text, var(--color-text-inverse));
}

.pe-btn--primary:hover {
    background: var(--color-primary-hover, var(--color-brand-accent));
    border-color: var(--color-primary-hover, var(--color-brand-accent));
    color: var(--color-primary-text, var(--color-text-inverse));
}

.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;
}

.pe-btn:focus-visible {
    outline: var(--appearance-focus-width, 2px) solid var(--color-focus-ring, var(--color-brand-accent));
    outline-offset: 1px;
}

.pe-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}