.app-m-0 { margin: var(--app-space-0); }
.app-m-1 { margin: var(--app-space-1); }
.app-m-2 { margin: var(--app-space-2); }
.app-m-3 { margin: var(--app-space-3); }
.app-m-4 { margin: var(--app-space-4); }
.app-mt-1 { margin-top: var(--app-space-1); }
.app-mt-2 { margin-top: var(--app-space-2); }
.app-mt-3 { margin-top: var(--app-space-3); }
.app-mt-4 { margin-top: var(--app-space-4); }
.app-mb-1 { margin-bottom: var(--app-space-1); }
.app-mb-2 { margin-bottom: var(--app-space-2); }
.app-mb-3 { margin-bottom: var(--app-space-3); }
.app-mb-4 { margin-bottom: var(--app-space-4); }
.app-p-0 { padding: var(--app-space-0); }
.app-p-1 { padding: var(--app-space-1); }
.app-p-2 { padding: var(--app-space-2); }
.app-p-3 { padding: var(--app-space-3); }
.app-p-4 { padding: var(--app-space-4); }
.app-px-2 { padding-left: var(--app-space-2); padding-right: var(--app-space-2); }
.app-px-3 { padding-left: var(--app-space-3); padding-right: var(--app-space-3); }
.app-py-1 { padding-top: var(--app-space-1); padding-bottom: var(--app-space-1); }
.app-py-2 { padding-top: var(--app-space-2); padding-bottom: var(--app-space-2); }
.app-gap-1 { gap: var(--app-space-1); }
.app-gap-2 { gap: var(--app-space-2); }
.app-gap-3 { gap: var(--app-space-3); }
.app-gap-4 { gap: var(--app-space-4); }

.app-flex { display: flex; }
.app-inline-flex { display: inline-flex; }
.app-flex-wrap { flex-wrap: wrap; }
.app-flex-column { flex-direction: column; }
.app-items-center { align-items: center; }
.app-items-start { align-items: flex-start; }
.app-items-end { align-items: flex-end; }
.app-justify-between { justify-content: space-between; }
.app-justify-center { justify-content: center; }
.app-justify-end { justify-content: flex-end; }

.app-grid { display: grid; }
.app-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.app-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.app-grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }

.app-text-left { text-align: left; }
.app-text-center { text-align: center; }
.app-text-right { text-align: right; }
.app-text-xs { font-size: var(--app-font-size-xs); }
.app-text-sm { font-size: var(--app-font-size-sm); }
.app-text-base { font-size: var(--app-font-size-base); }
.app-text-lg { font-size: var(--app-font-size-lg); }
.app-text-muted { color: var(--app-neutral-600); }
.app-text-strong { font-weight: var(--app-font-weight-semibold); }

.app-scroll-y { overflow-y: auto; }
.app-scroll-x { overflow-x: auto; }
.app-scroll-container { overflow: auto; max-height: 30rem; }
.app-overflow-hidden { overflow: hidden; }
.app-overflow-auto { overflow: auto; }
.app-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.app-hidden { display: none; }
.app-visible { visibility: visible; }
.app-invisible { visibility: hidden; }
.app-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.app-compact { font-size: var(--app-font-size-sm); }
.app-compact-row { display: flex; align-items: center; gap: var(--app-space-2); }
.app-compact-stack { display: flex; flex-direction: column; gap: var(--app-space-2); }

.app-loading-host { position: relative; }
.app-loading-overlay,
.app-blur-overlay {
    position: absolute;
    inset: 0;
    z-index: var(--app-z-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.72);
}
.app-blur-overlay { backdrop-filter: blur(2px); }