.hidden { display: none !important; }

.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }

.stack {
    display: flex;
    flex-direction: column;
    gap: var(--gap-lg);
}

.stack-tight { gap: var(--gap-sm); }
.stack-md    { gap: var(--gap-md); }
.stack-loose { gap: var(--gap-xl); }

.cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gap-md);
}

.cluster-tight { gap: var(--gap-sm); }
.cluster-loose { gap: var(--gap-lg); }
.cluster-end   { justify-content: flex-end; }
.cluster-between { justify-content: space-between; }

.surface-card {
    background: var(--surface);
    border-radius: var(--rounded-xl);
    box-shadow: var(--shadow-sm);
}

.gap-2 { gap: var(--spacing-2); }
.mt-2  { margin-top: var(--spacing-2); }

@media (max-width: 639px) {
    .sm\:hidden { display: none !important; }
}