.erp-icon { width: var(--erp-icon-md); height: var(--erp-icon-md); flex: 0 0 auto; }
.erp-icon--xs { width: var(--erp-icon-xs); height: var(--erp-icon-xs); }.erp-icon--sm { width: var(--erp-icon-sm); height: var(--erp-icon-sm); }.erp-icon--lg { width: var(--erp-icon-lg); height: var(--erp-icon-lg); }.erp-icon--xl { width: var(--erp-icon-xl); height: var(--erp-icon-xl); }
.erp-badge { display: inline-flex; align-items: center; min-height: 20px; padding: 0 var(--erp-space-4); border-radius: var(--erp-radius-pill); background: var(--erp-surface-disabled); color: var(--erp-text-secondary); font: var(--erp-font-caption); white-space: nowrap; }
.erp-badge--info { background: var(--erp-color-info-subtle); color: var(--erp-color-info); }.erp-badge--success { background: var(--erp-color-success-subtle); color: var(--erp-color-success); }.erp-badge--warning { background: var(--erp-color-warning-subtle); color: var(--erp-color-warning); }.erp-badge--danger { background: var(--erp-color-danger-subtle); color: var(--erp-color-danger); }
.erp-button { min-height: var(--erp-control-default); border: 1px solid var(--erp-border-default); border-radius: var(--erp-radius-md); padding: 0 var(--erp-space-5); display: inline-flex; align-items: center; gap: var(--erp-space-4); background: var(--erp-surface-elevated); color: var(--erp-text-primary); cursor: pointer; font: var(--erp-font-button); }
.erp-button:hover { background: var(--erp-surface-hover); }.erp-button--primary { background: var(--erp-color-primary); border-color: var(--erp-color-primary); color: var(--erp-text-inverse); }.erp-button--primary:hover { background: var(--erp-color-primary-hover); }
.erp-avatar { width: 34px; height: 34px; display: inline-grid; place-items: center; border-radius: var(--erp-radius-circle); background: var(--erp-color-primary-subtle); color: var(--erp-color-primary); font: var(--erp-font-label); }.erp-avatar--lg { width: 44px; height: 44px; }
.erp-breadcrumb { display: flex; align-items: center; gap: var(--erp-space-3); color: var(--erp-text-tertiary); font: var(--erp-font-caption); min-width: 0; overflow: hidden; white-space: nowrap; }.erp-breadcrumb a, .erp-breadcrumb span { color: inherit; overflow: hidden; text-overflow: ellipsis; }.erp-breadcrumb a:hover { color: var(--erp-text-link); }
.erp-page-header { display: flex; justify-content: space-between; gap: var(--erp-space-6); align-items: flex-end; padding-bottom: var(--erp-space-6); border-bottom: 1px solid var(--erp-border-subtle); }.erp-page-header__main { min-width: 0; }.erp-page-header__title-row { display: flex; align-items: center; gap: var(--erp-space-5); margin-top: var(--erp-space-3); }.erp-page-header__icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: var(--erp-radius-lg); background: var(--erp-color-primary-subtle); color: var(--erp-color-primary); }.erp-page-header h1 { margin: 0; font: var(--erp-font-page-title); }.erp-page-header p { margin: var(--erp-space-2) 0 0; color: var(--erp-text-secondary); }.erp-page-header__actions { display: flex; gap: var(--erp-space-4); }
.erp-empty-state { min-height: 240px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--erp-space-9); color: var(--erp-text-secondary); }.erp-empty-state__icon { display: grid; place-items: center; width: 58px; height: 58px; border-radius: var(--erp-radius-circle); background: var(--erp-surface-secondary); color: var(--erp-text-tertiary); }.erp-empty-state h2 { margin: var(--erp-space-5) 0 var(--erp-space-2); color: var(--erp-text-primary); font: var(--erp-font-section-title); }.erp-empty-state p { margin: 0; max-width: 520px; }
.erp-skeleton { display: inline-block; border-radius: var(--erp-radius-sm); background: linear-gradient(90deg, var(--erp-surface-disabled), var(--erp-surface-hover), var(--erp-surface-disabled)); background-size: 200% 100%; animation: erp-shimmer 1.3s infinite; }@keyframes erp-shimmer { to { background-position: -200% 0; } }
.erp-theme-switcher { display: inline-flex; padding: 2px; border: 1px solid var(--erp-border-subtle); border-radius: var(--erp-radius-md); background: var(--erp-surface-secondary); }.erp-theme-switcher button { width: 28px; height: 28px; padding: 0; display: grid; place-items: center; border: 0; border-radius: var(--erp-radius-sm); background: transparent; color: var(--erp-text-tertiary); cursor: pointer; }.erp-theme-switcher button.is-active { background: var(--erp-surface-primary); color: var(--erp-color-primary); box-shadow: var(--erp-shadow-sm); }

.erp-card { overflow: hidden; border: 1px solid var(--erp-border-subtle); border-radius: var(--erp-radius-card); background: var(--erp-solid-primary); box-shadow: var(--erp-shadow-sm); color: var(--erp-text-primary); }
.erp-card--subtle { border-color: var(--erp-border-glass); background: var(--erp-glass-card); box-shadow: var(--erp-shadow-xs); -webkit-backdrop-filter: blur(var(--erp-blur-subtle)); backdrop-filter: blur(var(--erp-blur-subtle)); }
.erp-card--glass { border-color: var(--erp-border-glass); background: var(--erp-glass-card); box-shadow: var(--erp-shadow-glass); -webkit-backdrop-filter: blur(var(--erp-blur-default)) saturate(116%); backdrop-filter: blur(var(--erp-blur-default)) saturate(116%); }
.erp-card--elevated { border-color: var(--erp-border-glass); background: var(--erp-background-elevated); box-shadow: var(--erp-shadow-lg); }
.erp-card.is-interactive { transition: transform var(--erp-motion-fast) var(--erp-ease-standard), border-color var(--erp-motion-fast) var(--erp-ease-standard), box-shadow var(--erp-motion-fast) var(--erp-ease-standard); }
.erp-card.is-interactive:hover { border-color: var(--erp-border-primary); box-shadow: var(--erp-shadow-md); transform: translateY(-2px); }
.erp-card__header, .erp-card__footer { padding: var(--erp-space-5) var(--erp-space-6); background: var(--erp-glass-toolbar); }
.erp-card__header { border-bottom: 1px solid var(--erp-border-subtle); }
.erp-card__footer { border-top: 1px solid var(--erp-border-subtle); }
.erp-card__body { padding: var(--erp-space-6); }
@media (max-width: 640px) { .erp-page-header { align-items: stretch; flex-direction: column; }.erp-page-header__actions { width: 100%; }.erp-page-header__actions > * { flex: 1; justify-content: center; } }